style: add outro and letter mockup to homepage

frontend/src/pages/Home.tsx

@@ -1,3 +1,4 @@
+import { InfoIcon } from "@phosphor-icons/react";
 import {
   motion,
   useMotionValueEvent,
@@ -6,8 +7,10 @@ import {
   useTransform,
 } from "motion/react";
 import { useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import Logo from "../components/Logo";
 import { EnvelopeReveal } from "../components/reader/EnvelopeReveal";
+import { ROUTES } from "../config/routes.ts";
 import { formatDate } from "../utils/dateFormat.ts";
 
 export default function Home() {
@@ -15,16 +18,24 @@ export default function Home() {
   const { scrollYProgress: section1ScrollProgress } = useScroll({
     target: sectionContainer1,
   });
-  const smoothProgress = useSpring(section1ScrollProgress, {
+  const smoothProgress1 = useSpring(section1ScrollProgress, {
     stiffness: 100,
     damping: 30,
     restDelta: 0.001,
   });
   const [isEnvelopeFlipped, setIsEnvelopeFlipped] = useState(true);
+  const [flapOpen, setFlapOpen] = useState(false);
   const [recipient, setRecipient] = useState("someone dear");
   const [ignite, setIgnite] = useState(false);
 
+  const navigate = useNavigate();
+
   useMotionValueEvent(section1ScrollProgress, "change", (latestScrollValue) => {
+    if (latestScrollValue > 0.54) {
+      setFlapOpen(false);
+    } else {
+      setFlapOpen(true);
+    }
     if (latestScrollValue <= 0.6) {
       setIsEnvelopeFlipped(true);
     } else {
@@ -48,11 +59,12 @@ export default function Home() {
       className="relative w-full h-[850vh] bg-base-100 font-serif"
     >
       <div className="sticky top-0 h-screen w-full flex flex-col items-center justify-center overflow-hidden">
+        {/*  Intro */}
         <motion.div
           className="absolute flex flex-col items-center justify-center pointer-events-none"
           style={{
-            opacity: useTransform(smoothProgress, [0, 0.12, 1], [1, 0, 0]),
+            opacity: useTransform(smoothProgress1, [0, 0.12, 1], [1, 0, 0]),
-            scale: useTransform(smoothProgress, [0, 0.12], [1, 10]),
+            scale: useTransform(smoothProgress1, [0, 0.12], [1, 10]),
           }}
         >
           <h1 className="text-neutral-content/40 text-4xl md:text-6xl text-center px-6">
@@ -66,20 +78,25 @@ export default function Home() {
         <motion.div
           className="absolute text-center"
           style={{
-            opacity: useTransform(smoothProgress, [0, 0.15, 0.2], [0, 1, 0]),
+            opacity: useTransform(smoothProgress1, [0, 0.15, 0.2], [0, 1, 0]),
-            y: useTransform(smoothProgress, [0, 0.15, 0.2], [40, 0, -40]),
+            y: useTransform(smoothProgress1, [0, 0.15, 0.2], [40, 0, -40]),
-            scale: useTransform(smoothProgress, [0, 0.15, 0.2], [0.8, 1, 3]),
+            scale: useTransform(smoothProgress1, [0, 0.15, 0.2], [0.8, 1, 3]),
           }}
         >
           <div className="mt-6 text-4xl md:text-6xl text-base-content/60 italic">
             and that's okay...
           </div>
         </motion.div>
+        {/*  pi. ku. */}
         <motion.div
           className="absolute text-center px-6"
           style={{
-            opacity: useTransform(smoothProgress, [0.18, 0.25, 0.3], [0, 1, 0]),
+            opacity: useTransform(
-            y: useTransform(smoothProgress, [0.18, 0.25, 0.3], [20, 0, -20]),
+              smoothProgress1,
+              [0.18, 0.25, 0.3],
+              [0, 1, 0],
+            ),
+            y: useTransform(smoothProgress1, [0.18, 0.25, 0.3], [20, 0, -20]),
           }}
           transition={{ delay: 4 }}
         >
@@ -88,12 +105,12 @@ export default function Home() {
             className="mt-6 text-4xl md:text-6xl text-base-content/60 "
             style={{
               opacity: useTransform(
-                smoothProgress,
+                smoothProgress1,
                 [0.22, 0.25, 0.35, 0.4],
                 [0, 1, 1, 0],
               ),
               y: useTransform(
-                smoothProgress,
+                smoothProgress1,
                 [0.25, 0.3, 0.35, 0.4],
                 [20, 0, 0, -20],
               ),
@@ -114,16 +131,17 @@ export default function Home() {
             </motion.span>
           </motion.div>
         </motion.div>
+
         <div className="relative w-full max-w-5xl h-1/2 flex items-center justify-center mt-20">
           <motion.h2
             style={{
               opacity: useTransform(
-                smoothProgress,
+                smoothProgress1,
                 [0.3, 0.35, 0.4, 0.45],
                 [0, 1, 1, 0],
               ),
               y: useTransform(
-                smoothProgress,
+                smoothProgress1,
                 [0.3, 0.35, 0.4, 0.45],
                 [40, 0, 0, -40],
               ),
@@ -136,15 +154,16 @@ export default function Home() {
             </span>
             .
           </motion.h2>
+          {/*  Seal */}
           <motion.h2
             style={{
               opacity: useTransform(
-                smoothProgress,
+                smoothProgress1,
                 [0.45, 0.5, 0.55, 0.6],
                 [0, 1, 1, 0],
               ),
               y: useTransform(
-                smoothProgress,
+                smoothProgress1,
                 [0.45, 0.5, 0.55, 0.6],
                 [40, 0, 0, -40],
               ),
@@ -161,15 +180,16 @@ export default function Home() {
             </span>
             .
           </motion.h2>
+          {/*  Send / vault */}
           <motion.h2
             style={{
               opacity: useTransform(
-                smoothProgress,
+                smoothProgress1,
                 [0.6, 0.63, 0.72, 0.75],
                 [0, 1, 1, 0],
               ),
               y: useTransform(
-                smoothProgress,
+                smoothProgress1,
                 [0.6, 0.63, 0.72, 0.75],
                 [40, 0, 0, -40],
               ),
@@ -181,7 +201,7 @@ export default function Home() {
               className="font-display text-accent"
               style={{
                 color: useTransform(
-                  smoothProgress,
+                  smoothProgress1,
                   [0.67, 1],
                   ["var(--color-accent)", "var(--color-neutral)"],
                 ),
@@ -191,7 +211,7 @@ export default function Home() {
             </motion.span>
             <motion.span
               style={{
-                opacity: useTransform(smoothProgress, [0.66, 0.7], [0, 1]),
+                opacity: useTransform(smoothProgress1, [0.66, 0.7], [0, 1]),
               }}
             >
               {" "}
@@ -202,15 +222,16 @@ export default function Home() {
               .
             </motion.span>
           </motion.h2>
+          {/*  Burn */}
           <motion.h2
             style={{
               opacity: useTransform(
-                smoothProgress,
+                smoothProgress1,
                 [0.75, 0.8, 0.85, 0.9],
                 [0, 1, 1, 0],
               ),
               y: useTransform(
-                smoothProgress,
+                smoothProgress1,
                 [0.75, 0.8, 0.85, 0.9],
                 [40, 0, 0, -40],
               ),
@@ -220,13 +241,92 @@ export default function Home() {
             and even <span className="font-display text-error">burn it</span> to
             release the burden.
           </motion.h2>
-        </div>
+          {/*  Outro  */}
-        <div className="relative h-1/4 w-full flex flex-col items-center justify-center">
+          <motion.h2
-          <motion.div
+            className={
-            className="z-10 absolute scale-80"
+              "italic absolute text-4xl md:text-6xl text-center px-10 leading-tight"
+            }
             style={{
-              opacity: useTransform(smoothProgress, [0.3, 0.5], [0, 1]),
+              opacity: useTransform(smoothProgress1, [0.9, 1], [0, 1]),
-              y: useTransform(smoothProgress, [0.3, 0.5], [200, 0]),
+              y: useTransform(smoothProgress1, [0.9, 1], [80, 0]),
+            }}
+          >
+            You've been carrying it long enough.
+          </motion.h2>
+          {/* CTA */}
+          <motion.div
+            className={
+              "z-100 absolute -bottom-12 md:bottom-0 font-display flex flex-wrap md:flex-nowrap gap-4 md:gap-12 justify-center"
+            }
+            style={{
+              opacity: useTransform(smoothProgress1, [0.98, 1], [0, 1]),
+              y: useTransform(smoothProgress1, [0.98, 1], [80, 0]),
+              display: useTransform(
+                smoothProgress1,
+                [0.96, 1],
+                ["none", "flex"],
+              ),
+            }}
+          >
+            <button
+              className={
+                "opacity-50 hover:opacity-100 btn btn-ghost btn-wide md:btn-xl rounded-full font-extralight  grayscale hover:grayscale-0 hover:-translate-y-1 transition-all duration-1000"
+              }
+              type={"button"}
+            >
+              <InfoIcon className={"text-primary"} />
+              Tell me More
+            </button>
+            <button
+              className={
+                "opacity-50 hover:opacity-100 btn btn-primary rounded-full btn-wide md:btn-xl grayscale hover:grayscale-0 hover:-translate-y-1 transition-all duration-1000"
+              }
+              type={"button"}
+              onClick={() => navigate(ROUTES.ONBOARD, { replace: true })}
+            >
+              I'm ready
+            </button>
+          </motion.div>
+        </div>
+
+        <div className="relative h-1/4 w-full flex flex-col items-center justify-center pointer-events-none">
+          <motion.div
+            className={"z-21 absolute"}
+            style={{
+              opacity: useTransform(
+                smoothProgress1,
+                [0.3, 0.4, 0.5, 0.52],
+                [0, 1, 0.1, 0],
+              ),
+              y: useTransform(
+                smoothProgress1,
+                [0.3, 0.45, 0.5],
+                [400, 100, 300],
+              ),
+              scale: useTransform(
+                smoothProgress1,
+                [0.3, 0.4, 0.5],
+                [1, 1, 0.6],
+              ),
+            }}
+          >
+            <div className="mockup-phone w-100 border-primary">
+              <div className="mockup-phone-camera"></div>
+              <div className="mockup-phone-display">
+                <img alt="letter" src="/screenshots/letter.webp" />
+              </div>
+            </div>
+          </motion.div>
+          {/*  Envelope */}
+          <motion.div
+            className="absolute scale-80"
+            style={{
+              opacity: useTransform(
+                smoothProgress1,
+                [0.4, 0.45, 0.5, 0.7, 0.9, 1],
+                [0, 0.6, 1, 1, 0.3, 0],
+              ),
+              y: useTransform(smoothProgress1, [0.45, 0.5, 1], [600, 200, 0]),
             }}
           >
             <EnvelopeReveal
@@ -236,8 +336,10 @@ export default function Home() {
               date={formatDate(new Date().toISOString())}
               onRevealComplete={() => {}}
               isFlip={isEnvelopeFlipped}
+              openFlap={flapOpen}
             />
           </motion.div>
+          {/*  Orb */}
           <motion.div
             className="w-48 z-100 h-48 rounded-full blur-3xl opacity-20"
             transition={{
@@ -245,7 +347,7 @@ export default function Home() {
             }}
             style={{
               backgroundColor: useTransform(
-                smoothProgress,
+                smoothProgress1,
                 [0.45, 0.5, 0.7, 0.75, 1],
                 [
                   "var(--color-primary)",
@@ -255,7 +357,7 @@ export default function Home() {
                   "var(--color-error)",
                 ],
               ),
-              scale: useTransform(smoothProgress, [0, 1], [0.6, 2.5]),
+              scale: useTransform(smoothProgress1, [0, 1], [0.6, 2.5]),
             }}
           />
           <div className="absolute border border-primary/5 w-64 h-64 rounded-full backdrop-blur-[1px]" />