Feature: Mentor and Volunteer Section (#26)

* feat: basic layout

* feat: bottom of stand dynamically adjusts to text height

* fix: replace HackUCI with IrvineHacks in copy

* fix: remove extraneous div

* fix: add more horizontal space between stands

* fix: swap row and column gaps between stands

* fix: add padding to center stands on mobile

apps/site/src/app/(home)/page.tsx

@@ -1,7 +1,14 @@
-import { Landing } from "./sections";
+import { Landing, MentorVolunteer } from "./sections";
 
 export default function Home() {
 	// Show landing section only if still in maintenance,
 	// otherwise show the rest of the sections
-	return process.env.MAINTENANCE_MODE_HOME ? <Landing /> : <Landing />;
+	return process.env.MAINTENANCE_MODE_HOME ? (
+		<Landing />
+	) : (
+		<>
+			<Landing />
+			<MentorVolunteer />
+		</>
+	);
 }

apps/site/src/app/(home)/sections/Landing/Landing.module.css

@@ -1,5 +1,5 @@
 .landingSection {
-	background-image: url("~@/assets/backgrounds/landing-background.jpg");
+	background-image: url("~@/assets/backgrounds/landing-background.png");
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;

apps/site/src/app/(home)/sections/Landing/Landing.tsx

@@ -16,7 +16,7 @@ import styles from "./Landing.module.css";
 const Landing = () => {
 	return (
 		<section className={styles.landingSection}>
-			<View className="h-full w-full absolute">
+			<View className="absolute w-full h-full">
 				<Suspense fallback={null}>
 					<Fireflies />
 					<PerspectiveCamera makeDefault position={[0.1, 0.1, 0.6]} />

apps/site/src/app/(home)/sections/MentorVolunteer/MentorVolunteer.tsx

@@ -0,0 +1,26 @@
+import Stand from "./Stand";
+import stand1 from "./stand-1.png";
+import stand2 from "./stand-2.png";
+
+const MentorVolunteer = () => {
+	return (
+		<div className="grid max-w-lg lg:max-w-none lg:grid-cols-[repeat(2,450px)] lg:items-stretch justify-center m-auto gap-y-8 gap-x-24 mt-24 pl-3 pr-4">
+			<Stand
+				imageSrc={stand1}
+				header="Apply to be a Mentor"
+				description="Interested in inspiring the next generation of developers? Our mentors are vital to making IrvineHacks 2024 successful and enjoyable for our hackers."
+				buttonText="Mentor Application"
+				buttonHref="google.com"
+			/>
+			<Stand
+				imageSrc={stand2}
+				header="Become a Volunteer"
+				description="Want a peek behind the scenes? Join our team of event volunteers that make IrvineHacks run as smoothly as possible! Get access to all the free food and all our hackathon swag."
+				buttonText="Volunteer Form"
+				buttonHref="google.com"
+			/>
+		</div>
+	);
+};
+
+export default MentorVolunteer;

apps/site/src/app/(home)/sections/MentorVolunteer/Stand.tsx

@@ -0,0 +1,50 @@
+import type { ComponentProps } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import Button from "@/lib/components/Button/Button";
+import standBottom from "./stand-bottom.png";
+
+interface StandProps {
+	imageSrc: ComponentProps<typeof Image>["src"];
+	header: string;
+	description: string;
+	buttonText: string;
+	buttonHref: ComponentProps<typeof Link>["href"];
+}
+
+const Stand: React.FC<StandProps> = ({
+	imageSrc,
+	header,
+	description,
+	buttonText,
+	buttonHref,
+}) => {
+	return (
+		<div className="max-w-[450px] text-center flex flex-col items-stretch">
+			<div className="relative aspect-[1/0.7] z-10">
+				<h2 className="absolute mt-[4.5%] text-2xl z-20 w-full text-[#FFDA7B]">
+					{header}
+				</h2>
+				<Image
+					className="absolute left-0 top-0 w-full"
+					src={imageSrc}
+					alt=""
+					aria-hidden
+				/>
+			</div>
+			<div
+				style={{
+					backgroundImage: `url(${standBottom.src})`,
+				}}
+				className="relative ml-2 border-[6px] border-solid border-t-0 border-[#1B1006] overflow-hidden bg-top bg-repeat-y bg-[length:100%] flex-grow"
+			>
+				<p className="text-base pt-[16%] pb-4 px-12">{description}</p>
+				<div className="mb-8">
+					<Button text={buttonText} href={buttonHref} />
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Stand;

apps/site/src/app/(home)/sections/index.ts

@@ -1 +1,2 @@
 export { default as Landing } from "./Landing/Landing";
+export { default as MentorVolunteer } from "./MentorVolunteer/MentorVolunteer";

apps/site/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 
+import water from "./water.png";
 import { Layout } from "@/components/dom/Layout";
 
 export const metadata: Metadata = {
@@ -16,7 +17,12 @@ export default function RootLayout({
 }) {
 	return (
 		<html lang="en">
-			<body className="overflow-y-hidden overflow-x-hidden">
+			<body
+				style={{
+					backgroundImage: `url(${water.src})`,
+				}}
+				className="overflow-x-hidden bg-top bg-repeat-y bg-[length:100%]"
+			>
 				{/* reference: https://github.com/pmndrs/react-three-next */}
 				<Layout>{children}</Layout>
 			</body>

apps/site/src/lib/components/Button/Button.module.css

@@ -12,6 +12,9 @@
 	transition:
 		filter 0.1s ease,
 		box-shadow 0.1s ease;
+	display: block;
+	width: max-content;
+	margin: 0 auto;
 
 	&:hover {
 		box-shadow: 0px 0px 20px #fffce2;

apps/site/src/lib/components/Button/Button.tsx

@@ -1,21 +1,24 @@
+import type { ComponentProps } from "react";
+import Link from "next/link";
 import styles from "./Button.module.css";
+import clsx from "clsx";
 
 interface ButtonProps {
 	text: string;
-	href?: string;
+	href?: ComponentProps<typeof Link>["href"];
 }
 
 const Button: React.FC<ButtonProps> = ({ text, href }) => {
 	if (href) {
 		return (
-			<a
+			<Link
 				href={href}
 				target="_blank"
 				rel="noopener noreferrer"
-				className={styles.button + " font-body"}
+				className={clsx(styles.button, "font-body")}
 			>
 				{text}
-			</a>
+			</Link>
 		);
 	}
 	return (