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,22 @@
+.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,25 @@
+import { PropsWithChildren } from "react";
+import Button from "react-bootstrap/Button";
+
+import styles from "./BookmarkLink.module.scss";
+
+interface BookmarkLinkProps {
+	className?: string;
+	href: string;
+}
+
+export default function BookmarkLink({
+	className,
+	href,
+	children,
+}: PropsWithChildren<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

@@ -10,6 +10,7 @@ $pink: #ffa8c3;
 $orange: #ff5c00;
 $gold: #ffd600; // accent colors
 $yellow: #ffff00; // highlighter
+$sticky-yellow: #ffffa9;
 $green: #3df048;
 $light-blue: #81deeb;
 $blue: #3902fd;

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,36 @@
+@use "bootstrap-utils" as bootstrap;
+
+.intro {
+	@include bootstrap.padding(8rem 4rem);
+
+	background-image: url("~src/assets/images/index-card.png");
+	background-size: 100% 100%;
+	background-position: center;
+	background-repeat: no-repeat;
+	position: relative;
+	text-align: center;
+
+	h2 {
+		margin-bottom: 70px;
+	}
+}
+
+.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,37 @@
+import Image from "next/image";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import pin from "@/assets/images/index-card-pin.svg";
+import hackDoodle from "@/assets/images/hack-doodle.png";
+import styles from "./Intro.module.scss";
+
+export default function Intro() {
+	return (
+		<Container as="section">
+			<Row className={styles.intro + " mx-2"}>
+				<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>
+		</Container>
+	);
+}