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: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.24: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)`). ```25: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 (

Study.
Train.
Rise.

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

{card.label}

{card.titleTop}
{card.titleBottom}

{card.num} Topics

))}

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.

2a:T10a1,Please create a React/Vite application utilizing Tailwind CSS, Lucide React, and Framer Motion. I want to build a landing page layout with a specific full-screen background video and a highly styled footer component. ### 1. Global Setup & Fonts - In your global CSS file, import the "Geist" font from Google Fonts (weights 100..900). - Set up a Tailwind custom theme variable for `--font-geist` using `"Geist", sans-serif`. - Apply `@apply font-geist antialiased;` to the `body`. ### 2. Main App Layout & Background Video Create a main layout that takes up the full screen (`min-h-[100dvh] h-full lg:h-[100dvh]`) styled with a black background (`bg-black`), flexbox column, relative positioning, and hidden overflow. Inside this main layout, add a background `

Study.Train.Rise.

HandsOff.

Study.
Train.
Rise.

Hands
Off.

Neo Museum

Mythic Naturecore

Learnly

Projects Catalog

Neon Logic

Taskora SaaS Hero

AI Driving Assistant

Zenith Footer

Liquid Glass Agency

Wanderful Hero

Tech-Forward

RIVR DeFi

Portal

Vision Reveal

Beauty Categories

Nimbus Grid

Yacht Club

Celestial Renewal

CoderCrest

Urban Jungle