feat: separated landing background pictures

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

@@ -1,5 +1,12 @@
 .landingBackground {
-	background-image: url("~@/assets/backgrounds/landing-background.jpg");
+	background-image: url("~@/assets/backgrounds/fog.png"),
+		url("~@/assets/backgrounds/lantern-glow.png"),
+		url("~@/assets/backgrounds/landing-lanterns-bottom.png"),
+		url("~@/assets/backgrounds/boat.png"),
+		url("~@/assets/backgrounds/stall-left.png"),
+		url("~@/assets/backgrounds/stall-right.png"),
+		url("~@/assets/backgrounds/landing-lanterns.png"),
+		url("~@/assets/backgrounds/sky.png");
 	background-position: center bottom;
 	background-repeat: no-repeat;
 	background-size: cover;

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

@@ -2,6 +2,7 @@
 
 import { Suspense } from "react";
 import Image from "next/image";
+import clsx from "clsx";
 import { PerspectiveCamera } from "@react-three/drei";
 
 import { View } from "@/components/canvas/View";
@@ -15,7 +16,12 @@ import styles from "./Landing.module.css";
 
 const Landing = () => {
 	return (
-		<section className={styles.landingBackground}>
+		<section
+			className={clsx(
+				"bg-center bg-cover bg-no-repeat",
+				styles.landingBackground,
+			)}
+		>
 			<View className="absolute w-full h-full">
 				<Suspense fallback={null}>
 					<Fireflies />