From b21d83977d1a959a8b645fa35830fc1d98499b41 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Mon, 8 Apr 2024 16:58:54 -0700 Subject: [PATCH] feat: add graphics (#96) --- .../assets/graphics/splash/bl_star_stripe.svg | 15 + .../assets/graphics/splash/br_star_stripe.svg | 9 + .../assets/graphics/splash/butterfly.svg | 23 ++ .../assets/graphics/splash/clouds.svg | 9 + .../assets/graphics/splash/mr_cloud_stars.svg | 22 ++ .../components/Splash/Splash.jsx | 37 +++ .../components/Splash/Splash.module.scss | 266 +++++++++++------- src/app/styles/animations.scss | 3 +- 8 files changed, 275 insertions(+), 109 deletions(-) create mode 100644 src/app/pages/Designathons/Designathon24/assets/graphics/splash/bl_star_stripe.svg create mode 100644 src/app/pages/Designathons/Designathon24/assets/graphics/splash/br_star_stripe.svg create mode 100644 src/app/pages/Designathons/Designathon24/assets/graphics/splash/butterfly.svg create mode 100644 src/app/pages/Designathons/Designathon24/assets/graphics/splash/clouds.svg create mode 100644 src/app/pages/Designathons/Designathon24/assets/graphics/splash/mr_cloud_stars.svg diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/splash/bl_star_stripe.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/splash/bl_star_stripe.svg new file mode 100644 index 00000000..36464355 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/splash/bl_star_stripe.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/splash/br_star_stripe.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/splash/br_star_stripe.svg new file mode 100644 index 00000000..6e9440bd --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/splash/br_star_stripe.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/splash/butterfly.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/splash/butterfly.svg new file mode 100644 index 00000000..1facb9d1 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/splash/butterfly.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/splash/clouds.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/splash/clouds.svg new file mode 100644 index 00000000..e066b64d --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/splash/clouds.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/pages/Designathons/Designathon24/assets/graphics/splash/mr_cloud_stars.svg b/src/app/pages/Designathons/Designathon24/assets/graphics/splash/mr_cloud_stars.svg new file mode 100644 index 00000000..fdff62c6 --- /dev/null +++ b/src/app/pages/Designathons/Designathon24/assets/graphics/splash/mr_cloud_stars.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx index 63c1d22e..d1d9494c 100644 --- a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx +++ b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx @@ -1,8 +1,17 @@ import { memo, useEffect, useRef } from "react"; import { ReactComponent as SplashLogo } from "./logo.svg"; import cn from "./Splash.module.scss"; +import clsx from "clsx"; import anime from "animejs"; +import tl_clouds from "../../assets/graphics/splash/clouds.svg"; +import butterfly from "../../assets/graphics/splash/butterfly.svg"; +import bl_star_stripe from "../../assets/graphics/splash/bl_star_stripe.svg"; +import mr_cloud_stars from "../../assets/graphics/splash/mr_cloud_stars.svg"; +import br_star_stripe from "../../assets/graphics/splash/br_star_stripe.svg"; + +import GridBackground from "../Backgrounds/GridBackground"; + const Splash = memo(() => { const logoRef = useRef(null); useEffect(() => { @@ -19,6 +28,34 @@ const Splash = memo(() => { return (
+ + + + + + + +
May 17th 6:30 PM - May 19th 4:30 PM diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss index 1f5c3cca..51522d4d 100644 --- a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss +++ b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss @@ -1,114 +1,164 @@ .container { - background-color: #fff5e0; - height: 100%; - width: 100%; - position: absolute; - display: grid; - place-content: center; - - .logo { - max-width: max(50vw, 360px); - margin: 0 auto; - padding-bottom: 60%; - - @media screen and (min-width: 800px) { - padding-bottom: 30%; - } - - path { - stroke-width: 5; - .word { - stroke-dashoffset: 10px; - stroke-width: 5; - stroke-dasharray: 1500; - opacity: 0; - - @for $i from 1 through 10 { - &:nth-child(#{$i}n) { - animation: fadeIn forwards 1s #{$i * 350}ms ease-in; - } - } - } - } - } - - .info { - font-size: 1.8em; - text-align: center; - position: absolute; - place-self: center; - bottom: 15%; - z-index: 110; - - .time { - font-size: min(4vw, 40px); - grid-column: 1/3; - font-family: "Gluten", cursive; - font-weight: 600; - margin-bottom: 24px; - - } - - .wrapper { - display: grid; - grid-template-columns: 1fr; - column-gap: 40px; - row-gap: 10px; - max-width: 800px; - margin: 0 auto; - - @media screen and (max-width: 800px) { - grid-template-columns: 1fr; - .border{ - padding: 4px !important; - } - .app { - border-radius: 16px !important; - padding: 14px 20px !important; - font-size: 18px !important; - - } - } - - .border { - margin: 0 auto; - width: max-content; - border-radius: 20px; - background: linear-gradient(93.29deg, #1F3066 8.27%, #F84E72 74.24%, #FF6969 99.26%); - padding: 6px; - transition: background 250ms; - - &:hover { - - background: #1F3066; - .app { - background: #1F3066; - color: white; - } - - } - - .app { - transition: background 250ms, color 250ms; - background-color: #fff5e0; - width: 100%; - border-radius: 14px; - font-size: 0.6em; - padding: 20px 40px; - } - } - - } - } + background-color: #fff5e0; + height: 100%; + width: 100%; + position: absolute; + display: grid; + place-content: center; + + .logo { + position: relative; + max-width: max(50vw, 360px); + margin: 0 auto; + padding-bottom: 60%; + + @media screen and (min-width: 800px) { + padding-bottom: 40%; + } + + path { + stroke-width: 5; + .word { + stroke-dashoffset: 10px; + stroke-width: 5; + stroke-dasharray: 1500; + opacity: 0; + + @for $i from 1 through 10 { + &:nth-child(#{$i}n) { + animation: fadeIn forwards 1s #{$i * 350}ms ease-in; + } + } + } + } + } + + .info { + font-size: 1.8em; + text-align: center; + position: absolute; + place-self: center; + bottom: 15%; + z-index: 110; + + .time { + font-size: min(4vw, 40px); + grid-column: 1/3; + font-family: "Gluten", cursive; + font-weight: 600; + margin-bottom: 24px; + } + + .wrapper { + display: grid; + grid-template-columns: 1fr; + column-gap: 40px; + row-gap: 10px; + max-width: 800px; + margin: 0 auto; + + @media screen and (max-width: 800px) { + grid-template-columns: 1fr; + .border { + padding: 4px !important; + } + .app { + border-radius: 16px !important; + padding: 14px 20px !important; + font-size: 18px !important; + } + } + + .border { + margin: 0 auto; + width: max-content; + border-radius: 20px; + background: linear-gradient( + 93.29deg, + #1f3066 8.27%, + #f84e72 74.24%, + #ff6969 99.26% + ); + padding: 6px; + transition: background 250ms; + + &:hover { + background: #1f3066; + .app { + background: #1f3066; + color: white; + } + } + + .app { + transition: + background 250ms, + color 250ms; + background-color: #fff5e0; + width: 100%; + border-radius: 14px; + font-size: 0.6em; + padding: 20px 40px; + } + } + } + } } @keyframes fadeIn { - from { - opacity: 0; - } + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.decoration { + position: absolute; - to { - opacity: 1; - } + max-width: 30%; +} + +.tl_clouds { + top: 0; + left: 0; + + max-width: 40%; + + @media screen and (min-width: 800px) { + max-width: 20%; + } +} + +.butterfly { + top: 55%; + left: 0; + + @media screen and (min-width: 800px) { + top: 30%; + } +} + +.bl_star_stripe { + bottom: 0; + left: 0; +} + +.mr_cloud_stars { + top: unset; + bottom: 35%; + right: 0; + max-width: 40%; -} \ No newline at end of file + @media screen and (min-width: 800px) { + top: 20%; + max-width: 20%; + } +} + +.br_star_stripe { + bottom: 0; + right: 0; +} diff --git a/src/app/styles/animations.scss b/src/app/styles/animations.scss index 4a77a926..4b48d6ea 100644 --- a/src/app/styles/animations.scss +++ b/src/app/styles/animations.scss @@ -101,7 +101,8 @@ @keyframes rainbow-fadein { 0% { - transform: perspective(256px) translateY(-64px) scale(1.24) rotateX(60deg); + transform: perspective(256px) translateY(-64px) scale(1.24) + rotateX(60deg); filter: hue-rotate(360deg); }