feat: mentor section

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/components/Intro/Intro.module.scss

@@ -1,5 +1,4 @@
 @use "bootstrap-utils" as bootstrap;
-@use "zothacks-theme" as theme;
 
 .intro {
     background-image: url("~src/assets/images/index-card.png");
@@ -10,7 +9,7 @@
     position: relative;
     text-align: center;
 
-    h1 {
+    h2 {
         margin-bottom: 70px;
     }
 

apps/site/src/components/Intro/Intro.tsx

@@ -14,7 +14,7 @@ export default function Intro() {
 				height="100"
 				alt="Index card pin"
 			/>
-			<h1>What is ZotHacks?</h1>
+			<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.

apps/site/src/components/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%);
+}

apps/site/src/components/Mentor/Mentor.tsx

@@ -0,0 +1,56 @@
+import Image from "next/image";
+import Col from "react-bootstrap/Col";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+
+import useWindowWidth from "@/lib/useWindowWidth";
+import BookmarkLink from "@/components/BookmarkLink/BookmarkLink";
+import tape from "@/assets/images/tape.svg";
+import styles from "./Mentor.module.scss";
+
+const MENTOR_APP_URL = "https://hack.ics.uci.edu";
+
+export default function Mentor() {
+	const width = useWindowWidth();
+
+	const mentorHeader = (
+		<h2 className="mb-3">Interested in becoming a mentor?</h2>
+	);
+	const mentorDescEl = (
+		<p>
+			Have a knack for innovation? Interested in inspiring the next generation
+			of developers? Our mentors are vital to making ZotHacks 2023 successful
+			and enjoyable for our hackers. Apply to be a mentor today!
+		</p>
+	);
+	const applyLink = (
+		<BookmarkLink className="mb-4" href={MENTOR_APP_URL}>
+			Apply to Mentor!
+		</BookmarkLink>
+	);
+
+	return (
+		<Container className="py-5">
+			{width >= 992 ? (
+				<Row className="position-relative">
+					<Col lg={4} className={styles.applySticky}>
+						{mentorHeader}
+						{applyLink}
+					</Col>
+					<Col className={styles.descSticky + " text-center"}>
+						{mentorDescEl}
+					</Col>
+				</Row>
+			) : (
+				<Row className="position-relative">
+					<Col className={styles.applyStickyMobile + " mx-3 p-5"}>
+						<Image src={tape} alt="post-it tape" className={styles.tape} />
+						{mentorHeader}
+						{mentorDescEl}
+					</Col>
+					<Col className={styles.descStickyMobile}>{applyLink}</Col>
+				</Row>
+			)}
+		</Container>
+	);
+}

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/Landing/Landing.tsx

@@ -1,13 +1,19 @@
 "use client";
 
+import Container from "react-bootstrap/Container";
+
 import Intro from "@/components/Intro/Intro";
 import "./Landing.module.scss";
+import Mentor from "@/components/Mentor/Mentor";
 
 export default function Landing() {
 	return (
 		<main>
-			<h1>ZotHacks 2023</h1>
-			<Intro />
+			<Container fluid="md">
+				<h1>ZotHacks 2023</h1>
+				<Intro />
+				<Mentor />
+			</Container>
 		</main>
 	);
 }