diff --git a/app/(pages)/_components/Footer/Footer.tsx b/app/(pages)/_components/Footer/Footer.tsx index a513870..cc9500a 100644 --- a/app/(pages)/_components/Footer/Footer.tsx +++ b/app/(pages)/_components/Footer/Footer.tsx @@ -1,7 +1,3 @@ export default function Footer() { - return ( -
- halo! Edit this footer in app/(pages)/_components/Footer/Footer.tsx -
- ); + return
; } diff --git a/app/(pages)/_components/Header/Header.tsx b/app/(pages)/_components/Header/Header.tsx new file mode 100644 index 0000000..f4e9a53 --- /dev/null +++ b/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 ( +
+ HackDavis Logo + +
+
+
+ + Home + + + About + +
+
+ MLH Badge +
+ + {isMenuOpen ? ( +
+
+ HackDavis Logo + +
+
+ ) : null} +
+ ); +} diff --git a/app/(pages)/_components/Navbar/Navbar.tsx b/app/(pages)/_components/Navbar/Navbar.tsx deleted file mode 100644 index b1659ee..0000000 --- a/app/(pages)/_components/Navbar/Navbar.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function Navbar() { - return ( -
- halo! Edit this navbar in app/(pages)/_components/Navbar/Navbar.tsx -
- ); -} diff --git a/app/(pages)/_globals/styles/globals.scss b/app/(pages)/_globals/styles/globals.scss index 2943ae4..74d70b9 100644 --- a/app/(pages)/_globals/styles/globals.scss +++ b/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; -} \ No newline at end of file +} diff --git a/app/(pages)/about-us/_components/Hero/Hero.tsx b/app/(pages)/about-us/_components/Hero/Hero.tsx new file mode 100644 index 0000000..5b05f30 --- /dev/null +++ b/app/(pages)/about-us/_components/Hero/Hero.tsx @@ -0,0 +1,61 @@ +import Image from 'next/image'; + +export default function Hero() { + return ( +
+
+
+
+
+ Cloud and Book + Cloud and Book + HD Cow +
+
+

+ Hello, we're +

+

+ HackDavis +

+

+ 2026 +

+
+
+
+ + + + +

+ About Us +

+

+ HackDavis is one of the largest collegiate hackathons in California + where over 950 students, creators, and leaders come together to + create for social good. +

+
+
+
+ ); +} diff --git a/app/(pages)/about-us/page.tsx b/app/(pages)/about-us/page.tsx index e887c9a..6fef07d 100644 --- a/app/(pages)/about-us/page.tsx +++ b/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 ( -
-

About Us

+
+
+
); } diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx index 5ccd153..113ef6c 100644 --- a/app/(pages)/layout.tsx +++ b/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 ( - +
{children}