diff --git a/apps/site/next.config.js b/apps/site/next.config.js
index 6e1c1df1..627d8696 100644
--- 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
index 00e459ea..ed9a4c01 100644
--- 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 = () => {
*/}
-
+
+ {/* */}
+ {/* */}
);
};
diff --git a/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.module.scss b/apps/site/src/app/(home)/sections/GetInvolved/GetInvolved.module.scss
new file mode 100644
index 00000000..25bfe2bc
--- /dev/null
+++ 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
new file mode 100644
index 00000000..df281ca4
--- /dev/null
+++ 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 =
GET INVOLVED ;
+ const leftBubbleText = Want to develop your first project?
;
+ const rightBubbleText = (
+ Otherwise, if you have some experience under your belt,
+ );
+ const applyLink = (
+
+ Apply as a Hacker
+
+ );
+
+ const mentorLink = (
+
+ Apply as a Mentor
+
+ );
+
+ return (
+
+ {sectionHeading}
+
+
+
+
+ {leftBubbleText}
+ {applyLink}
+
+
+
+
+
+
+
+
+
+ {rightBubbleText}
+ {mentorLink}
+
+
+
+
+
+
+
+
+ );
+};
+
+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
new file mode 100644
index 00000000..064f25c5
--- /dev/null
+++ 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
index 5598c83d..2f07f494 100644
--- 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;
}
}
diff --git a/apps/site/src/app/(home)/sections/Intro/Intro.tsx b/apps/site/src/app/(home)/sections/Intro/Intro.tsx
index 7ef43765..e38e76a5 100644
--- a/apps/site/src/app/(home)/sections/Intro/Intro.tsx
+++ b/apps/site/src/app/(home)/sections/Intro/Intro.tsx
@@ -1,58 +1,16 @@
-"use client";
-
-import Image from "next/image";
-import Container from "react-bootstrap/Container";
-
-import { motion, cubicBezier } from "framer-motion";
-import pin from "@/assets/images/index-card-pin.svg";
-import hackDoodle from "@/assets/images/hack-doodle.png";
-
import styles from "./Intro.module.scss";
-const Intro = () => {
+export default function Intro() {
return (
-
-
-
-
What is ZotHacks?
-
- ZotHacks is a beginner-friendly hackathon where students with minimal
- computer science experience will learn to build their first CS
- project. Through ZotHacks, we introduce these students to the world of
- hackathons and web development by providing technical workshops,
- strong mentorship, and free food!
-
-
-
-
+
+
What is ZotHacks?
+
+ ZotHacks is UC Irvine’s beginner-friendly hackathon, where students with
+ minimal computer science experience will learn to build their first CS
+ project. Through ZotHacks, we introduce these students to the world of
+ hackathons and web development by providing technical workshops, strong
+ mentorship, and free food!
+
+
);
-};
-
-export default Intro;
+}
diff --git a/apps/site/src/app/(home)/sections/Landing/ApplyButton.module.scss b/apps/site/src/app/(home)/sections/Landing/ApplyButton.module.scss
index 94c5a74b..d908b98b 100644
--- a/apps/site/src/app/(home)/sections/Landing/ApplyButton.module.scss
+++ b/apps/site/src/app/(home)/sections/Landing/ApplyButton.module.scss
@@ -1,38 +1,42 @@
@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
- );
- --bs-btn-font-weight: bold;
- --bs-btn-border-width: 4px;
-
- @include bootstrap.font-size(bootstrap.$h4-font-size);
-
- transform: skew($skew-amount);
- // unskew children
- > * {
- width: max-content;
- display: block;
- transform: skew(-$skew-amount);
+
+.apply {
+ width: 45vw;
+ transition-duration: 200ms;
+
+ &:hover {
+ scale: 1.1;
+ }
+
+ @include bootstrap.media-breakpoint-up(sm) {
+ width: 35vw;
+ }
+
+ @include bootstrap.media-breakpoint-up(md) {
+ width: 30vw;
+ }
+
+ @include bootstrap.media-breakpoint-up(lg) {
+ width: 25vw;
}
+}
- box-shadow:
- 2px 3px 8px rgba(black, 0.2),
- 4px 6px 16px rgba(black, 0.2);
+.outline {
+ stroke: white;
+ transition: stroke 200ms ease-in-out;
+}
- &:hover,
- &:focus {
- text-decoration: underline;
- box-shadow:
- 2px 3px 16px rgba(black, 0.3),
- 4px 6px 32px rgba(black, 0.3);
+svg:hover {
+ .outline {
+ stroke: yellow;
}
+
+ .text {
+ fill: yellow;
+ }
+}
+
+.text {
+ fill: white;
+ transition: fill 200ms ease;
}
diff --git a/apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx b/apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx
index d3256300..5789b1a6 100644
--- a/apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx
+++ b/apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx
@@ -1,32 +1,63 @@
-import Button from "react-bootstrap/Button";
-import StickerPosition from "@/components/Sticker/StickerPosition";
-import { HeartSticker } from "@/components/Sticker/Stickers";
+import Link from "next/link";
+
+import { motion } from "framer-motion";
import styles from "./ApplyButton.module.scss";
+const ApplyButtonIcon = () => {
+ return (
+
+
+
+
+
+
+
+ );
+};
+
const ApplyButton = () => {
return (
- //
- //
-
- Applications have closed!
-
+
+
+
+
);
};
diff --git a/apps/site/src/app/(home)/sections/Landing/Landing.module.scss b/apps/site/src/app/(home)/sections/Landing/Landing.module.scss
index c6481a77..b23c8a9e 100644
--- a/apps/site/src/app/(home)/sections/Landing/Landing.module.scss
+++ b/apps/site/src/app/(home)/sections/Landing/Landing.module.scss
@@ -1,15 +1,26 @@
+@use "bootstrap-utils" as bootstrap;
+
.landing {
- padding-top: 121.27%;
- background-image: url("~@/assets/background/ocean-sand-background.svg");
+ padding-top: 216.82%;
+ background-image: url("~@/assets/background/ocean-sand-mobile-background.svg");
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
-
text-align: center;
+
+ @include bootstrap.media-breakpoint-up(md) {
+ padding-top: 121.27%;
+ background-image: url("~@/assets/background/ocean-sand-background.svg");
+ }
}
.title {
- margin-top: -190%;
+ position: absolute;
+ top: 27.5vw;
+
+ @include bootstrap.media-breakpoint-up(md) {
+ top: 14vw;
+ }
}
diff --git a/apps/site/src/app/(home)/sections/Landing/Landing.tsx b/apps/site/src/app/(home)/sections/Landing/Landing.tsx
index 5c4f959b..e54553ff 100644
--- a/apps/site/src/app/(home)/sections/Landing/Landing.tsx
+++ b/apps/site/src/app/(home)/sections/Landing/Landing.tsx
@@ -1,6 +1,7 @@
"use client";
import ApplyButton from "./ApplyButton";
import Title from "@/app/(home)/sections/Landing/Title";
+import Intro from "../Intro";
import styles from "./Landing.module.scss";
const Landing = () => {
@@ -8,6 +9,8 @@ const Landing = () => {
);
diff --git a/apps/site/src/app/(home)/sections/Landing/Title.module.scss b/apps/site/src/app/(home)/sections/Landing/Title.module.scss
index be1109fe..84255193 100644
--- a/apps/site/src/app/(home)/sections/Landing/Title.module.scss
+++ b/apps/site/src/app/(home)/sections/Landing/Title.module.scss
@@ -1,4 +1,29 @@
+@use "bootstrap-utils" as bootstrap;
+@use "zothacks-theme" as theme;
+
.title {
- width: clamp(0px, 40vw, 40vw);
- height: clamp(0px, 14.53vw, 14.53vw);
+ width: 70vw;
+ height: 25.42vw;
+
+ @include bootstrap.media-breakpoint-up(md) {
+ width: 40vw;
+ height: 14.53vw;
+ }
+}
+
+.date {
+ color: theme.$white;
+ font-size: 1.5rem;
+ font-weight: 500;
+ margin-top: 8px;
+ margin-bottom: 10px;
+
+ @include bootstrap.media-breakpoint-up(md) {
+ font-size: 2rem;
+ margin-bottom: 30px;
+ }
+
+ @include bootstrap.media-breakpoint-up(lg) {
+ font-size: 2.5rem;
+ }
}
diff --git a/apps/site/src/app/(home)/sections/Landing/Title.tsx b/apps/site/src/app/(home)/sections/Landing/Title.tsx
index 9d8820bd..1b8f5c54 100644
--- a/apps/site/src/app/(home)/sections/Landing/Title.tsx
+++ b/apps/site/src/app/(home)/sections/Landing/Title.tsx
@@ -15,9 +15,10 @@ export default function Title() {
>
+ November 1-3, 2024
);
}
diff --git a/apps/site/src/app/(home)/sections/Mentor/Mentor.module.scss b/apps/site/src/app/(home)/sections/Mentor/Mentor.module.scss
deleted file mode 100644
index d4124c44..00000000
--- a/apps/site/src/app/(home)/sections/Mentor/Mentor.module.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-@use "zothacks-theme" as theme;
-@use "bootstrap-utils" as bootstrap;
-
-.applySticky {
- @include bootstrap.rfs(400px, height);
- @include bootstrap.rfs(15%, margin-left);
- background-image: url("~@/assets/images/MentorStickyYellow.svg");
- background-repeat: no-repeat;
- background-size: contain;
- filter: drop-shadow(5px 5px 5px lightgray);
- padding-top: 3rem;
- padding-left: 5rem;
- padding-right: 5rem;
- padding-bottom: 8rem;
- position: relative;
- z-index: 1;
-
- h2 {
- @include bootstrap.font-size(2rem);
- @include bootstrap.padding(2rem);
- }
-
- a {
- @include bootstrap.font-size(1.25rem);
- position: absolute;
- bottom: 10%;
- left: 6%;
- transform: rotate(7.5deg) translateZ(0);
- }
-
- p {
- display: none;
- }
-
- @include bootstrap.media-breakpoint-down(lg) {
- background-image: none;
- background-color: theme.$sticky-yellow;
- background-size: contain;
- margin-left: 0;
- height: auto;
- padding: 0;
- box-shadow: 0 3px 5px 3px lightgray;
-
- .applyStickyContent {
- @include bootstrap.padding(3rem);
-
- h2 {
- padding: 0;
- }
- }
-
- a {
- display: none;
- }
-
- p {
- display: block;
- }
- }
-}
-
-.descSticky {
- background-image: url("~@/assets/images/MentorStickyGreen.svg");
- background-repeat: no-repeat;
- background-size: contain;
- background-position: 60%;
- filter: drop-shadow(5px 5px 5px lightgray);
- padding: 6rem;
- position: absolute;
- z-index: 0;
- top: 15%;
- left: 40%;
- width: 41.667%;
-
- p {
- @include bootstrap.padding(1rem);
- transform: rotate(-5deg);
- }
-
- a {
- display: none;
- }
-
- @include bootstrap.media-breakpoint-down(xxl) {
- top: 10%;
- left: 47.5%;
- }
-
- @include bootstrap.media-breakpoint-down(xl) {
- width: 50%;
- padding: 5rem;
- }
-
- @include bootstrap.media-breakpoint-down(lg) {
- width: 300px;
- height: 300px;
- top: auto;
- left: auto;
- bottom: -45%;
- right: 0;
-
- a {
- @include bootstrap.font-size(1.2rem);
- display: block;
- position: absolute;
- bottom: 2.5%;
- left: 7.5%;
- z-index: 2;
- transform: rotate(-5deg) translateZ(0);
- }
- p {
- display: none;
- }
- }
-
- @include bootstrap.media-breakpoint-down(md) {
- bottom: -30%;
- }
-
- @include bootstrap.media-breakpoint-down(sm) {
- bottom: -27.5%;
- }
-}
-
-.tape {
- position: absolute;
- top: 0;
- left: 50%;
- transform: translate(-50%, -50%);
-
- @include bootstrap.media-breakpoint-up(lg) {
- display: none;
- }
-}
diff --git a/apps/site/src/app/(home)/sections/Mentor/Mentor.tsx b/apps/site/src/app/(home)/sections/Mentor/Mentor.tsx
deleted file mode 100644
index 51aca193..00000000
--- a/apps/site/src/app/(home)/sections/Mentor/Mentor.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-"use client";
-import { motion, cubicBezier, Variants } from "framer-motion";
-import Image from "next/image";
-import Col from "react-bootstrap/Col";
-import Container from "react-bootstrap/Container";
-
-import BookmarkLink from "@/components/BookmarkLink/BookmarkLink";
-import tape from "@/assets/images/tape.svg";
-
-import styles from "./Mentor.module.scss";
-
-const MENTOR_APP_URL = "/mentor";
-
-const variant: Variants = {
- initial: {
- scale: 1.1,
- opacity: 0,
- rotateX: 20,
- translateY: 30,
- },
- animate: {
- scale: 1,
- rotateX: 0,
- opacity: 1,
- translateY: 0,
- transition: {
- duration: 0.85,
- staggerChildren: 0.1,
- ease: cubicBezier(0.33, 1, 0.68, 1),
- },
- },
-};
-
-const Mentor = () => {
- const mentorHeader = (
- Interested in becoming a mentor?
- );
- const mentorDescription = (
-
- Have a knack for innovation? Interested in inspiring the next generation
- of developers? Mentor applications for ZotHacks 2023 have closed, but
- please keep an eye out for future events!
-
- );
- const applyLink = (
-
- Applications have closed.
-
- );
-
- return (
-
-
-
-
-
-
- {mentorHeader}
- {mentorDescription}
-
- {applyLink}
-
-
- {mentorDescription}
- {applyLink}
-
-
-
-
- );
-};
-
-export default Mentor;
diff --git a/apps/site/src/app/(home)/sections/Mentor/index.ts b/apps/site/src/app/(home)/sections/Mentor/index.ts
deleted file mode 100644
index 3ff6c4f7..00000000
--- a/apps/site/src/app/(home)/sections/Mentor/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Mentor";
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
index dc56d6f6..97f22b7a 100644
--- a/apps/site/src/app/layout.tsx
+++ b/apps/site/src/app/layout.tsx
@@ -32,7 +32,7 @@ export default function RootLayout({
{/* */}
{children}
- {/* */}
+