22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:T1c27,PROMPT: Build a single-page hero section for a renewable energy company called "EcoVolta" using React, TypeScript, Vite, Tailwind CSS, Framer Motion, and Lucide React icons. The page should be a full-viewport height (h-screen) layout with no scrolling (overflow-hidden). TECH STACK: React 18 + TypeScript Vite Tailwind CSS 3 Framer Motion (for animations) Lucide React (for icons) clsx + tailwind-merge (for className utility) Font: Google Fonts Inter (weights 300-900) BACKGROUND: The entire page background color is #F5F3EE (warm off-white/cream) A full-page background video plays on loop, autoplaying, muted, with playsInline. It is fixed, inset-0, w-full h-full object-cover at z-0 Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260402_161801_19c1f902-b569-4d42-87b0-4de571a14399.mp4 NAVBAR (z-10, relative): Flex row, space-between, padding px-4 md:px-8 py-4 md:py-6 Left side: Text logo "EcoVolta" (text-lg md:text-xl font-semibold), followed by a language selector showing a Globe icon (lucide Globe, 16x16) and "En" text Center (hidden on smaller than lg): Navigation links -- "Renewables", "Strategies", "Photovoltaic", "Wind Systems", "Packages" -- each text-sm text-gray-700 hover:text-gray-900, spaced gap-8 Right side: "Sign In" link (hidden below sm) with a rounded-full border (border border-black/20) and padding px-4 md:px-6 py-2 md:py-2.5; "Clean Energy" button with bg-black text-white rounded-full same padding HERO CONTENT (z-10, centered, flex-col items-center): Container: flex-1 flex flex-col items-center px-4 md:px-8 pt-4 md:pt-8 Badge/Pill: Rounded-full pill with border border-black/20, containing emojis and text: sun -> planet earth -> "Delivering power innovate" -> seedling (exact: sun emoji arrow earth globe emoji Delivering power innovate arrow seedling emoji). On mobile, shorter text "Power innovate". Font size text-xs md:text-sm. Main Heading: Uses a custom StaggeredFade animation component. Text: "Renewable Power For Tomorrow, Infinite Clean Solutions". Styling: text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight font-normal text-center max-w-5xl mb-3 md:mb-4. Color: #31463B (dark forest green). The animation reveals each letter individually with a staggered 0.03s delay per letter, 0.3s duration fade-in, triggered once when in view. Subheading: Wrapped in FadeDown component (delay 0.5s). Text: "Sustainable Energy Platform. Engineering, deploying, and servicing solar arrays for homes, businesses, and large-scale operations worldwide." Styling: text-center text-gray-600 max-w-3xl mb-4 md:mb-5 text-sm md:text-base lg:text-lg. CTA Buttons (FadeDown delay 0.7s): Two buttons side by side (column on mobile, row on sm+): Primary "Explore Options": bg-gradient-to-r from-[#3C684D] to-[#4A7144] (green gradient), white text, rounded-full, contains a Leaf icon (16x16) on left, text, and a circular icon button on right (w-7 h-7 md:w-8 md:h-8) with gradient background linear-gradient(59deg, #567A5E 0%, #78A873 100%) containing a filled Play icon Secondary "Start Network": White bg, text-gray-700, rounded-full, text on left, circular icon on right with gradient linear-gradient(59deg, #EEEEEE 0%, #CBCBCB 100%) containing a black ArrowRight icon BOTTOM-LEFT ELEMENT (hidden below md, absolute bottom-24 left-8, z-10): White rounded-lg box (40x40) with a MapPin icon in text-[#4A7C5A] Below it: "4521 Sunvalley," (font-medium text-gray-900) and "Rd7, USA" (text-gray-600) BOTTOM-CENTER ELEMENT (absolute bottom-20 md:bottom-24, z-10): A "liquid glass" play button: 36x36 md:40x40 circle with glassmorphism effect (see CSS below), containing a filled white Play icon Next to it: "Clean Power System" text in text-xs md:text-sm font-medium text-white BOTTOM-RIGHT ELEMENT (hidden below lg, absolute bottom-48 right-8, z-10): Three overlapping avatar circles (profile images): Left: 40x40 circle, z-0, positioned left-0 Center: 64x64 circle with 4px white border, z-10, centered via left-1/2 -translate-x-1/2 Right: 40x40 circle, z-0, positioned right-0 Container: h-16 w-28 relative Avatar image URLs: Left: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260404_181959_c031059f-0b95-4099-89ca-105c74073dd7.png&w=1280&q=85 Center: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260404_181856_0904710c-03e6-460d-86ac-9acc0958001f.png&w=1280&q=85 Right: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260404_182114_826e4e5d-c7c6-425f-a72b-0410be243f72.png&w=1280&q=85 Text: "+ 37k Deployments" (text-sm font-medium) Row of 5 icons below: RefreshCw, Square, PlusCircle, Grid2X2, Sparkles (all 20x20, text-black) LOGO MARQUEE (bottom of page, z-10): Padding pb-6 md:pb-8, overflow hidden Infinitely scrolling list of company names: Retool, remote, ARC, Raycast, runway, ramp, HEX, Vercel, descript (duplicated for seamless loop) Each name: text-gray-400 text-base md:text-xl font-medium whitespace-nowrap, gap gap-8 md:gap-16 CSS keyframe animation scroll translating from 0 to -50% on X axis, duration 15s on mobile / 30s on desktop, linear infinite Left and right gradient fade overlays: w-16 md:w-32, gradient from #F5F3EE to transparent LIQUID GLASS CSS (custom utility class .liquid-glass): .liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } SCROLL KEYFRAME: @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } ANIMATION COMPONENTS: StaggeredFade: Renders an

using Framer Motion. Splits the text into individual letters. Each letter fades in (opacity: 0 -> 1) with a staggered delay of i * 0.03s and duration 0.3s. Triggered once when the element enters the viewport (useInView with once: true). FadeDown: A Framer Motion wrapper div that animates from opacity: 0, y: -20 to opacity: 1, y: 0 with duration: 0.6s and a configurable delay. Triggered once when in view. RESPONSIVE BREAKPOINTS: Mobile-first design sm (640px): CTA buttons go horizontal, "Sign In" visible, badge shows full text md (768px): Larger text sizes, bottom-left address visible, spacing increases lg (1024px): Desktop nav links visible, bottom-right avatars/deployments visible, heading reaches text-6xl24:T15c7,Create a single-page landing page for a fictional space engineering consultancy called "WE ARE ORBIT ENGINEERS". The page has 3 full-screen hero sections that the user navigates between using buttons (not scroll). Use React + Tailwind CSS + framer-motion + lucide-react icons (ChevronDown, ArrowRight). Font & Color System Font: Inter (Google Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap), set as font-sans in Tailwind config. Color scheme (HSL in CSS variables): --background: 210 33% 19% (dark blue-gray) --foreground: 0 0% 100% (white) --primary: 199 89% 60% (cyan accent) --accent: 199 89% 60% (same cyan) All text is white (text-foreground). Background is irrelevant since videos cover the full viewport. Background Videos Three elements are fixed, full-screen, layered behind content at -z-10. Each is autoPlay loop muted playsInline with object-cover. They crossfade using transition-opacity duration-700 — the active section's video is opacity-100, others are opacity-0. Section 0: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_190803_f5595254-156c-4d10-ad09-51a56eb4bc1e.mp4 Section 1: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_204728_2dbcd1c4-63bc-4779-b06c-b7e2d5788ea7.mp4 Section 2: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_210050_14d4d9cf-782b-4f6f-9764-08d793cf427c.mp4 Navigation Bar (always visible, z-20) Left: Small logo icon (8x8) + bold text stack: WE ARE / ORBIT / ENGINEERS (text-xl, font-bold, tracking-tight, line-height none, stacked with line breaks) Center (hidden on mobile, hidden md:flex): Three links — Industries, Projects, Insights — uppercase, tracking-widest, text-sm, font-medium Right: Geographic coordinates in monospace font: 51.50732 N / -0.12765 W (text-xs, tracking-widest, uppercase, font-mono, text-right, stacked with line breaks) Horizontal padding: px-10, top padding: pt-8 Section Transitions (framer-motion AnimatePresence mode="wait") All sections use cinematic framer-motion transitions: Section 0 enter: opacity: 0 → 1, scale: 1.05 → 1, blur: 10px → 0px (duration 0.8s, ease [0.22, 1, 0.36, 1]) Section 0 exit: opacity → 0, scale → 0.92, blur → 12px, y → -60 Section 1 & 2 enter: opacity: 0 → 1, y: 80 → 0, scale: 1.08 → 1, blur: 14px → 0px (duration 0.9s) Section 1 & 2 exit: opacity → 0, y → -80, scale → 0.95, blur → 10px Section 0 — Hero Landing Layout: Flex column, centered content Decorative elements: Two vertical line images positioned absolutely on left and right edges (left-10, right-10), spanning nearly full height (h-[calc(100%-3rem)]) Headline: "Unlock Tactical / Excellence through Space / Engineering" — text-2xl sm:text-3xl md:text-4xl lg:text-5xl, font-normal, letter-spacing: -3px, centered, max-w-4xl, line breaks Bottom bar: Left side has a "Scroll to explore" button with bouncing ChevronDown icon (navigates to section 1). Right side has a small logo icon at 60% opacity. Section 1 — Mission Statement Layout: Responsive — stacked vertically on mobile (flex-col items-center gap-10), horizontal row on desktop (md:flex-row md:items-center md:gap-16 md:justify-between) Left: Large heading "Spatial Vision / at Your Command" — text-4xl sm:text-5xl md:text-5xl lg:text-6xl, font-light, letter-spacing: -2px, leading-[0.95]. Animates in from x: -60 with 0.3s delay. Center: CTA button — "Begin Your Mission" with ArrowRight icon. White background, dark text (bg-foreground text-background), rounded-full, px-8 py-4, tracking 0.25em, uppercase. Hover scales to 105%. Animates in from y: 30 with 0.4s delay. Right: A "Why We Are" label (text-xs, tracking 0.3em, uppercase) alongside 4 vertically stacked dots (first filled, rest outline — small 5w images). Animates in from x: 60 with 0.45s delay. Bottom bar: Three elements — "Back to top" button (left, with rotated ChevronDown), centered tagline "Orbital Solutions is a key strategic / consulting firm in space engineering" (text-xs, tracking 0.25em, uppercase, animates from y: 30), and "Next" button (right, with bouncing ChevronDown). Section 2 — Service Detail Layout: Centered content with decorative vertical lines on left/right (same as section 0 but h-[calc(100%-1rem)]) Content stack (centered, gap-6): Section number "01" — text-sm, tracking 0.3em, uppercase, 60% opacity foreground, font-mono. Animates from y: 20, delay 0.3s. Heading "Operational Feasibility / Evaluation" — text-3xl sm:text-4xl md:text-5xl lg:text-6xl, font-light, letter-spacing: -2px, leading-[1.05]. Animates from y: 40, delay 0.4s. Description paragraph — "We analyze engineering proposals against / strategic benchmarks to uncover growth paths / and highlight untapped market potential." — text-sm, tracking 0.15em, 70% opacity foreground, max-w-md, font-mono, leading-relaxed. Animates from y: 30, delay 0.55s. Bottom bar: "Back" button (left), CTA button "Reach Out" with + symbol (center, same style as section 1 CTA), empty spacer div on right (w-20). Key Design Patterns All navigation between sections uses useState(0) with handleNext (min +1, max 2) and handlePrev (max -1, min 0) The entire page is min-h-screen with overflow-hidden All interactive elements use cursor-pointer Navigation text uses tracking-widest uppercase consistently Headlines use negative letter-spacing for a tight, architectural feel Technical/data text uses font-mono Buttons and links use hover:text-foreground/80 or hover:scale-105 transitions25:T1d7c,Recreate the WoodNest hero section exactly as a React + Tailwind CSS + Framer Motion component. Use font family "PP Mori" for the entire hero. Define @font-face for PP Mori normal weight 400 and semibold weight 600 using the existing embedded WOFF/WOFF2 data from src/styles/fonts.css. Set base html font size to 16px. The page is a full viewport hero: - Root wrapper: relative, min-height: 100vh, width: 100%, overflow hidden, font PP Mori, font weight 400. - Background: absolute full-screen video, inset 0, width/height 100%, object-cover. - Video attributes: autoPlay, muted, playsInline. Do not loop unless explicitly requested. - Exact video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260620_140846_aef8cb19-5ec8-4b45-974b-020aed20f297.mp4 Header: - Position relative, z-index 20. - Display flex, align center, justify-between. - Desktop padding: top 60px, left/right 65px. - Tablet/mobile padding: px 32px / 16px, top 45px / 30px. - Left: exact WoodNest SVG logo, 142px wide, 50px tall, white wordmark with warm yellow/orange mark (#FFB33F) and 0.6 opacity gradient details. - Center/right desktop nav hidden below md. - Nav items: Locations, Rooms, Experiences, Contact. - Nav gap desktop 44px, text white, PP Mori normal, 16px, line-height 24px. - Nav hover animation: opacity to 0.6, tap scale 0.96, duration 0.15. - Book Now button: white background, black text, PP Mori semibold 16px/24px, padding 12px 32px, border-radius 10px. - Button hover: scale 1.04 and background #f0f0f0. Tap scale 0.97. Transition duration 0.18 easeOut. - Mobile: show Menu/X icon button in white, 24px. Open menu is absolute below header, left/right 0, margin x 16px, margin-top 8px, background #2a3349, border-radius 16px, padding 24px, flex column gap 16px, shadow-xl, z-index 50. Hero main: - Position relative, z-index 10. - Padding desktop: 64px 65px 60px. - Padding tablet/mobile: top 40px/24px, x 32px/16px, bottom 56px/40px. - min-height: calc(100vh - 110px). - Display flex column. - Inner layout: flex-1, flex column on mobile, flex row on lg, lg align-stretch, gap 40px mobile, 0 desktop. Left content: - Flex column, justify-between, flex-1. - H1: PP Mori normal, white, tracking-tight. - Font size: clamp(52px, 9vw, 128px). - Line height: 0.82. - Three block lines: 1. "Nature's" in white 2. "Perfect" in white at 50% opacity 3. "Hideaways" in white - Animate each line with fade-up: initial opacity 0, y 28 animate opacity 1, y 0 transition duration 0.7, ease [0.22, 1, 0.36, 1] delays: 0.2, 0.35, 0.5 Bottom left row: - margin-top 40px on small screens, 0 on lg. - Flex column on mobile, row on sm/lg. - align-start, gap 32px; desktop lg gap 0. - Description paragraph: text: "Discover handpicked luxury cabins in breathtaking locations. Unplug, unwind, and reconnect with what matters most." PP Mori normal, color white/80, line-height 24px. Width 300px on sm/lg, full width on mobile. Font size clamp(15px, 1.3vw, 18px). Fade-up delay 0.65. - Rating block: flex column gap 8px. sm margin-left 32px, lg margin-left 140px. First row flex align-center gap 4px. Star icon: 28px square, fill #FFB33F, use the same star SVG path from the existing component. Rating text "4.7": white, PP Mori normal, 36px, line-height 34px. Caption text: " from 1,800+ stays", white, PP Mori normal, 20px, line-height 24px. Fade-up delay 0.75. Right reserve card: - Wrapper animates from right: initial opacity 0, x 40 animate opacity 1, x 0 transition duration 0.8, ease [0.22, 1, 0.36, 1], delay 0.4 - Layout wrapper: flex; on lg flex-col justify-end; lg padding-left 40px, xl padding-left 64px. - Card: relative, width 100%, max-width 410px, border-radius 35px, padding 30px, flex column, gap 30px. - Add two absolute inset layers inside card: 1. backdrop blur layer: inset 0, backdrop-filter blur(12.5px), border-radius 35px, pointer-events none. 2. tint layer: inset 0, background rgba(0,0,0,0.25), mix-blend-mode soft-light, border-radius 35px, pointer-events none. Reserve card content: - Title row: relative flex, align-start, justify-between, gap 16px. - Cabin title: PP Mori normal, white, 32px, line-height 36px, width 280px, two lines: "Evergreen " "Pine Family Lodge" - Edit icon circle: background rgba(0,0,0,0.35), size 40px, border-radius 9999px, centered. Icon is 20px, stroke #BDC6C7 at 40% opacity using the existing SVG paths. - Date row: Two equal pills in a flex row gap 10px. Each pill button: width 100%, background rgba(0,0,0,0.35), display flex, gap 6px, align center, padding 16px, border-radius 10px. Text: white, PP Mori normal, 16px/24px, flex-1, text-left. Values: "Feb 11" and "Mar 25". Calendar icon 20px, stroke #515C62. Chevron icon 16px, stroke #515C62. Hover: background rgba(0,0,0,0.5), scale 1.02. Tap scale 0.97. Duration 0.18 easeOut. When open, add ring 1px white/20 and rotate chevron 180deg over 0.2s. - Dropdown calendar: absolute top calc(100% + 8px), left/right 0, z-index 50, border-radius 16px, overflow hidden, padding 16px. Background rgba(30,38,60,0.97), backdrop-filter blur(16px). Month label centered, white/60, 13px/20px, margin-bottom 12px, tracking-wide. Grid 7 columns, vertical gap 4px. Weekday labels white/30, 11px/20px. Day buttons 13px/20px, height 28px, border-radius 8px. Selected day white background, text #34405c, semibold. Calendar months: February 2025, 28 days, starts after 6 blanks; March 2025, 31 days, starts after 6 blanks. - Time info box: background rgba(0,0,0,0.35), height 73px, border-radius 10px, overflow hidden, position relative. Left label: "Check-in", x 16px, top 16px, PP Mori normal, 14px/16px, color #bdc6c7, opacity .4. Left value: "After 2:00 PM", x 16px, top 34px, white, 16px/24px. Right label: "Check-out", right 16px, top 16px, same label style. Right value: "Until 12:00 PM", right 16px, top 34px, white, 16px/24px. Center divider: vertical line, height 44px, width 1px, background #515C62, opacity .4, centered horizontally. - Price row: flex column gap 24px. Price/guest line: flex align-end justify-between, no wrapping. Price: "$359" white, 32px, line-height 28px; "/night" color #515c62, 20px. Guest text: "2-5 guests", white, 14px/16px. - Reserve button: width 100%, height 48px, background white, border-radius 10px, centered. Text "Reserve", PP Mori semibold, black, 16px/24px. Hover scale 1.03 and background #f0f0f0. Tap scale 0.97. Duration 0.18 easeOut. Global animation helpers: fadeUp(delay): initial { opacity: 0, y: 28 } animate { opacity: 1, y: 0 } transition { duration: 0.7, ease: [0.22, 1, 0.36, 1], delay } fadeDown(delay): initial { opacity: 0, y: -20 } animate { opacity: 1, y: 0 } transition { duration: 0.6, ease: [0.22, 1, 0.36, 1], delay } fadeRight(delay): initial { opacity: 0, x: 40 } animate { opacity: 1, x: 0 } transition { duration: 0.8, ease: [0.22, 1, 0.36, 1], delay } At a 1545x997 viewport, the rendered desktop geometry should approximately be: - Header: x 0, y 0, w 1545, h 110, padding 60px 65px 0. - Main: x 0, y 110, w 1545, h 887, padding 64px 65px 60px. - H1: x 65, y 174, w about 955, h 315. Font 128px, line-height 104.96px. - Description: x 65, y 841, w 300, h 96. - Rating value row: x 505, y 841. - Reserve card: x about 1084, y 502, w about 396 rendered at this viewport, h 436, padding 30px, radius 35px. Do not add extra overlays, gradients, cards, marketing sections, or explanatory text. The hero should be the first screen and match this exact composition.26:T2840,Build a standalone React + TypeScript + Tailwind CSS section component. This is a fragrance product showcase split into two halves: a looping video on the LEFT and a lime-green product panel on the RIGHT. On mobile it stacks vertically with the product panel ABOVE the video (achieved via `flex-col-reverse`). Every value below is exact. ## Tech Stack - React 18 + TypeScript - Tailwind CSS 3 (default config, default breakpoints: `sm:640px`, `md:768px`) - Vite - No extra packages. No icon libraries needed. ## Constants ```ts const TEXT_COLOR = '#000000'; const BG_LIME = '#BDE84F'; const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'; ``` ## Animation Helper ```ts function anim(visible: boolean, delay: number, opts: { y?: number; x?: number; duration?: number } = {}) { const { y = 20, x = 0, duration = 1600 } = opts; const translateFrom = y !== 0 ? `translateY(${y}px)` : x !== 0 ? `translateX(${x}px)` : 'none'; return { style: { opacity: visible ? 1 : 0, transform: visible ? 'translate(0,0)' : translateFrom, transition: `opacity ${duration}ms ${EASE} ${delay}ms, transform ${duration}ms ${EASE} ${delay}ms`, } as React.CSSProperties, }; } ``` ## Product Data ```ts const WILD_PRODUCT = { name: 'Eau So Extra', size: '100 ml / 3.3 oz', image: 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260511_151621_4fba6892-ed21-4c2e-8cb3-0bd2ec2abefa.png&w=1280&q=85', notes: [ { label: 'Top', ingredient: 'BANANA BLOSSOM ACCORD' }, { label: 'Heart', ingredient: 'CHOCOLATE DAISY ACCORD' }, { label: 'Base', ingredient: 'VETIVER OIL' }, ], }; ``` ## Video URL (exact, verbatim) ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_151818_65bb22c5-33ae-4e23-85ea-0a3dd89957c2.mp4 ``` --- ## Component: `ProductPanel` This is a reusable component shared with Section 2. For this section it is called with `noteStyle="bold"`. ### Props ```ts { bg: string; product: { name: string; size: string; image: string }; notes: { label: string; ingredient: string }[]; visible: boolean; noteStyle?: 'normal' | 'bold'; // defaults to 'normal' } ``` ### Outer wrapper ```jsx
``` ### 1. Top labels row ```jsx
{noteStyle === 'bold' ? 'Daisy wild' : 'Daisy love'} {noteStyle === 'bold' ? 'Playful' : 'Sweet'}
``` For this section (`noteStyle="bold"`), the labels read "Daisy wild" on the left and "Playful" on the right. ### 2. Product image block ```jsx
``` #### Image container ```jsx

``` #### Caption (below image) ```jsx

{product.name}

{product.size}

``` ### 3. Bottom row — notes + button ```jsx
``` #### Notes column (left side) ```jsx
``` For each note, render `
` with two `
`: - Label: `
{note.label}
` - Ingredient: `
{note.ingredient}
` For this section (`noteStyle="bold"`), the note LABELS ("Top", "Heart", "Base") render at `fontWeight: 700`. The ingredient lines are always `font-bold` regardless. #### SHOP NOW button (right side) ```jsx ``` Button: `1px` solid border colored `#000000`. On hover, a white fill scales from the left over 500ms. Text stays above (`z-10`). --- ## Component: `WildScentSection` ### Visibility trigger ```ts const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) setVisible(true); }, { threshold: 0.15 } ); if (ref.current) observer.observe(ref.current); return () => observer.disconnect(); }, []); ``` One-shot: once 15% visible, `visible` becomes `true` permanently, triggering all staggered animations. ### Layout structure ```jsx

``` Critical difference from Section 2: This uses `flex-col-reverse` (not `flex-col`). The DOM order is: video divs first, then ProductPanel. But on mobile, `flex-col-reverse` visually flips them so the product panel appears ABOVE the video. ### Three children inside (in DOM order): #### Child 1: Desktop video panel (left half on desktop, hidden below `md`) ```jsx

``` #### Child 2: Mobile video strip (hidden at `md` and above) ```jsx

``` #### Child 3: ProductPanel (right half on desktop, visually on top on mobile) ```jsx ``` Called with `noteStyle="bold"`, which changes: - Top labels: `"Daisy wild"` / `"Playful"` (instead of `"Daisy love"` / `"Sweet"`) - Note labels: `fontWeight: 700` (instead of `400`) --- ## Responsive Behavior | Viewport | Layout | Visual order (top to bottom / left to right) | |---|---|---| | < 768px | `flex flex-col-reverse` | Product panel (lime, full width) then video strip (`height: 75vw`, full width) | | >= 768px | `grid 1fr 1fr`, `min-h-screen` | Video (left half) then Product panel (right half, lime) | The `flex-col-reverse` trick: DOM order is [video-desktop, video-mobile, panel]. On mobile, `flex-col-reverse` reverses visual order to [panel, video-mobile, video-desktop(hidden)]. On desktop, `md:grid` overrides flex, and the grid places them left-to-right in DOM order: video left, panel right. ## Animation Stagger Timeline All triggered when 15% of the section scrolls into view. Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. | Element | Delay | Duration | Direction | Distance | |---|---|---|---|---| | Top labels ("Daisy wild" / "Playful") | 0ms | 1400ms | translateY | 12px | | Product image block | 300ms | 1800ms | translateY | 40px | | Caption (name + size) | 600ms | 1400ms | translateY | 10px | | Notes column | 900ms | 1400ms | translateY | 16px | | SHOP NOW button | 1150ms | 1400ms | translateY | 16px | Each element starts at `opacity: 0` + translated down, then transitions to `opacity: 1` + `translate(0,0)`. ## Colors Used - `#BDE84F` — product panel background (lime green) - `#000000` — all text, button border - `#D9D9D9` — image placeholder background - `#111` — video panel background (while loading) - `#ffffff` — button hover fill ## Fonts No custom or Google Fonts. Tailwind default sans-serif system stack for all text. ## SVGs / Icons None in this section. ## Key Differences from Section 2 (ScentFinder) | Aspect | Section 2 (ScentFinder) | Section 3 (WildScent) | |---|---|---| | Background color | `#4BB3ED` (sky blue) | `#BDE84F` (lime green) | | Panel position (desktop) | LEFT half | RIGHT half | | Video position (desktop) | RIGHT half | LEFT half | | Flex direction (mobile) | `flex-col` (panel on top, video below) | `flex-col-reverse` (panel on top via reversal, video below) | | Top labels | "Daisy love" / "Sweet" | "Daisy wild" / "Playful" | | Note label weight | `fontWeight: 400` (normal) | `fontWeight: 700` (bold) | | `noteStyle` prop | `'normal'` (default) | `'bold'` | | Product name | Eau So Sweet | Eau So Extra | | Product size | 100 ml / 3.3 oz | 100 ml / 3.3 oz | | Video URL | `...151802_1bbf9a81...` | `...151818_65bb22c5...` | | Notes content | Fruity top / WHITE RASPBERRIES, Floral heart / DAISY TREE PETALS, Feminine base / SUGAR MUSKS | Top / BANANA BLOSSOM ACCORD, Heart / CHOCOLATE DAISY ACCORD, Base / VETIVER OIL |27:T3abc,Project Setup Stack: React 19 + Vite 6 + Tailwind CSS 4 + Motion (Framer Motion) + Lucide React icons + TypeScript package.json dependencies: - `react`, `react-dom` ^19.0.1 - `vite` ^6.2.3 - `@tailwindcss/vite` ^4.1.14, `tailwindcss` ^4.1.14 - `motion` ^12.23.24 - `lucide-react` ^0.546.0 - `@vitejs/plugin-react` ^5.0.4 - `typescript` ~5.8.2 Fonts (loaded via Google Fonts in `index.css`): - Sans: Inter (weights: 300, 400, 500, 600) - Mono: JetBrains Mono (weights: 400, 500) ```css /* index.css */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); @import "tailwindcss"; @theme { --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } @layer utilities { .text-mega { font-size: 21vw; line-height: 0.75; letter-spacing: -0.04em; } } ``` Global styling: Background `#fcfcfc`, text `#111`, selection color `bg-black text-white`, `overflow-x-hidden`, `font-sans` (Inter). --- DATA ```tsx const chaptersData = [ { name: "Age of Dinosaurs", image: "https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624247/01_udnber.png" }, { name: "Fossils of Ancient Life", image: "https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624374/02_pmvxxl.png" }, { name: "Reptiles of the Mesozoic", image: "https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624236/03_hcp3jc.png" }, { name: "Marine Fossil Gallery", image: "https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624256/04_get63z.png" }, { name: "Prehistoric Giants", image: "https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624251/05_kz1tyu.png" } ]; ``` --- STATE ```tsx const [showVideo, setShowVideo] = useState(false); const [activeChapter, setActiveChapter] = useState(2); // starts at "Reptiles of the Mesozoic" const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); ``` - `showVideo` flips to `true` after a 2800ms delay (setTimeout) - `activeChapter` auto-cycles every 3500ms via setInterval, wrapping `(prev + 1) % 5` --- ANIMATION VARIANTS ```tsx const fadeUp = { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, }; const letterBlock = { initial: { y: 120, opacity: 0 }, animate: { y: 0, opacity: 1, transition: { duration: 1.2, ease: [0.16, 1, 0.3, 1] } } }; ``` --- SECTION 1: HERO (full viewport height) Container: `relative w-full min-h-screen flex flex-col overflow-hidden` 1A. HEADER (NHM Logo) - `motion.header` with `staggerChildren: 0.1, delayChildren: 0.1` - Padding: `pt-6 px-6 md:px-16`, `z-20` - The "NHM" logo is a custom inline SVG with `viewBox="0 0 840 100"`, `fill-[#111]`, full width - The SVG is wrapped in `motion.h1` with `variants` that animate from `scale: 1.03` to `scale: 1` with `staggerChildren: 0.06, delayChildren: 0.1` - Each polygon of each letter uses the `letterBlock` variant (slides up from `y: 120`) - Letter N (translate 0,0): Three polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `200,0 214,0 214,100 200,100`, diagonal `0,0 33,0 214,100 181,100` - Letter H (translate 280,0): Three polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `200,0 214,0 214,100 200,100`, crossbar `14,43 200,43 200,57 14,57` - Letter M (translate 560,0): Four polygons -- left vertical `0,0 14,0 14,100 0,100`, right vertical `266,0 280,0 280,100 266,100`, left diagonal `0,0 26,0 153,100 127,100`, right diagonal `254,0 280,0 153,100 127,100` 1B. SUB-NAV BAR - Below the SVG logo, `flex justify-between items-start mt-8` - Font: `text-[10px] md:text-[11px] font-mono tracking-[0.2em] uppercase` - Uses `fadeUp` variant with `duration: 0.8, ease: "easeOut"` Left column (15% width): Three lines -- "Natura" / "History" / "Museum" Arrow separator (5% width, hidden on mobile): `ArrowRight` from lucide, size 14, strokeWidth 1, `text-gray-400` Center column (flex-1 on mobile, 30% on desktop): "Exploring the story of life on earth through science, discovery and wonder." -- Split differently on desktop (3 lines) vs mobile (4 lines). `text-gray-800 leading-relaxed font-mono` Arrow separator (5% width, hidden on mobile): Same as above Right column (15% width, hidden on mobile): Nav links list -- Visit, Exhibitions, Discover, Learn, About. `text-gray-800`, `hover:text-black hover:underline` Hamburger button (far right, z-60): Two horizontal lines (`w-8 h-[1.5px] bg-black`), `gap-[6px]`. Hover: first line shrinks to `w-6`, second expands to `w-10`. When open: first rotates 45deg + translateY, second rotates -45deg + translateY (forming an X). Transition: `duration-300`. 1C. MOBILE MENU OVERLAY - `AnimatePresence` wrapping a `motion.div` - Appears below the header, slides in from `y: -20`, `opacity: 0` to `y: 0, opacity: 1` - `bg-[#fcfcfc] border-b border-gray-200 shadow-xl`, only visible on `md:hidden` - Contains the same nav links as the desktop version, `text-sm font-mono tracking-[0.2em] uppercase`, `space-y-6` 1D. BACKGROUND VIDEO - Appears after 2800ms delay (controlled by `showVideo` state) - `absolute top-0 left-0 w-full h-full pointer-events-none z-0` - Video: `autoPlay loop muted playsInline`, `w-full h-full object-cover` - Video URL: `https://res.cloudinary.com/dsdxaxkiz/video/upload/v1779624998/magnific_use-img-2-as-the-exact-ba_Piu3X0W42C_wnrc8f.mp4` 1E. LEFT SIDEBAR CONTENT - `motion.div` with `staggerChildren: 0.15, delayChildren: 0.6` - Position: `px-10 md:px-16`, `mt-20 sm:mt-28 md:mt-32`, `w-[320px]`, `z-10` Section indicator: `01` + horizontal line (`w-16 h-[1.5px] bg-black/20`), `text-xs font-mono` Headline: "TIMELESS WONDERS" -- `text-[3.5rem] md:text-[5rem] font-normal tracking-tight leading-[1]`. Line break between "TIMELESS" and "WONDERS". Description: "Step into the natural world and / discover the stories written / millions of years ago." -- `text-[13px] md:text-[14px] text-gray-700 w-[240px] leading-[1.6]` CTA Button ("Explore Now"): - Container: `bg-[#1a1a1a] px-6 py-3.5 border border-[#1a1a1a] rounded-md shadow-sm` - Hover: slides up 0.5px, adds `shadow-[3px_3px_0px_rgba(17,17,17,0.5)]` - Active: resets translate and shadow - Has a sliding background panel: `bg-[#fcfcfc]` that slides from `-translate-x-[101%]` to `translate-x-0` on hover, `duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]` - Icon: Custom SVG leaf/plant shape (4 paths forming a stylized leaf), white by default, turns `#111` on hover with `scale-110 -rotate-12 -translate-y-1` transform - Text: "Explore Now", `text-[15px] font-medium`, white turning to `#111` on hover 1F. RIGHT SIDEBAR (hidden on mobile) - `motion.div` with `staggerChildren: 0.15, delayChildren: 0.9` - Position: `w-[200px] mt-12 md:mt-20`, `hidden md:flex` Specimen info: "Tyrannosaurus Rex" heading (`text-[10px] font-bold font-mono tracking-widest uppercase`), subtext "Late Cretaceous period / 68-66 million years ago" (`text-[12px] text-gray-600 leading-[1.6]`) Stats: "Length" label + "12.3 m" value, "Height" label + "4.0 m" value. Labels: `text-[10px] font-mono tracking-widest uppercase text-gray-500`. Values: `text-[13px] font-medium`. View Details button: Circle (`w-10 h-10 rounded-full border border-gray-400`) with `Plus` icon (size 16, strokeWidth 1.5), text "View Details" (`text-[10px] font-mono uppercase tracking-widest font-bold`). Hover: circle gets `border-black bg-[#111]`, icon turns white. 1G. BOTTOM-LEFT "SCROLL TO EXPLORE" - `absolute bottom-10 left-[2.5rem] md:left-[4rem]`, `hidden md:flex` - Fade up animation: `delay: 1.2` - Circle (`w-12 h-12 rounded-full border border-gray-300`) containing two thin vertical lines (`w-[1px] h-[12px] bg-gray-600`, `gap-[4px]`) representing a pause icon - Text: "Scroll to explore" -- `text-[10px] font-mono tracking-widest uppercase text-gray-500 font-semibold` --- SECTION 2: "EXPLORE OUR WORLD" Container: `relative w-full min-h-[75vh] md:min-h-screen bg-[#fcfcfc]`, flex column centered, `pt-24 md:pt-32 pb-0 z-20` 2A. SECTION LABEL `[ 02 ] Explore Our World` -- `text-[10px] md:text-[11px] font-mono tracking-[0.2em]`, `mb-12`. "02" in `text-gray-500`, "Explore Our World" in `text-gray-900 font-bold uppercase`. 2B. MAIN HEADING "Unearth the stories of our planet's past through fossils, minerals, and ancient wonders." -- `text-[2.2rem] md:text-[3.5rem] lg:text-[4.2rem] leading-[1.1] font-medium tracking-tight text-[#111]`, max-width 1000px, text-center. Line break on desktop after "past". Animates with `whileInView` from `y: 40, opacity: 0` to `y: 0, opacity: 1`, `once: true`, margin `-100px`. 2C. ACTION PILLS Five pill buttons in a flex-wrap row, `gap-3 md:gap-4`, `mb-10 md:mb-24`. Staggered reveal animation (`staggerChildren: 0.1, delayChildren: 0.3`). Each pill: `rounded-full border border-gray-300 text-[11px] font-medium uppercase tracking-wider bg-white/50 backdrop-blur-sm text-gray-800`. Hover: `border-black bg-black text-white`. Icons from lucide (size 14, strokeWidth 2): 1. `Bone` + "Dinosaurs" 2. `Dna` + "Ancient Life" 3. `Gem` + "Minerals" 4. `Leaf` + "Fossils" 5. `BookOpen` + "Learn More" 2D. SPACER `min-h-[220px] md:min-h-[450px]` -- provides room for the pterodactyl image from Section 3 to overlap upward. 2E. BOTTOM TEXT Absolute positioned at bottom, `px-8 md:px-16 pb-8 md:pb-12`, `pointer-events-none`. Two text elements at `justify-between`: - Left: "WE DON'T JUST TELL STORIES." - Right: "PALEONTOLOGY (C) 2026" - Both: `text-[10px] font-mono tracking-widest uppercase text-gray-500 font-medium`, hidden on mobile. --- SECTION 3: "ANCIENT COLLECTION" (Dark Section) Container: `relative w-full bg-[#0a0a0a] text-white flex flex-col z-30` 3A. PTERODACTYL IMAGE (Overlapping) - Absolute positioned at top, centered horizontally (`left-1/2 -translate-x-1/2`) - Width: `w-[160vw] md:w-[1100px]` - Image URL: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779625001/ChatGPT_Image_May_23_2026_12_24_44_PM_1_lv1dne.png` - Animates with `whileInView` from `y: "-65%", opacity: 0` to `y: "-78%", opacity: 1`, `duration: 1.4, ease: "easeOut"`, viewport margin `100px` - `pointer-events-none z-0`, `mix-blend` not applied here 3B. HEADING AREA - Padding: `px-8 md:px-16 pt-32 md:pt-48 mb-16`, `z-10` - Two-column layout on xl (`flex-col xl:flex-row justify-between`) Left -- Main heading: "Curated from millions of years of wonder [3 circle icons] & discovery." -- `text-[1.8rem] md:text-[3rem] lg:text-[3.8rem] xl:text-[4rem] leading-[1.15] font-medium tracking-tight text-white`. The three circle icons are inline (`inline-flex gap-2 md:gap-3 align-middle mx-2 md:mx-4 translate-y-[-4px]`), each `w-10 h-10 md:w-14 md:h-14 rounded-full border border-gray-600 bg-black text-gray-400`. Hover: `bg-white text-black border-white`. Icons: `Bone`, `Dna`, `Leaf` (size 22). Right -- Tagline + pills: - Tagline: "WE DON'T JUST DISPLAY FOSSILS / WE SHARE EARTH'S STORY" -- `text-[9px] md:text-[10px] font-mono tracking-widest text-gray-400 uppercase mb-6 leading-relaxed` - Three pills: "Educational", "Authentic", "Inspiring" -- `px-5 py-2 rounded-full border border-gray-600 text-[9px] font-mono tracking-widest uppercase text-gray-300`. Hover: `bg-white text-black border-white`. 3C. TWO-COLUMN PANEL Separated by `h-[1px] bg-gray-800` line. Flex row on desktop, column on mobile. Left panel (35% width): - `border-r border-gray-800` on desktop, `border-b` on mobile - `min-h-[400px] md:min-h-[500px]` - Top: `***` text (`text-gray-500 text-xl tracking-[0.3em]`) - Center: Chapter image using `SandTransitionImage` component (SVG filter-based sand/dissolve transition). Image: `absolute inset-0 w-[80%] h-[80%] m-auto object-contain mix-blend-lighten`. Uses `AnimatePresence mode="wait"`. - Bottom: Chapter counter `01 / 05` style, with animated number (`motion.div` slides vertically). `text-[10px] font-mono tracking-widest text-[#888] uppercase`. Counter numeral color `#888`, divider `text-[#333]`. Right panel (65% width): - Top bar: "Explore the past. Understand the present." + animated "Chapter 0X" label. `border-b border-gray-800 p-8 text-[10px] font-mono text-gray-400 tracking-widest`. - Chapter list: 5 items, each `border-b border-gray-800/80 py-8`. Active: `text-white`, inactive: `text-[#444] hover:text-[#999]`. Chapter name: `text-2xl md:text-[2rem] font-medium tracking-tight`. Active item shows `ArrowUpRight` icon (size 22, strokeWidth 1, `text-gray-400`) that animates in/out. - Clicking a chapter sets `activeChapter`. 3D. BOTTOM FOOTER - `h-[1px] bg-gray-800` divider - Text: "DIGGING INTO OUR PLANET'S PAST" -- `px-8 py-8 text-[10px] font-mono tracking-widest text-gray-500 uppercase bg-[#0a0a0a]` --- SandTransitionImage COMPONENT A custom component that creates a sand/particle dissolve effect using SVG filters: ```tsx function SandTransitionImage({ src, alt, className }) { // Uses usePresence() from motion/react for AnimatePresence awareness // Unique filterId per instance via useRef // requestAnimationFrame loop over 900ms // Easing: entering = quartic ease-out (1 - Math.pow(1-t, 4)), exiting = cubic (Math.pow(t, 3)) // SVG filter chain: // 1. feTurbulence: fractalNoise, baseFrequency 1.8, numOctaves 4 // 2. feDisplacementMap: scale up to 150 based on progress // 3. feOffset: dy up to -80 (enter) or 120 (exit), dx up to -30/+30 // 4. feGaussianBlur: up to 6px // 5. feColorMatrix: opacity fades (1 - progress * 1.2) // Image has crossOrigin="anonymous" and referrerPolicy="no-referrer" } ``` --- ALL EXTERNAL ASSET URLs Video: - `https://res.cloudinary.com/dsdxaxkiz/video/upload/v1779624998/magnific_use-img-2-as-the-exact-ba_Piu3X0W42C_wnrc8f.mp4` Images: - Chapter 1: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624247/01_udnber.png` - Chapter 2: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624374/02_pmvxxl.png` - Chapter 3: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624236/03_hcp3jc.png` - Chapter 4: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624256/04_get63z.png` - Chapter 5: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779624251/05_kz1tyu.png` - Pterodactyl: `https://res.cloudinary.com/dsdxaxkiz/image/upload/v1779625001/ChatGPT_Image_May_23_2026_12_24_44_PM_1_lv1dne.png` (Note: these are Cloudinary URLs, not CloudFront. The project uses Cloudinary for all hosted media assets.) --- KEY DESIGN DETAILS - Color palette: `#fcfcfc` (off-white bg), `#111` / `#1a1a1a` (near-black), `#0a0a0a` (dark section bg). Gray scale via Tailwind: `gray-300` through `gray-800`. - No purple/indigo anywhere. Strictly monochrome black/white/gray. - Typography hierarchy: Large display headings (3.5-5rem), mono labels (10-11px), body text (13-14px). - Spacing: 8px base system throughout. - Transitions: Most hover transitions 300-700ms. Button slide effect uses `cubic-bezier(0.16, 1, 0.3, 1)`. Letter animations use same cubic bezier. - The page is entirely a single `App.tsx` component plus the `SandTransitionImage` helper function in the same file.28:T1f6b,Recreate a high-fidelity, premium interactive landing page named "Reverie" using React, TypeScript, and a combination of Tailwind CSS and inline styles. The project must have a smooth, hardware-accelerated scroll-linked animation system, 3D/parallax mouse-tracking effects, responsive layouts, and elegant micro-animations. --- 1. Typography & Global Styles - Fonts: - Load the following Google Fonts: - Headers: `'Viaoda Libre', serif` (elegant serif font). - Body, nav links, and captions: `'Imprima', sans-serif` (clean, sleek sans-serif font). - Global Reset & Base CSS: - `html, body { margin: 0; padding: 0; background: #0a0608; scroll-behavior: auto; }` - Body font should default to `'Imprima', sans-serif`. - Add `scrollbar-gutter: stable;` to the `html` tag to prevent layout shifts. - Include an animation utility: ```css @keyframes bobUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } ``` --- 2. Assets Asset Mapping Define these exact asset constants at the top of the file: ```typescript const PORTAL_BG = 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779974947/portal_bg_mu60k9.png'; const CURTAIN_LEFT = 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975070/curtain_left_cdht6q.png'; const CURTAIN_RIGHT = 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975071/curtain_right_a9bn3i.png'; const WORLD_BG = 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975077/world_bg_jzzcn1.jpg'; // The cards MUST remain in this exact order (Card 3, Card 1, Card 2) const CARD_IMAGES = [ 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975070/card_3_nbwm25.jpg', 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975070/card_2_wr6al6.jpg', // Representing Card 1 'https://res.cloudinary.com/dsdhxhhqh/image/upload/v1779975070/card_1_jz8otj.jpg', // Representing Card 2 ]; ``` --- 3. State Management & Mathematical Helpers - Math Utilities: - Easing curve: `easeInOut(t) = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t` - Linear Interpolation: `lerp(a, b, t) = a + (b - a) * t` - Constraint: `clamp(val, min, max) = Math.max(min, Math.min(max, val))` - Parallax Magnitudes: - `MAG.world = 6`, `MAG.portal = 7`, `MAG.curtainL = 14`, `MAG.curtainR = 14` - Hook for Responsiveness: - Implement a `useIsMobile()` hook responding to media query max-width of `767px` to dynamically update layouts. - Scroll Tracking: - The page height must be exactly `480vh`. Inside, a single sticky container spans `100vh`. - Calculate normalized `scrollProgress` from `0` to `1` by reading window scroll position relative to the scrollable height. - Smooth Mouse Tracking (Parallax): - Normalize coordinates `rx`, `ry` between `-1` and `1` relative to the center of the viewport. - Implement a `requestAnimationFrame` render loop (`tick`) to smoothly interpolate current position towards target cursor position (lerp step speed: `0.07`) to eliminate frame-rate stutters. - Entrance Animation Delays: - On mount, transition curtains open after `100ms`, fade UI in after `600ms`. Disable entry CSS transitions after `2200ms` so mouse movement doesn't experience lag or delay. --- 4. Animation Timelines (Scroll & Mouse Parallax) Apply these precise styling updates in the render loop on every frame: 1. World Layer (`WORLD_BG`): - Scale: Lerps from `1` (at start) to `1.18` (at maximum scroll). - Parallax: `transform = scale(${scale}) translate3d(${rx * 6}px, ${ry * 6}px, 0)` 2. Portal Frame (`PORTAL_BG`): - Scale: Lerps from `1` to `7.5` (creating an immersive zoom-through effect). - Origin: `52% 38%` - Opacity: Starts at `1`, fades out after `65%` scroll: `clamp(1 - (scrollProgress - 0.65) / 0.2, 0, 1)` - Parallax: `transform = scale(${scale}) translate3d(${rx * 7}px, ${ry * 7}px, 0)` 3. Curtain Left (`CURTAIN_LEFT`): - Initial Opening Offset: `62%` shift left. - Scroll Offset: Moves further leftward up to `150%` as eased progress goes `0` to `1`. - Curtain Scroll Scale: Lerps from `1` to `1.3`. - Parallax & GPU Layer: `transform = translateX(calc(-${totalShift}% + ${rx * 14}px)) translateY(${ry * 14 * 0.3}px) scale(${curtainScrollScale}) translateZ(0)` 4. Curtain Right (`CURTAIN_RIGHT`): - Symmetrically mirrors Curtain Left. - Parallax & GPU Layer: `transform = translateX(calc(${totalShift}% + ${rx * 14}px)) translateY(${ry * 14 * 0.3}px) scale(${curtainScrollScale}) translateZ(0)` --- 5. Layout & Components Navigation Bar - Position: Absolute at the top, `zIndex: 50`. Responsive padding: `18px 20px` (mobile), `22px 48px` (desktop). - Desktop (>=768px): Split navigation. - Left side: Links `Worlds`, `Atelier`, `Immersions`. - Center: SVG Star Logo (clean star shape in path `M14 2l2.09 6.42H23l-5.45 ...` inside a `28x28` viewport). - Right side: Links `Craft`, `Codex`, `Connect`. - Mobile (<768px): Centered star logo with an `Explore` link on the left and a `Connect` link on the right. - Link Styling: uppercase, `12px`, letter spacing `0.12em`, white color with `0.9` opacity, no text decoration. Scene 1: Hero Section (Entrance) - Opacity: Fades out smoothly on scroll: `clamp(1 - scrollProgress / 0.22, 0, 1)`. - Entrance Transition: Slide upward by `20px` on mount with opacity transition `0.9s ease` delayed by `300ms`. - Responsive Layout: - Mobile (<768px): Center-aligned vertical column. Text is dark brown (`#3b1a0a`). Heading: `FALL › INTO REVERIE` (Viaoda Libre). Subheading paragraph (max-width `280px`). Below it, displays a single card with image `CARD_IMAGES[0]`, showing a rounded white play button icon and "View Reel". - Tablet (768px - 1099px): Center-aligned column. Text is dark brown (`#3b1a0a`). Headline and paragraph (max-width `400px`). Shows all 3 cards in a horizontal row: - Card 3: Image `CARD_IMAGES[0]`, Play button + "View Reel" - Card 1: Image `CARD_IMAGES[1]`, "32 World Patrons" in large elegant text - Card 2: Image `CARD_IMAGES[2]`, Play button + "View Reel" - Desktop (>=1100px): Split-screen horizontal layout. Text is white. - Left Container: Aligned to the left (top `46%`, left `60px`). Title: `FALL › INTO REVERIE` (Viaoda Libre). Subheading paragraph. Max-width `440px`. - Right Container: Aligned to the right (top `50%`, right `40px`). Row of 3 card containers (`158px x 158px`) with rounded corners (`28px`), bottom linear gradient, glassmorphic bottom blur (`backdropFilter: 'blur(6px)'`), play icon buttons or patron metrics overlay. - Card Interactive Styling: - Backdrop blur filter on bottom labels: `backdropFilter: 'blur(6px)'`, linear gradient to top `rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 60%, transparent 100%`. - Slider Dots (Bottom Left): - Absolutely positioned at bottom left (`60px` desktop, centered mobile). - Renders 4 horizontal pill indicators: first indicator is wide (`28px`), other three are thin (`14px`), colored in white with opacities. - Scroll Cue (Descend): - Absolutely positioned at `bottom: 36px`, centered horizontally. Hidden on mobile. - Text: uppercase "Descend" in `10px`, letter-spacing `0.22em`, color `rgba(255,255,255,0.6)`. - Icon: A chevron SVG surrounded by a `34px x 34px` round circular border animated with the `bobUp 1.8s ease-in-out infinite` bounce animation. Scene 2: Call to Action (Forge Beyond) - Opacity: Fades in on scroll: `clamp((scrollProgress - 0.68) / 0.16, 0, 1)`. - Layout: Centered vertical flex container (`zIndex: 46`), active only when opacity is visible. - Content: - Centered text wrapper. - Heading: `FORGE BEYOND THE REAL` (Viaoda Libre, size clamp `38px` to `78px`, color `#ffffff`, letter spacing `0.03em`, line-height `1.05`, elegant text shadow `0 2px 20px rgba(0,0,0,0.4)`). - Paragraph: `Singular voyages to astonishing destinations, shaped for those who seek beauty beyond the ordinary and the known.` (Imprima, size `20px` desktop / `14px` mobile, max-width `480px` desktop / `260px` mobile, line-height `1.6`, color `rgba(255,255,255,0.82)`). ```29:T402d,Build a single-page hero section titled "Learnly - Professional Learning Platform" using Vite + React + TypeScript + Tailwind. There is no Framer Motion, no inline SVG, and no icon library usage — all animation is done with pure CSS transitions/keyframes (none needed) and transforms. Use Supabase as the database if persistence is ever added. Create the following files exactly: --- `package.json` ```json { "name": "vite-react-typescript-starter", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview", "typecheck": "tsc --noEmit -p tsconfig.app.json" }, "dependencies": { "@supabase/supabase-js": "^2.57.4", "lucide-react": "^0.344.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.9.1", "@types/react": "^18.3.5", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.18", "eslint": "^9.9.1", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.11", "globals": "^15.9.0", "postcss": "^8.4.35", "tailwindcss": "^3.4.1", "typescript": "^5.5.3", "typescript-eslint": "^8.3.0", "vite": "^5.4.2" } } ``` --- `tailwind.config.js` ```js /** @type {import('tailwindcss').Config} */ export default { content: ['./index.html', './src/**/.{js,ts,jsx,tsx}'], theme: { extend: {}, }, plugins: [], }; ``` --- `postcss.config.js` ```js export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; ``` --- `index.html` ```html Learnly - Professional Learning Platform
``` --- `src/main.tsx` ```tsx import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.tsx'; import './index.css'; createRoot(document.getElementById('root')!).render( ); ``` --- `src/index.css` (full file with fonts loaded via HTML ``, no `@keyframes` — all animation is CSS transitions) ```css @tailwind base; @tailwind components; @tailwind utilities; :root { --bg-soft: #f4f4f2; --card-bg: #ffffff; --text-main: #1a1e2d; --text-muted: #666666; --accent: #fdb181; --accent-hover: #fa9d63; --dark: #1a1e2d; --radius-lg: 40px; --radius-md: 20px; --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Outfit', sans-serif; background: radial-gradient(circle at top right, #fdfdfd 0%, #f4f4f2 100%); color: var(--text-main); min-height: 100vh; overflow-x: hidden; } .c6-hero { width: 100%; max-width: 1600px; margin: 0 auto; padding: 60px 100px; min-height: 100vh; display: flex; flex-direction: column; position: relative; } .c6-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; position: relative; z-index: 100; } .c6-logo { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.5px; z-index: 101; } .c6-logo span { color: var(--accent); } .c6-menu { display: flex; gap: 40px; } .c6-menu a { text-decoration: none; font-size: 0.95rem; color: var(--text-muted); font-weight: 500; transition: var(--transition); } .c6-menu a:hover { color: var(--text-main); } .c6-hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; background: none; border: none; padding: 10px; z-index: 101; } .c6-hamburger span { display: block; width: 28px; height: 2.5px; background: var(--text-main); border-radius: 2px; transition: var(--transition); } .c6-mobile-nav { position: fixed; top: 0; right: -100%; width: 80%; height: 100vh; background: white; z-index: 99; display: flex; flex-direction: column; padding: 120px 40px; gap: 30px; box-shadow: -10px 0 30px rgba(0,0,0,0.05); transition: right 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .c6-mobile-nav.open { right: 0; } .c6-mobile-nav a { font-size: 1.5rem; font-weight: 600; text-decoration: none; color: var(--text-main); } .c6-actions { display: flex; align-items: center; gap: 25px; } .c6-login { font-size: 0.95rem; color: var(--text-main); text-decoration: none; font-weight: 600; } .c6-trial { background: var(--dark); color: white; padding: 12px 28px; border-radius: 30px; font-size: 0.95rem; text-decoration: none; font-weight: 600; transition: var(--transition); } .c6-trial:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .c6-main { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: center; margin-bottom: 60px; } .c6-left { padding-top: 20px; } .c6-title { font-size: 5.5rem; line-height: 1.05; font-weight: 600; color: var(--text-main); margin-bottom: 40px; letter-spacing: -2px; } .c6-search-container { position: relative; width: 100%; max-width: 500px; z-index: 5; } .c6-search { display: flex; align-items: stretch; gap: 0; background: white; box-shadow: 0 15px 45px rgba(0,0,0,0.08); border: 1px solid #eee; padding: 0; } .c6-search input { flex: 1; border: none; padding: 18px 25px; outline: none; font-size: 1.1rem; font-family: inherit; color: var(--text-main); background: transparent; border-radius: 0; min-width: 0; } .c6-search input::placeholder { color: #bbb; } .c6-search button { background: linear-gradient(to bottom, #8BBF77 50%, var(--accent) 50%); background-size: 100% 200%; background-position: 0 100%; border: none; padding: 16px 45px; border-radius: 0; color: var(--text-main); font-weight: 700; cursor: pointer; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); font-size: 1.1rem; overflow: hidden; position: relative; } .c6-search button:hover { background-position: 0 0%; color: white; transform: scale(1.02); } .c6-right { display: flex; gap: 15px; height: 550px; } .c6-card { border-radius: 16px; overflow: hidden; position: relative; flex: 1; min-width: 0; transition: flex 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s ease; cursor: pointer; } .c6-card:first-child { flex: 2.5; } .c6-card:hover { flex: 2.5; transform: translateY(-5px); } .c6-right:hover .c6-card:not(:hover) { flex: 0.8; } .c6-card img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto; max-width: none; display: block; } .c6-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%); } .c6-card-content { position: absolute; bottom: 30px; left: 30px; right: 30px; color: white; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; transition: all 0.4s ease; } .c6-card-title { font-size: 2.2rem; font-weight: 600; line-height: 1.1; white-space: nowrap; } .c6-card-topics { text-align: right; } .c6-card-topics .num { font-size: 2rem; font-weight: 700; display: block; line-height: 1; } .c6-card-topics .label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; } .c6-card-side-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-bottom: 30px; z-index: 3; opacity: 1; transition: opacity 0.4s ease; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 30%, transparent 50%); } .c6-card:hover .c6-card-side-content { opacity: 0; pointer-events: none; } .c6-card:not(:hover) .c6-card-content { opacity: 0; transform: translateY(10px); } .c6-card:first-child .c6-card-content { opacity: 1; transform: translateY(0); } .c6-card:first-child .c6-card-side-content { opacity: 0; } .c6-right:hover .c6-card:first-child:not(:hover) .c6-card-content { opacity: 0; transform: translateY(10px); } .c6-right:hover .c6-card:first-child:not(:hover) .c6-card-side-content { opacity: 1; } .c6-vertical-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.8rem; font-weight: 600; white-space: nowrap; color: white; text-transform: capitalize; padding: 20px 10px; position: relative; background: linear-gradient(to top, transparent 50%, #1C1D2D 50%); border-radius: 0; } .c6-bottom-info { text-align: center; margin-top: auto; padding: 40px 0; } .c6-bottom-info h3 { font-size: 2.5rem; font-weight: 600; color: var(--text-main); letter-spacing: -1px; margin: 0; } @media (max-width: 1200px) { .c6-hero { padding: 40px 60px; } .c6-title { font-size: 4.5rem; } .c6-main { grid-template-columns: 1fr; gap: 40px; } .c6-right { height: 450px; } } @media (max-width: 768px) { .c6-hero { padding: 30px 20px; overflow-x: hidden; } .c6-menu, .c6-actions { display: none; } .c6-hamburger { display: flex; } .c6-hamburger.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); } .c6-hamburger.active span:nth-child(2) { opacity: 0; } .c6-hamburger.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); } .c6-title { font-size: 3.5rem; letter-spacing: -1px; margin-bottom: 30px; } .c6-right { height: 400px; width: calc(100% + 40px); overflow-x: auto; overflow-y: hidden; padding: 10px 0 20px 0; gap: 15px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding-left: 20px; padding-right: 20px; display: flex; } .c6-right::-webkit-scrollbar { display: none; } .c6-card { flex: 0 0 300px; scroll-snap-align: center; height: 100%; transform: none !important; } .c6-card:first-child { flex: 0 0 300px; } .c6-right:hover .c6-card:not(:hover) { flex: 0 0 300px; } .c6-card-content { opacity: 1 !important; transform: translateY(0) !important; } .c6-card-side-content { opacity: 0 !important; display: none; } .c6-card:hover { flex: 0 0 300px !important; } .c6-right:hover .c6-card { flex: 0 0 300px !important; } .c6-card-title { font-size: 1.8rem; } .c6-card-topics .num { font-size: 1.5rem; } .c6-bottom-info h3 { font-size: 1.8rem; line-height: 1.2; } .c6-search button { padding: 16px 25px; font-size: 1rem; } .c6-search input { padding: 18px 15px; font-size: 1rem; min-width: 0; } } ``` --- `src/App.tsx` (full file — no Tailwind classes, no Framer Motion, no inline SVG) ```tsx import { useEffect, useState } from 'react'; function App() { const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : 'auto'; }, [menuOpen]); useEffect(() => { const onResize = () => { if (window.innerWidth > 768) setMenuOpen(false); }; window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); const closeMenu = () => setMenuOpen(false); const cards = [ { img: 'https://images.pexels.com/photos/5212675/pexels-photo-5212675.jpeg', alt: 'Editing Specialist', label: 'Editing', titleTop: 'Editing', titleBottom: 'Module', num: 100, }, { img: 'https://images.pexels.com/photos/8617763/pexels-photo-8617763.jpeg', alt: 'Editing Primer', label: 'Editing', titleTop: 'Editing', titleBottom: 'Module', num: 45, }, { img: 'https://images.pexels.com/photos/6333648/pexels-photo-6333648.jpeg', alt: 'Commerce Journey', label: 'Commerce', titleTop: 'Commerce', titleBottom: 'Journey', num: 82, }, ]; return (

Learnly.

Chase dreams Collection Trades Students

Enter Try It Now

Chase dreams Collection Trades Students Enter Try It Now

Study.
Train.
Rise.

{cards.map((card, i) => (

{card.label}

{card.titleTop}
{card.titleBottom}

{card.num} Topics

))}

Boundless passes to 100+ mentorships.

); } export default App; ``` --- Asset URLs (verbatim, remote — do not download): - `https://images.pexels.com/photos/5212675/pexels-photo-5212675.jpeg` - `https://images.pexels.com/photos/8617763/pexels-photo-8617763.jpeg` - `https://images.pexels.com/photos/6333648/pexels-photo-6333648.jpeg` - Font: `https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap` Animation values (all CSS, no Framer Motion): - Root transition: `all 0.4s cubic-bezier(0.23, 1, 0.32, 1)` - Mobile nav slide: `right 0.5s cubic-bezier(0.23, 1, 0.32, 1)` - Card flex accordion: `flex 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s ease` - Search button gradient slide: `all 0.5s cubic-bezier(0.23, 1, 0.32, 1)` with hover `transform: scale(1.02)` - Card content fade/translate: `all 0.4s ease`, inactive state `translateY(10px)` + `opacity 0` - Card hover lift: `translateY(-5px)` - Trial button hover: `translateY(-2px)` + `box-shadow: 0 10px 20px rgba(0,0,0,0.1)` - Hamburger top/bottom bars rotate: `translateY(±8.5px) rotate(±45deg)`; middle bar `opacity: 0` Breakpoints: `max-width: 1200px` and `max-width: 768px` (mobile switches cards to horizontal scroll-snap carousel with 300px card width).2a:T1c1d,Prompt: Create a "Projects" section using React, Tailwind CSS, and framer-motion (`useScroll`, `useTransform`, `motion`). The site uses Google Font "Kanit" (weights 300-900) and a dark background `#0C0C0C`. This section overlaps the previous white section slightly with a negative top margin and rounded top corners. --- ## Section Container - Background: `#0C0C0C` - Padding: `px-5 sm:px-8 md:px-10` - Top border radius: `rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px]` - Negative margin to overlap section above: `-mt-10 sm:-mt-12 md:-mt-14` - `position: relative`, `z-index: 10` - Uses framer-motion `useScroll` on the entire section ref with `offset: ['start start', 'end end']` to drive the stacking card animation ## Section Heading - Wrapped in a `flex flex-col items-center py-20 sm:py-24 md:py-32` - Text: `"Project"` - Uses CSS class `hero-heading` which applies: ```css .hero-heading { background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } ``` - `font-black uppercase leading-none tracking-tight text-center w-full` - Font size: `clamp(3rem, 12vw, 160px)` - Fade-in animation: `delay: 0, y: 40` --- ## 3 Project Cards (sticky stacking card effect) Each card is a sticky card that stacks on top of the previous card as you scroll, with a subtle scale-down effect. ### Project Data: Project 01 -- "Nextlevel Studio" (Client) - col1 images (left column, 2 images stacked vertically): ``` https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055344_5eff02e0-87a5-41ce-b64f-eb08da8f33db.png&w=1280&q=85 https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055431_11d841fd-8b41-46a5-82e4-b04f2407a7d8.png&w=1280&q=85 ``` - col2 image (right column, single tall image): ``` https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055451_e317bf2d-28d4-48cc-86b0-6f72f25b6327.png&w=1280&q=85 ``` Project 02 -- "Aura Brand Identity" (Personal) - col1 images: ``` https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055654_911201c5-36d9-4bc6-bac7-331adfce159f.png&w=1280&q=85 https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055723_5ceda0b8-d9c2-4665-b2e3-83ba19ba76d1.png&w=1280&q=85 ``` - col2 image: ``` https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055753_adc5dcbd-a8e6-49c0-b43a-9b030d835cea.png&w=1280&q=85 ``` Project 03 -- "Solaris Digital" (Client) - col1 images: ``` https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055759_963cfb0b-4bd1-4b0f-9d0a-09bd6cf95b2f.png&w=1280&q=85 https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_060108_438f781a-9846-4dcc-89ab-c4e6cb830f5b.png&w=1280&q=85 ``` - col2 image: ``` https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055818_9d062121-ad7e-46b9-999a-1a6a692ef1ee.png&w=1280&q=85 ``` --- ## Sticky Stacking Card Animation (framer-motion) Each card's outer wrapper: - `height: 85vh`, `display: flex, align-items: start, justify-content: center` - `position: sticky`, `top: 24px` (md: `top: 32px`) The inner `motion.div` card: - `position: absolute`, `width: 100%`, `max-width: 1760px` - `transform-origin: top` - Each card is offset vertically: `top: ${index * 28}px` so they peek behind each other - Scale animation: As the user scrolls through the section, earlier cards scale down slightly while later cards remain at scale 1 - `rangeStart = index / totalCards` - `rangeEnd = 1` - `targetScale = 1 - (totalCards - 1 - index) * 0.03` - `scale = useTransform(progress, [rangeStart, rangeEnd], [1, targetScale])` - Example: Card 0 scales from 1 to 0.94, Card 1 scales from 1 to 0.97, Card 2 stays at 1 --- ## Project Card Inner Layout - Background: `#0C0C0C` - Border: `2px solid #D7E2EA` - Border radius: `rounded-[40px] sm:rounded-[50px] md:rounded-[60px]` - Padding: `p-4 sm:p-6 md:p-8` - `flex flex-col gap-6 sm:gap-8 md:gap-10` ### Top row (header): - `flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 sm:gap-4` - Left side (`flex items-center gap-6 sm:gap-8 md:gap-10`): - Number: `text-[#D7E2EA] font-black uppercase leading-none`, size `clamp(3rem, 10vw, 140px)` - Category + Name (flex column, `gap-2 sm:gap-4 md:gap-6`): - Category: `text-[#D7E2EA] font-medium uppercase`, size `clamp(1rem, 2.2vw, 2.1rem)` - Name: `text-[#D7E2EA] font-light tracking-wide`, size `clamp(0.9rem, 2vw, 2rem)` - Right side: "Live Project" button (see below) ### Image grid (bottom): - `flex flex-col md:flex-row gap-4 md:gap-5 w-full` - Left column (`flex flex-col gap-4 md:gap-5 w-full md:w-[40%]`): - Image 1: `w-full object-cover`, border-radius `rounded-[40px] sm:rounded-[50px] md:rounded-[60px]`, height `clamp(130px, 16vw, 230px)` - Image 2: `w-full object-cover`, border-radius `rounded-[30px] sm:rounded-[40px] md:rounded-[60px]`, height `clamp(160px, 22vw, 340px)` - Right column: Single image, `w-full md:w-[60%] object-cover`, border-radius `rounded-[30px] sm:rounded-[40px] md:rounded-[60px]`, `self-stretch` (fills the height of both left images) --- ## "Live Project" Button - Pill-shaped (`rounded-full`) - Border: `2px solid #D7E2EA` - No background (transparent) - Padding: `px-8 py-3 sm:px-10 sm:py-3.5` - Text: `"Live Project"`, `text-[#D7E2EA] font-medium uppercase tracking-widest`, size `text-sm sm:text-base` - Hover: `bg-[#D7E2EA]/10`, Active: `bg-[#D7E2EA]/20`, transition 200ms - If href provided, renders as `` with `target="_blank" rel="noopener noreferrer"` - All cards link to `#` --- ## FadeIn Component (reusable, framer-motion) - Props: `delay`, `duration` (default 0.7), `x` (default 0), `y` (default 30), `className`, `style`, `as` (HTML element tag, default `div`) - Uses `motion.create()` to make any HTML element animatable - Variants: `hidden` = `{ opacity: 0, x, y }`, `visible` = `{ opacity: 1, x: 0, y: 0 }` - Easing: `[0.25, 0.1, 0.25, 1]` - Viewport trigger: `{ once: true, margin: "50px", amount: 0 }` --- Font (loaded in HTML head): ```html ``` CSS base: `font-family: 'Kanit', sans-serif` on html/body. ---2b:T3521,Build a single-page landing site for "SynapseX" -- a futuristic neural-AI interface product. The entire site uses a black background with white text and full-viewport video backgrounds. The primary font is "Space Mono" (monospace) for all text. Use React + TypeScript + Vite + Tailwind CSS + Framer Motion. ### Fonts & External Assets - Primary font: "Space Mono" (all weights: 400, 700, italic) from Google Fonts - Display font (background watermark only): "Anton SC" from Google Fonts - Icons: Bootstrap Icons CDN (`https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css`) -- used only for the Apple icon (`bi bi-apple`) in the download button - All Tailwind `fontFamily` keys (`sans`, `serif`, `mono`) are overridden to `"Space Mono", monospace` ### Video URLs (CloudFront -- use exactly these) 1. Hero (mouse-scrubbed, NOT autoplay): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_083515_290e5a10-0b95-41af-a5e2-32b6389baa4d.mp4` 2. Second Section (autoplay, muted, loop): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_092455_089c54f8-3b03-4966-9df1-e9746063d0ef.mp4` 3. Metrics Section (autoplay, muted, loop): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095810_ecea3dd2-fc5e-4e41-8696-4219290b6589.mp4` 4. Technology Section (autoplay, muted, loop): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095750_32a52ce0-2005-45c9-9093-41f03fde9530.mp4` 5. Footer (autoplay, muted, loop): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_080203_fd7f4f85-3a86-4837-8192-85e7bfe68e75.mp4` ### Dependencies ```json "framer-motion": "^12.40.0", "lucide-react": "^0.344.0", "react": "^18.3.1", "react-dom": "^18.3.1" ``` ### Global CSS (`index.css`) - Import Space Mono from Google Fonts - Import Bootstrap Icons CSS - Tailwind directives (`@tailwind base/components/utilities`) - CSS variables: all `--font-` set to `"Space Mono", monospace` - Global reset: ` { margin: 0; padding: 0; box-sizing: border-box; }` - `html, body`: `background: #000; color: #fff; overflow-x: hidden; overflow-y: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;` - Lenis smooth scroll utility classes (`.lenis.lenis-smooth`, `.lenis.lenis-stopped`, `.lenis.lenis-scrolling iframe`) ### Custom Text Animation Components #### 1. `ScrambleIn` -- entrance reveal animation - Props: `text: string`, `delay: number` (ms before start), `triggered: boolean` - Character set: `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&()_+~|}{[]:;?><` - On trigger (after delay): runs interval every 25ms, revealing characters left-to-right at 0.5 chars/frame - Characters not yet revealed show random chars (up to 3 ahead of the reveal cursor); characters beyond that are empty - Spaces always show as spaces - Before triggered: renders ` ` #### 2. `ScrambleText` -- hover-driven scramble - Props: `text: string`, `isHovered: boolean`, `className?: string` - On hover: scrambles all chars with random chars, then reveals left-to-right at 4 frames/char, interval 25ms - On unhover: immediately resets to original text ### Custom SVG Logo (`SynapseXLogo`) A 4-fold rotationally symmetric abstract shape rendered in an SVG with `viewBox="-50 -50 100 100"`. Each quadrant is the same path rotated 0/90/180/270 degrees: ``` M 1.5,23 L 1.5,33 C 1.5,38.5 6,43 11.5,43 L 16.5,43 C 22,43 26.5,38.5 26.5,33 Q 28,28 33,26.5 C 38.5,26.5 43,22 43,16.5 L 43,11.5 C 43,6 38.5,1.5 33,1.5 L 23,1.5 Q 12,12 1.5,23 Z ``` ### Animated Hamburger (`SquashHamburger`) - 3 horizontal bars (absolute positioned spans) - Desktop: container 18x12px, bar height 1.5px - Mobile: container 15x10px, bar height 1.2px - On open: top bar rotates 45deg + translates down to center; middle bar fades/scales out; bottom bar rotates -45deg + translates up to center - Spring animation: stiffness 300, damping 20 --- ### Page Sections (in order) --- #### SECTION 1: Hero (full viewport height) - Background: Video #1, `object-cover`, paused on load. Controlled by mouse-scrub: horizontal mouse movement across viewport scrubs the video timeline forward/backward. Sensitivity factor: `0.8`. Uses `seeked` event to chain seeks without dropping frames. - Entrance animation: After 800ms delay, `entranceComplete` state becomes true -- all hero content fades in (opacity 0 -> 1, duration 1s). - Dot grid overlay: `radial-gradient(#ffffff 1px, transparent 1px)` with 24x24px grid, opacity 0.05, pointer-events-none - Large background watermark text: The word "TRANSCENDENCE" in "Anton SC" font, centered vertically (offset +50px from center), `clamp(120px, 30vw, 521px)` font size, uppercase, letter-spacing -4px. Opacity 0.10. Color achieved via `radial-gradient(circle, rgba(142,127,148,0) 0%, #8E7F94 70%)` as `background-clip: text` with transparent fill. - Layout: Flexbox column, padding `px-4 sm:px-6 md:px-8 pt-20 sm:pt-24 pb-8 sm:pb-12`. Content is pushed to the bottom using `flex-1` spacer. - Bottom row: `flex-col gap-6 md:flex-row md:items-end md:justify-between` - Left column (`flex flex-col gap-4`): - h1 "Brain" / "And Body" (two lines via `
`): `text-white font-light leading-[0.95] tracking-[-0.03em] text-[clamp(40px,10vw,100px)]`. Each line uses `ScrambleIn` with delays 200ms and 500ms. - Description paragraph (motion.p): fade-up animation (y:25->0, opacity 0->1, duration 0.9s, cubic-bezier ease `[0.215, 0.610, 0.355, 1.000]`, delay 0.2s). Text: "Built at the intersection of neuroscience and artificial intelligence. SynapseX continuously maps neural pathways, cognitive load, and physiological states into a single adaptive intelligence layer." Style: `max-w-sm text-[13px] sm:text-[15px] text-white/60 leading-relaxed` - Right h1 "One" / "Network": Same styling as left h1 but with `text-left md:text-right`. ScrambleIn delays: 700ms and 1000ms. --- #### NAVBAR (fixed, z-50) - Fixed to top, height 80px (h-20), transparent background, full width - Fades in with `entranceComplete` (opacity 0->1, duration 0.8s) Desktop (hidden below `sm`): - Left group: two pills side by side with gap-2 - Logo pill: h-12, px-5, `bg-white/15 backdrop-blur-md rounded-[14px]`. Contains SynapseXLogo (18x18px white) + "SynapseX" text (16px font-medium tracking-tight white). WhileHover: scale 1.02 + bg rgba(255,255,255,0.22). WhileTap: scale 0.98. Hides on `sm` when menu open (`hidden md:flex`), shows normally otherwise. - Expanding menu pill: Animates width from 48px (closed) to 290px (open) with spring (stiffness 350, damping 28). h-12, `rounded-[14px]`, `bg-white/15 backdrop-blur-md`. Contains: - Hamburger button: when closed = 48x48px rounded-[14px]; when open = 36x36px rounded-[11px] with `bg-white/10 hover:bg-white/20 ml-1.5` - Nav links (fade in when open, offset x:15->0): "About" and "Metrics" with ScrambleText on hover. 16px font-normal text-white/85 hover:text-white. Smooth-scroll to `window.innerHeight` and `window.innerHeight 2` respectively. - Right: Download button -- `h-12 px-6 bg-white rounded-full`, black text. Apple icon + "Download" with ScrambleText on hover. WhileHover: scale 1.03 + bg #e2e2e6. WhileTap: scale 0.97. Mobile (visible below `sm`): - Scaled-down version: h-9 pills, rounded-[10px], smaller text (13px), logo pill animates to width 0 when menu open (spring stiffness 350, damping 28). Menu capsule expands to 100% width when open. Download button: h-9 px-3.5 rounded-full. --- #### SECTION 2: Cinematic Text (full viewport height) - Background: Video #2, autoplay muted loop, object-cover - Top gradient overlay: 180px height, linear-gradient from `#010103` to transparent, z-10 - Content: Centered large paragraph in a `max-w-5xl` container with 3D perspective (400px) - Framer Motion: `rotateX(24deg) translateY(${yScaleValue}px) translateZ(15px)` where `yScaleValue` transforms from 60 to -120 based on smooth scroll progress (spring: stiffness 15, damping 32, mass 1.8). Opacity fades in from 0 to 1 between scroll progress 0.3-0.5. - Text: "A neural-AI interface built on the architecture of the human nervous system. SynapseX translates synaptic activity into computational intelligence. Every signal becomes measurable, structured, and visible. It continuously reconstructs internal state as a dynamic neural map. Biological noise is filtered into actionable cognitive patterns." - Style: `font-sans font-normal text-[22px] sm:text-[30px] md:text-[36px] lg:text-[42px] text-white leading-[1.35] tracking-[-0.02em] select-none px-6 sm:px-12 text-center` --- #### SECTION 3: Metrics (min-h-screen) - Background: Video #3, autoplay muted loop, object-cover - Layout: Centered content, `pt-32 pb-32 px-6`, max-w-6xl - Subtitle: "Performance Metrics" -- `text-white/40 text-[13px] sm:text-[14px] tracking-[0.2em] uppercase mb-20 text-center`. Fades in on scroll (whileInView, duration 1.2s, once, amount 0.3). - Metrics grid: 3 columns on md, 1 on mobile, gap-16 md:gap-8. Each metric fades up (y:30->0, opacity, duration 0.8s, staggered 0.15s delay per item): - "2.4ms" -- Synaptic Latency - "99.7%" -- Signal Accuracy - "140B" -- Neural Parameters - Value: `text-white text-[clamp(48px,10vw,96px)] font-light tracking-[-0.04em] leading-none` - Label: `text-white/40 text-[13px] sm:text-[15px] mt-4 tracking-wide` --- #### SECTION 4: Technology / Adaptive Intelligence (full viewport height) - Background: Video #4, autoplay muted loop, object-cover - Layout: Flexbox column, `px-8 sm:px-12 md:px-16 py-12 sm:py-16` - Top area: flex-col md:flex-row md:justify-between md:items-start gap-6 - Left heading: "Adaptive / Intelligence" (two lines), `text-white font-light text-[clamp(36px,8vw,72px)] leading-[0.95] tracking-[-0.03em]`. Fades up (y:40->0, duration 1.0s, whileInView once amount 0.3). - Right paragraph: "The system learns your neural baseline within 72 hours. From there, every cognitive state is mapped, predicted, and optimized in real time." `text-white/50 text-[13px] sm:text-[15px] leading-relaxed max-w-xs md:text-right md:pt-2`. Fades up (y:20->0, duration 1.0s, delay 0.2s). - Spacer (`flex-1`) - Bottom grid: 2 cols on mobile, 4 cols on md, gap-8 md:gap-6. Fades in on scroll (duration 1.0s, delay 0.3s). Each item staggered (y:20->0, duration 0.7s, delay i0.1): 1. "Cortical Mapping" -- "Real-time spatial reconstruction of active neural regions." 2. "Signal Isolation" -- "Separates cognitive intent from biological noise." 3. "State Prediction" -- "Anticipates cognitive transitions before they occur." 4. "Loop Feedback" -- "Closed-loop adjustment based on outcome correlation." - Title: `text-white text-[14px] sm:text-[16px] font-normal mb-2` - Desc: `text-white/40 text-[12px] sm:text-[14px] leading-relaxed` --- #### SECTION 5: Architecture (min-h-screen, pure black background, no video) - Centered content, max-w-3xl, `px-6 py-32` - Heading block (fades up y:30->0, duration 1.0s, whileInView once amount 0.4): - Subtitle: "Architecture" -- `text-white/40 text-[13px] sm:text-[14px] tracking-[0.2em] uppercase mb-8` - Heading: "Three layers. Zero friction." -- `text-white font-light text-[clamp(28px,6vw,56px)] leading-[1.15] tracking-[-0.02em] mb-10` - Description: "Sensor layer captures raw bioelectric signals. Processing layer isolates intent. Interface layer delivers structured output to any connected system." -- `text-white/45 text-[15px] sm:text-[17px] leading-relaxed max-w-xl mx-auto` - Layer cards (fade in, duration 1.2s, delay 0.4s, whileInView once amount 0.4): 3 stacked cards, `mt-20 flex-col items-center gap-4`. Each card: `max-w-md h-[72px] border border-white/10 rounded-lg flex items-center justify-between px-6` - Left: "Layer 1/2/3" -- `text-white/30 text-[12px] tracking-[0.15em] uppercase` - Right: "Capture" / "Process" / "Interface" -- `text-white text-[16px] sm:text-[18px] font-light` --- #### FOOTER - Black background, overflow hidden - Two-column layout (stacked on mobile): `flex-col md:flex-row min-h-[400px]` - Left: Video #5, `object-cover`, fills half width (h-[300px] on mobile, auto height on md) - Right: Flex column justify-between, `p-10 sm:p-16` - Top: SynapseXLogo (18x18px, text-white/70) + "SynapseX" text (15px font-medium text-white/70 tracking-tight), mb-8. Below: "The next evolution of human-machine interaction. Built for those who refuse to be limited by biology alone." `text-white/40 text-[14px] sm:text-[15px] leading-relaxed max-w-sm` - Bottom: "(c) 2026 SynapseX Labs. All rights reserved." `text-white/25 text-[12px] mt-12` --- ### Key Technical Details - The entire app wrapper has inline style: `fontFamily: '"Space Mono", monospace'` - All `h-screen` elements also have `h-[100dvh]` for mobile viewport compatibility - The hero video is NOT autoplay -- it starts paused at time 0 and is scrubbed by horizontal mouse movement (delta-based, not absolute position). The seek logic chains via `seeked` event to avoid frame-dropping. - Framer Motion `useScroll` tracks the second section with offset `["start end", "end start"]`, piped through `useSpring` (stiffness 15, damping 32, mass 1.8) then `useTransform` and `useMotionTemplate` for the 3D text rotation effect. - No external state management, no routing, no database -- pure single-page React app. ---2c:Tac4,Build a high-fidelity, responsive, dark-themed hero section for a SaaS product called "Taskora" using React, Tailwind CSS, and Framer Motion (for entrance animations). 1. Visual Style & Assets Theme: Dark mode base (#050505) with white text. Background Video: Use this video URL as a full-screen background loop. Set it to opacity-50 and add a gradient overlay (black/60 to #050505) so it fades seamlessly into the background at the bottom: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260201_052917_7fc4e418-3123-40bf-b5ba-394c28eb4b3a.mp4 Typography: Import and use these specific Google Fonts: Instrument Serif (Italic) → Strictly for the word "Workflow" in the headline. Manrope → For the "Trusted by" badge and subheadlines. Cabin → For the main CTA button. Inter / Inter Tight → For the Dashboard UI and Navbar links. 2. Component Layout A. Floating Navbar Create a fixed, floating "pill-shaped" navbar with a glassmorphism effect (bg-white/10 backdrop-blur-md). Desktop: Logo on left, Links centered (Home, Features, Company, Contact), Auth buttons (Sign Up, White "Sign In" button) on right. Mobile: Collapse links into a hamburger menu that opens a glassmorphism dropdown. B. Hero Content (Centered) Badge: A pill-shaped badge reading "Trusted by +30.000 of clients globally". Include a star icon with a blue gradient fill. Headline: Massive scale (up to text-[80px] on desktop). Text: "Simplify Your Workflow. Stay Focused." (Italicize "Workflow" using the Serif font). Subhead: Gray text (text-gray-400): "Taskora helps teams manage projects, tasks, and deadlines with clarity." CTA: A large white button with black text: "Book a Free Demo". Add a subtle hover scale and shadow effect. C. Dashboard Preview (The "Product Shot") Build a detailed, non-functional mock dashboard interface container placed below the CTA. Visuals: Light mode dashboard (bg-[#F9F9FA]) to contrast with the dark hero background. Sidebar: Thin vertical rail with navigation icons (Home, Users, etc.). Content Area: Stats Cards: 3 cards (Total Sales, Operating Expenses, Gross Profit) showing a value, a percentage trend (green/red), and a mini bar chart at the bottom. Revenue Chart: A section showing a bar chart visualization. Deals Table: A detailed data table showing rows with "Deal Name", "Company" (Amazon.com with logo), "Amount", "Date", "Owner" (avatar), and "Stage" (New tag). Header: Search bar, Notification bell, and User profile pictures. 3. Responsiveness Ensure the Typography scales down significantly for mobile (text-5xl for headline). The Dashboard preview should preserve its layout but become scrollable or stack vertically on smaller screens. Navbar transforms from a horizontal row to a mobile drawer.2d:T65bf, Auren — Your car. Its mind.

ServiceAboutContact

Hands
Off.

A private AI driver that learns the way you move — your routes, your routine, your time of day. It settles into the car you already drive and quietly takes the wheel, so less of every trip depends on you.

Join the waitlist and be first to let your car do the driving. No spam, just the road ahead.

Just speak. Ask for a warmer cabin, a quieter route, a stop for coffee — the car listens and takes care of the rest while you ride.

Drop a few points on the map and it strings them together — every turn, every stop, driven in order while you sit back and watch.

Effortless.

Anywhere.

2e:T347e,Build a dark, premium, single-page landing page for an AI-powered web design agency using React + Vite + Tailwind CSS + shadcn/ui + Framer Motion (motion/react). The page has a luxury editorial aesthetic -- black backgrounds, white text, liquid glass (glassmorphism) effects, and cinematic video backgrounds. FONTS Import from Google Fonts: https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap Headings: Instrument Serif (italic) -- used via Tailwind class font-heading * Body: Barlow (weights 300, 400, 500, 600) -- used via Tailwind class font-body Tailwind config extends fontFamily: heading: ["'Instrument Serif'", "serif"] body: ["'Barlow'", "sans-serif"] COLOR THEME (CSS custom properties, HSL format) :root { --background: 213 45% 67%; --foreground: 0 0% 100%; --card: 213 45% 62%; --card-foreground: 0 0% 100%; --primary: 0 0% 100%; --primary-foreground: 213 45% 67%; --secondary: 213 45% 72%; --secondary-foreground: 0 0% 100%; --muted: 213 35% 60%; --muted-foreground: 0 0% 100% / 0.7; --accent: 213 45% 72%; --accent-foreground: 0 0% 100%; --destructive: 0 84.2% 60.2%; --border: 0 0% 100% / 0.2; --input: 0 0% 100% / 0.2; --ring: 0 0% 100% / 0.3; --radius: 9999px; --glass-bg: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.25); --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); --glass-blur: 16px; } LIQUID GLASS CSS (the core visual effect) Two utility classes defined in index.css under @layer components: .liquid-glass (subtle): .liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.15) 80%, rgba(255, 255, 255, 0.45) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .liquid-glass-strong (more prominent, used on CTA buttons): .liquid-glass-strong { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border: none; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; } .liquid-glass-strong::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.5) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } The ::before pseudo-element creates a gradient border effect using the mask-composite trick (thin glowing border that fades in the middle). ASSETS & MEDIA URLS Hero background video (MP4, CloudFront): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4 Poster image: /images/hero_bg.jpeg (local file in public/images/) StartSection video (HLS via Mux): https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8 Stats section video (HLS via Mux, displayed desaturated): https://stream.mux.com/NcU3HlHeF7CUL86azTTzpy3Tlb00d6iF3BmCdFslMJYM.m3u8 CTA/Footer section video (HLS via Mux): https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8 Feature GIFs (imported from src/assets/): * feature-1.gif -- used in FeaturesChess row 1 (right side) * feature-2.gif -- used in FeaturesChess row 2 (left side) Logo icon: src/assets/logo-icon.png (12x12 Tailwind = h-12 w-12) SECTION-BY-SECTION BREAKDOWN 1. NAVBAR (fixed, floating) * Fixed position: fixed top-4 left-0 right-0 z-50, horizontal padding px-8 lg:px-16, vertical py-3 * Left: Logo image (h-12 w-12) * Center (desktop only, hidden md:flex): Navigation links inside a liquid-glass rounded-full px-1.5 py-1 pill container * Links: "Home", "Services", "Work", "Process", "Pricing" * Each link: px-3 py-2 text-sm font-medium text-foreground/90 font-body * Last item: white solid button "Get Started" with ArrowUpRight icon, bg-white text-black rounded-full px-3.5 py-1.5 text-sm 2. HERO SECTION * Container: relative overflow-visible, fixed height 1000px * Background video:
` using `.liquid-glass rounded-full px-2 py-2 flex items-center gap-1`. Links: `JOURNEY`, `BENEFITS`, `JOURNAL`, `GUIDEBOOK`. Each link: `text-[11px] font-medium tracking-[0.12em] text-white/90 hover:text-white px-4 py-1.5 rounded-full transition-colors duration-200`. - Right: "GET ROAMING" anchor with same `.liquid-glass rounded-full px-5 py-2.5 text-[11px] font-medium tracking-[0.12em] text-white/90 hover:text-white`. Hero headline (fixed, `top: 120px`, centered, z-20): Two lines, both centered, `Inter` 400, `font-size: clamp(40px, 5.4vw, 72px)`, `line-height: 1.1`, `letter-spacing: -0.02em`: - Line 1 (white): `Venture without edges.` - Line 2 (`rgba(255,255,255,0.55)`): `Uncover with keen instinct.` Fade-in on mount: `opacity 0 → 100` and `translate-y-6 → 0` with `transition-all duration-1000`. Bottom block (fixed `bottom-14`, z-20, flex-col items-center gap-6), fade-in with `delay-300`: 1. Paragraph, `max-w-[620px] text-[15px] leading-relaxed` centered: - White: "Our smart itineraries shape around you — your rhythm, your vibe, your hunger for adventure." - `text-white/55`: " Each getaway is tailored, seamless, and wholly yours." 2. Button: white bg, black text, `text-[15px] font-medium rounded-full px-8 py-3.5`, hover `scale-[1.03]` + `shadow-[0_0_32px_4px_rgba(255,255,255,0.2)]`, active `scale-[0.97]`. Label: `Plan my escape today`. 3. Row: `Lock` icon from lucide-react (`size={13} strokeWidth={1.5}`) + `text-[11px] font-medium tracking-[0.14em] text-white/70`, text: `SECURE BY DESIGN. ZERO DATA LEAKS.` Root container: `min-h-screen bg-black text-white overflow-x-hidden` with inline `fontFamily: "'Inter', sans-serif"`. Dependencies: `gsap`, `lucide-react`, `react`, `react-dom`, tailwind configured with content globs `./index.html` and `./src/**/.{js,ts,jsx,tsx}`.30:Td48,Create a full-screen hero section landing page using React, Vite, and Framer Motion (`motion` package). Use plain CSS (no Tailwind). The font is Inter (weights 300, 400, 500, 600) from Google Fonts. The design is minimal black-and-white with a full-viewport background video. Stack: React 19, Vite, `motion` (framer-motion), `lucide-react` (for the Plus icon). Layout: - Full viewport height (`min-height: 100vh`), white background, flex column with `justify-content: space-between` - Fixed navbar at top (z-index 50, pointer-events none on the nav itself, auto on children) - Absolutely positioned full-screen video behind everything (z-index 0) - Footer content pinned to bottom (z-index 30) with a white gradient fade-up background Navbar (fixed, top): - Left side contains: 1. Logo: custom SVG icon (two rotated rounded rectangles at -35deg, black fill) + brand text "NeuralKinetics" (hidden on mobile, shown on desktop 768px+) 2. Menu button: black pill with white circle containing a Plus icon (lucide, size 12, strokeWidth 3) + "Menu" text (11px, white) 3. Tags pill: light gray (#F4F4F6) rounded-full container with two text labels "Advanced Bionics" and "Cognitive AI" (hidden on mobile, shown on desktop) - Right side contains: - A light gray pill with a black circle button (containing a 4-dot grid SVG icon) + label "Adaptive Systems" (hidden on mobile) Background Video: - URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_215831_c6a8989c-d716-4d8d-8745-e972a2eec711.mp4` - autoPlay, muted, playsInline, object-fit: cover - On mobile: video wrapper is 80% width and 80% height (centered) - On desktop (768px+): video wrapper is 100% width and 100% height Footer content (bottom, over gradient): - Background: `linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.8) 50%, transparent 100%)` - On mobile: stacks vertically. On desktop: row layout, items aligned to bottom. - Left block: 1. Subtitle line: small black dot (8px circle) + "Best digital banking card 2026" (13px, 55% opacity black) 2. Heading: "One Card, Zero / Limits. Worldwide." on two lines. Font-weight 300, clamp(2rem, 8vw, 4.5rem) on mobile, clamp(2.5rem, 5.5vw, 4.5rem) on desktop, letter-spacing -0.03em, line-height 1 3. Two buttons: "See Features" (black pill, white text, 13px) and "How It Works" (transparent with dark border rgba(0,0,0,0.35), 13px) - Right block: Three tag pills "Neuromorphic", "AGI", "Cybernetics" (white bg, light border rgba(0,0,0,0.12), 11px, rounded-full) Animations (using `motion` from 'motion/react'): - Navbar: slides down from y:-16, opacity 0 to visible. Duration 0.8s, ease [0.16, 1, 0.3, 1] - Video: fades in from opacity 0 + scale 1.05 to opacity 1 + scale 1. Duration 1.8s - Footer wrapper: slides up from y:20, delay 0.5s, duration 1s - Subtitle: slides up from y:16, delay 0.6s, duration 0.8s - Heading: slides up from y:20, delay 0.8s, duration 0.8s - Buttons: slides up from y:16, delay 1.0s, duration 0.8s - All use ease: [0.16, 1, 0.3, 1] Responsive (mobile-first, breakpoint at 768px): - Mobile: navbar padding 16px, smaller buttons (28px circles), brand text hidden, tags hidden, right label hidden, footer stacks vertically, video at 80% size - Desktop (768px+): navbar padding 24px 32px, larger buttons (32px circles), all text/tags visible, footer is row layout, video fills 100%31:T144b,Build a high-performance DeFi dashboard landing page using React, Vite, Tailwind CSS v4, Framer Motion (import { motion } from 'motion/react'), and Lucide React icons. The application must match the following specification component by component, using exact styling, animations, colors, and CloudFront video URLs. 1. Global Setup (index.css & App.tsx) CSS Setup: Import Tailwind via @import "tailwindcss";. Import a custom @font-face for "Helvetica Regular" using this base URL for various formats (eot, woff2, woff, ttf, svg): https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65 Create a theme variable --font-helvetica using ui-sans-serif, system-ui, sans-serif fallbacks. Set :root { font-family: var(--font-helvetica); } and body { margin: 0; overflow-x: hidden; background-color: #f0f0f0; }. App Setup: Wrap your page components (Hero, Metrics, Features, CTA, Footer) in
. 2. Hero Section (Hero.tsx) Create a full-screen wrapper: w-full h-screen flex items-center justify-center p-3 md:p-5 bg-[#f0f0f0]. Inside, a
container: relative w-full max-w-[1536px] h-full rounded-[1.5rem] md:rounded-[3rem] overflow-hidden flex flex-col items-center group. Background Video: Place an absolute

Work About Blog

studio@norakessler.com
Pinterest Behance Letterboxd

Visuals

34:T41ae,Build a single-page marketing site called Nimbus Grid — a fictional secure cloud storage capacity platform. Use plain HTML, CSS, and vanilla JS (Vite project). Match every detail below exactly. --- ## Global Setup Fonts (Google Fonts, preconnect both gstatic + googleapis): - `IBM Plex Sans` weights 400, 500 — body/headings - `IBM Plex Mono` weights 400, 500 — labels, code, nav, CTAs CSS variables (`:root`): ``` --bg: #17130d --ink: #fff4d5 --muted: #dacaa1 --line: rgba(255,240,199,0.28) --glass: rgba(255,239,199,0.16) --glass-strong: rgba(255,239,199,0.24) --accent: #ead09a --accent-2: #ffd879 --deep: #4d3f24 --radius: 8px color-scheme: dark ``` Body: dark warm background `radial-gradient(circle at top left, rgba(255,216,121,0.18), transparent 28rem) + var(--bg)`, ink color `#fff4d5`, IBM Plex Sans, font-size 1rem, line-height 1.375, letter-spacing 0.0175rem, antialiased. ``. Smooth scroll on `html`. Universal `box-sizing: border-box`. Anchor links inherit color, no underline. --- ## Section 1 — Hero Full-viewport (`min-height: 100svh`) section with: - Animated shader background as an `` absolutely positioned, centered with `transform: translate(-50%,-50%) scale(var(--shader-scale,5))`, `z-index:-3`, pointer-events none. - Fallback layer `.shader-fallback` behind it (`z-index:-4`) — radial+linear warm-gold gradient (`#846f43 → #f0d27c → #fff2be`) so the page still looks intentional if the shader fails. - JS: on load + debounced resize (180ms), recompute viewport so shader iframe matches window aspect, capped at 1422×800, scale = max(window.innerWidth/width, (window.innerHeight+110)/height). Site header (`.site-header`) — flex row, `min-height: 42px`: - Brand `NIMBUS GRID` in a glass pill (`padding: 9px 12px`, 1px ink-translucent border, `backdrop-filter: blur(18px) saturate(1.35)`, IBM Plex Mono 12px uppercase, inset highlight + soft shadow). - Right side: nav (`Technology`, `Security`, `Capacity`, `Operations`) — Plex Mono 12px uppercase, 0.04rem letter-spacing, ink-translucent color, hover brightens. - `.header-cta` button "Get Started" — same glass pill style, hover lifts 1px and brightens. Hero layout (grid, two rows): - Top-left console card (`.console-card`) width `min(396px, 42vw)`, dark `rgba(13,16,19,0.88)` panel, 5px radius, blurred backdrop: - Tabs row (`grid-template-columns: repeat(3,minmax(0,77px)) 1fr auto`): `CLI`, `API`, `Console`, plus two fake window controls (small square + a wide bar). Active tab gets accent color and a 2px accent underline. - Three panes (only one shown): - CLI: `<pre>` showing `$ nimbus storage create \ --workspace prod-web \ --tier encrypted-fast \ --region eu-central` with `$` in accent color, then a typing-output line `storage pool web-db-test queued` in accent. - API: `POST /v1/storage/pools` JSON body `{name:"web-db-test", tier:"encrypted-fast", quota:"8 TiB"}`, output `202 accepted: provisioning policy attached`. - Console: mock form fields — `Instance name = web-db-test` (typed), `Image = ubuntu-24.04-noble`, two-column row `Memory = 8 GiB` / `CPUs = 2`. Each `console-input` is a 33px high outlined dark slot, the two select-style ones get a `▾` glyph appended. - Pane size `min-height:153px`, Plex Mono 11px text. - JS typewriter: per active pane, find `[data-typed]`, type one char every 42ms, blinking `::after` cursor (1px wide bar, `cursor-blink` 1s steps animation). - Hero copy at bottom-left: - H1: "Cloud space that scales with your business systems." — Plex Sans 400, `clamp(29px,3.5vw,56px)`, line-height 1, max-width 18ch. - Paragraph: "Nimbus Grid sells secure cloud storage capacity for companies that need fast onboarding, predictable throughput, encrypted collaboration, and modern data residency controls." — `clamp(12px,1.125vw,16.5px)`, ink color, max-width 720px. - Add a soft dark radial blur behind the text (`::before` with blurred ellipse, filter blur 26px) so copy stays readable over the shader. --- ## Section 2 — Platform accordion (scroll-driven) `#platform`, `min-height: 420svh`, near-black `#050604` background with subtle gold radial top-right. - `position: sticky` inner panel (`.accordion-inner`) at `top:0`, full viewport height, two-column grid `0.22fr | 0.78fr`. - Left nav (`.accordion-nav`): four pill labels in Plex Mono 11px uppercase, each prefixed by a 7px square dot: 1. `Programmable infra` 2. `Data residency` 3. `Elastic scaling` 4. `Unified visibility` Active tab uses accent color and shifts right 2px. - Right stack (`.accordion-stack`, height `min(80svh, 820px)`): four `.accordion-card` panels stacked with `position:absolute; inset:0`. Each card is a two-column grid (copy + visual) on a black background with a 1px ink top border. - Card 1 — Programmable infra: copy + a code window: `01 storage_pool = { 02 name = "client-vault" 03 region = "eu-central" 04 quota = "24 TiB" 05 policy = encrypted_fast 06 }` - Card 2 — Data residency: code window with `Region policy / EU Central locked / US East allowed / AP Southeast review / Retention 7 years`. - Card 3 — Elastic scaling: `Capacity forecast / Used 18.4 TiB / Reserved 24 TiB / Burst ready / Next tier approved`. - Card 4 — Unified visibility: `Operations view / Sync health stable / Cold data 14% / Policy drift 0 / Audit export live`. - Each visual: warm gold gradient backdrop (`linear-gradient(135deg, rgba(234,208,154,0.92), rgba(106,91,52,0.68))` + radial highlight), centered dark code window with 3 dot-spans, 8px radius, deep shadow. Scroll behavior (JS): - Track section's `getBoundingClientRect()` → progress 0..1 over `(height - viewport)`. - Map to active card index (rounded). Card N's translateY animates from `stackHeight + collapsedHeight` (off-bottom) up to `index collapsedHeight` (collapsed=84px desktop / 96px mobile), clamped per segment. - Each card sets `--card-y` (transform) and `--card-clip-bottom` (clip-path inset) so the active card fully reveals while previous cards stay as visible header strips. - Clicking a tab smooth-scrolls window to that card's segment. --- ## Section 3 — Pricing `#pricing`, dark olive `#11120f` with light top wash and a soft cyan radial blur (`rgba(151,211,235,0.14)`) bleeding from the top-left. Top grid (max-width 1320px, two columns ~`0.38 | 0.62`): - Left copy: - Eyebrow `Pricing` (accent, Plex Mono 16px uppercase). - H2: "Only pay for cloud storage your teams actually use." `clamp(34px,4vw,68px)`, line-height 1. - Paragraph: "Scale capacity up for active projects and cool it down when workspaces go quiet. Nimbus Grid keeps storage, transfer, and policy costs visible before they become invoices." - Right pricing table (`.pricing-table`): header row "Storage costs" + a billing toggle pill (`Per month` muted, `Per GiB` active = accent pill with `#241d0f` text). Then 5 rows separated by 1px ink lines, each `1fr | auto`: - Encrypted active storage — `$0.021 / GiB / month` - Warm collaboration tier — `$0.012 / GiB / month` - Cold retained archive — `$0.004 / GiB / month` - Regional accelerated transfer — `$0.018 / GiB moved` - Customer-managed key vault — `included` Right values use Plex Mono. Pricing bars — full-bleed (`width: 100vw; margin-left: calc(50% - 50vw)`), 12-column grid, `height: 480px`, bars aligned to bottom. Each bar height = `var(--bar-height) + var(--bar-morph,0px)`, min-height 120px, gold gradient (alternating "muted" variant). Heights start at 12 fixed values (66/58/50/62/45/54/48/64/72/70/78/82%). Top edge fades into the section via gradient overlay. JS ties bar height to scroll position: `progress = (viewport - rect.top) / (viewport + rect.height)`, then per-bar `morph = sin(progress2π + i0.72)34 + cos(progressπ + i0.34)14` px, written to `--bar-morph`. Transitions `height 80ms linear`. Plan row below — 3 columns (Starter / Team / Enterprise), each card max 300px: - Starter: "For small teams consolidating shared project files." CTA `Start small`. - Team: "For departments scaling collaboration and regional transfer." CTA `Build team plan`. - Enterprise: "For organizations prioritizing governance, residency, and support." CTA `Talk to sales`. CTAs: 42px tall pill, Plex Mono 12px uppercase, 1px ink translucent border, glass background, hover brightens. --- ## Section 4 — Security `#security`, `#120f0a` background with two soft radial highlights (gold top-right, warm orange bottom-left), 1320px max-width. Heading row (two columns `0.58 | 0.42`): - Left: eyebrow `Security` + H2 "Modern encryption and compliance controls without slowing the team down." - Right paragraph: "Role-based access, customer-managed keys, immutable retention, and regional storage policies give business clients a cloud layer that can satisfy procurement, IT, and legal from the first deployment." Three security cards (`grid-template-columns: repeat(3, 1fr)`, gap `clamp(16px,2vw,22px)`, each `min-height: 464px`, square corners, 1px ink border, `#0f0c08` with subtle top wash): 1. API card — "Full policy control" + copy "First-class API access for storage pools, keys, regions, and retention rules. No vendor lock-in to proprietary workflows." - Visual: a black `.api-window` (bottom-left, ~58% width, 184px tall) with three dots and pre-text: ``` -> nimbus auth login Enter code VAULT-9AMP -> policy attach workspace/client-vault ``` - An overlapping `.api-spec` (top-right, gold-tinted dark `rgba(64,52,30,0.86)`, accent border) showing: ``` openapi: 3.0.0 info: title: Nimbus API paths: /storage/pools: /keys: /regions: /retention: ``` 2. Compliance card — "Full compliance" + copy "SOC 2, ISO 27001, and GDPR-ready controls help teams satisfy audits, procurement reviews, and data residency requirements." Below: three rows, each a 24px circular accent badge with a checkmark drawn via `::before` (rotated bottom+left borders), small label, accent strong line: - SOC 2 — Type II controls - ISO 27001 — Security management - GDPR — Regional data policy Rows are `rgba(48,39,23,0.84)` with accent-translucent borders. 3. Economics card — "Ownership and predictable economics" + copy "Reserved capacity, clear transfer lanes, and audit-ready billing make storage spend easy to forecast across business units." - Visual: `<pre class="binary-map">` of 1s and 0s drawing a small graphic (10 rows, 28 columns, see the exact pattern in the original — a small icon shape carved out of 1s). - Below: 3-row asset table — `Reserved tier | 24 TiB`, `Transfer lane | EU Central`, `Revision | Q603`. Mono 11px uppercase labels, mixed-case values. --- ## Section 5 — Console showcase `#plans`, dark teal-leaning `#070a0b` with cyan radial accent. Includes a faint repeating-stripe block (decorative `::after`, top-right). Heading row: H2 "The biggest forward leap in business cloud storage operations." (`clamp(25px,4vw,52px)`, color `#dff5ff`) + right paragraph "A single control plane for provisioning storage pools, reviewing policy, watching growth, and shipping audit-ready reports without asking teams to change how they work." Figure label: small Plex Mono pill `Fig. 2 Nimbus Grid web console`. Dashboard shell (`.dashboard-shell`): - Full-width, 8px radius, cyan-translucent border, `rgba(5,8,10,0.9)` background, deep shadow, perspective transform. - Topbar: 3 dots + a placeholder title bar. - Body grid `240px | 1fr`: - Sidebar "Client Vault" + nav items: Workspaces, Storage Pools (active, cyan tint), Retention, Access, Transfers, Reports. - Main: title row "Storage Pools" (cyan `#97d3eb`) + `New pool` cyan-outlined button. Then a 5-column table: | Name | Region | Used | Policy | State | | finance-vault | EU Central | 18.4 TiB | 7 years | Healthy | | design-assets | US East | 9.8 TiB | Versioned | Syncing | | legal-archive | EU Central | 42.1 TiB | Immutable | Healthy | | migration-lane | AP South | 6.2 TiB | Temporary | Queued | Headers in Plex Mono uppercase, States in cyan Plex Mono uppercase. - Toast absolutely positioned bottom-right: "Pool created / finance-vault ready" (cyan, dark background). - Hover effect: shell tilts subtly (`rotateX(1deg) rotateY(-1.2deg) translateY(-8px)`), border brightens, a sheen pseudo-element sweeps left→right (`transform: translateX(-34%) → 34%`, opacity 0→1). --- ## Section 6 — Operations cube `#operations`, `#0c0d0a` with cyan + gold radial accents; left-to-right dark gradient overlay so the copy reads cleanly. Two columns `0.44 | 0.56`: - Left copy: eyebrow `Operations`, H2 "A control layer for every storage move your business makes." (`clamp(34px,4.4vw,72px)`, line-height 0.98), paragraph "Route migrations, active workspaces, archives, and compliance exports through one operational grid. Nimbus Grid keeps capacity, policy, and transfer status visible before teams hit a limit." CTA button `Plan operations` — solid accent gold pill, dark `#1b160d` text, hover swaps to `--accent-2` and lifts 2px. - Right visual: a 3D cube with explode-on-click animation. - `.modal-cube-shell` button, perspective 1000px, `transform-style: preserve-3d`. - `.operations-core-cube` size `clamp(142px,18vw,250px)` with 6 `.cube-face` divs (front/back/right/left/top/bottom). Each face: 18px radius, gold-blue radial gradient (`radial-gradient(circle at 48% 44%, rgba(255,216,121,0.98)…) + linear 135deg cyan→gold→dark`), inset highlights and shadows. - Idle: floats with `core-cube-float` 6s ease-in-out infinite (small Y bob and rotation drift). - On click (toggle `is-exploded`): core cube scales to 0.72; ~14 `.cube-particle` shards (10 cube fragments + 4 small `.dot` spheres) translate to randomized `--tx/--ty/--tz` offsets with `--s`, `--r`, staggered `--d` delays. Particles use `cubic-bezier(0.17,0.78,0.18,1)` 760ms transform + 420ms opacity; start blurred + dim, end sharp. Use the exact 14 particle definitions from the original (see hero-section markup pattern, ranges roughly tx: -310..330, ty: -250..225, tz: 30..210, s: 0.09..0.58). - JS: on `click` (also Enter/Space when focused), toggle the `is-exploded` class. Focus outline 1px ink-translucent, offset 10px. --- ## Responsive Behavior `@media (max-width: 820px)`: - Header collapses to single column, nav wraps full-width, CTA full-width. - Hero layout stacks; console card becomes full width; the diagonal `.console-line` decoration hides. - Console tabs become 3 equal columns (48px tall). Window controls hide. Pane min-height 200px. - Pricing top + plan row + security grid stack to single column. - Accordion: nav 2-column grid above the stack, stack height 78svh, cards become 1-column. - Console showcase: heading stacks; dashboard body single column; sidebar nav 2-cols; table drops Policy + State columns; toast becomes inline at bottom. - Operations: stacks; cube `--spread: 0.72`. `@media (max-width: 520px)`: - Hero padding 22px 18px 0; H1 `clamp(28px,10vw,48px)`; copy 15px. - Accordion nav 1-column. - Operations cube `--spread: 0.48`; visual min-height 360px. - Dashboard title row stacks vertically. --- ## Animations Summary - `cursor-blink` — 1s infinite blinking caret in console (steps(2,start)). - `core-cube-float` — 6s infinite gentle Y bob + tiny rotation drift on idle cube. - Bar heights — JS-driven `--bar-morph` updates on scroll, eased to height with `transition: height 80ms linear`. - Accordion cards — JS-driven `--card-y` translate + `--card-clip-bottom` clip-path follow scroll progress. - Dashboard shell hover — 220ms ease 3D tilt + sheen sweep (520ms ease). - Operations CTA hover — 160ms color/transform. - Operations cube — click toggles `.is-exploded`: core 620ms cubic-bezier transform; shards 760ms cubic-bezier transform + 420ms opacity, staggered delays. - Header CTA / accordion-tab / nav links — 160–200ms hover transitions. - Smooth scroll on tab → section navigation. --- ## Project structure ``` index.html (full markup) styles.css (all styles + media queries) script.js (shader resize, console tabs typing, accordion scroll, bars, cube) package.json (vite ^5.4.2, type:module, scripts: dev/build/preview) vite.config.js (default) ``` Build with `npm run build`. The site uses no frameworks, no images — every visual is CSS/SVG/text.35:T20a4,Core Instruction Act as an elite, award-winning creative frontend developer. Your task is to perfectly recreate a luxury Yacht Club landing page experience with highly advanced WebGL-like DOM animations, a custom GSAP staggered menu, a Framer Motion video fleet overlay, and an interactive liquid distortion cursor trail. Tech Stack Framework: React 19, Vite, TypeScript Styling: Tailwind CSS v4 Animation: motion/react (Framer Motion) and gsap Fonts: @fontsource-variable/geist and Google Fonts (Instrument Serif) 1. Global CSS & Theming (src/index.css) Configure the global CSS exactly as follows using Tailwind v4 syntax: Import Instrument Serif from Google Fonts and tw-animate-css. Define the base theme with OKLCH colors for a dark luxury aesthetic. Set --background: oklch(0.145 0 0); and --foreground: oklch(0.985 0 0);. Use --font-sans: "Instrument Serif", ui-serif, serif; and map --font-heading to it to force the serif font on headers. Force @layer base to have body { @apply bg-background text-foreground; }. Ensure all text throughout the app default to font-serif uppercase unless specified otherwise. 2. Global State & App Structure (src/App.tsx) Create a single-page app utilizing AnimatePresence. Manage two main states: isMenuOpen: Boolean linked to the custom GSAP menu. isFleetOpen: Boolean triggered by clicking "Our Fleet" in the menu. Background Video: Implement an absolute, z-0 background wrapper using <motion.div>. Frame the following Vimeo iframe exactly: <iframe src="https://player.vimeo.com/video/1184061018?background=1&autoplay=1&loop=1&byline=0&title=0" className="absolute top-1/2 left-1/2 w-[100vw] h-[56.25vw] min-h-[100vh] min-w-[177.77vh] -translate-x-1/2 -translate-y-1/2" /> Use motion.div to apply a dynamic CSS blur. When isFleetOpen is true, animate the filter to blur(100px) (duration 1.56s). When false, animate to blur(0px) (duration 1.3s). 3. The Interactive Liquid Cursor Trail Build an interactive liquid ripple system inside App.tsx utilizing a hidden SVG filter and a DOM pool of 80 div elements. The SVG Filter: Place this SVG at the top of the app container: <svg className="hidden"><filter id="liquid-trail"><feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" result="noise" /><feDisplacementMap in="SourceGraphic" in2="noise" scale="30" xChannelSelector="R" yChannelSelector="G" /></filter></svg> The Ripple Logic: Create an array of 80 objects with { x: 0, y: 0, age: 0, active: false } managed via useRef. On window mousemove, calculate the distance since the last mouse position. If distance > 25px, spawn a new ripple by setting active = true, writing the X/Y coords, and incrementing a rotating current index (idx + 1) % 80. Use requestAnimationFrame to step the rings. For each active ring, increment age += 0.012. Ring Math: size = 20 + (age * 280). opacity = 1 - Math.pow(age, 1.2). If age >= 1, set opacity to 0 and scale to 0. The React DOM nodes for the ripples should be absolute empty divs with inline styles: backdropFilter: 'url(#liquid-trail) blur(1px)', WebkitBackdropFilter: 'url(#liquid-trail) blur(1px)', boxShadow: 'inset 0 0 30px rgba(255,255,255,0.1), 0 0 15px rgba(147,197,253,0.15)', willChange: 'transform, opacity, width, height, left, top' 4. Hero Content (!isFleetOpen state) Wrap this inside <AnimatePresence> to mount/unmount seamlessly when the fleet viewer opens. Main Heading: Positioned absolute top-[96px] left-[20px] md:left-[96px]. Use motion.div with staggered children variants mapping to: hidden: { opacity: 0, y: 40, transition: { duration: 0.48 } } and visible: { opacity: 1, y: 0, transition: { duration: 0.96 } }. The text is: "MASTER THE" > "ELEMENTS." (italicized) > "EMBRACE THE" > "OCEAN" (italicized). Styling: text-[64px] md:text-[140px] font-normal leading-none drop-shadow-2xl. Subtext: Text: "JOIN AN EXCLUSIVE COMMUNITY OF SAILORS. WHETHER YOU CRAVE THE THRILL OF THE OPEN SEA OR THE SERENITY OF A SUNSET CRUISE, YOUR NEXT GREAT ADVENTURE STARTS HERE." Position: Pushed over slightly on desktop md:translate-x-[100px], text-[10px] md:text-xs, strictly w-[260px], tracking-widest. Floating CTA Button: Positioned bottom-8 right-8 z-50. Button text: "JOIN THE [italicized: CLUB]" On desktop, if the menu is open, translate the button to the left using transform: translateX(calc(-1 * clamp(260px, 38vw, 420px))). 5. Fleet Video Overlay Modal (isFleetOpen state) When opened, display a fixed flex container taking up the full screen (flex-col md:flex-row). The Data: Use this exact JSON array: code JSON [ { "src": "https://app-uploads.krea.ai/wan-videos/08006647-1c55-4823-b35d-e40d57c66bf8.mp4", "title": "OCEAN\nECLIPSE", "specs": [ { "label": "LENGTH", "value": "28 M (92 FT)" }, { "label": "CRUISING SPEED", "value": "22 KNOTS" }, { "label": "GUESTS", "value": "UP TO 12 GUESTS" }, { "label": "CABINS", "value": "4 EN-SUITE CABINS" }, { "label": "SPECIAL FEATURE", "value": "ADVANCED GYRO STABILIZATION" } ] }, { "src": "https://app-uploads.krea.ai/wan-videos/91fd9932-6194-4d58-ada0-955692853019.mp4", "title": "BLACK\nSOVEREIGN", "specs": [ { "label": "LENGTH", "value": "24 M (78 FT)" }, { "label": "TOP SPEED", "value": "45 KNOTS" }, { "label": "HULL", "value": "CARBON FIBER & KEVLAR" }, { "label": "ENGINES", "value": "TWIN V12 2000 HP" }, { "label": "SPECIAL FEATURE", "value": "BESPOKE DESIGN WITH GOLD DETAILING" } ] }, { "src": "https://app-uploads.krea.ai/wan-videos/95fb3282-d7cf-448e-9202-ef0662541c83.mp4", "title": "AZURE\nHORIZON", "specs": [ { "label": "LENGTH", "value": "32 M (105 FT)" }, { "label": "RANGE", "value": "1,500 NAUTICAL MILES" }, { "label": "GUESTS", "value": "14 GUESTS + 5 CREW" }, { "label": "DECK", "value": "SPACIOUS SUN DECK WITH JACUZZI" }, { "label": "SPECIAL FEATURE", "value": "FULL WATER TOYS GARAGE" } ] } ] FleetVideo Component: Each column maps out a <video> taking up w-full h-[85vh] md:h-full md:flex-1. Include borders (border-r-2 border-white). Animate columns coming in from the right (x: '100vw' to x: 0) using Framer Motion with delays staggering by i * 0.1 and a duration of 1.56. Add onMouseEnter / onMouseLeave state to trigger video .play() and .pause() wrapped safely in a promise resolver to avoid interruptions. On hover, scale the video up to 105% with duration-700. Show a black overlay (bg-black/20). Hover Content: Inside <AnimatePresence>, render the title (e.g., text-5xl md:text-7xl mb-12), the mapped specs (uppercase tracking-widest text-white/70), and a "VIEW" button (bg-white/5 backdrop-blur-[120px]). Apply the specific y stagger text variants so they gracefully shift up from a clipped mask. 6. The GSAP Custom Staggered Menu (StaggeredMenu.jsx) Create an off-canvas navigation sidebar triggered from the right using GSAP. The Wrapper & Icon: The hamburger icon consists of a div wrapper containing two spans forming a "Plus" shape. When open, GSAP controls it: rotate the wrapper by 225deg to form an X. Slot Machine Text Link: Next to the hamburger, display the text "MENU". When clicked, use a slot-machine-style vertical transition, cycling the words "MENU" and "CLOSE" three times before settling on the correct target word. Shift the interior wrapper yPercent: -finalShift rapidly over 0.5s easing power4 out. Menu Colors: Set the GSAP configuration to use colors ['#1a1a1a', '#93c5fd']. On open, the menu button's color changes automatically from #ffffff to #000000. The Panel Animation: Utilize "prelayers", an array of div masking layers that slide in from 100vw. GSAP should .fromTo their xPercent to 0 using power4.out staggered by 0.07s. The main panel follows right after taking 0.65 seconds. Menu Items: The menu items MUST contain: Home, Our Fleet (triggers setIsFleetOpen(true) and closes the menu), Membership, Regattas & Events, Academy, Contact. Animate their entrance using yPercent and a 10deg rotation rotating back to flat using .stagger: { each: 0.1 } mapped directly against the items NodeList. Wrap the StaggeredMenu over the app context, providing the right position, colors, and social handles (Instagram, Facebook, Twitter). Ensure all component names, class names, file structures, and specific math equations are strictly ported to perfectly mimic the reference logic.36:T1d54,Build a React + Vite + Tailwind CSS landing page with two full-screen sections for a luxury beauty/wellness brand called "Serene". Use TypeScript. --- ### Fonts (loaded via Google Fonts in index.html) Load these three font families from Google Fonts: - Dancing Script (weights: 400, 500, 600, 700) -- used for the brand logo - Instrument Serif (italic: 0, 1) -- used for the hero heading and the quote text - Inter (weights: 300, 400, 500, 600, 700, 800, 900) -- used for body text, navbar links, and buttons ```html <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" /> ``` --- ### Global CSS (index.css) ```css @tailwind base; @tailwind components; @tailwind utilities; * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: #0a0a0c; overflow-x: hidden; } .font-inter { font-family: 'Inter', sans-serif; } .font-instrument { font-family: 'Instrument Serif', serif; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .text-glow { text-shadow: 0 0 40px rgba(255, 255, 255, 0.4), 0 0 80px rgba(255, 255, 255, 0.2), 0 0 120px rgba(255, 255, 255, 0.1); } .button-glow { box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.1); } ``` --- ### App Layout (App.tsx) The wrapper div has `bg-[#0a0608]`. It renders `<Hero />` followed by `<QuoteSection />`. --- ### SECTION 1: Hero A full-viewport (`h-screen`) section with: 1. Background video -- autoplays, muted, loops, playsInline, covers the full section with `object-cover`: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260613_180732_a54afbf6-b30d-470e-861f-669871f09f67.mp4 ``` 2. Dark overlay -- `absolute inset-0 bg-black/20` 3. Fixed Navbar -- `fixed top-0 left-0 right-0 z-50`, flex row, space-between, `px-6 md:px-12 py-5`: - Left: Brand name "Serene" in Dancing Script cursive, white, `text-2xl md:text-3xl` - Center (desktop only, hidden on mobile): Navigation links -- "About", "Services", "Journal", "Contact" -- `text-white/80 hover:text-white text-sm tracking-wide`, spaced `gap-12` - Right (desktop): White pill button "Book a consultation" - Right (mobile): Hamburger icon (3 lines, animated to X on open). Uses cubic-bezier(0.22,1,0.36,1) easing. On open: top line rotates 45deg + translates down 9px; middle line fades/scales to 0; bottom line rotates -45deg + translates up 9px. - Mobile menu: Slide-in panel from right, `w-[85%] max-w-[340px]`, `bg-[#0a0608]/95 backdrop-blur-xl border-l border-white/10`. Links stagger-animate in (opacity + translateX, 75ms delay between each, starting at 150ms). Button at bottom with 450ms delay. 4. Center content -- absolutely positioned, flex column, centered, with `-mt-[120px]` to shift up: - Heading: `font-instrument text-white text-[36px] md:text-7xl lg:text-[110px] leading-[0.9] tracking-tight text-center text-glow` -- text: "Gentle touch. Radiant presence." - Subtext: `text-white/70 text-sm md:text-base text-center mt-5 md:mt-7 max-w-xl` -- text: "Expert beauty and holistic wellness, delivered with warmth and intention." - CTA Button: White pill button "Begin your renewal", `mt-6 md:mt-9` 5. Sound indicator (desktop only) -- bottom-left corner (`bottom-8 left-8`), a 40px circle with `border border-white/20` containing a small horizontal bar, next to two lines of text: "Experience" / "with sound" in `text-white/60 text-xs` Button component: `bg-white text-black px-8 py-3.5 rounded-full font-medium text-sm tracking-wide hover:bg-white/90 transition-all duration-300 button-glow` --- ### SECTION 2: Quote Section (with parallax scroll animations) A full-viewport (`h-screen`) section with: Background: CSS linear-gradient top to bottom: ``` #010A17 0% -> #0A4267 30% -> #20658E 60% -> #6BADC4 100% ``` Animated layers (requestAnimationFrame-based parallax with lerp smoothing): The animation uses a `progress` value (0 to 1) based on how far the section has scrolled through the viewport: ``` progress = clamp(0, 1, (windowHeight - rect.top) / (windowHeight + rect.height)) ``` 1. Rainbow image -- full-width, positioned `absolute inset-x-0 top-0 z-30`. Parallax: moves vertically from +120px to -160px based on scroll progress. Lerp factor: 0.06. ``` https://soft-zoom-63098134.figma.site/_assets/v11/8d520a7515d06cbfc403d0125e3d05b1a7ccd29c.png ``` 2. Left cloud -- `absolute left-0 bottom-[10%] z-10`, hidden on mobile (`hidden sm:block`). Width: `w-[500px] md:w-[650px]`. Has `marginLeft: '-50%'` to let it overflow left. Slides in from -200px on X when in view (progress 0.12-0.92), slides back out when not. Also drifts up (cloudY = progress * -50). Opacity tied to X distance. Lerp factor: 0.04. ``` https://soft-zoom-63098134.figma.site/_assets/v11/0d6dfd3f90b930f21726f2ed56a3320d79b7a797.png ``` 3. Right cloud -- same image as left but `scale-x-[-1]` (flipped), `absolute right-0 bottom-[15%] z-10`. Has `marginRight: '-75%'`. Slides in from +200px. Same lerp/timing as left cloud. 4. Quote content -- centered, `z-20`, `max-w-4xl`: - Quote text: `font-instrument text-white text-xl sm:text-2xl md:text-4xl lg:text-[42px] leading-[1.45] md:leading-[1.5]` -- text: "Serene was founded on a belief in beauty that honors your nature. We pursue refined outcomes, considered approaches, and lasting vitality. We spend time learning what matters to you before deciding what serves you best. No rushing, no excess -- just support that lets you feel radiant." (wrapped in curly quotes) - Attribution: `mt-6 md:mt-8 text-white/80 text-sm md:text-base tracking-wide` -- text: "Dr. Mia Callahan -- Founder" Key animation implementation detail: All transforms use `translate3d` for GPU acceleration with `will-change-transform`. Initial cloud state is `opacity: 0` and translated off-screen. The lerp function smoothly interpolates current values toward targets each frame: `current + (target - current) * factor`. --- ### Tailwind Config Default Tailwind config with no extensions -- all custom styling handled via CSS utility classes in index.css.8:["$","$L22",null,{"activeCategory":"sites","items":[{"category":"sites","id":101,"media":[{"id":126,"alt":"EcoVolta","caption":null,"folder":null,"updatedAt":"2026-08-13T11:33:53.140Z","createdAt":"2026-08-13T11:33:53.140Z","url":"/api/media/file/sites-0329-01.webp","thumbnailURL":"/api/media/file/sites-0329-01-300x228.webp","filename":"sites-0329-01.webp","mimeType":"image/webp","filesize":21964,"width":480,"height":364,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0329-01-300x228.webp","width":300,"height":228,"mimeType":"image/webp","filesize":12460,"filename":"sites-0329-01-300x228.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":737,"prompt":"$23","title":"EcoVolta"},{"category":"sites","id":102,"media":[{"id":127,"alt":"Orbit Engineers","caption":null,"folder":null,"updatedAt":"2026-08-13T11:33:53.602Z","createdAt":"2026-08-13T11:33:53.602Z","url":"/api/media/file/sites-0328-01.png","thumbnailURL":"/api/media/file/sites-0328-01-300x522.png","filename":"sites-0328-01.png","mimeType":"image/png","filesize":2029113,"width":992,"height":1726,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0328-01-300x522.png","width":300,"height":522,"mimeType":"image/png","filesize":341636,"filename":"sites-0328-01-300x522.png"},"square":{"url":"/api/media/file/sites-0328-01-500x500.png","width":500,"height":500,"mimeType":"image/png","filesize":465640,"filename":"sites-0328-01-500x500.png"},"small":{"url":"/api/media/file/sites-0328-01-600x1044.png","width":600,"height":1044,"mimeType":"image/png","filesize":1059111,"filename":"sites-0328-01-600x1044.png"},"medium":{"url":"/api/media/file/sites-0328-01-900x1566.png","width":900,"height":1566,"mimeType":"image/png","filesize":2038040,"filename":"sites-0328-01-900x1566.png"},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":"/api/media/file/sites-0328-01-1200x630.png","width":1200,"height":630,"mimeType":"image/png","filesize":994928,"filename":"sites-0328-01-1200x630.png"}}}],"order":734,"prompt":"$24","title":"Orbit Engineers"},{"category":"sites","id":103,"media":[{"id":128,"alt":"Unwind Hero","caption":null,"folder":null,"updatedAt":"2026-08-13T11:34:03.118Z","createdAt":"2026-08-13T11:34:03.118Z","url":"/api/media/file/sites-0327-01.webp","thumbnailURL":"/api/media/file/sites-0327-01-300x218.webp","filename":"sites-0327-01.webp","mimeType":"image/webp","filesize":1446558,"width":640,"height":466,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0327-01-300x218.webp","width":300,"height":218,"mimeType":"image/webp","filesize":505076,"filename":"sites-0327-01-300x218.webp"},"square":{"url":"/api/media/file/sites-0327-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1209636,"filename":"sites-0327-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0327-01-600x437.webp","width":600,"height":437,"mimeType":"image/webp","filesize":1362196,"filename":"sites-0327-01-600x437.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":732,"prompt":"$25","title":"Unwind Hero"},{"category":"sites","id":104,"media":[{"id":129,"alt":"Daisy Wild","caption":null,"folder":null,"updatedAt":"2026-08-13T11:34:12.076Z","createdAt":"2026-08-13T11:34:12.076Z","url":"/api/media/file/sites-0326-01.webp","thumbnailURL":"/api/media/file/sites-0326-01-300x223.webp","filename":"sites-0326-01.webp","mimeType":"image/webp","filesize":1352234,"width":640,"height":476,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0326-01-300x223.webp","width":300,"height":223,"mimeType":"image/webp","filesize":488704,"filename":"sites-0326-01-300x223.webp"},"square":{"url":"/api/media/file/sites-0326-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":954900,"filename":"sites-0326-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0326-01-600x446.webp","width":600,"height":446,"mimeType":"image/webp","filesize":1175462,"filename":"sites-0326-01-600x446.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":731,"prompt":"$26","title":"Daisy Wild"},{"category":"sites","id":105,"media":[{"id":130,"alt":"Neo Museum","caption":null,"folder":null,"updatedAt":"2026-08-13T11:34:20.261Z","createdAt":"2026-08-13T11:34:20.261Z","url":"/api/media/file/sites-0325-01.webp","thumbnailURL":"/api/media/file/sites-0325-01-300x219.webp","filename":"sites-0325-01.webp","mimeType":"image/webp","filesize":1469664,"width":640,"height":468,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0325-01-300x219.webp","width":300,"height":219,"mimeType":"image/webp","filesize":511330,"filename":"sites-0325-01-300x219.webp"},"square":{"url":"/api/media/file/sites-0325-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1210434,"filename":"sites-0325-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0325-01-600x439.webp","width":600,"height":439,"mimeType":"image/webp","filesize":1314276,"filename":"sites-0325-01-600x439.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":728,"prompt":"$27","title":"Neo Museum"},{"category":"sites","id":106,"media":[{"id":131,"alt":"Mythic Naturecore","caption":null,"folder":null,"updatedAt":"2026-08-13T11:34:29.737Z","createdAt":"2026-08-13T11:34:29.737Z","url":"/api/media/file/sites-0324-01.webp","thumbnailURL":"/api/media/file/sites-0324-01-300x225.webp","filename":"sites-0324-01.webp","mimeType":"image/webp","filesize":2054076,"width":640,"height":480,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0324-01-300x225.webp","width":300,"height":225,"mimeType":"image/webp","filesize":618718,"filename":"sites-0324-01-300x225.webp"},"square":{"url":"/api/media/file/sites-0324-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1867208,"filename":"sites-0324-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0324-01-600x450.webp","width":600,"height":450,"mimeType":"image/webp","filesize":1787102,"filename":"sites-0324-01-600x450.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":727,"prompt":"$28","title":"Mythic Naturecore"},{"category":"sites","id":107,"media":[{"id":132,"alt":"Learnly","caption":null,"folder":null,"updatedAt":"2026-08-13T11:34:39.060Z","createdAt":"2026-08-13T11:34:39.060Z","url":"/api/media/file/sites-0323-01.webp","thumbnailURL":"/api/media/file/sites-0323-01-300x225.webp","filename":"sites-0323-01.webp","mimeType":"image/webp","filesize":995736,"width":640,"height":480,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0323-01-300x225.webp","width":300,"height":225,"mimeType":"image/webp","filesize":395040,"filename":"sites-0323-01-300x225.webp"},"square":{"url":"/api/media/file/sites-0323-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":923908,"filename":"sites-0323-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0323-01-600x450.webp","width":600,"height":450,"mimeType":"image/webp","filesize":996456,"filename":"sites-0323-01-600x450.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":724,"prompt":"$29","title":"Learnly"},{"category":"sites","id":108,"media":[{"id":133,"alt":"Projects Catalog","caption":null,"folder":null,"updatedAt":"2026-08-13T11:34:50.411Z","createdAt":"2026-08-13T11:34:50.411Z","url":"/api/media/file/sites-0322-01.webp","thumbnailURL":"/api/media/file/sites-0322-01-300x221.webp","filename":"sites-0322-01.webp","mimeType":"image/webp","filesize":1845618,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0322-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":601186,"filename":"sites-0322-01-300x221.webp"},"square":{"url":"/api/media/file/sites-0322-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1481800,"filename":"sites-0322-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0322-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":1705462,"filename":"sites-0322-01-600x443.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":722,"prompt":"$2a","title":"Projects Catalog"},{"category":"sites","id":109,"media":[{"id":134,"alt":"Neon Logic","caption":null,"folder":null,"updatedAt":"2026-08-13T11:35:01.196Z","createdAt":"2026-08-13T11:35:01.196Z","url":"/api/media/file/sites-0321-01.webp","thumbnailURL":"/api/media/file/sites-0321-01-300x222.webp","filename":"sites-0321-01.webp","mimeType":"image/webp","filesize":1744200,"width":640,"height":474,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0321-01-300x222.webp","width":300,"height":222,"mimeType":"image/webp","filesize":561134,"filename":"sites-0321-01-300x222.webp"},"square":{"url":"/api/media/file/sites-0321-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1538366,"filename":"sites-0321-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0321-01-600x444.webp","width":600,"height":444,"mimeType":"image/webp","filesize":1560416,"filename":"sites-0321-01-600x444.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":719,"prompt":"$2b","title":"Neon Logic"},{"category":"sites","id":110,"media":[{"id":135,"alt":"Taskora SaaS Hero","caption":null,"folder":null,"updatedAt":"2026-08-13T11:35:01.322Z","createdAt":"2026-08-13T11:35:01.322Z","url":"/api/media/file/sites-0320-01.webp","thumbnailURL":"/api/media/file/sites-0320-01-300x213.webp","filename":"sites-0320-01.webp","mimeType":"image/webp","filesize":15586,"width":480,"height":340,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0320-01-300x213.webp","width":300,"height":213,"mimeType":"image/webp","filesize":9328,"filename":"sites-0320-01-300x213.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":718,"prompt":"$2c","title":"Taskora SaaS Hero"},{"category":"sites","id":111,"media":[{"id":136,"alt":"AI Driving Assistant","caption":null,"folder":null,"updatedAt":"2026-08-13T11:35:01.400Z","createdAt":"2026-08-13T11:35:01.399Z","url":"/api/media/file/sites-0319-01.mp4","thumbnailURL":null,"filename":"sites-0319-01.mp4","mimeType":"video/mp4","filesize":1730617,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":715,"prompt":"$2d","title":"AI Driving Assistant"},{"category":"sites","id":112,"media":[{"id":137,"alt":"Liquid Glass Agency","caption":null,"folder":null,"updatedAt":"2026-08-13T11:35:01.896Z","createdAt":"2026-08-13T11:35:01.896Z","url":"/api/media/file/sites-0318-01.webp","thumbnailURL":"/api/media/file/sites-0318-01-300x623.webp","filename":"sites-0318-01.webp","mimeType":"image/webp","filesize":25204,"width":385,"height":800,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0318-01-300x623.webp","width":300,"height":623,"mimeType":"image/webp","filesize":17764,"filename":"sites-0318-01-300x623.webp"},"square":{"url":"/api/media/file/sites-0318-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":18892,"filename":"sites-0318-01-500x500.webp"},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":"/api/media/file/sites-0318-01-1200x630.webp","width":1200,"height":630,"mimeType":"image/webp","filesize":19120,"filename":"sites-0318-01-1200x630.webp"}}}],"order":713,"prompt":"$2e","title":"Liquid Glass Agency"},{"category":"sites","id":113,"media":[{"id":138,"alt":"Wanderful Hero","caption":null,"folder":null,"updatedAt":"2026-08-13T11:35:11.642Z","createdAt":"2026-08-13T11:35:11.641Z","url":"/api/media/file/sites-0317-01.webp","thumbnailURL":"/api/media/file/sites-0317-01-300x220.webp","filename":"sites-0317-01.webp","mimeType":"image/webp","filesize":792172,"width":640,"height":470,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0317-01-300x220.webp","width":300,"height":220,"mimeType":"image/webp","filesize":322754,"filename":"sites-0317-01-300x220.webp"},"square":{"url":"/api/media/file/sites-0317-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":760878,"filename":"sites-0317-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0317-01-600x441.webp","width":600,"height":441,"mimeType":"image/webp","filesize":806488,"filename":"sites-0317-01-600x441.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":711,"prompt":"$2f","title":"Wanderful Hero"},{"category":"sites","id":114,"media":[{"id":139,"alt":"Tech-Forward","caption":null,"folder":null,"updatedAt":"2026-08-13T11:35:11.728Z","createdAt":"2026-08-13T11:35:11.728Z","url":"/api/media/file/sites-0316-01.mp4","thumbnailURL":null,"filename":"sites-0316-01.mp4","mimeType":"video/mp4","filesize":818677,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":709,"prompt":"$30","title":"Tech-Forward"},{"category":"sites","id":115,"media":[{"id":140,"alt":"RIVR DeFi","caption":null,"folder":null,"updatedAt":"2026-08-13T11:35:12.127Z","createdAt":"2026-08-13T11:35:12.127Z","url":"/api/media/file/sites-0315-01.webp","thumbnailURL":"/api/media/file/sites-0315-01-300x541.webp","filename":"sites-0315-01.webp","mimeType":"image/webp","filesize":27816,"width":444,"height":800,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0315-01-300x541.webp","width":300,"height":541,"mimeType":"image/webp","filesize":17128,"filename":"sites-0315-01-300x541.webp"},"square":{"url":"/api/media/file/sites-0315-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":14900,"filename":"sites-0315-01-500x500.webp"},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":"/api/media/file/sites-0315-01-1200x630.webp","width":1200,"height":630,"mimeType":"image/webp","filesize":13140,"filename":"sites-0315-01-1200x630.webp"}}}],"order":708,"prompt":"$31","title":"RIVR DeFi"},{"category":"sites","id":116,"media":[{"id":141,"alt":"Portal","caption":null,"folder":null,"updatedAt":"2026-08-13T11:35:12.246Z","createdAt":"2026-08-13T11:35:12.246Z","url":"/api/media/file/sites-0314-01.webp","thumbnailURL":"/api/media/file/sites-0314-01-300x229.webp","filename":"sites-0314-01.webp","mimeType":"image/webp","filesize":9104,"width":480,"height":366,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0314-01-300x229.webp","width":300,"height":229,"mimeType":"image/webp","filesize":5646,"filename":"sites-0314-01-300x229.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":707,"prompt":"$32","title":"Portal"},{"category":"sites","id":117,"media":[{"id":142,"alt":"Vision Reveal","caption":null,"folder":null,"updatedAt":"2026-08-13T11:35:12.340Z","createdAt":"2026-08-13T11:35:12.340Z","url":"/api/media/file/sites-0313-01.mp4","thumbnailURL":null,"filename":"sites-0313-01.mp4","mimeType":"video/mp4","filesize":2245538,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":706,"prompt":"$33","title":"Vision Reveal"},{"category":"sites","id":118,"media":[{"id":144,"alt":"Nimbus Grid","caption":null,"folder":null,"updatedAt":"2026-08-13T11:36:25.416Z","createdAt":"2026-08-13T11:36:25.416Z","url":"/api/media/file/sites-0312-01.webp","thumbnailURL":"/api/media/file/sites-0312-01-300x218.webp","filename":"sites-0312-01.webp","mimeType":"image/webp","filesize":1123844,"width":640,"height":466,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0312-01-300x218.webp","width":300,"height":218,"mimeType":"image/webp","filesize":386004,"filename":"sites-0312-01-300x218.webp"},"square":{"url":"/api/media/file/sites-0312-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":885310,"filename":"sites-0312-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0312-01-600x437.webp","width":600,"height":437,"mimeType":"image/webp","filesize":1000836,"filename":"sites-0312-01-600x437.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":704,"prompt":"$34","title":"Nimbus Grid"},{"category":"sites","id":119,"media":[{"id":145,"alt":"Yacht Club","caption":null,"folder":null,"updatedAt":"2026-08-13T11:36:25.667Z","createdAt":"2026-08-13T11:36:25.667Z","url":"/api/media/file/sites-0311-01.webp","thumbnailURL":"/api/media/file/sites-0311-01-300x217.webp","filename":"sites-0311-01.webp","mimeType":"image/webp","filesize":21190,"width":480,"height":348,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0311-01-300x217.webp","width":300,"height":217,"mimeType":"image/webp","filesize":13678,"filename":"sites-0311-01-300x217.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":703,"prompt":"$35","title":"Yacht Club"},{"category":"sites","id":120,"media":[{"id":146,"alt":"Celestial Renewal","caption":null,"folder":null,"updatedAt":"2026-08-13T11:36:25.794Z","createdAt":"2026-08-13T11:36:25.794Z","url":"/api/media/file/sites-0310-01.mp4","thumbnailURL":null,"filename":"sites-0310-01.mp4","mimeType":"video/mp4","filesize":1795719,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":700,"prompt":"$36","title":"Celestial Renewal"}],"page":6,"query":"","totalDocs":344,"totalPages":18}] </article></body></html>

Study.Train.Rise.

HandsOff.

Study.
Train.
Rise.

Hands
Off.