HackAtUCI · taesungh · Sep 18, 2023 · Sep 9, 2023 · Sep 11, 2023 · Sep 11, 2023
diff --git a/apps/site/next.config.js b/apps/site/next.config.js
@@ -1,11 +1,11 @@
-const path = require('path');
+const path = require("path");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	reactStrictMode: true,
 	sassOptions: {
-		includePaths: [path.join(__dirname, "src", "lib", "styles")]
-	}
+		includePaths: [path.join(__dirname, "src", "lib", "styles")],
+	},
 };
 
 module.exports = nextConfig;
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({
 			<FontProvider />
 			<body>
 				<NavBar />
-				{children}
+				<main>{children}</main>
 				<Footer />
 			</body>
 		</html>

diff --git a/apps/site/src/app/page.tsx b/apps/site/src/app/page.tsx
@@ -1 +1 @@
-export { Landing as default } from "@/views";
+export { Home as default } from "@/views";
diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
@@ -1,4 +1,5 @@
 @use "bootstrap-utils" as utils;
+@use "zothacks-theme" as theme;
 
 .nav {
 	position: sticky;
@@ -37,17 +38,17 @@
 
 .homeActive {
 	@extend .text;
-	color: utils.$green;
+	color: theme.$green;
 }
 
 .resourcesActive {
 	@extend .text;
-	color: utils.$blue;
+	color: theme.$blue;
 }
 
 .scheduleActive {
 	@extend .text;
-	color: utils.$navbar-red;
+	color: theme.$navbar-red;
 }
 
 @include utils.media-breakpoint-down(md) {

diff --git a/apps/site/src/lib/styles/_bootstrap-utils.scss b/apps/site/src/lib/styles/_bootstrap-utils.scss
@@ -1,8 +1,11 @@
-@import "./zothacks-theme";
-
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/variables-dark";
 @import "~bootstrap/scss/maps";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";
+
+// bootstrap overrides
+$font-family-base: var(--next-font-fuzzy-bubbles);
+$font-size-base: 1.25rem;
+$headings-font-weight: 700;
diff --git a/apps/site/src/lib/styles/_zothacks-theme.scss b/apps/site/src/lib/styles/_zothacks-theme.scss
@@ -15,8 +15,3 @@ $light-blue: #81deeb;
 $blue: #3902fd;
 $purple: #6600b6;
 $navbar-red: #ff0000;
-
-// bootstrap overrides
-$font-family-base: var(--next-font-fuzzy-bubbles);
-$font-size-base: 1.25rem;
-$headings-font-weight: 700;
diff --git a/apps/site/src/views/Home/Home.module.scss b/apps/site/src/views/Home/Home.module.scss
@@ -0,0 +1,17 @@
+@use "bootstrap-utils" as bootstrap;
+
+$container-padding: 6rem;
+
+.home {
+	h2 {
+		text-align: center;
+	}
+
+	:global {
+		section.container {
+			// responsive padding
+			@include bootstrap.padding-top($container-padding);
+			@include bootstrap.padding-bottom($container-padding);
+		}
+	}
+}
diff --git a/apps/site/src/views/Home/Home.tsx b/apps/site/src/views/Home/Home.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import Landing from "./sections/Landing/Landing";
+import About from "./sections/About/About";
+import Mentors from "./sections/Mentors/Mentors";
+import Sponsors from "./sections/Sponsors/Sponsors";
+import FAQ from "./sections/FAQ/FAQ";
+
+import styles from "./Home.module.scss";
+
+function Home() {
+	return (
+		<div className={styles.home}>
+			<Landing />
+			<About />
+			<Mentors />
+			<Sponsors />
+			<FAQ />
+		</div>
+	);
+}
+
+export default Home;
diff --git a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.module.scss b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.module.scss
@@ -0,0 +1,37 @@
+@use "bootstrap-utils" as bootstrap;
+@use "zothacks-theme" as theme;
+
+$highlighter: rgba(theme.$yellow, 0.7);
+$skew-amount: -30deg;
+
+.applyButton {
+	@include bootstrap.button-variant(
+		$highlighter,
+		$highlighter,
+		$hover-border: theme.$black,
+		$active-border: theme.$black
+	);
+	@include bootstrap.rfs(6rem, --bs-btn-padding-x);
+	--bs-btn-font-weight: bold;
+	--bs-btn-border-width: 4px;
+
+	@include bootstrap.font-size(bootstrap.$h2-font-size);
+
+	transform: skew($skew-amount);
+	// unskew children
+	> * {
+		transform: skew(-$skew-amount);
+	}
+
+	box-shadow:
+		2px 3px 8px rgba(black, 0.2),
+		4px 6px 16px rgba(black, 0.2);
+
+	&:hover,
+	&:focus {
+		text-decoration: underline;
+		box-shadow:
+			2px 3px 16px rgba(black, 0.3),
+			4px 6px 32px rgba(black, 0.3);
+	}
+}
diff --git a/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx b/apps/site/src/views/Home/components/ApplyButton/ApplyButton.tsx
@@ -0,0 +1,15 @@
+import Button from "react-bootstrap/Button";
+
+import styles from "./ApplyButton.module.scss";
+
+export default function ApplyButton() {
+	return (
+		<Button
+			className={styles.applyButton}
+			href="https://hack.ics.uci.edu/" // TODO: Change to application site link
+			variant=""
+		>
+			<div>Apply</div>
+		</Button>
+	);
+}
diff --git a/apps/site/src/views/Home/sections/About/About.tsx b/apps/site/src/views/Home/sections/About/About.tsx
@@ -0,0 +1,11 @@
+import Container from "react-bootstrap/Container";
+
+function About() {
+	return (
+		<Container as="section">
+			<h2>About</h2>
+		</Container>
+	);
+}
+
+export default About;
diff --git a/apps/site/src/views/Home/sections/FAQ/FAQ.tsx b/apps/site/src/views/Home/sections/FAQ/FAQ.tsx
@@ -0,0 +1,11 @@
+import Container from "react-bootstrap/Container";
+
+function FAQ() {
+	return (
+		<Container as="section">
+			<h2>FAQ</h2>
+		</Container>
+	);
+}
+
+export default FAQ;
diff --git a/apps/site/src/views/Home/sections/Landing/Landing.module.scss b/apps/site/src/views/Home/sections/Landing/Landing.module.scss
@@ -0,0 +1,10 @@
+.landing {
+	min-height: 62vh;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	text-align: center;
+}
diff --git a/apps/site/src/views/Home/sections/Landing/Landing.tsx b/apps/site/src/views/Home/sections/Landing/Landing.tsx
@@ -0,0 +1,14 @@
+import ApplyButton from "@/views/Home/components/ApplyButton/ApplyButton";
+
+import styles from "./Landing.module.scss";
+
+function Landing() {
+	return (
+		<div className={styles.landing}>
+			<h1>ZotHacks 2023</h1>
+			<ApplyButton />
+		</div>
+	);
+}
+
+export default Landing;
diff --git a/apps/site/src/views/Home/sections/Mentors/Mentors.tsx b/apps/site/src/views/Home/sections/Mentors/Mentors.tsx
@@ -0,0 +1,11 @@
+import Container from "react-bootstrap/Container";
+
+function Mentors() {
+	return (
+		<Container as="section">
+			<h2>Mentors</h2>
+		</Container>
+	);
+}
+
+export default Mentors;
diff --git a/apps/site/src/views/Home/sections/Sponsors/Sponsors.tsx b/apps/site/src/views/Home/sections/Sponsors/Sponsors.tsx
@@ -0,0 +1,11 @@
+import Container from "react-bootstrap/Container";
+
+function Sponsors() {
+	return (
+		<Container as="section">
+			<h2>Sponsors</h2>
+		</Container>
+	);
+}
+
+export default Sponsors;
diff --git a/apps/site/src/views/Landing/Landing.module.scss b/apps/site/src/views/Landing/Landing.module.scss
diff --git a/apps/site/src/views/Landing/Landing.tsx b/apps/site/src/views/Landing/Landing.tsx
diff --git a/apps/site/src/views/index.ts b/apps/site/src/views/index.ts
@@ -1,3 +1,3 @@
-export { default as Landing } from "./Landing/Landing";
+export { default as Home } from "./Home/Home";
 export { default as Resources } from "./Resources/Resources";
 export { default as Schedule } from "./Schedule/Schedule";