HackAtUCI · samderanova · Sep 9, 2023 · Aug 30, 2023 · Aug 31, 2023 · Aug 31, 2023
diff --git a/apps/site/package.json b/apps/site/package.json
@@ -14,10 +14,12 @@
 		"@types/node": "20.4.9",
 		"@types/react": "18.2.20",
 		"@types/react-dom": "^18.2.0",
+		"bootstrap": "^5.3.1",
 		"eslint": "8.46.0",
 		"eslint-config-next": "^13.4.1",
 		"next": "^13.4.1",
 		"react": "18.2.0",
+		"react-bootstrap": "^2.8.0",
 		"react-dom": "^18.2.0",
 		"sass": "^1.65.1",
 		"typescript": "5.1.6"

diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -1,8 +1,13 @@
+import "bootstrap/dist/css/bootstrap.min.css";
 import "./globals.scss";
+
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Fuzzy_Bubbles } from "next/font/google";
+
+import NavBar from "@/components/NavBar/NavBar";
+import Footer from "@/components/Footer/Footer";
 
-const inter = Inter({ subsets: ["latin"] });
+const fuzzy = Fuzzy_Bubbles({ weight: ["400", "700"], subsets: ["latin"] });
 
 export const metadata: Metadata = {
 	title: "Create Next App",
@@ -16,7 +21,11 @@ export default function RootLayout({
 }) {
 	return (
 		<html lang="en">
-			<body className={inter.className}>{children}</body>
+			<body className={fuzzy.className}>
+				<NavBar />
+				{children}
+				<Footer />
+			</body>
 		</html>
 	);
 }
diff --git a/apps/site/src/assets/icons/facebook.svg b/apps/site/src/assets/icons/facebook.svg
diff --git a/apps/site/src/assets/icons/insta.svg b/apps/site/src/assets/icons/insta.svg
diff --git a/apps/site/src/assets/icons/mail.svg b/apps/site/src/assets/icons/mail.svg
diff --git a/apps/site/src/assets/icons/twitter.svg b/apps/site/src/assets/icons/twitter.svg
diff --git a/apps/site/src/assets/icons/zothacks-logo.svg b/apps/site/src/assets/icons/zothacks-logo.svg
diff --git a/apps/site/src/assets/images/lined_paper.svg b/apps/site/src/assets/images/lined_paper.svg
diff --git a/apps/site/src/components/Footer/Footer.module.scss b/apps/site/src/components/Footer/Footer.module.scss
@@ -0,0 +1,40 @@
+@use "@/lib/styles/variables.scss" as variables;
+
+.footer {
+	padding-bottom: 7vw;
+}
+
+.socials {
+	display: grid;
+	grid-template-columns: repeat(4, 7.5vw);
+	column-gap: 2vw;
+	place-items: center;
+	place-content: center;
+}
+
+.text {
+	font-size: 1.5rem;
+	font-weight: bold;
+	color: black;
+	text-align: center;
+	margin-bottom: 0;
+}
+
+@include variables.media-breakpoint-down(md) {
+	.socials {
+		grid-template-columns: repeat(4, 10vw);
+	}
+}
+
+@include variables.media-breakpoint-down(sm) {
+	.socials {
+		column-gap: 10vw;
+	}
+}
+
+@include variables.media-breakpoint-up(lg) {
+	.socials {
+		grid-template-columns: repeat(4, 80px);
+		column-gap: 20px;
+	}
+}
diff --git a/apps/site/src/components/Footer/Footer.tsx b/apps/site/src/components/Footer/Footer.tsx
@@ -0,0 +1,62 @@
+import Image from "next/image";
+
+import styles from "./Footer.module.scss";
+
+import Mail from "@/assets/icons/mail.svg";
+import Facebook from "@/assets/icons/facebook.svg";
+import Instagram from "@/assets/icons/insta.svg";
+import Twitter from "@/assets/icons/twitter.svg";
+
+type Social = {
+	icon: any;
+	link: string;
+	alt: string;
+	width: number;
+	height: number;
+};
+
+const SOCIALS: Social[] = [
+	{
+		icon: Mail,
+		link: "mailto:hack@uci.edu",
+		alt: "Mail",
+		width: 79,
+		height: 59,
+	},
+	{
+		icon: Facebook,
+		link: "https://www.facebook.com/UCI.Hack/",
+		alt: "Facebook",
+		width: 59,
+		height: 59,
+	},
+	{
+		icon: Instagram,
+		link: "https://www.instagram.com/hackatuci/",
+		alt: "Instagram",
+		width: 69,
+		height: 72,
+	},
+	{
+		icon: Twitter,
+		link: "https://www.twitter.com/HackUCI",
+		alt: "Twitter",
+		width: 64,
+		height: 53,
+	},
+];
+
+export default function Footer() {
+	return (
+		<footer className={styles.footer}>
+			<p className={styles.text}>Made with &lt;3 in Irvine, CA - Hack @ UCI</p>
+			<div className={styles.socials}>
+				{SOCIALS.map(({ icon, link, alt, width, height }: Social) => (
+					<a key={link} href={link} target="_blank">
+						<Image src={icon.src} alt={alt} width={width} height={height} />
+					</a>
+				))}
+			</div>
+		</footer>
+	);
+}
diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
@@ -0,0 +1,87 @@
+@use "@/lib/styles/variables.scss" as variables;
+
+.nav {
+	position: fixed;
+	width: 100%;
+}
+
+.navbar {
+	background-image: url("~@/assets/images/lined_paper.svg");
+	background-size: cover;
+	background-position: left bottom;
+	background-repeat: no-repeat;
+	filter: drop-shadow(0px 2.5px 2px rgba(0, 0, 0, 0.4));
+}
+
+.logo {
+	position: absolute;
+	left: 30px;
+	width: 20vw;
+	height: 20vw;
+	text-align: center;
+	transform: rotate(-16.81deg) translateY(-5vw);
+}
+
+.homeNotActive,
+.resourcesNotActive,
+.scheduleNotActive {
+	margin-left: 1vw;
+	margin-right: 1vw;
+	font-size: 2rem;
+	font-weight: bold;
+	color: black;
+	text-decoration: none;
+}
+
+.homeActive {
+	margin-left: 1vw;
+	margin-right: 1vw;
+	font-size: 2rem;
+	font-weight: bold;
+	color: black;
+	text-decoration: none;
+	color: variables.$green;
+}
+
+.resourcesActive {
+	margin-left: 1vw;
+	margin-right: 1vw;
+	font-size: 2rem;
+	font-weight: bold;
+	color: black;
+	text-decoration: none;
+	color: variables.$blue;
+}
+
+.scheduleActive {
+	margin-left: 1vw;
+	margin-right: 1vw;
+	font-size: 2rem;
+	font-weight: bold;
+	color: black;
+	text-decoration: none;
+	color: variables.$navbar-red;
+}
+
+@include variables.media-breakpoint-down(md) {
+	.logo {
+		left: 3vw;
+		transform: rotate(-16.81deg) translateY(-6vw);
+	}
+	.homeNotActive,
+	.resourcesNotActive,
+	.scheduleNotActive,
+	.homeActive,
+	.resourcesActive,
+	.scheduleActive {
+		font-size: 1.5rem;
+	}
+}
+
+@include variables.media-breakpoint-up(lg) {
+	.logo {
+		width: 180px;
+		height: 180px;
+		transform: rotate(-16.81deg) translateY(-50px);
+	}
+}
diff --git a/apps/site/src/components/NavBar/NavBar.tsx b/apps/site/src/components/NavBar/NavBar.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import Navbar from "react-bootstrap/Navbar";
+
+import ZotHacksLogo from "@/assets/icons/zothacks-logo.svg";
+
+import styles from "./NavBar.module.scss";
+
+export default function NavBar() {
+	const activeRoute = usePathname();
+
+	return (
+		<nav className={styles.nav}>
+			<Navbar expand="md" className={`bg-body-tertiary ${styles.navbar}`}>
+				<Container fluid>
+					<Navbar.Brand />
+					<Navbar.Toggle aria-controls="basic-navbar-nav" />
+					<Navbar.Collapse id="basic-navbar-nav">
+						<Nav className="ms-auto text-center">
+							<Link
+								href="/"
+								className={
+									activeRoute === "/" ? styles.homeActive : styles.homeNotActive
+								}
+							>
+								Home
+							</Link>
+							<Link
+								href="/resources"
+								className={
+									activeRoute === "/resources"
+										? styles.resourcesActive
+										: styles.resourcesNotActive
+								}
+							>
+								Resources
+							</Link>
+							<Link
+								href="/schedule"
+								className={
+									activeRoute === "/schedule"
+										? styles.scheduleActive
+										: styles.scheduleNotActive
+								}
+							>
+								Schedule
+							</Link>
+						</Nav>
+					</Navbar.Collapse>
+				</Container>
+			</Navbar>
+			<Link href="/">
+				<div className={styles.logo}>
+					<Image src={ZotHacksLogo.src} alt="ZotHacks Logo" fill />
+				</div>
+			</Link>
+		</nav>
+	);
+}
diff --git a/apps/site/src/lib/styles/variables.scss b/apps/site/src/lib/styles/variables.scss
@@ -1,5 +1,10 @@
 // Common variables for site theme consistency
 
+// import bootstrap scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
 // colors
 $white: #fafaff; // Paper Background color
 $beige: #faf4ea;
@@ -14,6 +19,7 @@ $green: #3df048;
 $light-blue: #81deeb;
 $blue: #3902fd;
 $purple: #6600b6;
+$navbar-red: #ff0000;
 
 // fonts
 $fuzzy-bubbles: "Fuzzy Bubbles", cursive;
diff --git a/apps/site/src/views/Landing/Landing.tsx b/apps/site/src/views/Landing/Landing.tsx
@@ -6,4 +6,4 @@ export default function Landing() {
 			<h1>ZotHacks 2023</h1>
 		</main>
 	);
-}
+}