Merge pull request #26 from HackAtUCI/feature/intro-and-mentor

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,80 @@
+@use "sass:list";
+@use "bootstrap-utils" as bootstrap;
+
+.bookmarkLink {
+	@include bootstrap.button-variant(
+		white,
+		transparent,
+		$hover-border: bootstrap.$dark,
+		$active-border: bootstrap.$dark,
+		$active-color: bootstrap.$link-hover-color
+	);
+
+	$border-width: 2px;
+	--bs-btn-border-width: #{$border-width};
+	// disable active shadow since not so simple to extend shadow to ::after
+	--bs-btn-active-shadow: none;
+	--bs-btn-border-radius: 0;
+
+	padding-left: 1.5rem;
+	padding-right: 0;
+
+	filter: drop-shadow(2px 1px 4px rgba(black, 0.15));
+
+	transition: list.append(
+		list.append(bootstrap.$btn-transition, padding-left 0.15s ease-in-out),
+		font-weight 0.15s ease-in-out // non-variable but to synchronize delay
+	);
+
+	$height: calc(2.5rem + 2 * $border-width);
+	height: $height;
+	$chevron-size: calc($height / 2);
+
+	&::before,
+	&::after {
+		content: "";
+		position: absolute;
+		top: -$border-width;
+		left: 100%;
+		transition:
+			border-color 0.15s ease-in-out,
+			filter 0.15s ease-in-out;
+	}
+
+	&::before {
+		border-top: $chevron-size solid white;
+		border-right: $chevron-size solid transparent;
+		border-bottom: $chevron-size solid white;
+		border-left: $chevron-size solid white;
+		filter: drop-shadow(2px 1px 1px rgba(black, 0.1));
+	}
+
+	&::after {
+		border-top: $border-width solid white;
+		border-bottom: $border-width solid white;
+		border-right: $border-width solid transparent;
+		width: $height;
+		height: $height;
+	}
+
+	&:hover,
+	&:focus-visible {
+		padding-left: 2rem; // pulling effect
+		font-weight: bold;
+	}
+
+	&:hover,
+	&:focus-visible,
+	&:active {
+		border-right-color: transparent;
+
+		&::before {
+			filter: drop-shadow(5px 2px 4px rgba(black, 0.1));
+		}
+
+		&::after {
+			border-top-color: var(--bs-btn-active-border-color);
+			border-bottom-color: var(--bs-btn-active-border-color);
+		}
+	}
+}

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=""
+			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.svg");
+	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,38 @@
+import Image from "next/image";
+import Container from "react-bootstrap/Container";
+
+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">
+			<div className={styles.intro}>
+				<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"
+				/>
+			</div>
+		</Container>
+	);
+}