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:T25d2,Build a standalone React + TypeScript + Tailwind CSS section component. This is a fragrance product showcase split into two halves: a sky-blue product panel on the left and a looping video on the right. On mobile it stacks vertically (product panel on top, video strip below). Every value below is exact — do not approximate. ## Tech Stack - React 18 + TypeScript - Tailwind CSS 3 (default config, default breakpoints: `sm:640px`, `md:768px`) - Vite - No extra packages. No icon libraries needed for this section. ## Constants ```ts const TEXT_COLOR = '#000000'; const BG_BLUE = '#4BB3ED'; const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'; ``` ## Animation Helper Create a reusable function that returns an object with a `style` property for CSS fade+slide entrance animations: ```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, }; } ``` This returns `{ style: {...} }` so it can be spread as `{...anim(...)}` directly onto elements (which sets the `style` prop), OR accessed as `anim(...).style` when merging with other inline styles. ## Product Data ```ts const SCENT_PRODUCT = { name: 'Eau So Sweet', 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_151640_5b4a7bf8-4eb2-4a49-aa63-17a9bb642b88.png&w=1280&q=85', notes: [ { label: 'Fruity top', ingredient: 'WHITE RASPBERRIES' }, { label: 'Floral heart', ingredient: 'DAISY TREE PETALS' }, { label: 'Feminine base', ingredient: 'SUGAR MUSKS' }, ], }; ``` ## Video URL (exact, verbatim) ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_151802_1bbf9a81-a7cb-4be1-b858-f1cd92b62b96.mp4 ``` --- ## Component: `ProductPanel` Accepts props: ```ts { bg: string; // background color product: { name: string; size: string; image: string }; notes: { label: string; ingredient: string }[]; visible: boolean; // controls animation trigger noteStyle?: 'normal' | 'bold'; // defaults to 'normal' } ``` ### Outer wrapper ```

``` ### 1. Top labels row ```

``` - Left label: `` — text is `'Daisy love'` when `noteStyle !== 'bold'`, `'Daisy wild'` when `noteStyle === 'bold'`. - Right label: same classes/style — text is `'Sweet'` when normal, `'Playful'` when bold. ### 2. Product image block ```

``` #### Image container ```

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

{product.name}

{product.size}

``` ### 3. Bottom row — notes + button ```

``` #### Notes column (left side) ```

``` For each note object, render a `

` containing two `

` tags: - Label: `

{note.label}

` - Ingredient: `

{note.ingredient}

` #### SHOP NOW button (right side) ``` ``` The button has a `1px` solid border (via Tailwind `border` class) colored `#000000`. On hover, a white fill (`#ffffff`) scales in from the left edge (`origin-left`, `scale-x-0` -> `scale-x-100`) over 500ms with `ease-out`. Text stays `z-10` above the fill. The `group-hover:text-black` class ensures text remains black over the white fill. --- ## Component: `ScentFinderSection` ### 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(); }, []); ``` Once 15% of the section is visible, `visible` flips to `true` permanently (one-shot, never resets to false). This triggers the staggered animations inside `ProductPanel`. ### Layout structure ```

``` Three children inside: #### Child 1: ProductPanel (always visible) ``` ``` Called with `noteStyle` defaulting to `'normal'` (not passed explicitly), so top labels read `Daisy love` / `Sweet`, and note labels use `fontWeight: 400`. #### Child 2: Desktop video panel (hidden below `md`) ```

``` - Background `#111` shows while video loads. - `minHeight: '100%'` ensures the video panel fills the grid row height. - Video is `position:absolute inset-0`, fills and covers the container. #### Child 3: Mobile video strip (hidden at `md` and above) ```

``` - Fixed aspect via `height: 75vw` (so on a 390px phone it is ~293px tall). - Same video URL, same absolute-cover pattern, same `#111` background. ### Responsive behavior summary | Viewport | Layout | Product panel | Video | |---|---|---|---| | < 768px (below `md`) | `flex flex-col` | Full width, natural height | Full width, `height: 75vw`, below the panel | | >= 768px (`md` and up) | `grid 1fr 1fr`, `min-h-screen` | Left half, fills grid height | Right half, fills grid height | On mobile, the desktop video div is `hidden` and the mobile strip is shown. On desktop, the mobile strip is `hidden` and the desktop div is shown. Both use the identical video source. --- ## Animation Stagger Timeline (all triggered when section becomes 15% visible) | Element | Delay | Duration | Direction | Distance | |---|---|---|---|---| | Top labels row | 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 | All use easing `cubic-bezier(0.22, 1, 0.36, 1)`. Each element starts `opacity: 0` + translated down by the specified distance, then transitions to `opacity: 1` + `translate(0,0)`. ## Fonts No custom fonts or Google Fonts. Uses Tailwind's default sans-serif system font stack for all text in this section. No serif fonts appear here. ## SVGs / Icons None. This section contains zero SVG elements or icon components. ## Colors used - `#4BB3ED` — product panel background (sky blue) - `#000000` — all text color, button border color - `#D9D9D9` — image placeholder background (visible while image loads) - `#111` — video panel background (visible while video loads) - `#ffffff` — button hover fill24:T215b,Build a modern, futuristic landing page using React + Vite + TypeScript + Tailwind CSS. Use lucide-react for icons. The page has 3 sections: a Hero, an About section, and an Insights section. The overall page background is black (bg-black). No custom fonts -- use the Tailwind default (system sans-serif). SECTION 1: HERO (full viewport height, light background) The hero wrapper is a relative container. On mobile it has min-height: 100vh. On desktop (md: breakpoint) it has height: 100vh and min-height: auto. It has overflow: hidden. Background layers (stacked with z-index): z-index 0: A solid background fill #FBFDFD covering the entire wrapper (absolute inset-0). z-index 1: A background video positioned absolute right-0 top-0 bottom-0. On mobile it is full width with opacity-30. On desktop it is w-[55%] with full opacity. The video element has object-cover object-top. The video URL is: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131232_feeda0b7-d00d-4bfa-a9d5-5d38648a4214.mp4 (autoPlay, loop, muted, playsInline). The video container and video both have a CSS class video-plus-darker with mix-blend-mode: normal !important. z-index 2: The content layer. This is a relative div with min-h-screen md:h-screen flex flex-col. It contains the Navbar and HeroSection. Navbar (inside content layer): relative z-10, flex row, justify-between, padding px-5 py-4 md:px-12 md:py-6 Left side: Logo image (/image.png, height h-7 md:h-8), followed by hidden-on-mobile nav links: Home, About, Services, Contact. Links are text-sm text-neutral-500 hover:text-neutral-900. Gap between logo and links: gap-12. Right side: A search input (hidden on mobile, shown on desktop). Rounded-full, w-72, placeholder "I am looking for...", with a Search icon from lucide-react positioned absolute right inside. Border border-neutral-300, text text-neutral-600. Mobile: A hamburger button (Menu icon from lucide-react) in a 40px circle with border-neutral-300. When toggled, a dropdown shows the nav links vertically and a full-width search input. HeroSection (inside content layer, flex-1): relative z-10 flex-1 flex flex-col justify-between with padding px-5 pt-8 pb-20 md:px-12 md:pt-16 md:pb-36 Top: Label "Futuristic" -- text-xs font-medium tracking-[0.3em] text-neutral-500 uppercase Main heading area: Flex row with a small "05" number on the left (text-sm text-neutral-400 mt-2 md:mt-4), then the heading: text-[2.75rem] md:text-[5.5rem] leading-[0.95] font-light tracking-tight text-neutral-900 reading "NEW DIGITAL" (line break) "UNIVERSE". Below the heading: a "Get Started" button (bg-neutral-900 text-white text-sm font-medium rounded, px-6 py-3 md:px-8 md:py-3.5) and a "Contact Us" text link. Middle stat: "47.2%" with "Reality" label underneath. The stat group uses a custom CSS class hero-stat-group that on desktop has margin-right: 20% and justify-center. On mobile, margin-right: 0 and justify-start. Bottom bar: Flex col on mobile, flex row on desktop with justify-between. Left side: "Trusted by Clients" label with 4 overlapping avatar circles (Pexels photos: 415829, 1222271, 1239291, 2379004 at w=100) using -space-x-2, each w-8 h-8 md:w-9 md:h-9 rounded-full border-2 border-neutral-100 object-cover, followed by "20+" text. Right side: A link icon (lucide Link) in a w-10 h-10 md:w-12 md:h-12 circle with border-neutral-300, next to a description paragraph "In this futuristic realm, users can explore hyper-realistic virtual environments, interact with AI-driven avatars." (text-xs md:text-sm text-neutral-500 max-w-[200px] md:max-w-sm). This group uses custom class hero-description-group which on desktop has margin-right: 50%. Diagonal Section Divider (between Hero and About): The SectionDivider is positioned absolute bottom-0 left-0 w-full with z-index: 3, inside the hero wrapper. Contains an SVG with viewBox="0 0 1440 120", preserveAspectRatio="none", height h-[60px] md:h-[120px]. The SVG has a single polygon: points="0,0 0,120 1440,120 1440,80 920,80 680,0" filled with #0F0F0F. This creates a diagonal cut from the left side going down to the black About section. SECTION 2: ABOUT (dark background #0F0F0F) Full-width section, backgroundColor: '#0F0F0F' Two-column layout on desktop (lg:flex-row), stacked on mobile. Min-height 600px (lg: 700px). Left column: A video that fills the space (object-cover mix-blend-lighten). Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_132809_d6ea910f-d700-44f7-afea-27d517487177.mp4 (autoPlay, loop, muted, playsInline). On mobile the video area is h-[400px]. Right column: Padding px-8 py-16 md:px-16 lg:px-20 xl:px-28, vertically centered content with max-width max-w-lg: Label: "About Us" (text-xs font-medium tracking-[0.3em] text-neutral-500 uppercase, mb-8 md:mb-10) Heading: "THE DIGITAL FRONTIER" (text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-light tracking-tight text-white leading-[1.05], mb-10 md:mb-12) Three pill tags: "Digital", "Reality", "Next" -- px-5 py-2 rounded-full border border-neutral-700 text-sm text-neutral-300 hover:border-neutral-500 Paragraph: "Step into The Digital Frontier, where the boundaries between reality and virtual innovation disappear. This is the next era of immersive technology." (text-sm md:text-base text-neutral-400 leading-relaxed max-w-md) Actions: "Learn More" button (bg-neutral-800 text-white text-sm font-medium rounded px-7 py-3.5 hover:bg-neutral-700) and a "Watch a Video" link with a Play icon (lucide Play) inside a w-10 h-10 bordered circle. SECTION 3: INSIGHTS (dark background #0F0F0F, tabbed content) Same backgroundColor: '#0F0F0F'. Padding px-8 md:px-16 lg:px-20 xl:px-28 pt-24 pb-32. Large italic heading: "LIMITLESS POSSIBILITIES WITH NEOVISION" (text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-[5rem] font-light italic tracking-tight text-white leading-[1.05] max-w-5xl, mb-20 md:mb-28). Below: a flex layout (col on mobile, row on desktop). Left: Tab buttons (vertical list) for 3 tabs: "Innovation", "Technology", "Experience". Active tab is text-white font-medium, inactive is text-neutral-500 hover:text-neutral-300. Width lg:w-[160px] xl:w-[200px]. Right: Content area with an image and text side by side on desktop. Image: lg:w-[420px] xl:w-[480px] aspect-[4/3] rounded-2xl overflow-hidden. Images are local files /Mask_group.jpg, /Mask_group-1.jpg, /Mask_group-2.jpg for the 3 tabs respectively. Text side: Title (text-2xl md:text-3xl font-light text-white leading-snug max-w-sm), description (text-sm md:text-base text-neutral-400 leading-relaxed max-w-sm), "Learn More" underlined link (text-sm text-white font-medium underline underline-offset-4). At the bottom: date and author separated by a border-t border-neutral-800. Tab data: Innovation: "How VR is Transforming Our Digital World" / "Virtual Reality (VR) is no longer a concept of the future..." / 08 February 2025 / Henry Leonardo Technology: "The Rise of Spatial Computing in Everyday Life" / "Spatial computing is bridging the gap..." / 15 March 2025 / Sarah Mitchell Experience: "Designing Immersive Worlds That Feel Real" / "From haptic feedback to photorealistic rendering..." / 22 April 2025 / James Park CUSTOM CSS (index.css): .video-plus-darker { mix-blend-mode: normal !important; } .app-hero-wrapper { min-height: 100vh; overflow: hidden; } @media (min-width: 768px) { .app-hero-wrapper { min-height: auto; height: 100vh; } } .hero-description-group { margin-right: 0; } .hero-stat-group { margin-right: 0; } @media (min-width: 768px) { .hero-description-group { margin-right: 50%; } .hero-stat-group { margin-right: 20%; } } KEY DETAILS: Tech stack: React 18, Vite, TypeScript, Tailwind CSS 3, lucide-react for all icons No custom fonts -- default Tailwind sans-serif stack Color palette: White hero (#FBFDFD), dark sections (#0F0F0F), neutral grays from Tailwind for text The diagonal divider SVG polygon creates an angled transition from the light hero to the dark about section. It is positioned absolutely at the bottom of the hero wrapper. Both videos are autoPlay, loop, muted, playsInline The hero section has pb-20 md:pb-36 bottom padding to prevent the diagonal divider from overlapping the "Trusted by Clients" content The SectionDivider component is rendered inside the hero wrapper div (not between wrapper and AboutSection) Logo image at /image.png in the public folder Insight images at /Mask_group.jpg, /Mask_group-1.jpg, /Mask_group-2.jpg in the public folder25:T2a28,Recreate a single-file static HTML page (`index.html`) that matches this site **exactly**. No frameworks. One HTML file with embedded CSS and JS. --- ## Identity & document - **Title:** `VANTA. — Avant-garde AI creative` - **Lang:** `en` - **Viewport:** `width=device-width, initial-scale=1` - **Page background:** pure black `#000000` - **Aesthetic:** avant-garde AI creative studio landing hero — black full-bleed video, white Inter type, absolute editorial composition on desktop, stacked mobile layout --- ## Fonts (exact) Load Google Fonts Inter weight 400 only: ``` https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap ``` With preconnect to `fonts.googleapis.com` and `fonts.gstatic.com` (crossorigin). **Body type stack (exact):** `"Inter","Inter var",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif` **Global typography rules:** - `font-weight: 400` everywhere (no bold) - `letter-spacing: -0.02em` on all elements (`*`) - `-webkit-font-smoothing: antialiased` - `text-rendering: optimizeLegibility` - Text color default: `#ffffff` --- ## CSS variables (exact) ```css :root { --bg: #000000; --cream: #ffffff; --ink: #000000; --white: #ffffff; --muted: rgba(255,255,255,.82); --hair: rgba(255,255,255,.16); --pad-x: 24px; --pad-t: 22px; --col: 46%; /* left anchor of the centre column */ --ease: cubic-bezier(.23,1,.32,1); } ``` --- ## Media assets (exact CloudFront URLs — do not substitute) ### 1. Background hero video ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260724_061251_5b1af666-7df5-4284-abea-a19a14d1cc10.mp4 ``` - Element: `

Avant-garde work that performs

Designed to sharpen every decision

Daisy Sweet

NeoVision

avant studio

Kova Features

data storytelling

Viktor Portfolio

Targo Logistics Hero

Outdoor Apparel

Contact Cybernetic

3D Studio Pricing

Creative Agency

Technical Specifications

LaunchEx About

Media Card Carousel

Acreage Farming

Mindloop

Railroad.ai

reading library

Cyberpunk Reveal

Arceage Testimonial