feat: apply button

* feat: create navigation bar * feat: create footer * refactor: font, dependencies, scss, footer * fix: navbar on mobile * refactor: added routes and other small changes * feat: active page link has corresponding color * feat: add ZotHacks logo * fix: use responsive css and add bold weight * chore: use absolute asset path for navbar background * fix: logo moves upon navbar expansion and navbar is fixed to top of the screen * refactor: clean up css and use bootstrap grid * fix: remove horizontal scroll * fix: switch Twitter to Hack and SVG to PNG * fix: move Hack to front of footer --------- Co-authored-by: Alexander Liu <a@alexanderliu.com> feat: text centered feat: added apply button svg to assets Bootstrap Sass Organization (#17) * feat: bootstrap sass organization * fix: installed bootstrap * fix: import font from Next instead of Google Fonts * fix: update red hex value correctly * linting * fix: custom CSS property for font * fix: sass partials * fix: new sass path, incorporated navbar and footer * fix: removed comment --------- Co-authored-by: Tyler Yu <tyleryy@uci.edu> feat: apply button
HackAtUCI · Sep 11, 2023 · 4ebb67a · 4ebb67a
1 parent dd3aad0
commit 4ebb67a
Show file tree

Hide file tree

Showing 30 changed files with 527 additions and 73 deletions.
diff --git a/apps/sanity/package.json b/apps/sanity/package.json
@@ -34,4 +34,4 @@
 		"prettier": "^2.8.8",
 		"typescript": "^4.9.5"
 	}
-}
+}
diff --git a/apps/site/next.config.js b/apps/site/next.config.js
@@ -1,6 +1,11 @@
+const path = require("path");
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	reactStrictMode: true,
+	sassOptions: {
+		includePaths: [path.join(__dirname, "src", "lib", "styles")],
+	},
 };
 
 module.exports = nextConfig;
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/globals.scss b/apps/site/src/app/globals.scss
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -1,8 +1,10 @@
-import "./globals.scss";
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ["latin"] });
+import FontProvider from "@/lib/FontProvider";
+
+import NavBar from "@/components/NavBar/NavBar";
+import Footer from "@/components/Footer/Footer";
+import "@/lib/styles/bootstrap.scss";
 
 export const metadata: Metadata = {
 	title: "Create Next App",
@@ -16,7 +18,12 @@ export default function RootLayout({
 }) {
 	return (
 		<html lang="en">
-			<body className={inter.className}>{children}</body>
+			<FontProvider />
+			<body>
+				<NavBar />
+				{children}
+				<Footer />
+			</body>
 		</html>
 	);
 }
diff --git a/apps/site/src/app/page.module.scss b/apps/site/src/app/page.module.scss
diff --git a/apps/site/src/app/page.tsx b/apps/site/src/app/page.tsx
@@ -1 +1 @@
-export { Landing as default } from "@/views"; 
+export { Landing as default } from "@/views";
diff --git a/apps/site/src/app/resources/page.tsx b/apps/site/src/app/resources/page.tsx
@@ -1 +1 @@
-export { Resources as default } from "@/views";
+export { Resources as default } from "@/views";
diff --git a/apps/site/src/app/schedule/page.tsx b/apps/site/src/app/schedule/page.tsx
@@ -1 +1 @@
-export { Schedule as default } from "@/views";
+export { Schedule as default } from "@/views";
diff --git a/apps/site/src/assets/icons/facebook.png b/apps/site/src/assets/icons/facebook.png
diff --git a/apps/site/src/assets/icons/hack.png b/apps/site/src/assets/icons/hack.png
diff --git a/apps/site/src/assets/icons/insta.png b/apps/site/src/assets/icons/insta.png
diff --git a/apps/site/src/assets/icons/mail.png b/apps/site/src/assets/icons/mail.png
diff --git a/apps/site/src/assets/icons/zothacks-logo.png b/apps/site/src/assets/icons/zothacks-logo.png
diff --git a/apps/site/src/assets/images/ApplyButton.svg b/apps/site/src/assets/images/ApplyButton.svg
diff --git a/apps/site/src/assets/images/lined_paper.png b/apps/site/src/assets/images/lined_paper.png
diff --git a/apps/site/src/components/Footer/Footer.module.scss b/apps/site/src/components/Footer/Footer.module.scss
@@ -0,0 +1,15 @@
+.footer {
+	padding-bottom: 7vw;
+}
+
+.text {
+	font-size: 1.5rem;
+	font-weight: bold;
+	color: black;
+	text-align: center;
+	margin-bottom: 0;
+}
+
+.socials {
+	margin: 10px;
+}
diff --git a/apps/site/src/components/Footer/Footer.tsx b/apps/site/src/components/Footer/Footer.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import Image from "next/image";
+
+import styles from "./Footer.module.scss";
+
+import Mail from "@/assets/icons/mail.png";
+import Facebook from "@/assets/icons/facebook.png";
+import Instagram from "@/assets/icons/insta.png";
+import Hack from "@/assets/icons/hack.png";
+
+type Social = {
+	icon: any;
+	link: string;
+	alt: string;
+	width: number;
+	height: number;
+};
+
+const SOCIALS: Social[] = [
+	{
+		icon: Hack,
+		link: "https://hack.ics.uci.edu/",
+		alt: "Hack at UCI",
+		width: 70,
+		height: 70,
+	},
+	{
+		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,
+	},
+];
+
+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="text-center">
+				{SOCIALS.map(({ icon, link, alt, width, height }) => (
+					<a key={link} href={link} target="_blank" className={styles.socials}>
+						<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,69 @@
+@use "bootstrap-utils" as utils;
+
+.nav {
+	position: sticky;
+	width: 100%;
+	filter: drop-shadow(0px 2.5px 2px rgba(0, 0, 0, 0.4));
+}
+
+.navbar {
+	background-image: url("~@/assets/images/lined_paper.png");
+	background-size: cover;
+	background-position: left bottom;
+	background-repeat: no-repeat;
+}
+
+.logo {
+	position: absolute;
+	left: 30px;
+	width: 20vw;
+	height: 20vw;
+	text-align: center;
+	transform: rotate(-16.81deg) translateY(-5vw);
+}
+
+.text {
+	margin-left: 1vw;
+	margin-right: 1vw;
+	font-size: 2rem;
+	font-weight: bold;
+	text-decoration: none;
+}
+
+.notActive {
+	@extend .text;
+	color: black;
+}
+
+.homeActive {
+	@extend .text;
+	color: utils.$green;
+}
+
+.resourcesActive {
+	@extend .text;
+	color: utils.$blue;
+}
+
+.scheduleActive {
+	@extend .text;
+	color: utils.$navbar-red;
+}
+
+@include utils.media-breakpoint-down(md) {
+	.logo {
+		left: 3vw;
+		transform: rotate(-16.81deg) translateY(-6vw);
+	}
+	.text {
+		font-size: 1.5rem;
+	}
+}
+
+@include utils.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.png";
+
+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.notActive
+								}
+							>
+								Home
+							</Link>
+							<Link
+								href="/resources"
+								className={
+									activeRoute === "/resources"
+										? styles.resourcesActive
+										: styles.notActive
+								}
+							>
+								Resources
+							</Link>
+							<Link
+								href="/schedule"
+								className={
+									activeRoute === "/schedule"
+										? styles.scheduleActive
+										: styles.notActive
+								}
+							>
+								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/FontProvider.tsx b/apps/site/src/lib/FontProvider.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Fuzzy_Bubbles } from "next/font/google";
+
+const fuzzy = Fuzzy_Bubbles({
+	weight: ["400", "700"],
+	subsets: ["latin"],
+});
+
+export default function FontProvider() {
+	return (
+		<style jsx global>
+			{`
+				:root {
+					--next-font-fuzzy-bubbles: ${fuzzy.style.fontFamily};
+				}
+			`}
+		</style>
+	);
+}
diff --git a/apps/site/src/lib/styles/_bootstrap-utils.scss b/apps/site/src/lib/styles/_bootstrap-utils.scss
@@ -0,0 +1,8 @@
+@import "./zothacks-theme";
+
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/variables-dark";
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
diff --git a/apps/site/src/lib/styles/variables.scss → .../site/src/lib/styles/_zothacks-theme.scss b/apps/site/src/lib/styles/variables.scss → .../site/src/lib/styles/_zothacks-theme.scss
@@ -5,7 +5,7 @@ $white: #fafaff; // Paper Background color
 $beige: #faf4ea;
 $black: #21242d; // Text color
 $silver: #e6f2fc; // Line pattern color of paper
-$red: #e2b7f7; // ! hex value doesn't match with Figma design
+$red: #ff3750;
 $pink: #ffa8c3;
 $orange: #ff5c00;
 $gold: #ffd600; // accent colors
@@ -14,6 +14,9 @@ $green: #3df048;
 $light-blue: #81deeb;
 $blue: #3902fd;
 $purple: #6600b6;
+$navbar-red: #ff0000;
 
-// fonts
-$fuzzy-bubbles: "Fuzzy Bubbles", cursive;
+// bootstrap overrides
+$font-family-base: var(--next-font-fuzzy-bubbles);
+$font-size-base: 1.25rem;
+$headings-font-weight: 700;
diff --git a/apps/site/src/lib/styles/bootstrap.scss b/apps/site/src/lib/styles/bootstrap.scss
@@ -0,0 +1,25 @@
+// Core configuration with overrides
+@import "./bootstrap-utils";
+
+/* Layout & components */
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+
+/* Components */
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/accordion";
+
+/* Helpers */
+@import "~bootstrap/scss/helpers";
+
+/* Utilities */
+@import "~bootstrap/scss/utilities/api";