Create intro and mentor sections

apps/site/src/app/layout.tsx

@@ -8,8 +8,8 @@ import "@/lib/styles/bootstrap.scss";
 import "@/lib/styles/globals.scss";
 
 export const metadata: Metadata = {
-	title: "Create Next App",
-	description: "Generated by create next app",
+	title: "ZotHacks",
+	description: "Hack at UCI's premier hackathon for beginners at UCI",
 };
 
 export default function RootLayout({

apps/site/src/components/BookmarkLink/BookmarkLink.module.scss

@@ -0,0 +1,18 @@
+.bookmarkLink {
+    background-image: url("~@/assets/images/bookmark.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center;
+    text-decoration: none;
+    color: black;
+    padding-left: 2.5rem;
+    padding-right: 3rem;
+    transition: background-image 0.2s ease, font-weight 0.2s ease;
+
+    &:hover {
+        background-image: url("~@/assets/images/bookmark_border.png");
+        transition: background-image 0.2s ease, font-weight 0.2s ease;
+        color: black;
+        font-weight: bold;
+    }
+}

apps/site/src/components/BookmarkLink/BookmarkLink.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+
+import styles from "./BookmarkLink.module.scss";
+
+interface BookmarkLinkProps {
+	className?: string;
+	href: string;
+	children: React.ReactNode;
+}
+
+export default function BookmarkLink({
+	className,
+	href,
+	children,
+}: BookmarkLinkProps) {
+	return (
+		<Button
+			className={styles.bookmarkLink + " " + className}
+			variant="link"
+			href={href}
+		>
+			{children}
+		</Button>
+	);
+}

apps/site/src/lib/styles/_bootstrap-utils.scss

@@ -1,3 +1,5 @@
+@import "./zothacks-theme";
+
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/variables-dark";

apps/site/src/lib/styles/_zothacks-theme.scss

@@ -15,3 +15,8 @@ $light-blue: #81deeb;
 $blue: #3902fd;
 $purple: #6600b6;
 $navbar-red: #ff0000;
+
+// bootstrap overrides
+$font-family-base: var(--next-font-fuzzy-bubbles);
+$font-size-base: 1.25rem;
+$headings-font-weight: 700;

apps/site/src/lib/useWindowWidth.tsx

@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+
+export default function useWindowWidth() {
+	const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+	useEffect(() => {
+		function handleResize() {
+			setWindowWidth(window.innerWidth);
+		}
+
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	});
+
+	return windowWidth;
+}

apps/site/src/views/Home/Home.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import Landing from "./sections/Landing/Landing";
-import About from "./sections/About/About";
-import Mentors from "./sections/Mentors/Mentors";
+import Intro from "./sections/Intro/Intro";
+import Mentor from "./sections/Mentor/Mentor";
 import Sponsors from "./sections/Sponsors/Sponsors";
 import FAQ from "./sections/FAQ/FAQ";
 
@@ -12,8 +12,8 @@ function Home() {
 	return (
 		<div className={styles.home}>
 			<Landing />
-			<About />
-			<Mentors />
+			<Intro />
+			<Mentor />
 			<Sponsors />
 			<FAQ />
 		</div>

apps/site/src/views/Home/sections/Intro/Intro.module.scss

@@ -0,0 +1,43 @@
+@use "bootstrap-utils" as bootstrap;
+
+.intro {
+    background-image: url("~src/assets/images/index-card.png");
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    padding: 5rem 1rem;
+    position: relative;
+    text-align: center;
+
+    h2 {
+        margin-bottom: 70px;
+    }
+
+    @include bootstrap.media-breakpoint-up(sm) {
+        & {
+            padding: 8rem 4rem;
+        }
+    }
+}
+
+.pin {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-75%, -50%);
+    width: auto;
+}
+
+.hackDoodle {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    transform: translate(-25%, 50%);
+    width: auto;
+
+    @include bootstrap.media-breakpoint-down(lg) {
+        & {
+            display: none;
+        }
+    }
+}

apps/site/src/views/Home/sections/Intro/Intro.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+import Row from "react-bootstrap/Row";
+import pin from "@/assets/images/index-card-pin.svg";
+import hackDoodle from "@/assets/images/hack-doodle.svg";
+import styles from "./Intro.module.scss";
+
+export default function Intro() {
+	return (
+		<Row className={styles.intro + " m-5"}>
+			<Image
+				className={styles.pin}
+				src={pin}
+				width="100"
+				height="100"
+				alt="Index card pin"
+			/>
+			<h2>What is ZotHacks?</h2>
+			<p>
+				ZotHacks is a beginner-friendly hackathon where students with minimal
+				computer science experience will learn to build their first CS project.
+				Through ZotHacks, we introduce these students to the world of hackathons
+				and web development by providing technical workshops, strong mentorship,
+				and free food!
+			</p>
+			<Image
+				className={styles.hackDoodle}
+				src={hackDoodle}
+				width="250"
+				height="250"
+				alt="Hack logo doodle"
+			/>
+		</Row>
+	);
+}

apps/site/src/views/Home/sections/Mentor/Mentor.module.scss

@@ -0,0 +1,102 @@
+@use "bootstrap-utils" as bootstrap;
+
+.applySticky {
+    background-image: url("~@/assets/images/MentorStickyYellow.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    padding-top: 3rem;
+    padding-left: 5rem;
+    padding-right: 5rem;
+    padding-bottom: 8rem;
+    margin-left: 22%;
+    position: relative;
+    height: 325px;
+
+    h2 {
+        font-size: 1.8rem;
+    }
+
+    a {
+        position: absolute;
+        bottom: 10%;
+        left: 5%;
+        transform: rotate(7.5deg);
+    }
+
+
+    @include bootstrap.media-breakpoint-down(xxl) {
+        & {
+            margin-left: 17.5%;
+        }
+    }
+}
+
+.descSticky {
+    background-image: url("~@/assets/images/MentorStickyGreen.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: 60%;
+    padding: 6rem;
+    position: absolute;
+    z-index: -1;
+    top: 15%;
+    left: 40%;
+    width: 41.667%;
+
+    p {
+        transform: rotate(-5deg);
+    }
+
+    @include bootstrap.media-breakpoint-down(xxl) {
+        & {
+            top: 10%;
+            left: 42%;
+        }
+    }
+
+    @include bootstrap.media-breakpoint-down(xl) {
+        & {
+            width: 50%;
+            padding: 5rem;
+        }
+    }
+}
+
+.applyStickyMobile {
+    background-image: url("~@/assets/images/YellowVertPost-it.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    z-index: 1;
+}
+
+.descStickyMobile {
+    background-image: url("~@/assets/images/MentorStickyGreen.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    position: absolute;
+    width: 300px;
+    height: 300px;
+    right: 0;
+    bottom: -15%;
+    z-index: 0;
+
+    a {
+        position: absolute;
+        bottom: 0;
+        z-index: 100;
+        transform: rotate(-5deg);
+    }
+
+    @include bootstrap.media-breakpoint-up(sm) {
+        & {
+            bottom: -25%;
+        }
+    }
+}
+
+.tape {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}