diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx index 5cb9bd2f..7a2b1938 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"; @@ -12,9 +12,9 @@ const Home = () => { return (
- {/* - - */} + + {/* */} + {/* */}
); }; 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 = ( + + ); + + const mentorLink = ( + + ); + + return ( + + {sectionHeading} +
+
+
+
+ {leftBubbleText} + {applyLink} +
+
+
+ A cartoon anteater sitting on a ring buoy coding +
+
+
+
+
+ {rightBubbleText} + {mentorLink} +
+
+
+ A cartoon anteater captain sitting on a ring buoy +
+
+
+ + ); +}; + +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/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/assets/images/involved_anteater_left.png b/apps/site/src/assets/images/involved_anteater_left.png new file mode 100644 index 00000000..48ef88d0 Binary files /dev/null and b/apps/site/src/assets/images/involved_anteater_left.png differ diff --git a/apps/site/src/assets/images/involved_anteater_right.png b/apps/site/src/assets/images/involved_anteater_right.png new file mode 100644 index 00000000..abef85bf Binary files /dev/null and b/apps/site/src/assets/images/involved_anteater_right.png differ