Add sponsors and prep FAQs

apps/site/src/app/(main)/(home)/page.tsx

@@ -9,6 +9,8 @@ export default function Home() {
 		<>
 			<Landing />
 			<ChooseCharacter />
+			<FAQ />
+			<Sponsors />
 		</>
 	) : (
 		<>

apps/site/src/app/(main)/(home)/sections/FAQ/components/ListItemButton.tsx

@@ -17,16 +17,16 @@ export default function ListItemButton({
 		<button
 			type="button"
 			onClick={onClick}
-			className={`flex gap-3 duration-200 p-[5px] lg:p-[4px] xl:p-[4px] group ${
+			className={`flex items-center gap-3 duration-200 p-[5px] lg:p-[4px] xl:p-[4px] group ${
 				inverted ? "bg-white" : "hover:bg-white"
 			} ${className}`}
 		>
 			<TriangleIcon
-				className={`sm:w-4 sm:h-4 md:w-5 md:h-5 xl:w-5 xl:h-5 mt-2 sm:mt-1 lg:mt-0 xl:mt-1 visible group-hover:hidden ${rotate}`}
+				className={`sm:w-4 sm:h-4 md:w-5 md:h-5 xl:w-5 xl:h-5 sm:mt-1 lg:mt-0 xl:mt-1 visible group-hover:hidden ${rotate}`}
 				dark={inverted}
 			/>
 			<TriangleIcon
-				className={`sm:w-4 sm:h-4 md:w-5 md:h-5 xl:w-5 xl:h-5 mt-2 sm:mt-1 lg:mt-0 xl:mt-1 hidden group-hover:block ${rotate}`}
+				className={`sm:w-4 sm:h-4 md:w-5 md:h-5 xl:w-5 xl:h-5 sm:mt-1 lg:mt-0 xl:mt-1 hidden group-hover:block ${rotate}`}
 				dark
 			/>
 			<p

apps/site/src/app/(main)/(home)/sections/Sponsors/Sponsors.module.scss

@@ -1,3 +1,100 @@
+.sponsorsContainer {
+	border: 5px solid white;
+	padding: 2.5rem;
+	padding-bottom: 5rem;
+	position: relative;
+	width: 100%;
+	background: #0c071b;
+
+	// What a crazy way to do the inner border lines
+	&::before,
+	&::after,
+	.horizontalLine {
+		content: "";
+		position: absolute;
+		background: white;
+	}
+
+	// Vertical lines
+	&::before {
+		width: 2px;
+		top: 4rem;
+		bottom: 4rem;
+		left: 1.5rem;
+	}
+
+	&::after {
+		width: 2px;
+		top: 4rem;
+		bottom: 4rem;
+		right: 1.5rem;
+	}
+
+	// Horizontal lines
+	.horizontalLine {
+		&.bottom {
+			height: 2px;
+			bottom: 1.5rem;
+			left: 4rem;
+			right: 4rem;
+		}
+	}
+}
+
+.cornerSquares {
+	div {
+		position: absolute;
+		width: 20px;
+		height: 20px;
+		background: white;
+	}
+
+	.topLeft {
+		top: calc(1.5rem);
+		left: calc(1.5rem);
+	}
+
+	.topRight {
+		top: calc(1.5rem);
+		right: calc(1.5rem);
+	}
+
+	.bottomLeft {
+		bottom: calc(1.5rem);
+		left: calc(1.5rem);
+	}
+
+	.bottomRight {
+		bottom: calc(1.5rem);
+		right: calc(1.5rem);
+	}
+}
+
+.sponsorsGrid {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin-top: 4rem;
+}
+
+.sponsorBox {
+	background: #d9d9d9;
+	aspect-ratio: 16/9;
+}
+
+@media (min-width: 640px) {
+	.sponsorsGrid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 1rem;
+		margin-top: 2rem;
+	}
+	.sponsorsContainer {
+		padding: 3rem;
+		padding-bottom: 8rem;
+	}
+}
+
 @media (min-width: 1024px) {
 	.platinum,
 	.gold {
@@ -14,4 +111,12 @@
 		max-width: 300px;
 		max-height: 300px;
 	}
+	.sponsorsContainer {
+		padding: 6rem;
+		padding-bottom: 16rem;
+	}
+	.sponsorsGrid {
+		gap: 1.5rem;
+		margin-top: 2rem;
+	}
 }

apps/site/src/app/(main)/(home)/sections/Sponsors/Sponsors.tsx

@@ -1,41 +1,59 @@
-import { getSponsors } from "./getSponsors";
-import SponsorTier from "./components/SponsorTier/SponsorTier";
-
+// import { getSponsors } from "./getSponsors";
+// import SponsorTier from "./components/SponsorTier/SponsorTier";
 import styles from "./Sponsors.module.scss";
 
-const TIERS = [
-	"platinum",
-	"gold",
-	"silver",
-	"bronze",
-	"sponsored-prize",
-	"in-kind",
-];
+// const TIERS = [
+// 	"platinum",
+// 	"gold",
+// 	"silver",
+// 	"bronze",
+// 	"sponsored-prize",
+// 	"in-kind",
+// ];
 
-export default async function Sponsors() {
-	const sponsors = await getSponsors();
+const Sponsors = async () => {
+	// const sponsors = await getSponsors();
 
 	return (
-		<section className="container py-24 md:my-16 relative items-center flex flex-col md:p-8 w-3/4 mx-auto text-center">
+		<section className="container py-24 md:my-16 relative items-center flex flex-col md:p-8 w-4/5 mx-auto text-center">
 			<h2
-				className={`${styles.title} my-12 font-display sm:text-[3rem] text-[#fffce2] text-4xl text-center`}
+				className={`my-12 font-display font-bold sm:text-[3rem] text-white text-3xl text-center`}
 			>
 				Sponsors
 			</h2>
-			<p className="max-w-md mb-12">
-				Interested in sponsoring IrvineHacks 2024? Check out our information
-				above to learn more about our event! For more information, please email
-				us at{" "}
-				<a href="mailto:[email protected]" className="hover:underline font-bold">
-					[email protected]
-				</a>
-				.
-			</p>
-			{TIERS.map((tier) => (
-				<div key={tier}>
-					<SponsorTier sponsors={sponsors.get(tier)} className={styles[tier]} />
+
+			<div className={styles.sponsorsContainer}>
+				<div className="absolute w-full left-0 top-[1rem] flex gap-4 px-8 ">
+					<div className="h-[2px] bg-white flex-grow  ml-[2rem] mt-[0.5rem]" />
+					<p className="text-xs lg:text-sm text-center">
+						Interested in sponsoring IrvineHacks 2025? Email us at{" "}
+						<a href="mailto:[email protected]" className="underline">
+							[email protected]
+						</a>
+						.
+					</p>
+					<div className="h-[2px] bg-white flex-grow mr-[2rem] mt-[0.5rem]" />
+				</div>
+
+				{/* {TIERS.map((tier) => (
+					<div key={tier}>
+						<SponsorTier
+							sponsors={sponsors.get(tier)}
+							className={styles[tier]}
+						/>
+					</div>
+				))} */}
+
+				<div className={`${styles.horizontalLine} ${styles.bottom}`} />
+				<div className={styles.cornerSquares}>
+					<div className={styles.topLeft} />
+					<div className={styles.topRight} />
+					<div className={styles.bottomLeft} />
+					<div className={styles.bottomRight} />
 				</div>
-			))}
+			</div>
 		</section>
 	);
-}
+};
+
+export default Sponsors;