From 49cd21cffe31b732ec928a99410f2b71c716a114 Mon Sep 17 00:00:00 2001 From: ramvignesh-b Date: Fri, 1 May 2026 00:09:00 +0530 Subject: [PATCH] style: add outro and letter mockup to homepage --- frontend/public/screenshots/letter.webp | Bin 0 -> 17746 bytes frontend/src/pages/Home.tsx | 158 +++++++++++++++++++----- 2 files changed, 130 insertions(+), 28 deletions(-) create mode 100644 frontend/public/screenshots/letter.webp diff --git a/frontend/public/screenshots/letter.webp b/frontend/public/screenshots/letter.webp new file mode 100644 index 0000000000000000000000000000000000000000..3e193169cdd7092cdb9c5e1a597bf0c48292476c GIT binary patch literal 17746 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 literal 0 HcmV?d00001 diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 65a532e..f34ef68 100644 --- a/frontend/src/pages/Home.tsx +++ b/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" >
+ {/* Intro */}

@@ -66,20 +78,25 @@ export default function Home() {
and that's okay...
+ {/* pi. ku. */} @@ -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() { +
. + {/* Seal */} . + {/* Send / vault */} {" "} @@ -202,15 +222,16 @@ export default function Home() { . + {/* Burn */} burn it to release the burden. -
-
- + You've been carrying it long enough. + + {/* CTA */} + + + + +
+ +
+ +
+
+
+ letter +
+
+
+ {/* Envelope */} + {}} isFlip={isEnvelopeFlipped} + openFlap={flapOpen} /> + {/* Orb */}