update landing page with new 2025 design

apps/site/next.config.js

@@ -29,36 +29,36 @@ const nextConfig = {
 	},
 	async redirects() {
 		return [
-			{
-				source: "/mentor",
-				destination: "https://forms.gle/yCmXvG89ygvxUSCd7",
-				permanent: true,
-			},
-			{
-				source: "/volunteer",
-				destination: "https://forms.gle/erpJjErKLJkEZMw48",
-				permanent: true,
-			},
-			{
-				source: "/waiver",
-				destination: DOCUSIGN_FORM_URL,
-				permanent: true,
-			},
-			{
-				source: "/incident",
-				destination: "https://forms.gle/A6BdsSzYSiyeTP8Y6",
-				permanent: true,
-			},
-			{
-				source: "/devpost",
-				destination: "https://irvinehacks-2024.devpost.com",
-				permanent: true,
-			},
-			{
-				source: "/feedback",
-				destination: "https://forms.gle/c154z45wRx7ARnrE9",
-				permanent: true,
-			},
+			// {
+			// 	source: "/mentor",
+			// 	destination: "https://forms.gle/yCmXvG89ygvxUSCd7",
+			// 	permanent: true,
+			// },
+			// {
+			// 	source: "/volunteer",
+			// 	destination: "https://forms.gle/erpJjErKLJkEZMw48",
+			// 	permanent: true,
+			// },
+			// {
+			// 	source: "/waiver",
+			// 	destination: DOCUSIGN_FORM_URL,
+			// 	permanent: true,
+			// },
+			// {
+			// 	source: "/incident",
+			// 	destination: "https://forms.gle/A6BdsSzYSiyeTP8Y6",
+			// 	permanent: true,
+			// },
+			// {
+			// 	source: "/devpost",
+			// 	destination: "https://irvinehacks-2024.devpost.com",
+			// 	permanent: true,
+			// },
+			// {
+			// 	source: "/feedback",
+			// 	destination: "https://forms.gle/c154z45wRx7ARnrE9",
+			// 	permanent: true,
+			// },
 		];
 	},
 };

apps/site/src/app/(main)/(home)/sections/Landing/Landing.module.css

@@ -1,29 +1,8 @@
 .landingBackground {
-	background-image: url("~@/assets/backgrounds/landing-background.jpg");
+	background-image: url("~@/assets/backgrounds/landing-background.png");
 	background-position: center bottom;
 	background-repeat: no-repeat;
 	background-size: cover;
-	mask-image: url("~@/assets/backgrounds/landing-background-mask.png");
-	mask-position: center bottom;
-	mask-repeat: no-repeat;
-	mask-size: cover;
-}
-
-.fogLeft,
-.fogRight {
-	animation-delay: 2s;
-	animation-duration: 4s;
-	animation-fill-mode: forwards;
-	animation-timing-function: ease;
-	z-index: 1000;
-}
-
-.fogLeft {
-	animation-name: slideOutLeft;
-}
-
-.fogRight {
-	animation-name: slideOutRight;
 }
 
 @keyframes slideOutLeft {

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

@@ -1,16 +1,11 @@
 "use client";
 
 import { Suspense } from "react";
-import Image from "next/image";
 import { PerspectiveCamera } from "@react-three/drei";
 
 import hasDeadlinePassed from "@/lib/utils/hasDeadlinePassed";
 import View from "@/components/canvas/View";
 import Button from "@/lib/components/Button/Button";
-import Fireflies from "../../components/Fireflies";
-
-import fogLeft from "@/assets/images/fog-left.png";
-import fogRight from "@/assets/images/fog-right.png";
 
 import styles from "./Landing.module.css";
 
@@ -21,19 +16,16 @@ const Landing = () => {
 		<section className={styles.landingBackground}>
 			<View className="absolute w-full h-full">
 				<Suspense fallback={null}>
-					<Fireflies />
 					<PerspectiveCamera makeDefault position={[0, -0.1, 1]} />
 				</Suspense>
 			</View>
 			<div className="flex flex-col justify-center items-center min-h-screen text-center overflow-x-hidden relative">
-				<Image src={fogLeft} alt="Fog" className={styles.fogLeft} fill />
-				<Image src={fogRight} alt="Fog" className={styles.fogRight} fill />
-				<h1 className="font-display text-4xl md:text-5xl font-bold mb-2">
-					IrvineHacks 2024
+				<p className="font-display text-2xl md:text-3xl">January 24&ndash;26</p>
+				<h1 className="font-display text-4xl md:text-5xl font-bold mb-5">
+					IrvineHacks 2025
 				</h1>
-				<p className="font-display text-2xl md:text-3xl">January 26&ndash;28</p>
 				{deadlinePassed ? (
-					<Button className="z-10" text="Applications have closed!" disabled />
+					<Button className="z-10" text="Coming Soon..." disabled />
 				) : (
 					<Button className="z-10" text="Apply" href="/apply" />
 				)}

apps/site/src/app/(main)/globals.css

@@ -1,19 +1,22 @@
-@import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
-	--color-cream: #fffce2;
+	--color-white: #fff;
+	--color-black: #0c071b;
 	--color-brown: #432810;
-	--color-dark-blue: #090c31;
+	--color-light-blue: #39befd;
+	--color-blue: #006fb2;
+	--color-dark-blue: #0b004c;
 }
 
 body {
-	color: var(--color-cream);
-	background-color: var(--color-brown);
+	color: var(--color-white);
+	background-color: var(--color-dark-blue);
 }
 
 /* based on Bootstrap Reboot */

apps/site/src/app/(main)/layout.tsx

@@ -24,7 +24,7 @@ export default function Layout({ children }: PropsWithChildren) {
 			{/* reference: https://github.com/pmndrs/react-three-next */}
 			<NavbarParent />
 			<SceneLayout>{children}</SceneLayout>
-			<Footer />
+			{/* <Footer /> */}
 		</div>
 	);
 }

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

@@ -29,7 +29,7 @@ export default async function Resources() {
 						({ _id, iconUrl, title, description, resources }, i) => (
 							<div
 								key={_id}
-								className="max-w-5xl w-full mx-auto mb-12 bg-[var(--color-cream)] text-[#2F1C00] p-12 rounded-2xl lg:grid lg:gap-20 lg:grid-cols-2 lg:items-center"
+								className="max-w-5xl w-full mx-auto mb-12 bg-[var(--color-white)] text-[#2F1C00] p-12 rounded-2xl lg:grid lg:gap-20 lg:grid-cols-2 lg:items-center"
 							>
 								<div>
 									<div className="flex gap-2 lg:flex-col">

apps/site/src/lib/components/Button/Button.module.css

@@ -1,25 +1,16 @@
 .button {
-	background-image: radial-gradient(
-		50% 50% at 50% 50%,
-		#fff3d6 0%,
-		#ffda7b 51.04%,
-		#ffa700 100%
-	);
-	box-shadow: 0px 0px 20px rgba(255, 252, 226, 0.5);
-	border-radius: 15px;
-	color: var(--color-brown);
+	background-color: var(--color-dark-blue);
+	color: var(--color-white);
+	border: 5px solid var(--color-white);
 	font-size: calc(13px + 1vw);
 	font-weight: 700;
 	padding: 0.55rem 1.25rem;
-	transition:
-		filter 0.1s ease,
-		box-shadow 0.1s ease;
 	display: block;
 	width: max-content;
 	margin: 0 auto;
 
 	&:hover {
-		box-shadow: 0px 0px 20px #fffce2;
+		box-shadow: 8px 8px 0px var(--color-white);
 		filter: brightness(1.05);
 	}
 }
@@ -28,7 +19,7 @@
 	padding: 0.15rem 1.15rem;
 	border-radius: 10px;
 	background-image: none;
-	background-color: var(--color-cream);
+	background-color: var(--color-white);
 	margin: 0;
 
 	font-size: 28px;

apps/site/src/lib/components/Button/Button.tsx

@@ -42,7 +42,7 @@ const Button: React.FC<ButtonProps> = ({
 	return (
 		<button
 			type="submit"
-			className={styles.button + " font-body"}
+			className={styles.button + " font-display"}
 			disabled={disabled}
 			style={style ? style : { width: "max-content" }}
 		>

apps/site/src/lib/components/HackLogo/HackLogo.tsx

@@ -1,19 +1,20 @@
 import Image from "next/image";
 
-import hackAnteater from "@/assets/logos/hackuci-anteater.svg";
-import hackGear from "@/assets/logos/hackuci-gear.svg";
+// import hackAnteater from "@/assets/logos/hackuci-anteater.svg";
+// import hackGear from "@/assets/logos/hackuci-gear.svg";
+import irvineHacksLogo from "@/assets/logos/irvinehacks-logo.svg";
 
 import styles from "./HackLogo.module.scss";
 
 const HackLogo = () => {
 	return (
 		<div className={styles.hackLogo}>
-			<Image src={hackAnteater} alt="Hack at UCI Logo Anteater" />
-			<Image
+			<Image src={irvineHacksLogo} alt="IrvineHacks Logo Anteater" />
+			{/* <Image
 				className={styles.spinning}
 				src={hackGear}
 				alt="Hack at UCI Logo Gear"
-			/>
+			/> */}
 		</div>
 	);
 };

apps/site/src/lib/components/Navbar/Navbar.tsx

@@ -70,8 +70,8 @@ function Navbar({ identity }: NavbarProps) {
 					}
 					onTransitionEnd={() => setHidden(!listShown)}
 				>
-					<NavLinkItem href="/">Home</NavLinkItem>
-					<NavLinkItem href="/resources">Resources</NavLinkItem>
+					{/* <NavLinkItem href="/">Home</NavLinkItem> */}
+					{/* <NavLinkItem href="/resources">Resources</NavLinkItem>
 					<NavLinkItem href="/schedule">Schedule</NavLinkItem>
 					<NavLinkItem
 						href="/incident"
@@ -93,12 +93,12 @@ function Navbar({ identity }: NavbarProps) {
 						rel="noopener noreferrer"
 					>
 						Feedback
-					</NavLinkItem>
-					{!status && !deadlinePassed && (
+					</NavLinkItem> */}
+					{/* {!status && !deadlinePassed && (
 						<NavLinkItem href="/apply">Apply</NavLinkItem>
-					)}
+					)} */}
 
-					{status !== null && <NavLinkItem href="/portal">Portal</NavLinkItem>}
+					{/* {status !== null && <NavLinkItem href="/portal">Portal</NavLinkItem>}
 					{isLoggedIn ? (
 						<Button
 							text="Log In"
@@ -113,7 +113,7 @@ function Navbar({ identity }: NavbarProps) {
 						>
 							Log Out
 						</a>
-					)}
+					)} */}
 				</NavMenu.List>
 			</div>
 		</NavMenu.Root>

apps/site/tailwind.config.ts

@@ -16,9 +16,9 @@ const config: Config = {
 					"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
 			},
 			fontFamily: {
-				display: ["Alegreya"],
-				body: ["Mulish"],
-				sans: ["Mulish"],
+				display: ["Aref Ruqaa"],
+				body: ["Cantarell"],
+				sans: ["Cantarell"],
 			},
 		},
 		screens: {