Merge branch 'main' of https://github.com/HackAtUCI/zothacks-site int…

…o footer
HackAtUCI · Oct 5, 2024 · ae6e150 · ae6e150
2 parents 905b2e6 + 2f9f05e
commit ae6e150
Show file tree

Hide file tree

Showing 24 changed files with 596 additions and 384 deletions.
diff --git a/apps/site/next.config.js b/apps/site/next.config.js
@@ -10,12 +10,12 @@ const nextConfig = {
 		return [
 			{
 				source: "/apply",
-				destination: "https://forms.gle/nxRU44y9Gd5mrmXUA",
+				destination: "https://forms.gle/2vZ1pqNWk27qZc236",
 				permanent: true,
 			},
 			{
 				source: "/mentor",
-				destination: "https://forms.gle/fwWJtsQ3GXQFGjS47",
+				destination: "https://forms.gle/RBJ6RL1LBpmGfk3w6",
 				permanent: true,
 			},
 		];

diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx
@@ -2,7 +2,7 @@ export const revalidate = 60;
 
 import Landing from "./sections/Landing";
 import Intro from "./sections/Intro";
-import Mentor from "./sections/Mentor";
+import GetInvolved from "./sections/GetInvolved";
 import Sponsors from "./sections/Sponsors";
 import FAQ from "./sections/FAQ";
 import Footer from "../../components/Footer/Footer";
@@ -17,7 +17,9 @@ const Home = () => {
 			<Mentor />
 			<Sponsors />
 			<FAQ /> */}
-			<Footer />
+			<GetInvolved />
+			{/* <Sponsors /> */}
+			{/* <FAQ /> */}
 		</div>
 	);
 };

diff --git a/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.module.scss b/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.module.scss
@@ -0,0 +1,155 @@
+@use "zothacks-theme" as theme;
+@use "bootstrap-utils" as bootstrap;
+
+$text-font-weight: 600;
+$text-font-size: 1.5rem;
+$border-radius: 14px;
+$speech-padding: 20px;
+$speech-shadow: 0 10px 0 rgba(1, 57, 70, 0.2);
+
+@mixin speechBubble($bg-color, $border-color) {
+	background-color: $bg-color;
+	border: 6px solid $border-color;
+	border-radius: $border-radius;
+	padding: $speech-padding;
+	font-weight: $text-font-weight;
+	font-size: $text-font-size;
+	text-align: center;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		padding: 32px 48px;
+		text-align: left;
+	}
+}
+
+@mixin boxShadow {
+	box-shadow: $speech-shadow;
+}
+
+.container {
+	padding-top: 0 !important;
+}
+
+.headingText {
+	color: theme.$white;
+	margin-bottom: 48px;
+	font-weight: $text-font-weight;
+}
+
+.anteaterContainerLeft,
+.anteaterContainerRight {
+	display: none;
+	height: 187px;
+	width: 136px;
+	z-index: 4;
+	@include bootstrap.media-breakpoint-up(md) {
+		display: block;
+		position: relative;
+	}
+}
+
+.anteaterContainerLeft {
+	@include bootstrap.media-breakpoint-up(md) {
+		left: -32px;
+		top: -32px;
+	}
+}
+
+.anteaterContainerRight {
+	@include bootstrap.media-breakpoint-up(md) {
+		top: -64px;
+		left: 48px;
+		margin-left: auto;
+	}
+}
+
+.anteaterImage {
+	&:hover {
+		transform: scale(1.05);
+		animation: rotateAnimation 0.7s ease-in-out 1;
+	}
+
+	height: 187px;
+	width: 136px;
+	z-index: 5;
+	transition: transform 0.5s ease-in-out;
+}
+
+@keyframes rotateAnimation {
+	0%,
+	100% {
+		transform: scale(1.05) rotate(0deg);
+	}
+	33% {
+		transform: scale(1.05) rotate(-7deg);
+	}
+	66% {
+		transform: scale(1.05) rotate(7deg);
+	}
+}
+
+.speechSectionLeft,
+.speechSectionRight {
+	margin-bottom: 20px;
+	position: relative;
+}
+
+.speechSectionRight {
+	@include bootstrap.media-breakpoint-up(md) {
+		top: -230px;
+	}
+}
+
+.speechBubbleOuterLeft,
+.speechBubbleOuterRight {
+	position: relative;
+	background-color: theme.$white;
+	border-radius: 18px;
+	padding: 4px;
+	@include boxShadow;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		width: 65%;
+	}
+}
+
+.speechBubbleOuterLeft {
+	z-index: 2;
+	@include bootstrap.media-breakpoint-up(md) {
+		margin-left: 90px;
+	}
+}
+
+.speechBubbleOuterRight {
+	z-index: 1;
+	@include bootstrap.media-breakpoint-up(md) {
+		margin-left: auto;
+		margin-right: 90px;
+	}
+}
+
+.speechBubbleLeft {
+	@include speechBubble(theme.$white, theme.$black);
+}
+
+.speechBubbleRight {
+	@include speechBubble(theme.$light-green, theme.$black);
+}
+
+.applyButton {
+	background-color: theme.$purple;
+	color: theme.$white;
+	border: 0px;
+	padding: 4px 24px;
+	font-weight: $text-font-weight;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		padding: 4px 32px;
+	}
+
+	&::before {
+		background-color: theme.$purple;
+		color: theme.$white;
+		padding: 10px;
+	}
+}
diff --git a/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.tsx b/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.tsx
@@ -0,0 +1,65 @@
+"use client";
+import Container from "react-bootstrap/Container";
+import Button from "react-bootstrap/Button";
+import anteater_left from "@/assets/images/involved_anteater_left.png";
+import anteater_right from "@/assets/images/involved_anteater_right.png";
+import styles from "./GetInvolved.module.scss";
+
+const GetInvolved = () => {
+	const sectionHeading = <h2 className={styles.headingText}>GET INVOLVED</h2>;
+	const leftBubbleText = <p>Want to develop your first project?</p>;
+	const rightBubbleText = (
+		<p>Otherwise, if you have some experience under your belt,</p>
+	);
+	const applyLink = (
+		<Button href="/apply" type="button" className={styles.applyButton}>
+			Apply as a Hacker
+		</Button>
+	);
+
+	const mentorLink = (
+		<Button href="/mentor" type="button" className={styles.applyButton}>
+			Apply as a Mentor
+		</Button>
+	);
+
+	return (
+		<Container className={styles.container} as="section">
+			{sectionHeading}
+			<div>
+				<div className={styles.speechSectionLeft}>
+					<div className={styles.speechBubbleOuterLeft}>
+						<div className={styles.speechBubbleLeft}>
+							{leftBubbleText}
+							{applyLink}
+						</div>
+					</div>
+					<div className={styles.anteaterContainerLeft}>
+						<img
+							className={styles.anteaterImage}
+							src={anteater_left.src}
+							alt="A cartoon anteater sitting on a ring buoy coding"
+						/>
+					</div>
+				</div>
+				<div className={styles.speechSectionRight}>
+					<div className={styles.speechBubbleOuterRight}>
+						<div className={styles.speechBubbleRight}>
+							{rightBubbleText}
+							{mentorLink}
+						</div>
+					</div>
+					<div className={styles.anteaterContainerRight}>
+						<img
+							className={styles.anteaterImage}
+							src={anteater_right.src}
+							alt="A cartoon anteater captain sitting on a ring buoy"
+						/>
+					</div>
+				</div>
+			</div>
+		</Container>
+	);
+};
+
+export default GetInvolved;
diff --git a/apps/site/src/app/(home)/sections/GetInvolved/index.ts b/apps/site/src/app/(home)/sections/GetInvolved/index.ts
@@ -0,0 +1 @@
+export { default } from "./GetInvolved";
diff --git a/apps/site/src/app/(home)/sections/Intro/Intro.module.scss b/apps/site/src/app/(home)/sections/Intro/Intro.module.scss
@@ -1,57 +1,57 @@
 @use "bootstrap-utils" as bootstrap;
 
-.intro {
-	@include bootstrap.padding(10rem 0.5rem);
-	margin-left: 10px;
-	margin-right: 10px;
-
-	background-image: url("~@/assets/images/index-card-mobile.svg");
-	background-size: cover;
-	background-position: top;
-	background-repeat: no-repeat;
-	position: relative;
+.description {
 	text-align: center;
-	box-shadow:
-		4px 4px 5px 4px rgba(0, 0, 0, 0.2),
-		-1px -1px 8px 4px rgba(0, 0, 0, 0.2);
+	font-size: 1rem;
 
-	h2 {
-		@include bootstrap.margin-bottom(3rem);
+	@include bootstrap.media-breakpoint-up(sm) {
+		font-size: 1.5rem;
 	}
+}
+
+.header {
+	font-size: 1.25rem;
+	font-weight: 600;
 
 	@include bootstrap.media-breakpoint-up(sm) {
-		@include bootstrap.padding(8rem 4rem);
-		background-image: url("~@/assets/images/index-card.svg");
-		background-size: 100% 100%;
-		box-shadow: none;
+		font-size: 2rem;
 	}
 }
 
-.pin {
-	position: absolute;
-	top: -12%;
-	left: 45%;
-	width: auto;
+.intro {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	max-width: 90vw;
+	margin-top: 3vw;
+
+	@media screen and (min-width: 400px) {
+		margin-top: 12.5vw;
+	}
 
-	@include bootstrap.media-breakpoint-down(xl) {
-		left: 45%;
+	@include bootstrap.media-breakpoint-up(sm) {
+		margin-top: 15vw;
 	}
-	@include bootstrap.media-breakpoint-down(lg) {
-		left: 40%;
+
+	@media screen and (min-width: 650px) {
+		margin-top: 20vw;
 	}
-	@include bootstrap.media-breakpoint-down(md) {
-		left: 35%;
+
+	@include bootstrap.media-breakpoint-up(md) {
+		margin-top: 1vw;
 	}
-}
 
-.hackDoodle {
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	transform: translate(-25%, 50%);
-	width: auto;
+	@media screen and (min-width: 850px) {
+		margin-top: 3vw;
+	}
+
+	@include bootstrap.media-breakpoint-up(lg) {
+		max-width: 80vw;
+		margin-top: 8vw;
+	}
 
-	@include bootstrap.media-breakpoint-down(lg) {
-		display: none;
+	@include bootstrap.media-breakpoint-up(xxl) {
+		max-width: 75vw;
+		margin-top: 15vw;
 	}
 }