Merge remote-tracking branch 'ORIGIN/main' into fix/fix-custom-button

components/faq/faq.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import "../../app/globals.css"; // Global styles location for tailwind css
+import "../../app/globals.css";
 import RegistrationButton from "../nav-bar/registration-button";
 
 type FAQ = {
@@ -33,7 +33,7 @@ const faqs: FAQ[] = [
 		content: (
 			<div className="flex items-center justify-start">
 				<p className="pr-2">Click here to register:</p>
-				<RegistrationButton />
+				<RegistrationButton /> {/* This is a custom button component will update later */}
 			</div>
 		),
 	},
@@ -50,7 +50,7 @@ const faqs: FAQ[] = [
 	{
 		title: "Who else will be there?",
 		content:
-			"Not only can you meet other RPI students and people from other colleges, but we’ve got wonderful sponsors who make this event possible! You’ll have the opportunity to talk to representatives from a variety of tech companies at career-fair style tables.",
+			"Not only can you meet other RPI students and people from other colleges, but we've got wonderful sponsors who make this event possible! You'll have the opportunity to talk to representatives from a variety of tech companies at career-fair style tables.",
 	},
 	{
 		title: "Does HackRPI provide travel reimbursement?",
@@ -61,6 +61,7 @@ const faqs: FAQ[] = [
 
 const FAQPage = () => {
 	const [highlightFAQ, setHighlightFAQ] = useState(false);
+	const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
 
 	useEffect(() => {
 		// Highlight the FAQ section in the navbar when the user scrolls to it
@@ -79,23 +80,29 @@ const FAQPage = () => {
 			faqStart = (document.getElementById("faq")?.offsetTop || window.innerHeight) - 140;
 			faqEnd = faqStart + (document.getElementById("faq")?.offsetHeight || window.innerHeight);
 		};
+
 		window.addEventListener("resize", handleResize);
 		window.addEventListener("scroll", handleScroll);
+
 		return () => {
+			window.removeEventListener("resize", handleResize);
 			window.removeEventListener("scroll", handleScroll);
 		};
 	}, []);
 
+	const handleToggle = (index: number) => {
+		setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
+	};
+
 	return (
-		<div className="h-auto mb-8 flex flex-col items-center text-white bg-base-100 " id="faq">
+		<div className="h-auto mb-8 flex flex-col items-center text-white bg-base-100" id="faq">
 			<div className="flex w-full desktop:w-2/3">
-				<h1 className=" font-mokoto font-normal text-white text-left text-4xl text-shadow-md pb-4">FAQs</h1>
+				<h1 className="font-mokoto font-normal text-white text-left text-4xl text-shadow-md pb-4">FAQs</h1>
 				<div>
 					<div
 						className={`${
-							highlightFAQ ? `fixed top-32 bg-white` : `absolute bg-hackrpi-secondary-dark-blue`
-						} w-12 h-12 rounded-full  border-[6px] border-hackrpi-primary-blue 
-							transition-colors duration-300 z-[5] right-1.5 2xs:right-3.5`}
+							highlightFAQ ? "fixed top-32 bg-white" : "absolute bg-hackrpi-secondary-dark-blue"
+						} w-12 h-12 rounded-full border-[6px] border-hackrpi-primary-blue transition-colors duration-300 z-[5] right-1.5 2xs:right-3.5`}
 					></div>
 				</div>
 			</div>
@@ -107,13 +114,18 @@ const FAQPage = () => {
 							index === faqs.length - 1 ? "border-b-2" : ""
 						} border-hackrpi-primary-blue rounded-none`}
 					>
-						<input type="radio" name="my-accordion-1" defaultChecked={index === 0} />
+						<input
+							type="checkbox"
+							className="w-auto h-auto"
+							checked={expandedIndex === index}
+							onChange={() => handleToggle(index)}
+						/>
 						<div className="collapse-title font-medium text-2xl text-hackrpi-primary-blue">{faq.title}</div>
 						<div className="collapse-content">{faq.content}</div>
 					</div>
 				))}
 			</div>
-			<div className="w-full desktop:w-2/3 ">
+			<div className="w-full desktop:w-2/3">
 				<h2 id="sponsors" className="font-poppins text-2xl text-center pt-10">
 					Feel free to contact us with any other questions at{" "}
 					<a href="mailto:[email protected]" className="text-hackrpi-primary-blue">

components/mlh-banner/mlh-banner.tsx

@@ -6,7 +6,7 @@ export default function MlhBanner() {
 			id="mlh-trust-badge"
 			href="https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2024-season&utm_content=white"
 			target="_blank"
-			className="block max-w-[80] desktop:max-w-[100px] min-w-[60px] w-[10%] h-auto fixed right-[25px] desktop:right-[50px] top-0 z-[10000] "
+			className="block max-w-[80] desktop:max-w-[100px] min-w-[60px] w-[10%] h-auto fixed right-[25px] desktop:right-[75px] top-0 z-[10000] "
 		>
 			<NextImage
 				src="https://s3.amazonaws.com/logged-assets/trust-badge/2024/mlh-trust-badge-2024-white.svg"

components/nav-bar/nav-bar.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import DesktopNavBar from "./nav-bar-desktop";
 import MobileNavBar from "./nav-bar-mobile";
 import { links } from "@/types/nav-bar-links";
+import MlhBanner from "../mlh-banner/mlh-banner";
 
 export default function NavBar({ showOnScroll }: { showOnScroll: boolean }) {
 	const [showNav, setShowNav] = useState(false);
@@ -31,13 +32,15 @@ export default function NavBar({ showOnScroll }: { showOnScroll: boolean }) {
 		return (
 			<>
 				<MobileNavBar links={links} />
+				<MlhBanner />
 			</>
 		);
 
 	return (
 		<>
 			<div className={`${showOnScroll ? (showNav ? "top-0" : "-top-24") : "top-0"} fixed transition-all w-full z-10`}>
 				<DesktopNavBar links={links} />
+				<MlhBanner />
 			</div>
 		</>
 	);