Set up Home page content including Landing

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;

apps/site/src/lib/styles/_zothacks-theme.scss

@@ -1,5 +1,10 @@
 // Common variables for site theme consistency
 
+// import bootstrap scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
 // colors
 $white: #fafaff; // Paper Background color
 $beige: #faf4ea;

apps/site/src/views/Landing/Landing.tsx

@@ -1,9 +1,37 @@
-import "./Landing.module.scss";
+"use client";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+
+import ApplyButton from "./components/ApplyButton/ApplyButton";
+import AboutSection from "./components/AboutSection/AboutSection";
+import MentorSection from "./components/MentorSection/MentorSection";
+import SponsorSection from "./components/SponsorSection/SponsorSection";
+import FAQSection from "./components/FAQSection/FAQSection";
+import styles from "./Landing.module.scss";
 
 export default function Landing() {
 	return (
 		<main>
-			<h1>ZotHacks 2023</h1>
+			<Container className="justify-content-center text-center">
+				<Row>
+					<h1>ZotHacks 2023</h1>
+				</Row>
+				<Row>
+					<ApplyButton />
+				</Row>
+				<Row>
+					<AboutSection />
+				</Row>
+				<Row>
+					<MentorSection />
+				</Row>
+				<Row>
+					<SponsorSection />
+				</Row>
+				<Row>
+					<FAQSection />
+				</Row>
+			</Container>
 		</main>
 	);
 }

apps/site/src/views/Landing/components/AboutSection/AboutSection.tsx

@@ -0,0 +1,3 @@
+export default function AboutSection() {
+	return <></>;
+}

apps/site/src/views/Landing/components/ApplyButton/ApplyButton.module.scss

@@ -0,0 +1,33 @@
+@use "bootstrap-utils" as utils;
+
+.applyButtonContainer {
+	position: relative;
+}
+
+.applyButton {
+	position: relative;
+	transform: skew(-30deg);
+	height: 80px;
+	width: 250px;
+	margin: 0px;
+	border: none;
+	background-color: utils.$yellow;
+	transition: all 0.1s ease;
+
+	&:hover {
+		border: black solid 6px;
+		background-color: utils.$yellow;
+
+		h2:nth-of-type(1) {
+			text-decoration: underline;
+		}
+	}
+}
+
+.applyButtonText {
+	color: black;
+	position: absolute;
+	top: 50%;
+	left: 55%;
+	transform: skew(30deg) translate(-50%, -50%);
+}

apps/site/src/views/Landing/components/ApplyButton/ApplyButton.tsx

@@ -0,0 +1,16 @@
+import styles from "./ApplyButton.module.scss";
+
+import Button from "react-bootstrap/Button";
+
+export default function ApplyButton() {
+	return (
+		<div className={styles.applyButtonContainer}>
+			<Button
+				className={styles.applyButton}
+				href="https://hack.ics.uci.edu/" // TODO Change to application site link
+			>
+				<h2 className={styles.applyButtonText}>Apply!</h2>
+			</Button>
+		</div>
+	);
+}

apps/site/src/views/Landing/components/FAQSection/FAQSection.tsx

@@ -0,0 +1,3 @@
+export default function FAQSection() {
+	return <></>;
+}

apps/site/src/views/Landing/components/MentorSection/MentorSection.tsx

@@ -0,0 +1,3 @@
+export default function MentorSection() {
+	return <></>;
+}

apps/site/src/views/Landing/components/SponsorSection/SponsorSection.tsx

@@ -0,0 +1,3 @@
+export default function SponsorSection() {
+	return <></>;
+}