Prompt: Recreate the "noola" Mindfulness App Landing Page (pixel-exact) Build a React 19 + Vite + Tailwind CSS v4 single-page landing site for a mindfulness app called noola. Use the motion package (motion/react, i.e. Motion One for React / Framer Motion API) for all animations. Everything below must be reproduced exactly — URLs, colors, easings, delays, sizes. 1. Stack & global setup React 19, Vite, Tailwind CSS v4 via @tailwindcss/vite (CSS import: @import 'tailwindcss';), motion ^13. src/App.tsx just renders . Components: src/components/LandingPage.tsx, src/components/PhoneUI.tsx, src/components/BlurText.tsx. src/index.css (exact) css @import url('https://db.onlinewebfonts.com/c/69f2576e7ca287875bf8d089130e292c?family=TT+Firs+Neue'); @import url('https://db.onlinewebfonts.com/c/0884d17cb11ba81fc10318f784a5133e?family=TT+Firs+Neue+Trl'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); @import 'tailwindcss'; @theme { --font-display: 'TT Firs Neue', sans-serif; --font-body: 'TT Firs Neue Trl', sans-serif; --font-inter: 'Inter', sans-serif; } * { box-sizing: border-box; } html, body { background-color: #6574A4; scroll-behavior: smooth; } .clouds-position { bottom: 0; } @media (min-width: 768px) { .clouds-position { bottom: -15%; } } @media (min-width: 1024px) { .clouds-position { bottom: -30%; } } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(144, 146, 227, 0.4); border-radius: 99px; } Color palette Page background: #6574a4 Accent purple (buttons, arcs): #9092e3 Nav-link / CTA text on white: #706a9b Feature-card background: #f0f3ff Feature-card body text: #060cd1 Meditation card title text: #6b6893 Mood-dial arc: #8173F8 Signature ease everywhere: [0.22, 1, 0.36, 1] 2. Assets (exact URLs) ts const heroBgVideo = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260808_022325_dcb1b04a-75f8-429b-a8dd-08272d030e7e.mp4"; const imgClouds = "https://api.promptsites.net/s3/promptsites/previews/a9d19850-6b90-4e01-9ca2-97bebc6af924/d0a957ce-63f6-4277-9fc1-fcda72008221.png"; const imgPeaceSymbol = "https://api.promptsites.net/s3/promptsites/previews/a9d19850-6b90-4e01-9ca2-97bebc6af924/d0740f2b-f53c-46cb-b15e-47971b073432.jpg"; // also used as avatar in PhoneUI const imgMedThumb1 = "https://api.promptsites.net/s3/promptsites/previews/a9d19850-6b90-4e01-9ca2-97bebc6af924/41a1f15a-691e-4a3b-886d-ad98cf237024.png"; const imgMedThumb2 = "https://api.promptsites.net/s3/promptsites/previews/a9d19850-6b90-4e01-9ca2-97bebc6af924/0ee8d982-9044-483b-a70c-fcf81fc95bbf.png"; const imgMedThumb3 = "https://api.promptsites.net/s3/promptsites/previews/a9d19850-6b90-4e01-9ca2-97bebc6af924/81640521-c9f7-4701-83c5-98ad55326ef2.png"; const imgBottomNav = "https://api.promptsites.net/s3/promptsites/previews/a9d19850-6b90-4e01-9ca2-97bebc6af924/02038a96-e4e1-4454-ab99-155fdd629c28.png"; // phone UI bottom nav bar 3. BlurText component (word-by-word blur reveal) A motion component that splits text into words (or chars), observes itself with IntersectionObserver (threshold 0.1), and animates each word with staggered keyframes. Props & defaults: delay=200 (ms per-word stagger), animateBy="words", direction="top", threshold=0.1, rootMargin="0px", stepDuration=0.35, easing = (t) => 1 - Math.pow(1 - t, 3) (easeOutCubic), as="p". Default from for direction="bottom": { filter: "blur(10px)", opacity: 0, y: 50 } (for "top": y: -50). Default to keyframes: [{ filter: "blur(5px)", opacity: 0.5, y: -5 }, { filter: "blur(0px)", opacity: 1, y: 0 }] (y: 5 mid-step for "top"). Build combined keyframe arrays [from, ...steps] per property; times evenly spaced; total duration = stepDuration * steps; per-word delay = index * delay / 1000. Container: display: flex; flex-wrap: wrap; each word an inline-block motion.span with will-change-[transform,filter,opacity], joined by spaces. 4. PhoneUI component (iPhone mockup, prop width default 260) Height = width * (19.5/9); borderRadius = width * 0.13; boxShadow: "0 0 0 4px white" (white bezel); overflow: hidden; column flex. Background gradient: linear-gradient(170deg, #b8b4e0 0%, #cac7f0 25%, #dcd9f8 55%, #eceaff 100%). Status bar: time "9:41" (font-body, 12px, 600, white, letterSpacing -0.3); centered black Dynamic Island pill (absolute, 80×24, top 10, borderRadius 999); right icons drawn as inline SVGs — 5-bar signal (bars at increasing heights, opacities 0.4/0.6/0.8/1/1), wifi arcs, battery (21×11 outline at 35% opacity, filled 17×8 inner rect, nub at 40%). Greeting row (px-5, mt-3): 32px round avatar (imgPeaceSymbol, bg #d0cce8), text "Hello, Kristina!" (font-body 13px; "Hello," at white/50, name at white/90 weight 500). Right: 28px circle (bg white/10, border white/15) with an 11×11 white bell SVG, path: M9.55718 5.60049L8.81469 2.93313C8.57518 2.07365 8.05532 1.31887 7.33771 0.788685C6.62009 0.258505 5.74588 -0.0166579 4.85397 0.00691348C3.96206 0.0304848 3.1036 0.351439 2.41499 0.918782C1.72638 1.48613 1.24711 2.26732 1.05333 3.13824L0.479518 5.71872C0.403817 6.05941 0.405587 6.41275 0.484697 6.75267C0.563807 7.09258 0.718239 7.41039 0.936593 7.68264C1.15495 7.95489 1.43165 8.17464 1.74628 8.32565C2.06092 8.47667 2.40544 8.55511 2.75444 8.55518H2.92396C3.05882 9.02157 3.34158 9.43151 3.72964 9.72326C4.11771 10.015 4.59006 10.1728 5.07556 10.1728C5.56106 10.1728 6.03341 10.015 6.42148 9.72326C6.80954 9.43151 7.0923 9.02157 7.22716 8.55518H7.30895C7.6683 8.55522 8.02279 8.47217 8.34473 8.31253C8.66667 8.15289 8.94734 7.92097 9.16481 7.63489C9.38228 7.34882 9.53066 7.01634 9.59835 6.66342C9.66605 6.31051 9.65123 5.94672 9.55506 5.60049H9.55718ZM8.15485 6.86509C8.05647 6.99571 7.92897 7.10157 7.78249 7.17426C7.63601 7.24695 7.47459 7.28445 7.31107 7.28379H2.75444C2.59582 7.28376 2.43923 7.24811 2.29622 7.17947C2.15322 7.11083 2.02745 7.01096 1.9282 6.88722C1.82895 6.76349 1.75875 6.61904 1.72278 6.46455C1.68682 6.31006 1.686 6.14946 1.72039 5.99461L2.2942 3.40947C2.42597 2.8145 2.75298 2.2807 3.22318 1.89305C3.69338 1.5054 4.27974 1.28618 4.88893 1.2703C5.49811 1.25441 6.0951 1.44276 6.58487 1.80538C7.07464 2.16799 7.42902 2.68402 7.59162 3.27132L8.33242 5.93867C8.37711 6.09624 8.38433 6.26208 8.3535 6.42294C8.32267 6.5838 8.25464 6.73521 8.15485 6.86509Z (viewBox 0 0 10.171 10.171). Heading (px-5, mt-3): "How do you\nfeel today?" — font-display, fontSize width * 0.135, weight 500, white, lineHeight 1.05, letterSpacing -1. Mood dial (centered SVG 200×200, marginTop 12): outer circle r=80 white stroke 1.5 @ 0.9 opacity; inner circle r=58 white stroke 1 @ 0.3; three white dots r=4 @ 0.7 opacity at 270°, 0°, 180° on the outer ring; purple #8173F8 arc stroke 2.5 round-cap from 220° to 90° clockwise (large-arc), with a filled #8173F8 dot r=7 at the 90° end; labels "12 AM" above (y = cy−R−8) and "12 PM" below (y = cy+R+16), 9px font-body white @ 0.7; "Neutral" centered (y = cy−10, 11px, weight 500); center button: white circle r=12 @ 0.14 opacity at (cx, cy+10) with an upward white triangle @ 0.8 opacity. Flex spacer, then imgBottomNav image full-width at the bottom. 5. Page layout (LandingPage)

, bg #6574a4, font-display, relative. Sections in order: Hero → FeaturesIntro → MoodTrackingCard → GuidedMeditationsCard. 5a. Nav (inside hero, z-50, px-5/sm:8/md:10, pt-5/md:6, inner max-w-7xl) Left: noola logo — white SVG, viewBox="0 0 99 32", h-6 sm:h-7, 7 white paths (see §7). Desktop (md+): links Features / Therapy / Meditations / About as white pill buttons (px-5 py-3 bg-white rounded-xl, text #706a9b, text-xs uppercase tracking-widest, hover bg-white/90); right CTA "Get the app" (px-5 py-2.5 rounded-xl, bg #9092e3, white, text-sm uppercase, hover opacity-90). Mobile: 3-line hamburger (24×2px white bars, gap 1.5) morphing to an X — top bar translateY(8px) rotate(45deg), middle fades/scaleX(0), bottom translateY(-8px) rotate(-45deg), transition 0.35s cubic-bezier(0.4,0,0.2,1). Dropdown absolutely positioned below nav (left-5 right-5): bg-white/10 backdrop-blur-md rounded-2xl, maxHeight 0→400 + opacity, 0.45s cubic-bezier(0.4,0,0.2,1); each link staggers in at i * 40ms with translateY(-8px)→0; ends with a full-width purple "Get the app" button. 5b. Hero

relative flex-col, bg #6574a4, overflow: visible, minHeight: 100svh. Background video: absolute inset-0, full-bleed

Coastal Estate