diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx
index 4651f039..5cb9bd2f 100644
--- a/apps/site/src/app/(home)/page.tsx
+++ b/apps/site/src/app/(home)/page.tsx
@@ -12,8 +12,7 @@ const Home = () => {
return (
- {/*
-
+ {/*
*/}
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 8cfc0ac7..b23c8a9e 100644
--- a/apps/site/src/app/(home)/sections/Landing/Landing.module.scss
+++ b/apps/site/src/app/(home)/sections/Landing/Landing.module.scss
@@ -17,9 +17,10 @@
}
.title {
- margin-top: -355%;
+ position: absolute;
+ top: 27.5vw;
@include bootstrap.media-breakpoint-up(md) {
- margin-top: -190%;
+ 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 c416b830..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,5 @@
@use "bootstrap-utils" as bootstrap;
+@use "zothacks-theme" as theme;
.title {
width: 70vw;
@@ -9,3 +10,20 @@
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/layout.tsx b/apps/site/src/app/layout.tsx
index db1bef48..7234a29f 100644
--- a/apps/site/src/app/layout.tsx
+++ b/apps/site/src/app/layout.tsx
@@ -17,7 +17,7 @@ export const metadata: Metadata = {
};
const fredoka = Fredoka({
- weight: ["400", "700"],
+ weight: ["400", "600", "700"],
subsets: ["latin"],
variable: "--next-font-fredoka",
});
diff --git a/apps/site/src/assets/images/intro-apply-button.svg b/apps/site/src/assets/images/intro-apply-button.svg
new file mode 100644
index 00000000..efca344c
--- /dev/null
+++ b/apps/site/src/assets/images/intro-apply-button.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+