Merge pull request #28 from HackAtUCI/setup/landing-fog

feat: fog animation

apps/site/src/app/(home)/sections/Landing/Landing.module.css

@@ -6,6 +6,7 @@
 	position: relative;
 	min-height: 100vh;
 	min-width: 100vw;
+	overflow-x: hidden;
 }
 
 .landingGroup {
@@ -15,3 +16,39 @@
 	transform: translate(-50%, -50%);
 	text-align: center;
 }
+
+.fogLeft,
+.fogRight {
+	animation-delay: 0.5s;
+	animation-duration: 4s;
+	animation-fill-mode: forwards;
+	animation-timing-function: ease;
+	z-index: 1000;
+}
+
+.fogLeft {
+	animation-name: slideOutLeft;
+}
+
+.fogRight {
+	animation-name: slideOutRight;
+}
+
+@keyframes slideOutLeft {
+	from {
+		transform: none;
+	}
+
+	to {
+		transform: translate(-100%, 0);
+	}
+}
+
+@keyframes slideOutRight {
+	from {
+		transform: none;
+	}
+	to {
+		transform: translate(100%, 0);
+	}
+}

apps/site/src/app/(home)/sections/Landing/Landing.tsx

@@ -1,13 +1,18 @@
 "use client";
 
-import Button from "@/lib/components/Button/Button";
-import styles from "./Landing.module.css";
-
 import { Suspense } from "react";
+import Image from "next/image";
 import { PerspectiveCamera } from "@react-three/drei";
+
 import { View } from "@/components/canvas/View";
+import Button from "@/lib/components/Button/Button";
 import Fireflies from "../../components/Fireflies";
 
+import fogLeft from "@/assets/images/fog-left.png";
+import fogRight from "@/assets/images/fog-right.png";
+
+import styles from "./Landing.module.css";
+
 const Landing = () => {
 	return (
 		<section className={styles.landingSection}>
@@ -17,6 +22,8 @@ const Landing = () => {
 					<PerspectiveCamera makeDefault position={[0.1, 0.1, 0.6]} />
 				</Suspense>
 			</View>
+			<Image src={fogLeft} alt="Fog" className={styles.fogLeft} fill />
+			<Image src={fogRight} alt="Fog" className={styles.fogRight} fill />
 			<div className={styles.landingGroup}>
 				<h1 className="font-display">IrvineHacks 2024</h1>
 				<p className="font-display">January 26&ndash;28</p>