ZH Preview

apps/site/next.config.js

@@ -6,19 +6,68 @@ const nextConfig = {
 	sassOptions: {
 		includePaths: [path.join(__dirname, "src", "lib", "styles")],
 	},
+	/* TODO: Remove redirects once we have the new site up and running */
 	async redirects() {
 		return [
+			{
+				source: "/apply",
+				destination: "/",
+				permanent: false,
+			},
+			{
+				source: "/apply/hacker",
+				destination: "/",
+				permanent: false,
+			},
+			{
+				source: "/apply-mentor",
+				destination: "/",
+				permanent: false,
+			},
+			{
+				source: "/auth",
+				destination: "/",
+				permanent: false,
+			},
+			{
+				source: "/guest-login",
+				destination: "/",
+				permanent: false,
+			},
+			{
+				source: "/login",
+				destination: "/",
+				permanent: false,
+			},
+			{
+				source: "/logout",
+				destination: "/",
+				permanent: false,
+			},
+			{
+				source: "/portal",
+				destination: "/",
+				permanent: false,
+			},
+			{
+				source: "/resources",
+				destination: "/",
+				permanent: false,
+			},
+			{
+				source: "/schedule",
+				destination: "/",
+				permanent: false,
+			},
 			{
 				source: "/mentor",
-				destination:
-					"https://docs.google.com/forms/d/e/1FAIpQLSc68omDO40vn16-QmmdrvVgdLh9vFN623u5hLOG64je8t_VQA/viewform?usp=dialog",
-				permanent: true,
+				destination: "/",
+				permanent: false,
 			},
 			{
 				source: "/incident",
-				destination:
-					"https://docs.google.com/forms/d/e/1FAIpQLSc3rDK238iKZHCrSJ4wz9xCyqyjIStDSiMuKxEcahG4_a45FA/viewform?usp=dialog",
-				permanent: true,
+				destination: "/",
+				permanent: false,
 			},
 		];
 	},

apps/site/src/app/(home)/page.module.scss

@@ -3,6 +3,12 @@
 $container-padding: 6rem;
 
 .home {
+	min-height: 100vh;
+	background-image: url("~@/assets/background/aldrich-park-background.jpg");
+	background-position: center top;
+	background-size: cover;
+	background-repeat: no-repeat;
+
 	h2 {
 		text-align: center;
 	}

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

@@ -13,11 +13,11 @@ const Home = () => {
 	return (
 		<div className={styles.home}>
 			<Landing />
-			<About />
+			{/* <About /> */}
 			{/* <Countdown /> */}
-			<Sponsors />
+			{/* <Sponsors /> */}
 			{/* <Clubs /> */}
-			<FAQ />
+			{/* <FAQ /> */}
 		</div>
 	);
 };

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

@@ -14,7 +14,6 @@ $item-padding-x: 3rem;
 	display: flex;
 	justify-content: space-evenly;
 	width: 100vw;
-	background: linear-gradient(to bottom, #0d1321, #070a11);
 	min-height: 100vh;
 }
 

apps/site/src/app/(home)/sections/Landing/ColorPicker.module.scss

@@ -0,0 +1,70 @@
+@use "bootstrap-utils" as bootstrap;
+
+$color-palette-size: 25.22px;
+
+.colorPicker {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 9.25px;
+	padding: 15px 0;
+}
+
+.brushCell {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 46.23px;
+	height: 54.63px;
+	overflow: hidden;
+	flex-shrink: 0;
+	background-color: #dcdcdc;
+	box-shadow:
+		inset 1.68px 1.68px 0 #dfdfdf,
+		inset 0.84px 0.84px 0 #ffffff,
+		inset -1.68px -1.68px 0 #808080,
+		inset -0.84px -0.84px 0 #252525;
+}
+
+.brushIcon {
+	width: 82.37px;
+	height: 82.37px;
+	object-fit: contain;
+}
+
+.paletteFrame {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	width: 297px;
+	gap: 4.2px;
+}
+
+.colorPalette {
+	width: $color-palette-size;
+	height: $color-palette-size;
+	padding: 0;
+	border: 0;
+	cursor: pointer;
+	outline: none;
+
+	box-shadow:
+		inset -1.68px -1.68px 0 #dfdfdf,
+		inset -0.84px -0.84px 0 #ffffff,
+		inset 1.68px 1.68px 0 #808080,
+		inset 0.84px 0.84px 0 #252525;
+
+	&[aria-pressed="true"],
+	&:active {
+		box-shadow:
+			inset 1.68px 1.68px 0 #dfdfdf,
+			inset 0.84px 0.84px 0 #ffffff,
+			inset -1.68px -1.68px 0 #808080,
+			inset -0.84px -0.84px 0 #252525;
+	}
+
+	&:focus-visible {
+		outline: 1px dotted #000000;
+		outline-offset: 1px;
+	}
+}

apps/site/src/app/(home)/sections/Landing/ColorPicker.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import paintbrush from "@/assets/icons/paintbrush.svg";
+import styles from "./ColorPicker.module.scss";
+
+const PALETTE: string[] = [
+	"#808080",
+	"#8D0000",
+	"#808000",
+	"#008200",
+	"#008281",
+	"#000086",
+	"#8D0085",
+	"#808035",
+	"#004141",
+	"#0082FF",
+	"#FF7575",
+	"#FFFF00",
+	"#00FF00",
+	"#00FFFF",
+	"#0000FF",
+	"#FF00FF",
+	"#FFFF68",
+	"#00FF70",
+	"#FFFFFF",
+	"#002248",
+];
+
+interface ColorPickerProps {
+	onColorSelect?: (color: string) => void;
+}
+
+export default function ColorPicker({ onColorSelect }: ColorPickerProps) {
+	const [selected, setSelected] = useState<string>();
+
+	return (
+		<div className={styles.colorPicker}>
+			<div className={styles.brushCell}>
+				<Image src={paintbrush} alt="Paintbrush" className={styles.brushIcon} />
+			</div>
+
+			<div className={styles.paletteFrame}>
+				{PALETTE.map((color) => (
+					<button
+						key={color}
+						type="button"
+						className={styles.colorPalette}
+						style={{ backgroundColor: color }}
+						aria-label={color}
+						aria-pressed={selected === color}
+						onClick={() => {
+							setSelected(color);
+							onColorSelect?.(color);
+						}}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}