feat: add graphics (#96)

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 (
 		<div className={cn.container}>
+			<img
+				src={tl_clouds}
+				alt=""
+				className={clsx(cn.decoration, cn.tl_clouds, "wait flopL")}
+			/>
+			<img
+				src={butterfly}
+				alt=""
+				className={clsx(cn.decoration, cn.butterfly, "wait flopL")}
+			/>
+			<img
+				src={bl_star_stripe}
+				alt=""
+				className={clsx(cn.decoration, cn.bl_star_stripe, "wait flopL")}
+			/>
+			<img
+				src={mr_cloud_stars}
+				alt=""
+				className={clsx(cn.decoration, cn.mr_cloud_stars, "wait flopR")}
+			/>
+			<img
+				src={br_star_stripe}
+				alt=""
+				className={clsx(cn.decoration, cn.br_star_stripe, "wait flopR")}
+			/>
+
+			<GridBackground positions={[{ top: 0, left: 0 }]} isLight={true} />
+
 			<div className={cn.info}>
 				<div className={cn.time}>
 					May 17th 6:30 PM - May 19th 4:30 PM

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%;
 
-}
+	@media screen and (min-width: 800px) {
+		top: 20%;
+		max-width: 20%;
+	}
+}
+
+.br_star_stripe {
+	bottom: 0;
+	right: 0;
+}

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