Set up about section (#17)

* refactor: landing to flex layout

* feat: add className prop to Button

* feat: background and tailwind refactoring

* feat: override default tailwind sans font

* feat: about section

* fix: use water jpg instead of png

* fix: responsiveness classes

* fix: use max-width instead of width classes

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

@@ -1,4 +1,4 @@
-import { Landing, MentorVolunteer } from "./sections";
+import { About, Landing, MentorVolunteer } from "./sections";
 
 export default function Home() {
 	// Show landing section only if still in maintenance,
@@ -8,6 +8,7 @@ export default function Home() {
 	) : (
 		<>
 			<Landing />
+			<About />
 			<MentorVolunteer />
 		</>
 	);

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

@@ -0,0 +1,3 @@
+.statistic {
+	color: #ffda7b;
+}

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

@@ -0,0 +1,67 @@
+import Image from "next/image";
+import Lantern from "@/lib/components/Lantern/Lantern";
+import koiJump from "@/assets/images/koi-jump.png";
+import styles from "./About.module.css";
+
+const About = () => {
+	return (
+		<>
+			<section className="container md mx-auto text-center my-14 max-w-sm sm:max-w-lg xl:max-w-screen-md relative">
+				<Lantern
+					width={300}
+					height={300}
+					className="lg:hidden mx-auto"
+				/>
+				<Lantern
+					width={300}
+					height={300}
+					className="absolute hidden lg:block"
+					style={{ top: "30%", left: "-45%" }}
+				/>
+				<Lantern
+					width={350}
+					height={350}
+					className="absolute hidden lg:block"
+					style={{ top: "75%", right: "-50%" }}
+				/>
+				<div className="text-2xl lg:text-3xl mb-5">
+					<h2>
+						<span className={styles.statistic}>36</span> Hours
+					</h2>
+					<h2>
+						<span className={styles.statistic}>500+</span> Hackers
+					</h2>
+					<h2>
+						<span className={styles.statistic}>$10,000</span> in
+						Prizes
+					</h2>
+				</div>
+				<h3 className="text-xl lg:text-2xl mb-5">
+					Create + Connect + Inspire
+				</h3>
+				<p>
+					IrvineHacks is the largest collegiate hackathon in Orange
+					County and we continue expanding and improving our event
+					every year. Our focus? – Enhance the community around us by
+					giving students the platform to unleash their creativity in
+					an environment of forward thinking individuals.
+				</p>
+				<p>
+					This year, IrvineHacks will take place the weekend of
+					January 26th to 28th. The event will be 100% in-person
+					during the day (not overnight). Free workshops, socials,
+					food, and swag will be provided!
+				</p>
+			</section>
+			<Image
+				src={koiJump}
+				width="150"
+				height="150"
+				alt="Koi fish"
+				className="mx-auto"
+			/>
+		</>
+	);
+};
+
+export default About;

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

@@ -1,22 +1,3 @@
-.landingSection {
-	background-image: url("~@/assets/backgrounds/landing-background.jpg");
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: cover;
-	position: relative;
-	min-height: 100vh;
-	min-width: 100vw;
-	overflow-x: hidden;
-}
-
-.landingGroup {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	text-align: center;
-}
-
 .fogLeft,
 .fogRight {
 	animation-delay: 1.5s;

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

@@ -8,26 +8,47 @@ import { View } from "@/components/canvas/View";
 import Button from "@/lib/components/Button/Button";
 import Fireflies from "../../components/Fireflies";
 
+import landingBackground from "@/assets/backgrounds/landing-background.jpg";
 import fogLeft from "@/assets/images/fog-left.png";
 import fogRight from "@/assets/images/fog-right.png";
 
 import styles from "./Landing.module.css";
 
 const Landing = () => {
 	return (
-		<section className={styles.landingSection}>
+		<section
+			style={{
+				backgroundImage: `url(${landingBackground.src})`,
+			}}
+			className="bg-cover bg-no-repeat bg-center"
+		>
 			<View className="absolute w-full h-full">
 				<Suspense fallback={null}>
 					<Fireflies />
 					<PerspectiveCamera makeDefault position={[0.1, 0.1, 0.6]} />
 				</Suspense>
 			</View>
-			<Image src={fogLeft} alt="Fog" className={styles.fogLeft} fill />
-			<Image src={fogRight} alt="Fog" className={styles.fogRight} fill />
-			<div className={styles.landingGroup}>
-				<h1 className="font-display">IrvineHacks 2024</h1>
-				<p className="font-display">January 26&ndash;28</p>
+			<div className="flex flex-col justify-center items-center min-h-screen text-center overflow-x-hidden relative">
+				<Image
+					src={fogLeft}
+					alt="Fog"
+					className={styles.fogLeft}
+					fill
+				/>
+				<Image
+					src={fogRight}
+					alt="Fog"
+					className={styles.fogRight}
+					fill
+				/>
+				<h1 className="font-display text-4xl md:text-5xl font-bold mb-2">
+					IrvineHacks 2024
+				</h1>
+				<p className="font-display text-2xl md:text-3xl">
+					January 26&ndash;28
+				</p>
 				<Button
+					className="z-10"
 					text="Stay updated"
 					href="https://uci.us13.list-manage.com/subscribe?u=5976872928cd5681fbaca89f6&id=93333e11eb"
 				/>

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

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

apps/site/src/app/globals.css

@@ -13,20 +13,8 @@
 
 body {
 	color: var(--color-cream);
-	background-color: var(--color-dark-blue);
-}
-
-h1 {
-	font-size: calc(30px + 2vw);
-	font-weight: 700;
 }
 
 p {
-	font-size: calc(15px + 1.5vw);
 	margin-bottom: 1rem;
 }
-
-a {
-	font-size: calc(13px + 1vw);
-	font-weight: 700;
-}

apps/site/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
+import water from "@/assets/backgrounds/water.jpg";
 import "./globals.css";
 
-import water from "./water.png";
 import { Layout } from "@/components/dom/Layout";
 
 export const metadata: Metadata = {

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

@@ -8,6 +8,8 @@
 	box-shadow: 0px 0px 20px rgba(255, 252, 226, 0.5);
 	border-radius: 15px;
 	color: var(--color-brown);
+	font-size: calc(13px + 1vw);
+	font-weight: 700;
 	padding: 0.55rem 1.25rem;
 	transition:
 		filter 0.1s ease,

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

@@ -5,17 +5,18 @@ import clsx from "clsx";
 
 interface ButtonProps {
 	text: string;
+	className?: string;
 	href?: ComponentProps<typeof Link>["href"];
 }
 
-const Button: React.FC<ButtonProps> = ({ text, href }) => {
+const Button: React.FC<ButtonProps> = ({ text, href, className }) => {
 	if (href) {
 		return (
 			<Link
 				href={href}
 				target="_blank"
 				rel="noopener noreferrer"
-				className={clsx(styles.button, "font-body")}
+				className={clsx(styles.button, "font-body", className)}
 			>
 				{text}
 			</Link>

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

@@ -0,0 +1,31 @@
+import Image from "next/image";
+
+import lantern from "@/assets/images/lantern.png";
+import React from "react";
+
+interface LanternProps {
+	width: number;
+	height: number;
+	className?: string;
+	style?: React.CSSProperties;
+}
+
+const Lantern: React.FC<LanternProps> = ({
+	width,
+	height,
+	className,
+	style,
+}) => {
+	return (
+		<Image
+			src={lantern}
+			width={width}
+			height={height}
+			alt="Lantern"
+			className={className}
+			style={style}
+		/>
+	);
+};
+
+export default Lantern;

apps/site/tailwind.config.ts

@@ -16,6 +16,7 @@ const config: Config = {
 			fontFamily: {
 				display: ["Alegreya"],
 				body: ["Mulish"],
+				sans: ["Mulish"],
 			},
 		},
 	},