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:T34e9,Build a single-page immersive parallax landing page in React + TypeScript + Tailwind CSS using Vite. The page has two scroll-driven scenes inside a sticky viewport. Everything lives in a single `src/App.tsx` file. Use Google Fonts: **Viaoda Libre** (serif headings) and **Imprima** (sans-serif body). No external UI libraries. Use `lucide-react` only as a dependency (it is not used in this page). Use Tailwind for responsive layout breakpoints only; all other styling is inline React `CSSProperties`. --- ### GLOBAL SETUP **`tailwind.config.js`** -- Override the `xl` breakpoint to `1100px`: ```js screens: { xl: '1100px' } ``` **`index.css`** -- Include Tailwind directives, global reset, dark background `#0a0608`, `font-family: 'Imprima', sans-serif`, `scrollbar-gutter: stable`, and a `@keyframes bobUp` animation that translates Y by `-6px` at 50%. **`index.html`** -- Load Google Fonts via ``: ``` https://fonts.googleapis.com/css2?family=Viaoda+Libre&family=Imprima&display=swap ``` Title: "Step Into Wonder" --- ### IMAGE ASSETS (use these exact URLs) ``` PORTAL_BG = "https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779707217/image_1_vdzwae.png" CURTAIN_LEFT = "https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779706559/curtain_left_znkmva.png" CURTAIN_RIGHT= "https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779706564/curtain_right_paeyym.png" WORLD_BG = "https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779706392/image_2_gkcdlx.png" BOTTOM_CLOUDS= "https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1779706555/bottom_clouds_xskut6.png" CARD_IMAGES[0] = "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260525_160507_2ccbb4eb-1469-484f-af25-59168ad9a233.png&w=1280&q=85" CARD_IMAGES[1] = "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260525_160644_072a7f68-a101-4ded-a332-7d37707dbdd1.png&w=1280&q=85" CARD_IMAGES[2] = "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260525_160706_1c153d04-0dfb-4ac9-a4ef-e74f301c329c.png&w=1280&q=85" ``` --- ### SCENE 2 CARD DATA (9 cards for the arc slider) ``` { title: 'Hidden Realms', desc: 'Luminous sanctuaries unseen by wandering eyes', color: '#f3cdd6' } { title: 'Wild Solitudes', desc: 'Dissolve into untamed horizons and deep calm', color: '#dcedc2' } { title: 'Silent Havens', desc: 'Remote escapes far beyond ordinary reach', color: '#c3e3f4' } { title: 'Bespoke Quests', desc: 'Journeys shaped around your vision and soul', color: '#f0e4c0' } { title: 'Vivid Drifts', desc: 'Surreal passages through breathtaking terrain', color: '#dcd2f2' } { title: 'Mystic Crests', desc: 'Timeless ridgelines wrapped in cloud and myth', color: '#f3cdd6' } { title: 'Deep Currents', desc: 'Glowing depths alive with uncharted wonder', color: '#c3e3f4' } { title: 'Gilded Dusk', desc: 'Amber horizons that stretch past all reason', color: '#f0e4c0' } { title: 'Glassy Tides', desc: 'Calm waters holding skies of pure stillness', color: '#dcedc2' } ``` --- ### ARCHITECTURE The outer container is `height: 480vh; position: relative`. Inside it is a `position: sticky; top: 0; height: 100vh; overflow: hidden; background: #0a0608` viewport. All layers stack via absolute positioning and z-index. **Scroll progress** = `window.scrollY / (container.scrollHeight - window.innerHeight)`, clamped 0-1. **Helper functions:** - `easeInOut(t)`: quadratic ease `t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t` - `lerp(a, b, t)`: linear interpolation - `clamp(val, min, max)` **`useIsMobile()`** hook: `matchMedia('(max-width: 767px)')` -- returns boolean. --- ### LAYER STACK (bottom to top by z-index) #### Layer 1: World Background (z-index: auto/0) - `ref={worldRef}`, absolute inset 0, `transformOrigin: '50% 50%'` - `WORLD_BG` image, `object-fit: cover` - Parallax: `scale(lerp(1, 1.18, ep))`, mouse offset `MAG.world = 6` #### Layer 2: Bottom Clouds (z-index: 10) - `ref={cloudsRef}`, absolute bottom:0, left:0, right:0, `transformOrigin: '50% 100%'` - `BOTTOM_CLOUDS` image, `width: 100%, height: auto` - Parallax: `scale(lerp(1, 1.4, ep))`, mouse offset `MAG.clouds = 9` (Y dampened to `0.4x`) - Opacity: fades from 0.7 to 1 in the first 5% of scroll #### Layer 2.5: Arc Card Slider (z-index: 9) - Absolute, `bottom: 60px (mobile) / 80px (desktop)`, centered horizontally - Opacity = `scene2Opacity` - Contains `` component (details below) #### Layer 3: Portal Frame (z-index: 15) - `ref={portalRef}`, absolute inset 0, `transformOrigin: '52% 38%'` - `PORTAL_BG` image, `object-fit: cover` - Parallax: `scale(lerp(1, 7.5, ep))`, mouse offset `MAG.portal = 7` - Opacity: 1 until scroll 0.65, then fades to 0 by scroll 0.85 #### Layer 3.5: Bottom Fade (z-index: 16) - Absolute bottom, `height: 40%`, `linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%)`, `pointer-events: none` #### Layer 4L: Curtain Left (z-index: 16) - `ref={curtainLRef}`, absolute inset 0, `transformOrigin: 'left center'` - `CURTAIN_LEFT` image, `object-fit: cover`, `object-position: right center` - On mount (after 100ms), shifts left by `translateX(-62%)` with `transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1)` - On scroll: additional `translateX` via `lerp(0, 150, ep)%`, scale `lerp(1, 1.3, ep)` - Mouse offset: `MAG.curtainL = 14` (Y dampened to `0.3x`) - After entrance animation (2200ms), transition switches to `none` for responsive parallax #### Layer 4R: Curtain Right (z-index: 16) - Mirror of Layer 4L but `transformOrigin: 'right center'`, `object-position: left center` - Shifts right instead of left, `MAG.curtainR = 14` #### Top Fade Gradient (z-index: 45) - Absolute top, `height: 42vh`, `linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%)`, `pointer-events: none` --- ### NAVIGATION (z-index: 50) Absolute top, full width, `display: flex, justify-content: space-between, align-items: center`. **Nav link style:** `font-family: 'Imprima', sans-serif`, `font-size: 12px`, `letter-spacing: 0.12em`, `text-transform: uppercase`, `color: #fff`, `opacity: 0.9`, no text decoration. **Mobile** (`padding: 18px 20px`): Three items -- "Explore" (11px) | StarLogo SVG | "Connect" (11px) **Desktop** (`padding: 22px 48px`): Left group ["Worlds", "Atelier", "Immersions"] with `gap: 36px` | StarLogo SVG center | Right group ["Craft", "Codex", "Connect"] with `gap: 36px` **StarLogo** -- inline SVG, 28x28, white star path + 3 small circles: ``` ``` --- ### SCENE 1 UI (z-index: 20) Opacity = `clamp(1 - scrollProgress / 0.22, 0, 1)`. Fades out in first ~22% of scroll. Uses **three separate Tailwind-responsive layout blocks** (not JS branching for layout): #### Mobile layout (`md:hidden`) - Centered column, `padding: 80px 24px 100px` - Fade-in: `opacity 0.9s ease, transform 0.9s ease`, delay `0.3s`, triggers on `uiVisible` - **Heading** (Viaoda Libre): "FALL > INTO" line (`clamp(26px, 7vw, 42px)`, `tracking-widest`, color `#3b1a0a`) then "REVERIE" (`clamp(52px, 16vw, 80px)`, `tracking-tight`, `leading-none`, color `#3b1a0a`). The ">" is a `›` character in color `#6b2e0e` at `0.8em`. "INTO" is italic. - **Subtext** (Imprima): "Crafting boundless digital worlds where the edge between AI, vision, and living myth dissolves." -- `15px`, `leading-relaxed`, color `#5c2d0e`, `max-width: 280px` - **Single card**: 140x140px, `border-radius: 22px`, `CARD_IMAGES[0]` as background-cover, `box-shadow: 0 8px 32px rgba(0,0,0,0.5)`. Bottom gradient overlay (60% height). Bottom-left overlay: white circle (26px) with play triangle SVG + "View Reel" text (13px, white). #### Tablet layout (`hidden md:flex xl:hidden`) - Centered column, `gap: 28px`, `padding: 80px 32px 96px` - Same fade-in animation as mobile - **Heading**: same structure as mobile but dark brown text (`#3b1a0a`), sizes `clamp(28px, 5vw, 44px)` / `clamp(60px, 12vw, 86px)` - **Subtext**: same text, `16px`, color `#5c2d0e`, `max-width: 400px` - **Three cards in a row** (`flex gap-3.5`): each 140x140px, `border-radius: 22px`. Each has: - Background gradient overlay (60% height, multi-stop) - Backdrop blur layer (44% height, masked gradient) - Card 1: play button + "View Reel" - Card 2: number "32" (Viaoda Libre, 28px, white) + "World Patrons" - Card 3: play button + "View Reel" #### Desktop layout (`hidden xl:block` / `hidden xl:flex`) - **Heading block**: absolute, `top: 46%`, `left: 60px`, `maxWidth: 440px`, `translateY(-50%)` centered - White text with heavy `text-shadow: 0 2px 24px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.9)` - "FALL > INTO": `clamp(32px, 4.5vw, 54px)`, `line-height: 1.1`, `letter-spacing: 0.04em`. The `>` is `rgba(255,220,180,0.7)`. - "REVERIE": `clamp(50px, 7.5vw, 88px)`, `line-height: 0.9`, `letter-spacing: -0.02em` - Subtext: `18px`, `line-height: 1.7`, color `rgba(255,245,235,0.88)`, `max-width: 300px`, `text-shadow: 0 1px 12px rgba(0,0,0,0.8)` - Fade-in: opacity+transform, delay `0.3s` - **Cards block**: absolute, `right: 40px`, `top: 50%`, `translateY(-50%)`, `flex gap: 12px` - Three cards, each 158x158px, `border-radius: 28px`, `box-shadow: 0 8px 32px rgba(0,0,0,0.45)` - Each has: gradient overlay, backdrop blur layer (same as tablet), bottom content area at 12px inset - Play cards: 30px white circle + 18px "View Reel" - Number card: "32" at 36px Viaoda Libre + 18px "World Patrons" - Fade-in delay: `0.55s` #### Slider Dots (bottom of Scene 1) - Absolute, bottom `28px (mobile, centered)` / `40px (desktop, left: 60px)` - 4 dots: first is `28px wide`, rest `14px`, all `4px tall`, `border-radius: 2px` - Active dot: `rgba(255,255,255,0.9)`, inactive: `rgba(255,255,255,0.35)` - Fade-in delay: `0.8s` #### Scroll Cue (desktop only) - Absolute `bottom: 36px`, centered - "DESCEND" text: `10px`, `letter-spacing: 0.22em`, uppercase, `rgba(255,255,255,0.6)` - Below: `ScrollChevron` -- 34px circle with 1.5px border `rgba(255,255,255,0.5)`, chevron SVG inside, `animation: bobUp 1.8s ease-in-out infinite` - Fade-in delay: `0.9s` --- ### SCENE 2 UI (z-index: 46) Opacity = `clamp((scrollProgress - 0.68) / 0.16, 0, 1)`. Fades in between scroll 68%-84%. - Centered column - **Heading** (Viaoda Libre): "FORGE BEYOND THE REAL" -- `clamp(28px, 8vw, 44px) mobile / clamp(38px, 6.5vw, 78px) desktop`, white, `letter-spacing: 0.03em`, `line-height: 1.05`, `text-shadow: 0 2px 20px rgba(0,0,0,0.4)` - **Subtext** (Imprima): "Singular voyages to astonishing destinations, shaped for those who seek beauty beyond the ordinary and the known." -- `14px mobile / 20px desktop`, `line-height: 1.6`, `letter-spacing: -0.01em`, `max-width: 260px mobile / 480px desktop`, color `rgba(255,255,255,0.82)` - Margin-top: `8vh mobile / 12vh desktop` --- ### ARC CARD SLIDER COMPONENT Props: `cards[]`, `rotationOffset: number`, `isMobile: boolean` **Layout math:** - `cardSpacingDeg`: 12 (mobile) / 9 (desktop) degrees between cards - `centerIndex`: `Math.floor(totalCards / 2)` - `arcRadius`: 700 (mobile) / 1100 (desktop) px - `cardW`: 160 (mobile) / 220 (desktop) px - `cardH`: 175 (mobile) / 230 (desktop) px - `sliderH`: 260 (mobile) / 360 (desktop) px **`rotationOffset`** is driven by scroll: `lerp(0, arcSweepDeg, clamp((scrollProgress - 0.70) / 0.30, 0, 1))` where `arcSweepDeg = (totalCards - 1) * 10`. **Per card positioning:** ``` baseDeg = (i - centerIndex) * cardSpacingDeg deg = baseDeg - rotationOffset + (centerIndex * cardSpacingDeg) rad = deg * PI / 180 x = sin(rad) * arcRadius y = arcRadius - cos(rad) * arcRadius ``` Each card is absolutely positioned at `bottom: -y + (140 mobile / 200 desktop)px`, `left: calc(50% + x - halfW)`, `transform: rotate(deg)`, `transformOrigin: halfW arcRadius`. **Card appearance:** - Rounded rect (`18px mobile / 26px desktop`), background = `card.color` (pastel) - `box-shadow: 0 8px 40px rgba(80,40,60,0.18)` - Top-right: numbered circle (24px, `1.5px border rgba(80,50,60,0.3)`, text `rgba(80,50,60,0.6)`, 10px Imprima) showing zero-padded index - Bottom: card title in Viaoda Libre (`22px mobile / 30px`, color `#3a2530`) + description in Imprima (`12px mobile / 15px`, color `rgba(58,37,48,0.65)`) --- ### ENTRANCE ANIMATION SEQUENCE 1. **t=100ms**: Curtains open -- `curtainsOpenRef` flips to true, causing 62% horizontal shift on each curtain with `1.8s cubic-bezier(0.16, 1, 0.3, 1)` transition 2. **t=600ms**: `uiVisible` = true -- all Scene 1 UI elements fade/slide in with staggered delays (0.3s heading, 0.55s cards, 0.8s dots, 0.9s scroll cue) 3. **t=2200ms**: `entranceDone` = true -- curtain CSS transition switches to `none` so parallax is instant --- ### MOUSE PARALLAX (desktop) `requestAnimationFrame` loop smooths raw mouse position at `speed = 0.07` (lerp). Each layer is offset by its `MAG` value in the reverse direction of the mouse. The transforms combine mouse offset with scroll-driven scale/translate. **MAG values:** world=6, clouds=9, portal=7, curtainL=14, curtainR=1424:T1e37,Build a highly polished, responsive Footer component for a React application using Vite, Tailwind CSS, `lucide-react` for icons, and `motion/react` for animations. The design relies on a premium "layered card" aesthetic, precise typography, and a massive background-blended text element utilizing advanced, handcrafted SVG filters. ### 1. Dependencies Ensure the project has: `npm install lucide-react motion` ### 2. Global CSS (`src/index.css`) Use the exact following CSS to define the Inter font, the Tailwind layer, and advanced `glass-card` and `liquid-glass` utilities: ```css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); @import "tailwindcss"; @theme { --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; } @layer utilities { .glass-card { background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05); } .text-glass { background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); -webkit-background-clip: text; background-clip: text; color: transparent; } .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; } } body { @apply bg-[#F9F9FB] text-[#141414] font-sans antialiased; } 3. Application Layout (src/App.tsx) Render the layout wrapper mimicking a full-screen application view exactly like this: code Tsx import Footer from './components/Footer'; export default function App() { return (

); } 4. The Footer Component (src/components/Footer.tsx) Create this file and structure it strictly with the following inner components and specific Tailwind dimensions/hex codes: Component 1: LogoIcon Render a square icon box. Classes: w-8 h-8 bg-[#31A8FF] rounded-[8px] flex items-center justify-center SVG Code: Component 2: FooterCard A massive layered card layout holding the footer directories. Wrappers: Main Container: w-full max-w-6xl mx-auto Outer Gray Body: bg-[#E9EBEE] rounded-[48px] border border-slate-200 shadow-sm overflow-hidden Inner White Box: bg-white rounded-[40px] m-2 shadow-sm Content Grid Space (Inside White Box): p-8 md:p-10 lg:p-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 Grid Columns Layout: Brand Info (lg:col-span-2 space-y-8): A row (flex items-center gap-2.5) with and vize Description:

Premium strategic solutions designed to elevate your brand presence through advanced marketing.

Socials Group: Map an array of Linkedin, Twitter, Instagram (imported from lucide-react). Make them buttons with classes: w-[44px] h-[44px] flex items-center justify-center rounded-xl border border-slate-100 bg-white shadow-[0_1px_2px_rgba(0,0,0,0.05)] hover:bg-slate-50 transition-all active:scale-95 group. Inside each put the Icon component with className="w-5 h-5 text-slate-800". Product Column (space-y-6): Header

Product

. Links (href="#" target): Features, Solutions, Pricing, Updates. Styling for links: text-[15px] font-medium text-[#1E293B] hover:text-[#31A8FF] transition-colors. Keep in a

Legal Center

User Agreement Component 3: GlassText This must be perfectly implemented to work. It uses an absolute hidden SVG defining a filter, paired with Framer Motion. Container: relative w-full flex items-center justify-center select-none pt-0. Invisible SVG:

vize

Final Default Export for Footer.tsx code Tsx export default function Footer() { return ( ); }25:T16d5,Build a full-viewport dark hero section as a single React + TypeScript + Tailwind CSS page (Vite). Use the Inter font family. No purple/indigo hues. **Layout structure (top to bottom, full viewport, no scroll):** 1. **Outer page wrapper** — `w-screen h-screen overflow-hidden flex flex-col`, background `#0E1114` with a subtle dotted pattern: `radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px)` at `24px 24px`. 2. **Navbar** (outside the inner card) — `flex items-center justify-between px-7 py-7`, `shrink-0`. - Left: wordmark `micro` in white, `font-semibold text-2xl tracking-tight`, letter-spacing `-0.02em`. - Right: two buttons in a `gap-3` flex row. - "Login": transparent, `text-white/70 text-sm font-medium px-4 py-2 rounded-full`, hover `text-white`. - "Join the Waitlist": black bg `#000`, white text, `1px solid #ffffff` border, `text-sm font-semibold px-5 py-2 rounded-full`, hover `opacity-90`, active `scale-95`, 200ms transitions. 3. **Inner card** — fills remaining height, `mx-2 mb-2`, `bg-#030404`, `rounded-[32px]`, `overflow-hidden`, `relative`. Inside the card: **a) Three-panel video section** (`flex-1 flex gap-2 p-2 lg:p-5 min-h-0`): - 3 equal-width cards (`flex-1`), each `relative overflow-hidden rounded-[22px]`. Cards 2 and 3 hidden on small screens (`hidden sm:block`). - Each card has a `

Dreamcore Landing

Vize Footer

Waitlist Hero

Innovation Lab