diff --git a/LabConnect S25 Documentation.pdf b/LabConnect S25 Documentation.pdf new file mode 100644 index 00000000..40cc5b82 Binary files /dev/null and b/LabConnect S25 Documentation.pdf differ diff --git a/labonnect_S25_poster.pdf b/labonnect_S25_poster.pdf new file mode 100644 index 00000000..bd5cba1c Binary files /dev/null and b/labonnect_S25_poster.pdf differ diff --git a/src/App.tsx b/src/App.tsx index 8b5f2eb2..c657a470 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,13 +20,16 @@ import { HelmetProvider } from 'react-helmet-async'; import { AuthProvider } from './context/AuthContext.tsx'; function App() { - return ( -
+ +
-
+ {/* + The
element now has padding ("p-8") but a transparent background. + */} +
} /> App is Healthy

} /> @@ -35,27 +38,19 @@ function App() { } /> } /> } /> - } /> } /> - } - /> + } /> } /> } /> } /> - } - /> + } /> } /> - } />
-
+ ); diff --git a/src/images/LabConnect_Logo-removebg-preview.png b/src/images/LabConnect_Logo-removebg-preview.png new file mode 100644 index 00000000..204ccc0b Binary files /dev/null and b/src/images/LabConnect_Logo-removebg-preview.png differ diff --git a/src/images/LabConnect_Logo2-removebg-preview.png b/src/images/LabConnect_Logo2-removebg-preview.png new file mode 100644 index 00000000..f0643949 Binary files /dev/null and b/src/images/LabConnect_Logo2-removebg-preview.png differ diff --git a/src/shared/components/Navigation/MainNavigation.tsx b/src/shared/components/Navigation/MainNavigation.tsx index 990494d6..c223d6d5 100644 --- a/src/shared/components/Navigation/MainNavigation.tsx +++ b/src/shared/components/Navigation/MainNavigation.tsx @@ -1,82 +1,132 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { Disclosure } from "@headlessui/react"; import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; -import { Link, NavLink, useLocation } from "react-router-dom"; +import { Link, NavLink } from "react-router-dom"; import { useAuth } from "../../../context/AuthContext.tsx"; +import logo from "../../../images/LabConnect_Logo-removebg-preview.png"; // Adjust path if needed export default function MainNavigation() { - const { auth } = useAuth(); + const [isDarkMode, setIsDarkMode] = useState(false); + + // Toggle dark mode by adding or removing the "dark" class on the HTML element. + useEffect(() => { + if (isDarkMode) { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } + }, [isDarkMode]); - const location = useLocation().pathname; + // Define navigation routes based on authentication. const routes = auth.isAuthenticated ? [ - { name: "Opportunities", href: "/opportunities", current: true }, - { name: "Create", href: "/create", current: false }, - { name: "Staff", href: "/staff", current: false }, - { name: "Profile", href: "/profile", current: false }, - { name: "Sign Out", href: "/signout", current: false }, - ] - : [{ name: "Sign In", href: "/signin", current: false }]; + { name: "Opportunities", href: "/opportunities" }, + { name: "Create", href: "/create" }, + { name: "Staff", href: "/staff" }, + { name: "Profile", href: "/profile" }, + { name: "Sign Out", href: "/signout" } + ] + : [{ name: "Sign In", href: "/signin" }]; return ( - + {({ open }) => ( <> -
-
-
- {/* Mobile menu button*/} - - - Open main menu +
+ {/* Left Section: Branding */} +
+ + LabConnect Logo + + LabConnect +
+ {/* Center Section: Navigation Links */} +
+ +
+ {/* Right Section: Dark Mode Toggle and Mobile Menu Button */} +
+
- - -
+ {/* Mobile Panel */} + +
{routes.map((item) => ( {item.name} ))} + {/* Dark Mode Toggle Switch */} +
diff --git a/src/shared/components/Navigation/StickyFooter.tsx b/src/shared/components/Navigation/StickyFooter.tsx index 444ba11d..bfda750e 100644 --- a/src/shared/components/Navigation/StickyFooter.tsx +++ b/src/shared/components/Navigation/StickyFooter.tsx @@ -1,75 +1,131 @@ import React from "react"; import { Link } from "react-router-dom"; -import logo from "../../../images/LabConnect_Logo.webp"; import { useAuth } from "../../../context/AuthContext.tsx"; +import logo from "../../../images/LabConnect_Logo-removebg-preview.png"; export default function StickyFooter() { const { auth } = useAuth(); - const routes = auth.isAuthenticated + // Define navigation links based on authentication. + const navLinks = auth.isAuthenticated ? [ - { name: "Opportunities", href: "/opportunities", current: true }, - { name: "Create", href: "/create", current: false }, - { name: "Staff", href: "/staff", current: false }, - { name: "Profile", href: "/profile", current: false }, - { name: "Sign Out", href: "/signout", current: false }, - ] - : [{ name: "Sign In", href: "/signin", current: false }]; + { label: "Opportunities", to: "/opportunities" }, + { label: "Create", to: "/create" }, + { label: "Staff", to: "/staff" }, + { label: "Profile", to: "/profile" }, + { label: "Sign Out", to: "/signout" }, + ] + : [{ label: "Sign In", to: "/signin" }]; return ( -
-

- Made by{" "} - - RCOS - -

-
-
- LabConnect +
+ {/* Container using a flex layout similar to MainNavigation */} +
+ {/* Branding Section (Left) */} +
+ + LabConnect Logo + + LabConnect
- -
-
- Contact Us -

+ {/* Navigation Links (Center) */} +

+ +
+ {/* Social & Credit Section (Right) */} +
+
+
Discord -
+ | GitHub -
-

-
-
-
- Resources -
- {routes.map((item) => ( - +
+
+ Made by{" "} - {item.name} + RCOS -
- - ))} +
+
+
+
+ {/* Mobile Panel */} +
+ {navLinks.map((link, index) => ( + + {link.label} + + ))} +
+
+ + Discord + + | + + GitHub + +
+
+ Made by{" "} + + RCOS + +
-
+ ); } diff --git a/src/shared/pages/Home.tsx b/src/shared/pages/Home.tsx index f58fe1cb..e738f9a8 100644 --- a/src/shared/pages/Home.tsx +++ b/src/shared/pages/Home.tsx @@ -1,23 +1,61 @@ -import React, { useRef, useState } from "react"; +import React, { useRef, useState, useEffect } from "react"; import { Link } from "react-router-dom"; -import logo from "../../images/LabConnect_Logo2.webp"; +import darkLogo from "../../images/LabConnect_Logo2-removebg-preview.png"; import SEO from "../components/SEO.tsx"; const Home = () => { const aboutSectionRef = useRef(null); - // State for the Contact Us form + // Contact form state const [contactForm, setContactForm] = useState({ name: "", email: "", subject: "", - message: "" + message: "", }); const [contactSubmitted, setContactSubmitted] = useState(false); - const handleScrollToAbout = () => { - aboutSectionRef.current?.scrollIntoView({ behavior: "smooth" }); - }; + // Return to Top Button state + const [showReturnToTop, setShowReturnToTop] = useState(false); + const [buttonBottom, setButtonBottom] = useState(5); + + // Local dark mode state; initialize from the element + const [isDarkMode, setIsDarkMode] = useState( + document.documentElement.classList.contains("dark") + ); + + // Preload the dark logo to ensure it's cached. + useEffect(() => { + const preloadImg = new Image(); + preloadImg.src = darkLogo; + }, []); + + // Use a faster polling interval (50ms) to check if the "dark" class is present + useEffect(() => { + const intervalId = setInterval(() => { + setIsDarkMode(document.documentElement.classList.contains("dark")); + }, 50); + return () => clearInterval(intervalId); + }, []); + + // Scroll event to update "Return to Top" button visibility and position. + useEffect(() => { + const handleScroll = () => { + setShowReturnToTop(window.scrollY > 100); + const footer = document.querySelector("footer"); + if (footer) { + const footerRect = footer.getBoundingClientRect(); + const buttonHeight = 50; + if (footerRect.top < window.innerHeight - buttonHeight) { + setButtonBottom(window.innerHeight - footerRect.top + 10); + } else { + setButtonBottom(5); + } + } + }; + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); const handleContactChange = ( e: React.ChangeEvent @@ -30,19 +68,41 @@ const Home = () => { setContactSubmitted(true); }; + const handleScrollToAbout = () => { + aboutSectionRef.current?.scrollIntoView({ behavior: "smooth" }); + }; + + const scrollToTop = () => { + window.scrollTo({ top: 0, behavior: "smooth" }); + }; + return ( -
+
{/* Welcome Section */} -
-
- LabConnect +
+
+ {/* The image source now switches instantaneously. + Inline style disables any default transition. */} + LabConnect
-

Welcome to LabConnect!

+

+ Welcome to LabConnect! +

+ +

+ Discover endless opportunities in research and innovation, all in one + simple and intuitive platform. +


-

+

If you are a student, go to the{" "} { > Create {" "} - to start posting
- opportunities or{" "} + to start posting opportunities or{" "} { {" "} to view and edit your current posts.

- - {/* Learn More Button */}
@@ -95,97 +152,154 @@ const Home = () => { ref={aboutSectionRef} className="w-full flex justify-center py-10" > -
-

About Us

-

- LabConnect is a platform dedicated to bridging the gap between students - and research opportunities. We aim to make it easier for students to find - meaningful lab/research work while helping professors connect with passionate - individuals through a convenient, all-in-one application. Our team is hard - at work, and we will provide updates on our progress so keep an eye out for +

+

+ About Us +

+

+ LabConnect is a platform dedicated to bridging the gap between + students and research opportunities. We aim to make it easier for + students to find meaningful lab/research work while helping + professors connect with passionate individuals through a convenient, + all-in-one application. Our team is hard at work, and we will + provide updates on our progress so keep an eye out for announcements!

+

+ If you're interested in learning more about the team at RCOS or + are thinking about joining LabConnect or any branch of RCOS, please + check out the new website here to learn more about existing projects + and areas of interest:{" "} + + RCOS + +

{/* Meet Our Team Section */}
-

Meet Our Team

-

- Thanks for checking us out! We are a team of dedicated open-source developers - working hard to make this product into a reality. +

+ Meet Our Team +

+

+ Thanks for checking us out! We are a team of dedicated open-source + developers working hard to make this product into a reality.

- -
- {/* Team Member Cards */} +
{[ { name: "Rafael Cenzano", major: "Computer Science", gradYear: "2025", role: "Backend Developer", - skill: "Flask" + skill: "Flask", }, { name: "Will Broadwell", major: "Computer Science", gradYear: "2026", role: "Frontend Developer", - skill: "TailwindCSS" + skill: "TailwindCSS", }, { name: "Sagar Sahu", major: "Computer Science", gradYear: "2026", role: "Frontend Developer", - skill: "React" + skill: "React.js", }, { name: "Sarah Wohlford", major: "Computer Science", gradYear: "2027", role: "Backend Developer", - skill: "PostgreSQL" - } + skill: "PostgreSQL", + }, + { + name: "Sidharth E", + major: "Computer Science", + gradYear: "2026", + role: "Team Member", + skill: "TBD", + }, + { + name: "Mohammed P", + major: "Computer Science", + gradYear: "2027", + role: "Team Member", + skill: "TBD", + }, + { + name: "Gowrisankar P", + major: "Computer Science", + gradYear: "2027", + role: "Team Member", + skill: "TBD", + }, + { + name: "Devan P", + major: "Computer Science", + gradYear: "2027", + role: "Team Member", + skill: "TBD", + }, ].map((member, index) => (
-

{member.name}

-

+

+ {member.name} +

+

{member.major}, Class of {member.gradYear}

-

+

{member.role}

-

Skill: {member.skill}

+

+ Skill: {member.skill} +

))}
+ {/* Contact Us Section */} -
-
-

Contact Us

+
+
+

+ Contact Us +

+

+ Please feel free to reach out with any questions, concerns, or + reviews. We value your feedback as we continue to develop LabConnect + into the best product it can be! +

{contactSubmitted ? (
-

Thank You!

-

- Your message has been successfully sent. We appreciate your feedback! +

+ Thank You! +

+

+ Your message has been successfully sent. We appreciate your + feedback!

) : (
-
-
-
-