fix: restore missing transparent section of background art (#37)

* fix: restore landing background png

* Use separate mask for landing background

- To reduce asset size, compress the background JPEG and use a
  separate smaller transparent PNG as a `mask-image`
- This will become irrelevant once the layers are separated for a
  dynamic floating design

* fix: background and mask position to center bottom

---------

Co-authored-by: Taesung Hwang <[email protected]>

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

@@ -1,6 +1,17 @@
+.landingBackground {
+	background-image: url("~@/assets/backgrounds/landing-background.jpg");
+	background-position: center bottom;
+	background-repeat: no-repeat;
+	background-size: cover;
+	mask-image: url("~@/assets/backgrounds/landing-background-mask.png");
+	mask-position: center bottom;
+	mask-repeat: no-repeat;
+	mask-size: cover;
+}
+
 .fogLeft,
 .fogRight {
-	animation-delay: 1.5s;
+	animation-delay: 2s;
 	animation-duration: 4s;
 	animation-fill-mode: forwards;
 	animation-timing-function: ease;

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

@@ -8,20 +8,14 @@ import { View } from "@/components/canvas/View";
 import Button from "@/lib/components/Button/Button";
 import Fireflies from "../../components/Fireflies";
 
-import landingBackground from "@/assets/backgrounds/landing-background.jpg";
 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
-			style={{
-				backgroundImage: `url(${landingBackground.src})`,
-			}}
-			className="bg-cover bg-no-repeat bg-center"
-		>
+		<section className={styles.landingBackground}>
 			<View className="absolute w-full h-full">
 				<Suspense fallback={null}>
 					<Fireflies />