About Us Hero + Header (desktop + mobile)

app/(pages)/_components/Footer/Footer.tsx

@@ -1,7 +1,3 @@
 export default function Footer() {
-  return (
-    <div className="text-center bg-slate-300">
-      halo! Edit this footer in app/(pages)/_components/Footer/Footer.tsx
-    </div>
-  );
+  return <div className="text-center"></div>;
 }

app/(pages)/_components/Header/Header.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  useEffect(() => {
+    if (!isMenuOpen) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [isMenuOpen]);
+
+  return (
+    <div
+      className={`w-full flex flex-col items-start justify-start bg-transparent absolute top-0 left-0 pl-4 md:pl-0 md:ml-auto md:flex-row md:items-start md:justify-between ${
+        isMenuOpen ? 'z-[60]' : 'z-20'
+      }`}
+    >
+      <Image
+        src="/Images/header/hd_logo.svg"
+        alt="HackDavis Logo"
+        width={200}
+        height={200}
+        className="hidden md:block w-[4vw] min-w-[48px] m-[2vw]"
+      />
+      <button
+        type="button"
+        aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
+        onClick={() => setIsMenuOpen((open) => !open)}
+        className="absolute right-[5vw] top-[5vw] block md:hidden z-[60]"
+      >
+        <Image
+          src={
+            isMenuOpen
+              ? '/Images/header/white_x.svg'
+              : '/Images/header/mobile_hamburger.svg'
+          }
+          alt=""
+          width={40}
+          height={40}
+        />
+      </button>
+      <div className="w-full flex items-center justify-start md:ml-auto md:w-auto md:items-start md:justify-end md:gap-2">
+        <div className="hidden md:flex">
+          <div className="glass-pill w-[17vw] h-[5.6vh] m-[3vw] items-center justify-evenly">
+            <Link
+              href="/?section="
+              className="text-[1vw] text-white uppercase font-[var(--font-metropolis)]"
+            >
+              Home
+            </Link>
+            <Link
+              href="/about-us"
+              className="text-[1vw] text-white uppercase font-[var(--font-metropolis)] font-bold"
+            >
+              About
+            </Link>
+          </div>
+        </div>
+        <Image
+          src="/Images/header/mlh_badge.svg"
+          alt="MLH Badge"
+          width={220}
+          height={220}
+          className="block ml-[5vw] w-[10vw] max-w-[100px] md:ml-0 md:w-[5vw] md:mr-[5vw]"
+        />
+      </div>
+
+      {isMenuOpen ? (
+        <div className="fixed inset-0 z-50 flex flex-col items-center bg-black/50 backdrop-blur-md md:hidden">
+          <div className="flex flex-col items-center gap-10 px-6 pt-[16vh]">
+            <Image
+              src="/Images/header/hd_logo.svg"
+              alt="HackDavis Logo"
+              width={160}
+              height={160}
+            />
+            <nav className="flex flex-col items-center gap-7 text-white font-[var(--font-metropolis)] uppercase text-lg">
+              <Link href="/" className="font-bold">
+                Home
+              </Link>
+              <Link href="/about-us">About</Link>
+              <Link href="/donate">Donate</Link>
+              <Link href="/faq">FAQ</Link>
+              <Link href="/sponsors">Sponsors</Link>
+            </nav>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

app/(pages)/_globals/styles/globals.scss

@@ -2,7 +2,45 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: 'Metropolis';
+  src: url('/fonts/Metropolis/TrueType/Metropolis-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Metropolis';
+  src: url('/fonts/Metropolis/TrueType/Metropolis-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Metropolis';
+  src: url('/fonts/Metropolis/TrueType/Metropolis-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Metropolis';
+  src: url('/fonts/Metropolis/TrueType/Metropolis-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Metropolis';
+  src: url('/fonts/Metropolis/TrueType/Metropolis-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Metropolis';
+  src: url('/fonts/Metropolis/TrueType/Metropolis-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
 :root {
+  --font-metropolis: 'Metropolis', sans-serif;
   /* About Us Colors */
   --background-medium-purple: #3E3A95;
   --background-dark-purple: #11043F;
@@ -14,6 +52,7 @@
   --text-extra-dark: #0E2535;
   --text-black: #000000
   --text-white: #FFFFFF;
+  --text-purple: #BE5BA8;
 
   /* About Us Cards */
   --card-light-blue: #9EE7E5;
@@ -30,6 +69,14 @@
   --about-us-smaller-spacer: 30px;
   --about-us-small-spacer: 40px;
   --about-us-medium-spacer: 50px;
+
+  /* Glass UI defaults */
+  --glass-bg: #bbbbbc;
+  --glass-light: #fff;
+  --glass-dark: #000;
+  --glass-saturation: 100%;
+  --glass-reflex-dark: 1;
+  --glass-reflex-light: 1;
 }
 
 * {
@@ -50,6 +97,12 @@ h3 {
   font-size: 2rem; //32px
 }
 
+.hero-tight h1,
+.hero-tight h3 {
+  line-height: 1.2;
+  margin: 0vh;
+}
+
 h4 {
   font-size: 1.5rem; //24px
 }
@@ -69,4 +122,4 @@ button {
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}

app/(pages)/about-us/_components/Hero/Hero.tsx

@@ -0,0 +1,61 @@
+import Image from 'next/image';
+
+export default function Hero() {
+  return (
+    <div className="relative isolate w-full min-h-[180vh] bg-white max-[375px]:min-h-[220vh] md:h-[210vh] lg:h-[225vh]">
+      <div className="relative w-full">
+        <div className="absolute inset-0 overflow-hidden z-0">
+          <div className="absolute inset-0 bg-[linear-gradient(225deg,_#3E3A95_0%,_#24175F_8%,_#11043F_20%)] bg-[length:100%_100%] bg-[position:100%_0%] bg-no-repeat [clip-path:polygon(0_0,100%_0,100%_70%,0_95%)]" />
+        </div>
+        <Image
+          src="/Images/hero/cloud_and_book.svg"
+          alt="Cloud and Book"
+          width={2000}
+          height={1200}
+          className="hidden w-full relative z-20 md:block"
+        />
+        <Image
+          src="/Images/hero/mobile_cloud_book_bubbles.svg"
+          alt="Cloud and Book"
+          width={1200}
+          height={900}
+          className="pt-[3vh] block w-full relative z-20 md:hidden"
+        />
+        <Image
+          src="/Images/hero/Cow.svg"
+          alt="HD Cow"
+          width={1000}
+          height={1000}
+          className="absolute top-[53vw] left-[1%] z-30 w-[55vw] h-auto animate-float-bob will-change-transform md:top-[18vw] md:left-[6%] md:w-[42vw] lg:top-[14vw] lg:left-[8%] lg:w-[40vw]"
+        />
+      </div>
+      <div className=" z-40 hero-tight absolute top-[75vw] left-[50vw] text-white p-0 m-0 flex flex-col gap-0 md:top-[28vw] md:left-[50vw] lg:top-[21vw] lg:left-[52vw]">
+        <h3 className="font-[var(--font-metropolis)] uppercase tracking-wider m-0 p-0 text-[clamp(0.9rem,3.5vw,1.2rem)] md:text-[clamp(1rem,2.6vw,1.8rem)] lg:text-[clamp(1rem,2.2vw,2rem)]">
+          Hello, we're
+        </h3>
+        <h1 className="font-[var(--font-metropolis)] font-black m-0 p-0 text-[clamp(1.8rem,8vw,3rem)] md:text-[clamp(2.2rem,6.2vw,5rem)] lg:text-[clamp(2.5rem,6vw,6rem)]">
+          HackDavis
+        </h1>
+        <h3 className="text-right font-black text-[var(--text-purple)] m-0 p-0 text-[clamp(0.9rem,3.5vw,1.2rem)] md:text-[clamp(1rem,2.6vw,1.8rem)] lg:text-[clamp(1rem,2.2vw,2rem)]">
+          2026
+        </h3>
+      </div>
+      <div className="absolute z-10 top-[125vw] left-[6%] w-[50vw] text-white sm:top-[60%] md:top-[65vw] md:left-[10%] md:w-[40vw] lg:top-[65vw] lg:left-[12%] lg:w-auto xl:top-[56%] 2xl:top-[60%]">
+        <div className="relative border border-white py-3 px-3 pr-4 md:py-[1.4vw] md:px-[1.2vw] md:pr-[2vw] lg:py-[2vw] lg:px-[1vw] lg:pr-[2vw]">
+          <span className="absolute -top-2 -left-2 h-5 w-5 rounded-full border border-white bg-[#11043F]" />
+          <span className="absolute -top-2 -right-2 h-5 w-5 rounded-full border border-white bg-[#11043F]" />
+          <span className="absolute -bottom-2 -left-2 h-5 w-5 rounded-full border border-white bg-[#11043F]" />
+          <span className="absolute -bottom-2 -right-2 h-5 w-5 rounded-full border border-white bg-[#11043F]" />
+          <h1 className="font-[var(--font-metropolis)] font-black mx-3 mb-2 tracking-[0.02em] text-[clamp(1.2rem,4vw,1.6rem)] md:mx-[1.6vw] md:mb-[1vw] md:text-[clamp(1.6rem,2.6vw,2.4rem)] lg:mx-[2vw] lg:mb-[1vw] lg:text-[clamp(2rem,3vw,3rem)]">
+            About Us
+          </h1>
+          <p className="font-[var(--font-metropolis)] mt-2 mb-4 mx-3 max-w-[44vw] text-[clamp(0.75rem,3vw,0.95rem)] md:my-[1.6vw] md:mx-[1.6vw] md:max-w-[36vw] md:text-[1rem] lg:my-[2vw] lg:mx-[2vw] lg:max-w-[25vw] lg:text-[1.125rem]">
+            HackDavis is one of the largest collegiate hackathons in California
+            where over 950 students, creators, and leaders come together to
+            create for social good.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(pages)/about-us/page.tsx

@@ -1,7 +1,11 @@
+import Hero from '@app/(pages)/about-us/_components/Hero/Hero';
+import Header from '@components/Header/Header';
+
 export default function AboutUs() {
   return (
-    <div>
-      <p>About Us</p>
+    <div className="relative">
+      <Header />
+      <Hero />
     </div>
   );
 }

app/(pages)/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import '@globals/styles/globals.scss';
 import metadataJSON from '@app/(pages)/_globals/metadata.json';
 import fonts from './_globals/fonts';
-import Navbar from '@app/(pages)/_components/Navbar/Navbar';
+import Header from './_components/Header/Header';
 import Footer from '@app/(pages)/_components/Footer/Footer';
 
 export const metadata: Metadata = metadataJSON;
@@ -15,7 +15,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${fonts} antialiased`}>
-        <Navbar />
+        <Header />
         {children}
         <Footer />
       </body>