feat: folder organization + Apply Button component

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

@@ -1,33 +0,0 @@
-@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/Landing.tsx

@@ -1,13 +1,12 @@
 "use client";
-// import ApplyButton from "@/assets/images/ApplyButton.svg";
-import Button from "react-bootstrap/Button";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 
-import AboutSection from "./AboutSection";
-import MentorSection from "./MentorSection";
-import SponsorSection from "./SponsorSection";
-import FAQSection from "./FAQSection";
+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() {
@@ -18,14 +17,7 @@ export default function Landing() {
 					<h1>ZotHacks 2023</h1>
 				</Row>
 				<Row>
-					<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>
+					<ApplyButton />
 				</Row>
 				<Row>
 					<AboutSection />

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>
+	);
+}