Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/2024 intro section #161

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Feature/2024 intro section #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6cca3d0
Fix bg cover, add landing section
noahk004 Oct 3, 2024
3f905d5
Add images
noahk004 Oct 3, 2024
1b47644
Add characters
noahk004 Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions apps/site/src/app/(home)/page.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,39 @@ $container-padding: 6rem;
@include bootstrap.padding-bottom($container-padding);
}
}

background-image: url("~@/assets/background/ocean-sand-background.svg");
background-size: cover;
background-position-x: center;
background-repeat: no-repeat;
min-height: 300vh;
}

.beachBall {
top: 105vh;
left: 85vw;
}

.coastAnteater {
top: 95vh;
left: 18vw;
}

@media (max-width: 1200px) {
.beachBall {
visibility: hidden;
}
.coastAnteater {
visibility: hidden;
}
}

// .wAnteater {
// top: 72vh;
// left: 75vw;
// }

// .wAnteaterShadow {
// top: 72vh;
// left: 75vw;
// }
31 changes: 29 additions & 2 deletions apps/site/src/app/(home)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
export const revalidate = 60;

import Image from "next/image";

import beachBall from "@/assets/images/intro-beach-ball.svg";
import coastAnteater from "@/assets/images/intro-coast-anteater.svg";
import wAnteater from "@/assets/images/intro-water-anteater.svg";
import wAnteaterShadow from "@/assets/images/intro-water-anteater-shadow.svg";
import { StaticImport } from "next/dist/shared/lib/get-img-props";

import Landing from "./sections/Landing";
import Intro from "./sections/Intro";
import Mentor from "./sections/Mentor";
Expand All @@ -8,12 +16,31 @@ import FAQ from "./sections/FAQ";

import styles from "./page.module.scss";

interface CharacterProps {
src: StaticImport;
styles: string;
}

function Character({ src, styles }: CharacterProps) {
return (
<Image
src={src}
alt="Character design"
className={styles}
style={{ position: "absolute", transform: "translate(-50%, -50%)" }}
/>
);
}
const Home = () => {
return (
<div className={styles.home}>
<Character src={beachBall} styles={styles.beachBall} />
<Character src={coastAnteater} styles={styles.coastAnteater} />
{/* <Character src={wAnteater} styles={styles.wAnteater} />
<Character src={wAnteaterShadow} styles={styles.wAnteaterShadow} /> */}
<Landing />
{/* <Intro />
<Mentor />
<Intro />
{/* <Mentor />
<Sponsors />
<FAQ /> */}
</div>
Expand Down
96 changes: 54 additions & 42 deletions apps/site/src/app/(home)/sections/Intro/Intro.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,69 @@
@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: 1em;
}

h2 {
@include bootstrap.margin-bottom(3rem);
}
.header {
font-size: 1.8em;
margin-bottom: 0.5em;
}

@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;
}
.introBox {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 900px;
padding: 0 80px 0 80px;
}

.pin {
.intro {
position: absolute;
top: -12%;
left: 45%;
width: auto;
top: 160vh;
transform: translateY(-60%);
width: 100vw;
display: flex;
justify-content: center;
}

@include bootstrap.media-breakpoint-down(xl) {
left: 45%;
@media (max-width: 1200px) {
/* Large viewport */
.description {
text-align: center;
font-size: 0.9em;
}
@include bootstrap.media-breakpoint-down(lg) {
left: 40%;

.header {
font-size: 1.6em;
margin-bottom: 0.4em;
}
}

@media (max-width: 768px) {
/* Tablet viewport */
.description {
text-align: center;
font-size: 0.8em;
}
@include bootstrap.media-breakpoint-down(md) {
left: 35%;

.header {
font-size: 1.4em;
margin-bottom: 0.3em;
}

.introBox {
padding: 0 50px 0 50px;
}
}

.hackDoodle {
position: absolute;
bottom: 0;
right: 0;
transform: translate(-25%, 50%);
width: auto;
@media (max-width: 480px) {
/* Mobile viewport */
.description {
text-align: center;
font-size: 0.8em;
}

@include bootstrap.media-breakpoint-down(lg) {
display: none;
.header {
font-size: 1.4em;
margin-bottom: 0.3em;
}
}
63 changes: 12 additions & 51 deletions apps/site/src/app/(home)/sections/Intro/Intro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,19 @@
"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!
<div className={styles.intro}>
<div className={styles.introBox}>
<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>
<Image
className={styles.hackDoodle}
src={hackDoodle}
width="250"
height="250"
alt="Hack logo doodle"
/>
</div>
</Container>
</div>
);
};

export default Intro;
}
83 changes: 46 additions & 37 deletions apps/site/src/app/(home)/sections/Landing/ApplyButton.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,47 @@
@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);
}

box-shadow:
2px 3px 8px rgba(black, 0.2),
4px 6px 16px rgba(black, 0.2);

&:hover,
&:focus {
text-decoration: underline;
box-shadow:
2px 3px 16px rgba(black, 0.3),
4px 6px 32px rgba(black, 0.3);
}
.apply {
width: 400px;
transition-duration: 200ms;
}

.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;
}


@media (max-width: 1200px) {
.apply {
width: 350px; /* Large viewport */
}
}

@media (max-width: 768px) {
.apply {
width: 300px; /* Tablet viewport */
}
}

@media (max-width: 480px) {
.apply {
width: 200px; /* Mobile viewport */
}
}
Loading