diff --git a/apps/site/src/assets/images/MentorStickyGreen.svg b/apps/site/src/assets/images/MentorStickyGreen.svg new file mode 100644 index 00000000..adc5b675 --- /dev/null +++ b/apps/site/src/assets/images/MentorStickyGreen.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/assets/images/MentorStickyYellow.svg b/apps/site/src/assets/images/MentorStickyYellow.svg new file mode 100644 index 00000000..7503e304 --- /dev/null +++ b/apps/site/src/assets/images/MentorStickyYellow.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/assets/images/YellowVertPost-it.png b/apps/site/src/assets/images/YellowVertPost-it.png new file mode 100644 index 00000000..dec94147 Binary files /dev/null and b/apps/site/src/assets/images/YellowVertPost-it.png differ diff --git a/apps/site/src/assets/images/bookmark.png b/apps/site/src/assets/images/bookmark.png new file mode 100644 index 00000000..22e81c9c Binary files /dev/null and b/apps/site/src/assets/images/bookmark.png differ diff --git a/apps/site/src/assets/images/bookmark_border.png b/apps/site/src/assets/images/bookmark_border.png new file mode 100644 index 00000000..9e7c4333 Binary files /dev/null and b/apps/site/src/assets/images/bookmark_border.png differ diff --git a/apps/site/src/assets/images/tape.svg b/apps/site/src/assets/images/tape.svg new file mode 100644 index 00000000..5c2fd1d7 --- /dev/null +++ b/apps/site/src/assets/images/tape.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/site/src/components/BookmarkLink/BookmarkLink.module.scss b/apps/site/src/components/BookmarkLink/BookmarkLink.module.scss new file mode 100644 index 00000000..c2820911 --- /dev/null +++ b/apps/site/src/components/BookmarkLink/BookmarkLink.module.scss @@ -0,0 +1,18 @@ +.bookmarkLink { + background-image: url("~@/assets/images/bookmark.png"); + background-repeat: no-repeat; + background-size: 100% 100%; + background-position: center; + text-decoration: none; + color: black; + padding-left: 2.5rem; + padding-right: 3rem; + transition: background-image 0.2s ease, font-weight 0.2s ease; + + &:hover { + background-image: url("~@/assets/images/bookmark_border.png"); + transition: background-image 0.2s ease, font-weight 0.2s ease; + color: black; + font-weight: bold; + } +} \ No newline at end of file diff --git a/apps/site/src/components/BookmarkLink/BookmarkLink.tsx b/apps/site/src/components/BookmarkLink/BookmarkLink.tsx new file mode 100644 index 00000000..50d4da26 --- /dev/null +++ b/apps/site/src/components/BookmarkLink/BookmarkLink.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import Button from "react-bootstrap/Button"; + +import styles from "./BookmarkLink.module.scss"; + +interface BookmarkLinkProps { + className?: string; + href: string; + children: React.ReactNode; +} + +export default function BookmarkLink({ + className, + href, + children, +}: BookmarkLinkProps) { + return ( + + ); +} diff --git a/apps/site/src/components/Intro/Intro.module.scss b/apps/site/src/components/Intro/Intro.module.scss index 60071e48..1bf96cf1 100644 --- a/apps/site/src/components/Intro/Intro.module.scss +++ b/apps/site/src/components/Intro/Intro.module.scss @@ -1,5 +1,4 @@ @use "bootstrap-utils" as bootstrap; -@use "zothacks-theme" as theme; .intro { background-image: url("~src/assets/images/index-card.png"); @@ -10,7 +9,7 @@ position: relative; text-align: center; - h1 { + h2 { margin-bottom: 70px; } diff --git a/apps/site/src/components/Intro/Intro.tsx b/apps/site/src/components/Intro/Intro.tsx index c05ca735..13be733f 100644 --- a/apps/site/src/components/Intro/Intro.tsx +++ b/apps/site/src/components/Intro/Intro.tsx @@ -14,7 +14,7 @@ export default function Intro() { height="100" alt="Index card pin" /> -

What is ZotHacks?

+

What is ZotHacks?

ZotHacks is a beginner-friendly hackathon where students with minimal computer science experience will learn to build their first CS project. diff --git a/apps/site/src/components/Mentor/Mentor.module.scss b/apps/site/src/components/Mentor/Mentor.module.scss new file mode 100644 index 00000000..21123510 --- /dev/null +++ b/apps/site/src/components/Mentor/Mentor.module.scss @@ -0,0 +1,102 @@ +@use "bootstrap-utils" as bootstrap; + +.applySticky { + background-image: url("~@/assets/images/MentorStickyYellow.svg"); + background-repeat: no-repeat; + background-size: contain; + padding-top: 3rem; + padding-left: 5rem; + padding-right: 5rem; + padding-bottom: 8rem; + margin-left: 22%; + position: relative; + height: 325px; + + h2 { + font-size: 1.8rem; + } + + a { + position: absolute; + bottom: 10%; + left: 5%; + transform: rotate(7.5deg); + } + + + @include bootstrap.media-breakpoint-down(xxl) { + & { + margin-left: 17.5%; + } + } +} + +.descSticky { + background-image: url("~@/assets/images/MentorStickyGreen.svg"); + background-repeat: no-repeat; + background-size: contain; + background-position: 60%; + padding: 6rem; + position: absolute; + z-index: -1; + top: 15%; + left: 40%; + width: 41.667%; + + p { + transform: rotate(-5deg); + } + + @include bootstrap.media-breakpoint-down(xxl) { + & { + top: 10%; + left: 42%; + } + } + + @include bootstrap.media-breakpoint-down(xl) { + & { + width: 50%; + padding: 5rem; + } + } +} + +.applyStickyMobile { + background-image: url("~@/assets/images/YellowVertPost-it.png"); + background-repeat: no-repeat; + background-size: 100% 100%; + z-index: 1; +} + +.descStickyMobile { + background-image: url("~@/assets/images/MentorStickyGreen.svg"); + background-repeat: no-repeat; + background-size: contain; + position: absolute; + width: 300px; + height: 300px; + right: 0; + bottom: -15%; + z-index: 0; + + a { + position: absolute; + bottom: 0; + z-index: 100; + transform: rotate(-5deg); + } + + @include bootstrap.media-breakpoint-up(sm) { + & { + bottom: -25%; + } + } +} + +.tape { + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, -50%); +} diff --git a/apps/site/src/components/Mentor/Mentor.tsx b/apps/site/src/components/Mentor/Mentor.tsx new file mode 100644 index 00000000..706211d3 --- /dev/null +++ b/apps/site/src/components/Mentor/Mentor.tsx @@ -0,0 +1,56 @@ +import Image from "next/image"; +import Col from "react-bootstrap/Col"; +import Container from "react-bootstrap/Container"; +import Row from "react-bootstrap/Row"; + +import useWindowWidth from "@/lib/useWindowWidth"; +import BookmarkLink from "@/components/BookmarkLink/BookmarkLink"; +import tape from "@/assets/images/tape.svg"; +import styles from "./Mentor.module.scss"; + +const MENTOR_APP_URL = "https://hack.ics.uci.edu"; + +export default function Mentor() { + const width = useWindowWidth(); + + const mentorHeader = ( +

Interested in becoming a mentor?

+ ); + const mentorDescEl = ( +

+ Have a knack for innovation? Interested in inspiring the next generation + of developers? Our mentors are vital to making ZotHacks 2023 successful + and enjoyable for our hackers. Apply to be a mentor today! +

+ ); + const applyLink = ( + + Apply to Mentor! + + ); + + return ( + + {width >= 992 ? ( + + + {mentorHeader} + {applyLink} + + + {mentorDescEl} + + + ) : ( + + + post-it tape + {mentorHeader} + {mentorDescEl} + + {applyLink} + + )} + + ); +} diff --git a/apps/site/src/lib/useWindowWidth.tsx b/apps/site/src/lib/useWindowWidth.tsx new file mode 100644 index 00000000..cad6a061 --- /dev/null +++ b/apps/site/src/lib/useWindowWidth.tsx @@ -0,0 +1,16 @@ +import { useState, useEffect } from "react"; + +export default function useWindowWidth() { + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + function handleResize() { + setWindowWidth(window.innerWidth); + } + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }); + + return windowWidth; +} diff --git a/apps/site/src/views/Landing/Landing.tsx b/apps/site/src/views/Landing/Landing.tsx index 53efe031..0d1e5931 100644 --- a/apps/site/src/views/Landing/Landing.tsx +++ b/apps/site/src/views/Landing/Landing.tsx @@ -1,13 +1,19 @@ "use client"; +import Container from "react-bootstrap/Container"; + import Intro from "@/components/Intro/Intro"; import "./Landing.module.scss"; +import Mentor from "@/components/Mentor/Mentor"; export default function Landing() { return (
-

ZotHacks 2023

- + +

ZotHacks 2023

+ + +
); }