Add homepage photography and canonical Manyangles domain

apps/web/src/app/page.tsx

@@ -1,4 +1,11 @@
 import Link from "next/link";
+import Image from "next/image";
+import weddingExit from "@/assets/homepage/457677937.webp";
+import guestTunnel from "@/assets/homepage/599129661.webp";
+import firstDance from "@/assets/homepage/498647922.webp";
+import toast from "@/assets/homepage/240365594.webp";
+import guest from "@/assets/homepage/189193781.webp";
+import reception from "@/assets/homepage/208516668.webp";
 import {
   ArrowRightIcon,
   CheckCircle2Icon,
@@ -11,7 +18,7 @@ import { createServerCaller } from "@/trpc/server";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { BrandMark } from "@/components/brand-mark";
-import { formatEventDate } from "@/lib/utils";
+import { cn, formatEventDate } from "@/lib/utils";
 import {
   Card,
   CardContent,
@@ -41,6 +48,15 @@ const features = [
   },
 ] as const;
 
+const previewPhotos = [
+  { src: guest, layout: "row-span-2", position: "50% 40%" },
+  { src: firstDance, layout: "col-span-2", position: "50% 45%" },
+  { src: toast, layout: "", position: "50% 50%" },
+  { src: guestTunnel, layout: "row-span-2", position: "50% 50%" },
+  { src: reception, layout: "", position: "65% 50%" },
+  { src: weddingExit, layout: "", position: "50% 50%" },
+] as const;
+
 function AlbumPreview() {
   return (
     <div className="reveal-2 relative mx-auto w-full max-w-xl pb-8 sm:pb-10">
@@ -62,12 +78,20 @@ function AlbumPreview() {
         </CardHeader>
         <CardContent className="p-2.5 sm:p-3">
           <div className="grid h-[20rem] grid-cols-3 grid-rows-3 gap-2 sm:h-[25rem] sm:gap-2.5" aria-hidden="true">
-            <div className="memory-photo memory-photo-one row-span-2" />
-            <div className="memory-photo memory-photo-two col-span-2" />
-            <div className="memory-photo memory-photo-three" />
-            <div className="memory-photo memory-photo-four row-span-2" />
-            <div className="memory-photo memory-photo-five" />
-            <div className="memory-photo memory-photo-six" />
+            {previewPhotos.map((photo, index) => (
+              <div key={photo.src.src} className={cn("memory-photo relative", photo.layout)}>
+                <Image
+                  src={photo.src}
+                  alt=""
+                  fill
+                  sizes={index === 1 ? "(max-width: 640px) 60vw, 360px" : "(max-width: 640px) 30vw, 180px"}
+                  className="object-cover"
+                  style={{ objectPosition: photo.position }}
+                  placeholder="blur"
+                  loading="eager"
+                />
+              </div>
+            ))}
           </div>
         </CardContent>
       </Card>