update landing page with grassy cloud fields

app/page.tsx

@@ -1,26 +1,31 @@
-"use client";
-
-import { motion } from "framer-motion";
+import ScrollExpand from "@/components/ScrollExpand/ScrollExpand";
 
 export default function Home() {
   return (
     <div className="min-h-screen bg-[#0b0b08] text-white">
-      <header className="mx-auto flex w-full max-w-6xl items-center justify-center px-6 py-6 md:px-10">
-        <div className="text-lg font-semibold tracking-wide">Woiken</div>
-      </header>
-
-      <motion.main
-        initial={{ opacity: 0, y: 18 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.55, ease: "easeOut" }}
-        className="mx-auto flex min-h-[calc(100vh-84px)] w-full max-w-6xl flex-col items-center justify-center px-6 pb-20 text-center md:px-10"
+      <ScrollExpand
+        className="woiken-hero"
+        src="/grass-field.jpg"
+        alt="Clouds drifting over a green field under a blue sky"
+        title="Woiken"
+        scrollHint="Scroll"
+        startWidth={46}
+        startHeight={56}
+        overlayScrim={0.55}
+        useWindowScroll
       >
-        <section className="max-w-3xl">
-          <h1 className="text-4xl font-medium leading-tight tracking-tight md:text-6xl">
-           Woiken is coming soon.
-          </h1>
-        </section>
-      </motion.main>
+        <p className="mb-4 text-xs font-medium uppercase tracking-[0.3em] text-white/70 md:text-sm">
+          Woiken
+        </p>
+        <h1 className="text-5xl font-semibold leading-[1.05] tracking-tight md:text-7xl lg:text-8xl">
+          A new cloud
+        </h1>
+        <p className="mt-5 text-lg text-white/80 md:text-2xl">coming soon.</p>
+      </ScrollExpand>
+
+      <footer className="px-6 py-10 text-center text-sm text-white/40">
+        © {new Date().getFullYear()} Woiken
+      </footer>
     </div>
   );
 }