Get Involved (#153)

* feat: add get involved section header, speech bubbles, anteaters, and responsiveness * refactor: rename Mentor section to Involved * fix: change z-index property to allow mentor link to be clicked * fix: use theme colors and change indent to 4 spaces * feat: added shake and scale animations on anteater svgs * fix tweak shadow color * chore: remove old color definitions * fix: use png over raster svg * chore: rename header to heading * chore: change framer animations to native css animations and improve image alt text * fix: remove blue border from buttons * chore: nest button styles * chore: change link hrefs and remove framer import * shift container up * clean up css --------- Co-authored-by: Albert Wang <[email protected]>
HackAtUCI · Oct 4, 2024 · 22f8fd9 · 22f8fd9
1 parent c068417
commit 22f8fd9
Show file tree

Hide file tree

Showing 9 changed files with 225 additions and 227 deletions.
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";
 
@@ -12,9 +12,9 @@ const Home = () => {
 	return (
 		<div className={styles.home}>
 			<Landing />
-			{/* <Mentor />
-			<Sponsors />
-			<FAQ /> */}
+			<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/Mentor/Mentor.module.scss b/apps/site/src/app/(home)/sections/Mentor/Mentor.module.scss