-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
174 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 40 additions & 39 deletions
79
apps/site/src/app/(home)/sections/Intro/Intro.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,58 @@ | ||
| @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; | ||
|
|
||
| @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; | ||
| } | ||
| // margin-bottom: 0.5em; | ||
| } | ||
|
|
||
| .pin { | ||
| position: absolute; | ||
| top: -12%; | ||
| left: 45%; | ||
| width: auto; | ||
| .intro { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| max-width: 90vw; | ||
| margin-top: 3vw; | ||
| // padding: 0 80px 0 80px; | ||
|
|
||
| @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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <Container as="section"> | ||
| <div className={styles.intro}> | ||
| <motion.img | ||
| initial={{ | ||
| opacity: 0, | ||
| y: -10, | ||
| x: -10, | ||
| }} | ||
| viewport={{ once: true }} | ||
| whileInView={{ | ||
| opacity: 1, | ||
| y: 0, | ||
| x: 0, | ||
| transition: { | ||
| duration: 0.65, | ||
| ease: cubicBezier(0.64, 0, 0.78, 0), | ||
| }, | ||
| }} | ||
| className={styles.pin} | ||
| src={pin.src} | ||
| width="100" | ||
| height="100" | ||
| alt="Index card pin" | ||
| /> | ||
| <h2>What is ZotHacks?</h2> | ||
| <p> | ||
| 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! | ||
| </p> | ||
| <Image | ||
| className={styles.hackDoodle} | ||
| src={hackDoodle} | ||
| width="250" | ||
| height="250" | ||
| alt="Hack logo doodle" | ||
| /> | ||
| </div> | ||
| </Container> | ||
| <div className={styles.intro}> | ||
| <h2 className={styles.header}>What is ZotHacks?</h2> | ||
| <p className={styles.description}> | ||
| 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! | ||
| </p> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Intro; | ||
| } |
66 changes: 34 additions & 32 deletions
66
apps/site/src/app/(home)/sections/Landing/ApplyButton.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,40 @@ | ||
| @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; | ||
|
|
||
| @include bootstrap.media-breakpoint-up(sm) { | ||
| width: 35vw; | ||
| } | ||
|
|
||
| box-shadow: | ||
| 2px 3px 8px rgba(black, 0.2), | ||
| 4px 6px 16px rgba(black, 0.2); | ||
| @include bootstrap.media-breakpoint-up(md) { | ||
| width: 30vw; | ||
| } | ||
|
|
||
| &:hover, | ||
| &:focus { | ||
| text-decoration: underline; | ||
| box-shadow: | ||
| 2px 3px 16px rgba(black, 0.3), | ||
| 4px 6px 32px rgba(black, 0.3); | ||
| @include bootstrap.media-breakpoint-up(lg) { | ||
| width: 25vw; | ||
| } | ||
| } | ||
|
|
||
| .apply:hover { | ||
| scale: 1.1; | ||
| } | ||
|
|
||
| .outline { | ||
| stroke: white; | ||
| transition: stroke 200ms ease-in-out; | ||
| } | ||
|
|
||
| svg:hover .outline { | ||
| stroke: yellow; | ||
| } | ||
|
|
||
| .text { | ||
| fill: white; | ||
| transition: fill 200ms ease; | ||
| } | ||
|
|
||
| svg:hover .text { | ||
| fill: yellow; | ||
| } |
77 changes: 54 additions & 23 deletions
77
apps/site/src/app/(home)/sections/Landing/ApplyButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.