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:T285f,Build a single-page "IGLOO" concept site using Vite + React 18 + TypeScript + Tailwind CSS 3 + framer-motion + lucide-react. Recreate it EXACTLY as specified below. ## 1. FONTS (load in index.html , in this exact order) ```html ``` Font usage rules: - Display headlines ("IGLOO" hero text and "WITH A VIEW"): `font-family: 'Dimensions W03 300R', 'Anton', sans-serif` — Dimensions W03 300R is the primary display face (a tall condensed stencil-style font loaded from onlinewebfonts.com); **Anton (Google Fonts) is the explicit fallback for headlines only**, so if the onlinewebfonts stylesheet fails or is blocked in any browser, headlines render in Anton, never in a default sans. - Body/UI text: `font-family: 'Inter', sans-serif` (weights 300/400/500/600), set globally on `body`. - Hero description paragraph: `font-family: 'Courier New', monospace`. - Page ``: IGLOO. Global CSS (index.css); body has Inter, `-webkit-font-smoothing: antialiased`, `-moz-osx-font-smoothing: grayscale`, `overflow-x: hidden`. ## 2. ASSETS (exact URLs) Page background (shared, spans both sections): `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260723_224514_a4f5778c-5a68-4e60-b9f8-74aeec2ef48b.png&w=1920&q=85` Overlay image (iceberg cutout, sits in front of background but behind ALL UI, spans both sections, pointer-events-none): `https://soft-zoom-63098134.figma.site/_assets/v11/7e3b4feb333e9a78d12d5afc7d48730615390ec2.png` Left-side thumbnails (top to bottom, 4 images): 1. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094505_c14a7566-ec38-46cf-b298-b641815acbdc.png&w=1280&q=85` 2. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094527_33af18d8-e52c-49a6-8b9b-4706b0c0a85a.png&w=1280&q=85` 3. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094546_3f85bc04-8e66-4d82-aa27-fcf40742a384.png&w=1280&q=85` 4. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094606_79a7fc4d-cf64-48bc-a2d3-52dd5ad6ffe3.png&w=1280&q=85` "With A View" cards (3 cards, in order, with titles): 1. "Cliffside Retreat" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101354_a5a857b7-b9ce-4e3f-9cc1-27424c9e4c8d.png&w=1280&q=85` 2. "Island Escape" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101420_1c0cbb04-a7b5-41f1-9d21-fcf3976f6be6.png&w=1280&q=85` 3. "Coastal Haven" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101434_83163d4d-1639-4812-8753-e679652939ff.png&w=1280&q=85` ## 3. PAGE STRUCTURE Root `<div style="background-color:#D6D7DD">` containing: (a) a MobileMenu overlay component, and (b) a `relative overflow-hidden` wrapper that spans BOTH full-screen sections and holds two absolutely-positioned full-bleed images: - Background `<img>`: `absolute inset-0 w-full h-full object-cover`, dynamic `objectPosition: center {focalY}%` and `transform: scale({scrollScale})` with `transformOrigin: top center` (see animation #2). - Overlay `<img>`: identical positioning/animation, plus `z-[10] pointer-events-none`. ### SECTION 1 — Hero (`relative w-full h-screen overflow-hidden`) 1. **Giant "IGLOO" headline**: absolutely centered container `inset-0 flex items-start justify-center pt-[13vh] pointer-events-none z-[2]`. Text rendered with a per-letter animation component (see animation #1). Classes: `text-[36vw] md:text-[35vw] leading-[0.85] text-white/80 tracking-[0.01em] select-none`, font: Dimensions W03 300R → Anton fallback. It sits BEHIND the iceberg overlay (z-2 < z-10) so the iceberg visually cuts through the wordmark. 2. **Fixed navbar** (`fixed top-0 z-[40] flex items-center justify-between px-5 md:px-8 py-4 md:py-5`): - Left (desktop only, `hidden md:flex gap-10`): links PORTFOLIO, ABOUT, LAB — `text-xs font-semibold tracking-widest uppercase text-neutral-700 hover:text-neutral-900 transition-colors`, href="#". - Left (mobile only): hamburger Menu icon (lucide, size 22, strokeWidth 1.5) that opens the mobile menu. - Center: wordmark "IGLOO" — `text-sm tracking-[0.35em] text-neutral-600 uppercase`, font Inter. - Right (`flex gap-4 md:gap-5`): Instagram icon (desktop only) and Search icon, lucide size 18, strokeWidth 1.5, `text-neutral-700 hover:text-neutral-900`. 3. **Left thumbnail rail** (desktop only): `absolute left-4 md:left-6 top-1/2 -translate-y-1/2 z-[30] flex-col gap-3`; each thumb `w-12 md:w-16 h-12 md:h-16 rounded-lg overflow-hidden cursor-pointer hover:scale-105 transition-transform shadow-md` with object-cover image. 4. **Right scroll line** (desktop only): `absolute right-8 top-1/2 z-[30]`, a `w-px h-32 bg-neutral-500/60` vertical rule, vertically centered via translateY(-50%). 5. **Bottom caption**: `absolute bottom-8 md:bottom-12 left-1/2 -translate-x-1/2 z-[30] flex flex-col items-center gap-3 text-center px-6`: - Paragraph in 'Courier New', monospace: `text-[10px] md:text-xs tracking-widest text-white max-w-xs md:max-w-sm leading-relaxed`, text: "A conceptual vision of an igloo, afloat in the Arctic. Where minimalism, nature, and imagination converge." - Below it a lucide ChevronDown (size 16, white) with Tailwind `animate-bounce`. ### SECTION 2 — "With A View" (`relative z-[20] w-full h-screen overflow-hidden -mt-[20px]`) Inner column `relative z-10 h-screen flex flex-col justify-between p-6 md:p-10 lg:p-16`: 1. Top block (`flex flex-col gap-4 pt-16`): - Heading row (`flex items-start`): per-letter animated text "With A View" rendered uppercase — `text-[18vw] md:text-[16vw] leading-[0.85] text-white tracking-[0.01em] uppercase`, font Dimensions W03 300R → Anton fallback, left-aligned; to its right (desktop only) a horizontal rule `flex-1 mt-[0.42em] ml-4` containing `w-full h-px bg-white/70`. - Subtext row (`flex md:justify-end`): paragraph `text-white text-sm md:text-base max-w-xs leading-relaxed md:text-right`: "Elevated sanctuaries perched above the clouds, where architecture meets the infinite horizon." 2. Bottom card grid: `grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 pb-4 max-w-4xl mx-auto mt-8 md:mt-0`. Each card: `group relative rounded-xl overflow-hidden aspect-[3/4] cursor-pointer max-h-[28vh]`; the 3rd card additionally `col-span-2 md:col-span-1 max-w-[50%] md:max-w-full mx-auto md:mx-0` (so on mobile it spans both columns but is half-width and centered). Image: `w-full h-full object-cover transition-transform duration-500 group-hover:scale-110`. Title overlaid `absolute bottom-3 left-3 right-3` as `text-white text-xs md:text-sm font-medium tracking-wide`. ### Mobile menu (z-[100] fixed overlay) - Backdrop: `bg-black/60 backdrop-blur-sm`, fades opacity over 500ms, click closes. - Panel: right-anchored drawer `w-[75vw] max-w-xs h-full bg-white/95 backdrop-blur-xl shadow-2xl`, slides in from `translate-x-full` over 500ms with easing `cubic-bezier(0.16,1,0.3,1)`. Contains an X close button (top-right, lucide size 24), the three nav links stacked (`text-lg font-semibold tracking-widest uppercase`, each fading/sliding in from `translate-x-8` with delays 150ms/230ms/310ms when open), and bottom-left Instagram + Search icons (size 20) fading up with 400ms delay. Opening sets `document.body.style.overflow = 'hidden'`; closing restores it. ## 4. ANIMATIONS (implement exactly) 1. **LettersPullUp** (framer-motion, used for both big headlines): split text into characters; each char is a `motion.span` with variants `initial: { y: 20, opacity: 0 }` → `animate: { y: 0, opacity: 1, transition: { delay: i * 0.05 } }` (i = char index), triggered once when the element scrolls into view (`useInView(ref, { once: true })`). Spaces render as ` `. Wrapper is `flex flex-wrap` with justify-center by default, justify-start for the "With A View" heading. 2. **Scroll-driven background zoom/pan** (custom hook, applied to BOTH the background and overlay images): on scroll (rAF-throttled, passive listener), compute `progress = min(scrollY / window.innerHeight, 1)`; set `scale = 1 + progress * 0.12` (i.e. 1 → 1.12) and `focalY = progress * 100` (objectPosition drifts from `center 0%` to `center 100%`). Transform origin `top center`. 3. **Staggered reveal on scroll** (custom hook, IntersectionObserver, fires once): container observed at threshold 0.1 (hero) / 0.15 (view section); when intersecting, each indexed child transitions from `opacity: 0; translateY(24px)` to visible over `0.7s cubic-bezier(0.16,1,0.3,1)` with per-index delay — hero uses 150ms steps (headline=index 0, nav=2, thumbnails=3–6, right line=7, bottom caption=8), view section uses 200ms steps (heading=0, subtext=1, cards=2–4). For elements that also carry a centering transform (right line, bottom caption), compose it: e.g. hidden state `translateX(-50%) translateY(24px)` → visible `translateX(-50%)`. 4. **Micro-interactions**: thumbnail `hover:scale-105`; card image `group-hover:scale-110` (500ms); chevron `animate-bounce`; all link color transitions via `transition-colors`. ## 5. DEPENDENCIES package.json deps: react ^18.3.1, react-dom ^18.3.1, framer-motion ^12, lucide-react ^0.344.0, @vitejs/plugin-react, tailwindcss ^3.4, typescript ^5.5, vite ^5.4. Tailwind config: default, content `./index.html` + `./src/**/*.{js,ts,jsx,tsx}`. Vite config: react plugin, `optimizeDeps.exclude: ['lucide-react']`.24:T13bb,Recreate this hero section exactly. Here are the complete specifications: Video Background: Full-screen background video, absolutely positioned, covering the entire viewport (object-cover) Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_050628_c4e32401-fab4-4a27-b7a8-6e9291cd5959.mp4 Autoplay, loop, muted, playsInline NO dark overlay, NO gradient overlay, NO semi-transparent layer on top of the video. The video plays raw with no dimming whatsoever. Typography (CRITICAL - must be applied globally): Import the Google Font Inter via a <link> tag in index.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=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> Set the body font-family in CSS to: 'Inter', sans-serif Apply -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale on the body Also extend the Tailwind config to set fontFamily: { sans: ['Inter', 'sans-serif'] } so all Tailwind font-sans usage picks up Inter automatically Navbar: Wrapped in horizontal page padding: px-6 md:px-12 lg:px-16 with pt-6 top padding The navbar bar itself uses the .liquid-glass class and has rounded-xl, px-4 py-2, flex layout with items-center justify-between Left: Logo text "VEX" - text-2xl font-semibold tracking-tight Center (hidden on mobile, visible md+): Links "Story", "Investing", "Building", "Advisory" - text-sm, gap-8, hover transitions to gray-300 Right: "Start a Chat" button - bg-white text-black px-6 py-2 rounded-lg text-sm font-medium, hover to gray-100 Hero Content (Bottom of viewport): Container: same horizontal padding as navbar, flex column filling remaining height, content pushed to bottom with flex-1 flex flex-col justify-end, bottom padding pb-12 lg:pb-16 On large screens: 2-column grid (lg:grid lg:grid-cols-2 lg:items-end) Left Column - Main content: Heading: "Shaping tomorrow\nwith vision and action." (literal line break between "tomorrow" and "with") Responsive sizes: text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-normal, mb-4 Inline style: letterSpacing: '-0.04em' Character-by-character entrance animation: Each character starts at opacity: 0 and translateX(-18px), then transitions to opacity: 1 and translateX(0). Each character gets a staggered delay calculated as: (lineIndex * lineLength * charDelay) + (charIndex * charDelay) where charDelay = 30ms. The whole animation starts after 200ms initial delay. Each character transition is 500ms. Spaces render as \u00A0 (non-breaking space) Subheading: "We back visionaries and craft ventures that define what comes next." text-base md:text-lg text-gray-300 mb-5 Fade-in animation: starts at 800ms delay, 1000ms duration Buttons row: flex-wrap with gap-4 "Start a Chat" - bg-white text-black px-8 py-3 rounded-lg font-medium "Explore Now" - liquid-glass border border-white/20 text-white px-8 py-3 rounded-lg font-medium, hover transitions to white bg + black text Fade-in animation: starts at 1200ms delay, 1000ms duration Right Column - Tag: Aligned to bottom-right on large screens (flex items-end justify-start lg:justify-end) Glass card: liquid-glass border border-white/20 px-6 py-3 rounded-xl Text: "Investing. Building. Advisory." - text-lg md:text-xl lg:text-2xl font-light Fade-in animation: starts at 1400ms delay, 1000ms duration Liquid Glass CSS (place in global CSS): .liquid-glass { background: rgba(0, 0, 0, 0.4); 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.3) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 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; } FadeIn component: A wrapper that starts with opacity: 0 and transitions to opacity: 1 after a configurable delay (ms) using a setTimeout + React state. Transition duration is also configurable. Uses inline transitionDuration style and Tailwind's transition-opacity class. AnimatedHeading component: Splits text by \n into lines, then each line into individual characters. Each character is an inline-block <span> with CSS transitions on opacity and transform (translateX). Animation triggers via React state after the initial delay. Color scheme: Black background, white text, gray-300 for secondary text, white/20 for borders. No purple, no indigo. Stack: React + TypeScript, Tailwind CSS, Vite. No extra UI libraries needed. Icons from lucide-react if needed (none currently used in the hero).25:T9c01,<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Auren

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.

Auren

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.

26:T1cb0,Create a React + Tailwind CSS v4 + Motion ("motion/react") image/services section component. Use Vite as the bundler. Fully mobile responsive. ### Fonts Import from Google Fonts in your global CSS: ``` @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Instrument+Serif:ital@0;1&display=swap'); ``` Define two Tailwind v4 theme fonts: - `--font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;` (primary UI font via `font-sans`) - `--font-dm-serif: "Instrument Serif", serif;` (accent/poetic italic font via `font-dm-serif`) The page wrapper uses `bg-black font-sans text-white`. ### Dependencies - `react` v19 - `motion` (npm package "motion", import from `motion/react` -- provides `motion`) - `@lottiefiles/react-lottie-player` (provides `Player` component, import from `@lottiefiles/react-lottie-player`) - `tailwindcss` v4 with `@tailwindcss/vite` plugin - Vite v6+ ### Also requires a Typewriter component A reusable character-by-character reveal animation triggered on scroll: - Props: `text: string`, `delay?: number` (default 0), `speed?: number` (default 0.015), `className?: string` (default "") - Uses `useRef`, `useInView(ref, { once: true, margin: "-10px" })` from `motion/react` - Renders a `motion.span` with `initial="hidden"` and `animate={inView ? "visible" : "hidden"}` - Parent variants: hidden = `{ opacity: 1 }`, visible = `{ opacity: 1, transition: { staggerChildren: speed, delayChildren: delay } }` - Splits text into individual characters, each wrapped in `motion.span` with variants: hidden = `{ opacity: 0 }`, visible = `{ opacity: 1 }` --- ### Section Structure The section is a `

` with: - `id="services"` - Classes: `w-full relative overflow-hidden flex flex-col justify-center` --- ### Layer 1: Full-bleed Background Image An absolutely-positioned div covering the entire section: - Wrapper: `absolute inset-0 z-0` - Image: `` with: - `src="https://github.com/dsMagnatov/Acreage-landing-assets/blob/main/1.jpg?raw=true"` - `alt="Agriculture Field"` - Classes: `w-full h-full object-cover` - `referrerPolicy="no-referrer"` --- ### Layer 2: Content Container A `div` positioned above the background: - Classes: `relative z-10 w-full mx-auto px-6 md:px-12 lg:px-[120px] py-8 md:py-24 flex flex-col h-full justify-between gap-4 md:gap-24` --- ### Top Content: Headline, Subheadline & Button (3-column grid) Grid wrapper: `grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-16 w-full items-end` **Left 2 columns (headline area):** - Wrapped in `motion.div` with: - `initial={{ opacity: 0, y: 20 }}` - `whileInView={{ opacity: 1, y: 0 }}` - `viewport={{ once: true, margin: "-100px" }}` - `transition={{ duration: 0.6, ease: "easeOut" }}` - Classes: `md:col-span-2` - **Heading (h2):** - Classes: `text-[clamp(1.5rem,4vw,3.5rem)] font-medium tracking-tight text-white mb-6 leading-[1.1] max-w-[800px]` - Content: - `` - Then a `` wrapping `` - "Maximum Yield" renders in Instrument Serif italic as the accent font. - **Subheadline (p):** - Classes: `text-lg md:text-[24px] text-white/80 font-light tracking-wide` - Content: `` **Right column (desktop-only button):** - Wrapped in `motion.div` with: - `initial={{ opacity: 0, y: 20 }}` - `whileInView={{ opacity: 1, y: 0 }}` - `viewport={{ once: true, margin: "-100px" }}` - `transition={{ duration: 0.6, delay: 0.1, ease: "easeOut" }}` - Classes: `hidden md:flex justify-end w-full max-w-[421px] pb-1` - **Button:** - `onClick` scrolls smoothly to `#contact` section - Classes: `px-6 py-2.5 rounded-full bg-white text-black hover:bg-black hover:text-white transition-colors duration-300 text-sm tracking-wide font-medium` - Text: "Schedule Service" --- ### Bottom Content: 3 Feature Columns ("How it works") Grid wrapper: `grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-16 w-full md:mt-[200px]` Each of the 3 columns follows the same pattern, each wrapped in `motion.div`: - `initial={{ opacity: 0, y: 20 }}` - `whileInView={{ opacity: 1, y: 0 }}` - `viewport={{ once: true, margin: "-100px" }}` - `transition={{ duration: 0.6, delay: 0.1, ease: "easeOut" }}` Each column structure (`flex flex-col`): 1. **Lottie Icon** -- `div` with classes `w-12 h-12 mb-6 flex items-center justify-center overflow-hidden`, containing a `` component: - `loop`, `autoplay` - `style={{ width: '48px', height: '48px', filter: 'brightness(0) invert(1)' }}` (makes the icon white) 2. **Divider line** -- `div` with classes `w-full h-px bg-white/20 mb-6` 3. **Title (h3)** -- classes `text-2xl font-medium text-white mb-3`, content is a `` 4. **Description (p)** -- classes `text-sm text-white/70 leading-relaxed max-w-[340px]`, content is a `` The 3 columns with their specific content: **Column 1** (`max-w-[420px]`): - Lottie src: `https://raw.githubusercontent.com/dsMagnatov/Acreage-landing-assets/refs/heads/main/curry.json` - Title: "Sustainable Crop Care" - Description: "Nurturing your fields with eco-friendly practices to ensure healthy growth and robust yields." **Column 2** (`max-w-[420px]`): - Lottie src: `https://raw.githubusercontent.com/dsMagnatov/Acreage-landing-assets/refs/heads/main/tractor.json` - Title: "Advanced Machinery" - Description: "Deploying state-of-the-art tractors and harvesters for maximum efficiency and speed." **Column 3** (`max-w-[421px]`): - Lottie src: `https://raw.githubusercontent.com/dsMagnatov/Acreage-landing-assets/refs/heads/main/beetle.json` - Title: "Smart Pest Management" - Description: "Protecting your harvest by monitoring and managing field ecosystems with precision." --- ### Mobile-Only Button (below the 3 columns) - Wrapped in `motion.div` with: - `initial={{ opacity: 0, y: 20 }}` - `whileInView={{ opacity: 1, y: 0 }}` - `viewport={{ once: true, margin: "-100px" }}` - `transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}` - Classes: `flex md:hidden justify-start w-full` - Same button as desktop version: - Classes: `px-6 py-2.5 rounded-full bg-white text-black hover:bg-black hover:text-white transition-colors duration-300 text-sm tracking-wide font-medium` - Text: "Schedule Service" - Scrolls to `#contact` --- ### Mobile Responsiveness Summary - Section padding: `px-6 py-8` on mobile, `md:px-12 md:py-24`, `lg:px-[120px]` - Grid stacks to single column on mobile (`grid-cols-1`), 3 columns at `md:` breakpoint - Heading uses fluid type: `clamp(1.5rem, 4vw, 3.5rem)` - Subheadline: `text-lg` mobile, `md:text-[24px]` desktop - Desktop button hidden on mobile (`hidden md:flex`), replaced by mobile button at bottom (`flex md:hidden`) - The `md:mt-[200px]` on the bottom grid creates vertical spacing between top content and feature columns on desktop only; on mobile, `gap-4` between sections keeps it compact - Feature column max-widths (`max-w-[420px]` / `max-w-[421px]`) constrain reading width on all sizes ---27:T3d74,**Create a React + Vite + Tailwind CSS v4 landing page for "WISA" -- a premium football/soccer organization website. The page has a scroll-driven video background, 3 content sections, and a glassmorphism footer. Use ONLY these dependencies: react 19, motion (framer-motion v12+), gsap, lucide-react, tailwindcss v4 with @tailwindcss/vite plugin. The design is dark, cinematic, minimal, with Manrope (sans) and JetBrains Mono (mono) fonts.** --- ### GLOBAL SETUP **package.json dependencies (exact):** ``` react, react-dom ^19.0.0 motion ^12.23.24 gsap ^3.14.2 lucide-react ^0.546.0 tailwindcss ^4.1.14 @tailwindcss/vite ^4.1.14 @vitejs/plugin-react ^5.0.4 vite ^6.2.0 ``` **vite.config.ts:** Use `@tailwindcss/vite` plugin + `@vitejs/plugin-react`. Alias `@` to project root. **index.html:** Standard HTML5. Include `` in head. **src/index.css -- EXACT:** ```css @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap'); @import "tailwindcss"; @theme { --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } @keyframes flyOutRight { 0% { transform: translateX(0); } 100% { transform: translateX(250%); } } @keyframes flyInLeft { 0% { transform: translateX(-250%); } 100% { transform: translateX(0); } } .animate-fly-out { animation: flyOutRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .animate-fly-in { animation: flyInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes flyOutUp { 0% { transform: translateY(0); } 100% { transform: translateY(-150%); } } @keyframes flyInUp { 0% { transform: translateY(150%); } 100% { transform: translateY(0); } } .animate-fly-out-up { animation: flyOutUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .animate-fly-in-up { animation: flyInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } ``` These define 4 keyframe animations: - `flyOutRight / flyInLeft` (250% translateX, 0.5s) -- for the arrow button hover - `flyOutUp / flyInUp` (150% translateY, 0.4s) -- for nav text hover - All use `cubic-bezier(0.4, 0, 0.2, 1)` easing with `forwards` fill mode --- ### COMPONENT: ScrollReveal (`src/components/ScrollReveal.tsx` + `ScrollReveal.css`) **ScrollReveal.css:** ```css .scroll-reveal { margin: 0; } .scroll-reveal-text { display: flex; flex-wrap: wrap; margin: 0; } .word { display: inline-block; white-space: pre; } ``` **ScrollReveal.tsx:** A GSAP-powered word-by-word scroll reveal component. - Props: `children` (string), `scrollContainerRef?`, `enableBlur` (default true), `baseOpacity` (default 0.1), `baseRotation` (default 3), `blurStrength` (default 4), `containerClassName`, `textClassName`, `rotationEnd` (default "bottom bottom"), `wordAnimationEnd` (default "bottom bottom") - Splits children text by whitespace into `` elements using `useMemo` - Three GSAP ScrollTrigger animations: 1. **Rotation**: Container rotates from `baseRotation` degrees to 0, origin "0% 50%", scrub true, trigger start "top bottom", end = `rotationEnd` 2. **Opacity**: Each `.word` fades from `baseOpacity` to 1, stagger 0.05, scrub true, trigger start "top bottom-=20%", end = `wordAnimationEnd` 3. **Blur** (if `enableBlur`): Each `.word` goes from `blur(blurStrength px)` to `blur(0px)`, same stagger/trigger as opacity - Renders: `

{splitText}

` - Cleanup: kills all ScrollTrigger instances on unmount --- ### COMPONENT: Reveal (inline in App.tsx) A motion.div wrapper for viewport-triggered fade-in: ```tsx function Reveal({ children, delay = 0, className = "" }) { return ( {children} ); } ``` Easing is `[0.16, 1, 0.3, 1]` (ease-out-expo style). --- ### COMPONENT: NavItem (inline in App.tsx) A hover-animated navigation link with vertical text fly animation: - Uses a `cycle` counter state (useState(0)) - On `mouseEnter` and `mouseLeave`: increment cycle - When `cycle === 0` (initial, no hover yet): render single `` with `text-white/64` and `group-hover:text-white transition-colors duration-300` - When `cycle > 0`: render TWO spans keyed by cycle -- one with `.animate-fly-out-up` (exits upward), one absolute-positioned with `.animate-fly-in-up` (enters from below) - Container: `` with `relative overflow-hidden group flex items-center justify-center py-1` --- ### MAIN APP (src/App.tsx) - ARCHITECTURE **Video URL constant:** ``` const VIDEO_URL = 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260521_064421_279656fd-e76f-40a0-8fed-7456d4f7715a.mp4'; ``` **State & Refs:** - `arrowCycle` (useState(0)) -- for arrow button hover animation, same pattern as NavItem - `videoRef` (useRef HTMLVideoElement) - `videoContainerRef` (useRef HTMLDivElement) - `isLoaded` (useState false) -- tracks when video is ready - `screen3Ref` (useRef HTMLDivElement) -- reference to footer section for scroll calculation - `scrollY` from motion's `useScroll()` - `headerY` = `useTransform(scrollY, [0, 500, 800], [0, 0, -150])` -- header slides up and out after scrolling past 500px --- ### SCROLL-DRIVEN VIDEO - CRITICAL IMPLEMENTATION **Effect 1: Video Loading** ```tsx useEffect(() => { const video = videoRef.current; if (!video) return; const handleCanPlay = () => setIsLoaded(true); video.addEventListener('canplaythrough', handleCanPlay); video.load(); return () => video.removeEventListener('canplaythrough', handleCanPlay); }, []); ``` **Effect 2: Scroll-to-Video-Scrub (with the `video.seeking` guard)** ```tsx useEffect(() => { if (!isLoaded) return; const video = videoRef.current; if (!video || !video.duration) return; const handleScroll = () => { if (!screen3Ref.current || video.seeking) return; // ^^ CRITICAL: "video.seeking" check tells the browser: "Only update the video // frame when you've completely finished rendering the previous one." // Without this guard, rapid scroll events queue up competing .currentTime assignments, // causing visible frame tearing, flickering, and dropped frames. The browser's // internal seek operation is asynchronous -- setting .currentTime while a previous // seek is still in progress gets silently ignored or causes visual glitches. // By checking video.seeking, we skip scroll events that arrive before the prior // frame has been decoded and painted, resulting in smooth, tear-free scrubbing. const rect = screen3Ref.current.getBoundingClientRect(); const absoluteTop = window.scrollY + rect.top; const stopScroll = Math.max(1, absoluteTop - (window.innerHeight * 0.2)); const scrollFraction = Math.max(0, Math.min(1, window.scrollY / stopScroll)); video.currentTime = scrollFraction * video.duration; }; window.addEventListener('scroll', handleScroll, { passive: true }); handleScroll(); return () => window.removeEventListener('scroll', handleScroll); }, [isLoaded]); ``` The scroll fraction maps from 0 (top of page) to 1 (when the footer section is 20% of viewport height from top). This means the video plays through its full duration as the user scrolls from top to the footer. --- ### SECTION 0: LOADING SCREEN Shown when `!isLoaded`. Fixed fullscreen, z-50, black bg, centered: - "LOADING" text: `text-[10px] font-mono tracking-widest mb-4 text-white/50` - Progress bar below: `w-64 h-[1px] bg-white/10 mt-8 overflow-hidden` with inner `h-full bg-white w-1/3 animate-pulse` --- ### LAYER STRUCTURE The entire page is layered: 1. **Fixed video background** (`fixed inset-0 z-0 bg-black`) -- video is absolutely centered with cover behavior using `transform: translate(-50%, -50%)`, `minWidth/minHeight: 100%`, `objectFit: cover` 2. **Fixed header** (z-20) -- animated with motion, slides out via `headerY` transform 3. **Scrollable content** (`relative z-10 pointer-events-none`) -- all sections flow here, with `pointer-events-auto` on interactive areas --- ### SECTION 1: HERO (Screen 1) Container: `w-[90%] mx-auto h-screen flex flex-col py-8 md:py-12 lg:py-16 pb-12` Inner main: `flex-1 w-full pointer-events-auto flex flex-col md:grid md:grid-cols-12 md:grid-rows-[1fr_auto] gap-y-8 md:gap-y-0 md:gap-x-8` **Grid layout (desktop 12-col, 2-row):** 1. **Heading** (bottom-left): `md:row-start-2 md:col-start-1 md:col-span-8 flex items-end` - H1: `text-[clamp(2.5rem,6vw,5rem)] leading-[1.05] font-medium tracking-tight text-white whitespace-nowrap` - Text: "Championing" `
` "The Pitch Of Legends" - Wrapped in `` 2. **Description paragraph** (center-right): `md:row-start-1 md:col-start-8 md:col-span-5 flex flex-col justify-center items-start md:items-end text-left md:text-right` - Paragraph: `text-[clamp(1rem,1.6vw,1.375rem)] text-white/64 leading-[1.3] font-normal max-w-[460px] relative -top-[90px]` - Text: "Advanced preparation and training of world-class football teams for leagues, tournaments, and trophies. **We bring the trophy closer to your cabinet.**" (bold part is `font-semibold text-white`) - Wrapped in `` 3. **CTA Button** (bottom-right): `md:row-start-2 md:col-start-8 md:col-span-5 flex items-end justify-start md:justify-end` - Two-part button with 1px gap (`flex items-stretch gap-1 group cursor-pointer`) - **Text part**: `px-8 py-5 bg-white/8 backdrop-blur-[80px]` -> on group-hover: `bg-white`. Text: "EXPLORE OUR STADIUMS" in `font-mono text-[12px] tracking-[-0.01em] text-white/90` -> hover: `text-black` - **Arrow part**: `px-6 bg-white/8 backdrop-blur-[80px]` -> hover: `bg-white`. Contains `` (lucide, w-5 h-5) with the same fly-out/fly-in animation pattern as NavItem but horizontal (`.animate-fly-out` / `.animate-fly-in`) - `arrowCycle` state drives the animation, same increment pattern on mouseEnter/mouseLeave - Wrapped in `` --- ### SECTION 1.5: SPACER `

` -- 200px empty gap --- ### SECTION 2: SCROLL-REVEAL TEXT + 3-COLUMN GRID Container: `w-[90%] mx-auto min-h-screen flex flex-col justify-center py-8 md:py-12 lg:py-16 pointer-events-auto` Inner: `max-w-[1200px] w-full` **ScrollReveal component usage:** ```tsx Complete Football Programs For Professional Player Development. We Build The Foundations For Next-Generation Strikers, Midfielders, And Star Defenders. ``` **3-Column Grid below** (`mt-24 grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8`): 1. **Col 1 (md:col-span-4)**: Globe SVG (71x43 wireframe globe) + WISA logo SVG (157x25, scaled to h-[18px] w-auto) side by side with `gap-4`. Below: tagline "Winning the future on pitch" in `text-[11px] font-mono tracking-widest text-white/60 uppercase leading-relaxed`. Wrapped in `` 2. **Col 2 (md:col-span-4)**: H3 "Performance Analytics / Facilities" (`text-xl font-medium text-white`), paragraph below (`text-[15px] text-white/80 leading-relaxed`). Wrapped in `` 3. **Col 3 (md:col-span-4)**: H3 "Matchday Premium / Fan Experiences!" same styling, paragraph same styling. Wrapped in `` --- ### SECTION 2.5: SPACER Another `h-[200px]` spacer --- ### SECTION 3: FOOTER (ref={screen3Ref}) This is the scroll endpoint for the video scrub calculation. Wrapped in `pointer-events-auto`. **Footer container**: `width: 90%, margin: 0 auto, paddingBottom: 64px` (inline styles) **Inner card** (glassmorphism): `backgroundColor: rgba(26, 26, 26, 0.6)`, `backdropFilter: blur(80px)`, `WebkitBackdropFilter: blur(80px)`, `border: 1px solid rgba(255, 255, 255, 0.1)`, `padding: clamp(32px, 4vw, 64px)` -- all inline styles **CTA Section** (top of footer card): - Flexbox wrap, `alignItems: flex-end`, `justifyContent: space-between`, `gap: 40px` - Bottom border: `1px solid rgba(255, 255, 255, 0.1)`, `paddingBottom: clamp(48px, 4vw, 80px)` - H2: "Ready To Score / Your Winning Season?" -- `fontSize: clamp(2rem, 4.5vw, 3.5rem)`, `fontWeight: 500`, `letterSpacing: -0.02em`, `lineHeight: 1.05` - Button: Same two-part pattern (text + arrow) but with white bg / black text, `padding: 20px 32px` and `20px 24px`. Text: "START YOUR SEASONS" in `font-mono, 12px, -0.01em tracking, bold 700` **Footer Links Grid** (`paddingTop: clamp(48px, 4vw, 64px)`): - CSS Grid: `repeat(auto-fit, minmax(160px, 1fr))`, `gap: clamp(32px, 3vw, 48px)` - 4 columns: 1. **Brand**: WISA logo SVG (h:14px) + tagline paragraph (13px, rgba white 0.4, maxWidth 220) 2. **Company**: Header "COMPANY" (10px mono, 0.1em tracking, rgba white 0.3) + links: About, Rosters, Press, Contact (14px, rgba white 0.6) 3. **Services**: Header "SERVICES" same style + links: Coaching, Training Camp, Fitness, Tryout 4. **Connect**: Header "CONNECT" same style + links: LinkedIn, X / Twitter, YouTube, Newsletter **Copyright Bar** (`marginTop: 56, paddingTop: 32, borderTop: 1px solid rgba white 0.1`): - Flex wrap space-between - Left: "2026 WISA. ALL RIGHTS RESERVED." (11px mono, rgba white 0.25, 0.1em tracking) - Right: PRIVACY | TERMS links (same styling, gap-24px) --- ### FIXED HEADER `` with: - `style={{ y: headerY }}` -- slides out after scroll 500-800px - `initial={{ opacity: 0, y: 20 }}`, `animate={{ opacity: 1 }}`, easing `[0.16, 1, 0.3, 1]`, duration 0.8 - Classes: `fixed top-0 left-1/2 -translate-x-1/2 z-20 w-[90%] flex items-center justify-between pointer-events-auto py-4 md:py-6 lg:py-8` **Left: WISA Logo SVG** (157x25, white, 4 paths spelling "WISA") **Right: Navigation bar** (`hidden lg:flex items-stretch bg-[#1A1A1A]/40 backdrop-blur-[80px]`): - Nav links container: `flex items-center justify-between px-6 font-mono text-xs tracking-[-0.01em] w-[480px]` - 5 NavItem components: LEAGUES, STADIUMS, TRAINING, COMPETITIONS, TICKETS - CTA button: `bg-white text-black px-6 py-5 font-mono text-xs leading-4 font-bold tracking-[-0.01em] hover:bg-gray-200 transition-colors w-[148px]` -- text "BUY MATCH PASS" --- ### SVG ASSETS **WISA Logo** (used 3 times -- header, section 2, footer): 157x25 viewBox, 4 white paths. The paths spell "W I S A" in a custom typeface. **Globe icon** (used in section 2 col 1): 71x43 viewBox, wireframe globe with horizontal/vertical/meridian lines, stroke white, no fill. Both SVGs are inlined directly. They are too detailed to describe -- copy the exact path data from the source code above. --- ### KEY DESIGN TOKENS SUMMARY | Token | Value | |-------|-------| | Font sans | Manrope 300-700 | | Font mono | JetBrains Mono 400-700 | | Background | Pure black (#000) | | Text primary | white | | Text secondary | white/64 (rgba 255,255,255,0.64) | | Text muted | white/60, white/50, white/40, white/25 | | Glass bg | #1A1A1A at 40% opacity | | Glass blur | 80px | | Glass border | rgba(255,255,255,0.1) | | Button bg | white/8 -> white on hover | | Spacing rhythm | 90% viewport width container, clamp-based responsive values | | Easing (motion) | [0.16, 1, 0.3, 1] | | Easing (CSS) | cubic-bezier(0.4, 0, 0.2, 1) |28:T105b,Prompt: Build a modern React landing page using Vite, Tailwind CSS, and motion/react for elegant animations. The application must feature a highly polished, aesthetic hero section and a glassmorphic navigation bar. 1. Typography & Global CSS (src/index.css) Import the fonts "Inter" and "Outfit" from Google Fonts. Set --font-sans to Inter and --font-display to Outfit. Set --color-brand-green to #9fff00 and --color-bg-base strictly to #EDEEF5. Ensure the body uses @apply bg-bg-base text-zinc-900 font-sans antialiased; to carry the #EDEEF5 background throughout the entire page. 2. Component Structure (src/App.tsx) Import Navbar and Hero. Return a div containing the and

. Set the wrapper container classes to min-h-screen bg-bg-base selection:bg-brand-green selection:text-black. 3. Navbar Component (src/components/Navbar.tsx) Give it fixed styling: fixed top-0 left-0 w-full z-50 py-6 md:py-10 bg-gradient-to-b from-[#f1f1f1]/80 to-transparent backdrop-blur-[2px]. Container layout: A 12-column grid (grid-cols-12 max-w-7xl mx-auto). Left (Cols 1-3): A geometric flower/clover SVG icon (fill: #1a1a1a) beside the brand name "mėntality" using the display font. Center (Cols 4-9): Desktop-only hidden nav links: "service", "patient resources", "about us", "education center". Styled small and lowercase. Right (Cols 10-12): "find help" anchor link, a black rounded button reading "get started →", and an elegant animated hamburger toggle icon for mobile. Include an AnimatePresence and motion.div drawer that slides down for mobile with the navigation links. 4. Hero Component (src/components/Hero.tsx) Main styling:

Background Video Container: Absolute wrapper:

The video itself should be

. Place the text in col-span-12 md:col-span-10 md:col-start-2. Hero Header (motion.h1): Needs a slide-up fade (initial={{ opacity: 0, y: 15 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}). Exact text formatting: [#1a1a1a] Remix: Mentality offers [#8e8e8e] information (line break) [#8e8e8e] and resources to help you manage (line break) [#8e8e8e] your [Eye Icon Puipl UI Element] mental wellbeing. For the Eye Icon Element between "your" and "mental", create an inline pill-shaped visual: w-[16px] md:w-[42px] lg:w-[62px] border-[2px] border-[#1a1a1a] rounded-full inline-flex items-center justify-center containing a tiny solid black dot (w-2 h-2). Search Pill Component: Add a delayed slide-up animation (delay: 0.15) under the header text. Make a custom capsule

. Include an with transparent background so it looks integrated. Trailing action button:

Integration Review

How a reusable upper-stage program moved from thermal risk to stable qualification.

Reusable systems · 04:20

Hot-Fire Campaign

Inside the test cell where telemetry, vibration, and injector response converge.

Validation · 03:45

Manufacturing Floor

Why sub-micron inspection changes the way aerospace teams plan reliability.

Precision build · 05:10

Hydrogen Pathway

Designing feed systems and ignition envelopes for hydrogen-ready propulsion.

H2 systems · 04:55

Mission Support

The operational cadence behind launch-window support and post-test analysis.

Field readiness · 03:30

34:T4a6b, Veldara

Explore Veldara

Veldara merges the elegance of Svelte 5 with the depth of Three.js within easy reach. It's crafted to be robust and adaptable while remaining intuitive and simple to grasp.

Unlock Three.js

The web is growing increasingly dimensional. At its heart, Veldara offers a composable declarative API for building performant Three.js experiences on the web.

Connect Everything

Veldara ships with tooling for physics, XR, animation, layouting, model loading, and extensive utilities to make building compelling 3D apps for the web effortless.

Our Purpose:

Instantly craft immersive 3D worlds on the web.

> npm i @veldara/core

Get Started →

Presenting

Veldara 8

35:T3d2f,Build an "Info" section for a fintech stablecoin landing page using **React + TypeScript + Tailwind CSS** with **lucide-react** for icons (use `ArrowRight`). Fully mobile responsive. ### Font Setup Load **"TT Norms Pro"** via a stylesheet link in `index.html`: ```html ``` Apply globally in `index.css`: ```css @tailwind base; @tailwind components; @tailwind utilities; @layer base { html { font-family: 'TT Norms Pro Regular', ui-sans-serif, system-ui, sans-serif; } body { font-family: 'TT Norms Pro Regular', ui-sans-serif, system-ui, sans-serif; } * { font-family: inherit; } } ``` --- ### Section Component: `InfoSection` **Outer wrapper:** `

` with classes `bg-[#F5F5F5] px-6 py-24`. **Inner container:** `

` with classes `max-w-[88rem] mx-auto`. The section has **two rows** stacked vertically. --- #### ROW 1: Heading + Description (two-column grid) Wrapper `

` with classes `grid grid-cols-1 md:grid-cols-2 gap-12 mb-16 items-start`. **Left column** (`

`, no extra classes): 1. **Heading:** - Element: `

` - Text: "Meet USD Halo." - Classes: `text-black text-4xl md:text-5xl font-medium leading-tight mb-8` - Inline style: `{ letterSpacing: '-0.03em' }` 2. CTA pill button (black capsule, text-left icon-right pattern): - Element: `

USD Halo is a reward-earning dollar coin that lets your savings grow while remaining tied to the U.S. dollar.

{/* Row 2 -- 4-col grid */}

{/* Card 1 -- spans 2 cols, image bg */}

Savings that bloom

Gain steady returns as your dollar tokens are routed into top-performing DeFi strategies.

{/* Card 2 */}

Always fluid,
always pegged.

Keep fully dollar-anchored with on-demand access to funds -- no lockups or waits.

{/* Card 3 */}

Fully
automated

Skip the task of tuning positions yourself. USD Halo runs in the background for you.

); } ``` --- --- ## Prompt 2: BackedBySection (Marquee) Build a "Backed By" marquee section for a fintech stablecoin landing page using **React + TypeScript + Tailwind CSS**. No icon library needed for this section. ### Font Setup Same as above -- load **"TT Norms Pro"** via the stylesheet link in `index.html`: ```html ``` --- ### Section Component: `BackedBySection` **Outer wrapper:** `

` with classes `bg-[#F5F5F5] px-6` (no vertical padding -- this section sits flush between InfoSection and UseCasesSection). **Inner container:** `

` with classes `max-w-[88rem] mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 items-center`. --- #### LEFT COLUMN (1 of 4 columns) Wrapper `

` with classes `md:col-span-1`. Contains: - `

` with text **"Funded by premier partners\
and forward-thinking leaders."** - Classes: `text-black/70 text-base leading-relaxed` --- #### RIGHT COLUMN -- Marquee (3 of 4 columns) Wrapper `

` with classes `md:col-span-3 overflow-hidden`. **CSS animation** (injected via inline `

{[...BACKER_BRANDS, ...BACKER_BRANDS].map((brand, i) => ( {brand.name} ))}

); } ```36:Td16,**Prompt:** Create a "Services" section using React, Tailwind CSS, and **framer-motion**. The site uses **Google Font "Kanit"** (weights 300-900) and a dark page background `#0C0C0C`. **Section layout:** - This section sits on top of the dark background below it, using a white card-like appearance with rounded top corners - `display: flex, flex-direction: column` - Padding: `px-5 sm:px-8 md:px-10 py-20 sm:py-24 md:py-32` - Top border radius: `rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px]` - Background color: `#FFFFFF` (white) **Heading "Services":** - `font-black uppercase leading-none tracking-tight text-center w-full` - Font size: `clamp(3rem, 12vw, 160px)` - Color: `#0C0C0C` - Margin bottom: `mb-16 sm:mb-20 md:mb-28` - Fade-in animation: `delay: 0, y: 40` **Services list (5 items, vertically stacked, centered, max-w-5xl):** Each service has a number, name, and description. The services are: ``` 01 — 3D Modeling "Creation of detailed objects, characters, or environments tailored to specific client needs, ideal for games, products, and visualizations." 02 — Rendering "High-quality, photorealistic renders that showcase designs with custom lighting, textures, and materials to bring concepts to life." 03 — Motion Design "Dynamic animations and motion graphics that add energy and storytelling to brands, products, and digital experiences." 04 — Branding "Crafting cohesive visual identities — from logos to full brand systems — that communicate a clear and memorable presence." 05 — Web Design "Designing clean, modern, and conversion-focused websites with attention to layout, typography, and user experience." ``` **Service item layout:** Each item is wrapped in a FadeIn with staggered delay (`i * 0.1`) and `y: 30`. - **Divider line** between items (not above the first): `border-top: 1px solid rgba(12, 12, 12, 0.15)`, full width - **Row layout**: `display: flex, align-items: start, gap-6 sm:gap-8 md:gap-10, py-8 sm:py-10 md:py-12, w-full` - **Left side -- Number**: - `font-black uppercase leading-none flex-shrink-0` - Font size: `clamp(3rem, 10vw, 140px)` - Color: `#0C0C0C` - Displays the zero-padded number (01, 02, etc.) - **Right side -- Name + Description** (flex column, `gap-2 sm:gap-4 md:gap-5, pt-1`): - **Name**: `font-medium uppercase`, size `clamp(1rem, 2.2vw, 2.1rem)`, color `#0C0C0C` - **Description**: `font-light leading-relaxed max-w-2xl`, size `clamp(0.85rem, 1.6vw, 1.25rem)`, color `#0C0C0C` with `opacity: 0.6` **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` state sets `opacity: 0` + the x/y offsets; `visible` animates to `opacity: 1, x: 0, y: 0` - Easing: cubic bezier `[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. ---8:["$","$L22",null,{"activeCategory":"$undefined","items":[{"category":"sites","id":271,"media":[{"id":305,"alt":"arctic lab","caption":null,"folder":null,"updatedAt":"2026-08-13T11:45:52.752Z","createdAt":"2026-08-13T11:45:52.752Z","url":"/api/media/file/sites-0159-01.webp","thumbnailURL":"/api/media/file/sites-0159-01-300x224.webp","filename":"sites-0159-01.webp","mimeType":"image/webp","filesize":26712,"width":1280,"height":956,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0159-01-300x224.webp","width":300,"height":224,"mimeType":"image/webp","filesize":3474,"filename":"sites-0159-01-300x224.webp"},"square":{"url":"/api/media/file/sites-0159-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":8760,"filename":"sites-0159-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0159-01-600x448.webp","width":600,"height":448,"mimeType":"image/webp","filesize":9900,"filename":"sites-0159-01-600x448.webp"},"medium":{"url":"/api/media/file/sites-0159-01-900x672.webp","width":900,"height":672,"mimeType":"image/webp","filesize":16696,"filename":"sites-0159-01-900x672.webp"},"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-0159-01-1200x630.webp","width":1200,"height":630,"mimeType":"image/webp","filesize":16352,"filename":"sites-0159-01-1200x630.webp"}}}],"order":308,"prompt":"$23","title":"arctic lab"},{"category":"sites","id":272,"media":[{"id":306,"alt":"VEX Ventures","caption":null,"folder":null,"updatedAt":"2026-08-13T11:45:52.910Z","createdAt":"2026-08-13T11:45:52.910Z","url":"/api/media/file/sites-0158-01.webp","thumbnailURL":"/api/media/file/sites-0158-01-300x226.webp","filename":"sites-0158-01.webp","mimeType":"image/webp","filesize":22166,"width":480,"height":362,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0158-01-300x226.webp","width":300,"height":226,"mimeType":"image/webp","filesize":12954,"filename":"sites-0158-01-300x226.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":306,"prompt":"$24","title":"VEX Ventures"},{"category":"sites","id":273,"media":[{"id":307,"alt":"Automotive AI","caption":null,"folder":null,"updatedAt":"2026-08-13T11:45:52.960Z","createdAt":"2026-08-13T11:45:52.960Z","url":"/api/media/file/sites-0157-01.mp4","thumbnailURL":null,"filename":"sites-0157-01.mp4","mimeType":"video/mp4","filesize":1989990,"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":304,"prompt":"$25","title":"Automotive AI"},{"category":"sections","id":416,"media":[{"id":453,"alt":"Arceage Services","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:46.586Z","createdAt":"2026-08-13T14:06:46.586Z","url":"/api/media/file/sections-0014-01.webp","thumbnailURL":"/api/media/file/sections-0014-01-300x218.webp","filename":"sections-0014-01.webp","mimeType":"image/webp","filesize":224558,"width":640,"height":466,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0014-01-300x218.webp","width":300,"height":218,"mimeType":"image/webp","filesize":86204,"filename":"sections-0014-01-300x218.webp"},"square":{"url":"/api/media/file/sections-0014-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":190212,"filename":"sections-0014-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0014-01-600x437.webp","width":600,"height":437,"mimeType":"image/webp","filesize":220038,"filename":"sections-0014-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":303,"prompt":"$26","title":"Arceage Services"},{"category":"sites","id":274,"media":[{"id":308,"alt":"Scroll Landing Page","caption":null,"folder":null,"updatedAt":"2026-08-13T11:46:06.056Z","createdAt":"2026-08-13T11:46:06.055Z","url":"/api/media/file/sites-0156-01.webp","thumbnailURL":"/api/media/file/sites-0156-01-300x222.webp","filename":"sites-0156-01.webp","mimeType":"image/webp","filesize":2712652,"width":640,"height":474,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0156-01-300x222.webp","width":300,"height":222,"mimeType":"image/webp","filesize":951232,"filename":"sites-0156-01-300x222.webp"},"square":{"url":"/api/media/file/sites-0156-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":2100050,"filename":"sites-0156-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0156-01-600x444.webp","width":600,"height":444,"mimeType":"image/webp","filesize":2413402,"filename":"sites-0156-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":302,"prompt":"$27","title":"Scroll Landing Page"},{"category":"sites","id":275,"media":[{"id":309,"alt":"IntelligentX","caption":null,"folder":null,"updatedAt":"2026-08-13T11:46:14.417Z","createdAt":"2026-08-13T11:46:14.417Z","url":"/api/media/file/sites-0155-01.webp","thumbnailURL":"/api/media/file/sites-0155-01-300x217.webp","filename":"sites-0155-01.webp","mimeType":"image/webp","filesize":1767852,"width":640,"height":462,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0155-01-300x217.webp","width":300,"height":217,"mimeType":"image/webp","filesize":499544,"filename":"sites-0155-01-300x217.webp"},"square":{"url":"/api/media/file/sites-0155-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1788570,"filename":"sites-0155-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0155-01-600x433.webp","width":600,"height":433,"mimeType":"image/webp","filesize":1566160,"filename":"sites-0155-01-600x433.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":301,"prompt":"$28","title":"IntelligentX"},{"category":"sites","id":276,"media":[{"id":310,"alt":"Glitch Pulse","caption":null,"folder":null,"updatedAt":"2026-08-13T11:46:24.662Z","createdAt":"2026-08-13T11:46:24.662Z","url":"/api/media/file/sites-0154-01.webp","thumbnailURL":"/api/media/file/sites-0154-01-300x220.webp","filename":"sites-0154-01.webp","mimeType":"image/webp","filesize":1499962,"width":640,"height":470,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0154-01-300x220.webp","width":300,"height":220,"mimeType":"image/webp","filesize":597036,"filename":"sites-0154-01-300x220.webp"},"square":{"url":"/api/media/file/sites-0154-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1226300,"filename":"sites-0154-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0154-01-600x441.webp","width":600,"height":441,"mimeType":"image/webp","filesize":1419400,"filename":"sites-0154-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":298,"prompt":"$29","title":"Glitch Pulse"},{"category":"sites","id":277,"media":[{"id":311,"alt":"NimBus Pricing","caption":null,"folder":null,"updatedAt":"2026-08-13T11:46:29.466Z","createdAt":"2026-08-13T11:46:29.466Z","url":"/api/media/file/sites-0153-01.webp","thumbnailURL":"/api/media/file/sites-0153-01-300x216.webp","filename":"sites-0153-01.webp","mimeType":"image/webp","filesize":447462,"width":640,"height":460,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0153-01-300x216.webp","width":300,"height":216,"mimeType":"image/webp","filesize":144700,"filename":"sites-0153-01-300x216.webp"},"square":{"url":"/api/media/file/sites-0153-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":325848,"filename":"sites-0153-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0153-01-600x431.webp","width":600,"height":431,"mimeType":"image/webp","filesize":405200,"filename":"sites-0153-01-600x431.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":295,"prompt":"$2a","title":"NimBus Pricing"},{"category":"sites","id":278,"media":[{"id":312,"alt":"Modern Agency","caption":null,"folder":null,"updatedAt":"2026-08-13T11:46:54.534Z","createdAt":"2026-08-13T11:46:54.533Z","url":"/api/media/file/sites-0152-01.webp","thumbnailURL":"/api/media/file/sites-0152-01-300x527.webp","filename":"sites-0152-01.webp","mimeType":"image/webp","filesize":1091764,"width":364,"height":640,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0152-01-300x527.webp","width":300,"height":527,"mimeType":"image/webp","filesize":882966,"filename":"sites-0152-01-300x527.webp"},"square":{"url":"/api/media/file/sites-0152-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":664714,"filename":"sites-0152-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-0152-01-1200x630.webp","width":1200,"height":630,"mimeType":"image/webp","filesize":396924,"filename":"sites-0152-01-1200x630.webp"}}}],"order":292,"prompt":"$2b","title":"Modern Agency"},{"category":"sites","id":279,"media":[{"id":313,"alt":"ClubX Investors","caption":null,"folder":null,"updatedAt":"2026-08-13T11:46:54.647Z","createdAt":"2026-08-13T11:46:54.647Z","url":"/api/media/file/sites-0151-01.webp","thumbnailURL":"/api/media/file/sites-0151-01-300x239.webp","filename":"sites-0151-01.webp","mimeType":"image/webp","filesize":23590,"width":480,"height":382,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0151-01-300x239.webp","width":300,"height":239,"mimeType":"image/webp","filesize":14220,"filename":"sites-0151-01-300x239.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":291,"prompt":"$2c","title":"ClubX Investors"},{"category":"sections","id":417,"media":[{"id":454,"alt":"Feedback Slider","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:49.221Z","createdAt":"2026-08-13T14:06:49.221Z","url":"/api/media/file/sections-0013-01.webp","thumbnailURL":"/api/media/file/sections-0013-01-300x220.webp","filename":"sections-0013-01.webp","mimeType":"image/webp","filesize":330384,"width":640,"height":470,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0013-01-300x220.webp","width":300,"height":220,"mimeType":"image/webp","filesize":102584,"filename":"sections-0013-01-300x220.webp"},"square":{"url":"/api/media/file/sections-0013-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":317440,"filename":"sections-0013-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0013-01-600x441.webp","width":600,"height":441,"mimeType":"image/webp","filesize":302964,"filename":"sections-0013-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":288,"prompt":"$2d","title":"Feedback Slider"},{"category":"sites","id":280,"media":[{"id":314,"alt":"Zenith Footer","caption":null,"folder":null,"updatedAt":"2026-08-13T11:46:54.730Z","createdAt":"2026-08-13T11:46:54.730Z","url":"/api/media/file/sites-0150-01.webp","thumbnailURL":"/api/media/file/sites-0150-01-300x220.webp","filename":"sites-0150-01.webp","mimeType":"image/webp","filesize":11492,"width":480,"height":352,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0150-01-300x220.webp","width":300,"height":220,"mimeType":"image/webp","filesize":6996,"filename":"sites-0150-01-300x220.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":287,"prompt":"$2e","title":"Zenith Footer"},{"category":"sites","id":281,"media":[{"id":315,"alt":"Bionova Biotech","caption":null,"folder":null,"updatedAt":"2026-08-13T11:46:54.810Z","createdAt":"2026-08-13T11:46:54.810Z","url":"/api/media/file/sites-0149-01.webp","thumbnailURL":"/api/media/file/sites-0149-01-300x206.webp","filename":"sites-0149-01.webp","mimeType":"image/webp","filesize":15016,"width":480,"height":330,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0149-01-300x206.webp","width":300,"height":206,"mimeType":"image/webp","filesize":8614,"filename":"sites-0149-01-300x206.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":286,"prompt":"$2f","title":"Bionova Biotech"},{"category":"sites","id":282,"media":[{"id":316,"alt":"Obsidian Hero","caption":null,"folder":null,"updatedAt":"2026-08-13T11:47:08.080Z","createdAt":"2026-08-13T11:47:08.079Z","url":"/api/media/file/sites-0148-01.webp","thumbnailURL":"/api/media/file/sites-0148-01-300x221.webp","filename":"sites-0148-01.webp","mimeType":"image/webp","filesize":641494,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0148-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":216598,"filename":"sites-0148-01-300x221.webp"},"square":{"url":"/api/media/file/sites-0148-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":491830,"filename":"sites-0148-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0148-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":589104,"filename":"sites-0148-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":285,"prompt":"$30","title":"Obsidian Hero"},{"category":"sites","id":283,"media":[{"id":317,"alt":"Rocket FAQ","caption":null,"folder":null,"updatedAt":"2026-08-13T11:47:16.011Z","createdAt":"2026-08-13T11:47:16.011Z","url":"/api/media/file/sites-0147-01.webp","thumbnailURL":"/api/media/file/sites-0147-01-300x220.webp","filename":"sites-0147-01.webp","mimeType":"image/webp","filesize":126370,"width":640,"height":470,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0147-01-300x220.webp","width":300,"height":220,"mimeType":"image/webp","filesize":50914,"filename":"sites-0147-01-300x220.webp"},"square":{"url":"/api/media/file/sites-0147-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":147270,"filename":"sites-0147-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0147-01-600x441.webp","width":600,"height":441,"mimeType":"image/webp","filesize":138156,"filename":"sites-0147-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":283,"prompt":"$31","title":"Rocket FAQ"},{"category":"sites","id":284,"media":[{"id":318,"alt":"Aurora Onboard","caption":null,"folder":null,"updatedAt":"2026-08-13T11:47:17.326Z","createdAt":"2026-08-13T11:47:17.326Z","url":"/api/media/file/sites-0146-01.png","thumbnailURL":"/api/media/file/sites-0146-01-300x219.png","filename":"sites-0146-01.png","mimeType":"image/png","filesize":2112753,"width":1850,"height":1352,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0146-01-300x219.png","width":300,"height":219,"mimeType":"image/png","filesize":71257,"filename":"sites-0146-01-300x219.png"},"square":{"url":"/api/media/file/sites-0146-01-500x500.png","width":500,"height":500,"mimeType":"image/png","filesize":244240,"filename":"sites-0146-01-500x500.png"},"small":{"url":"/api/media/file/sites-0146-01-600x438.png","width":600,"height":438,"mimeType":"image/png","filesize":251306,"filename":"sites-0146-01-600x438.png"},"medium":{"url":"/api/media/file/sites-0146-01-900x658.png","width":900,"height":658,"mimeType":"image/png","filesize":561078,"filename":"sites-0146-01-900x658.png"},"large":{"url":"/api/media/file/sites-0146-01-1400x1023.png","width":1400,"height":1023,"mimeType":"image/png","filesize":1388181,"filename":"sites-0146-01-1400x1023.png"},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":"/api/media/file/sites-0146-01-1200x630.png","width":1200,"height":630,"mimeType":"image/png","filesize":743617,"filename":"sites-0146-01-1200x630.png"}}}],"order":282,"prompt":"$32","title":"Aurora Onboard"},{"category":"sites","id":285,"media":[{"id":319,"alt":"AeroCore","caption":null,"folder":null,"updatedAt":"2026-08-13T11:48:32.392Z","createdAt":"2026-08-13T11:48:32.392Z","url":"/api/media/file/sites-0145-01.webp","thumbnailURL":"/api/media/file/sites-0145-01-300x221.webp","filename":"sites-0145-01.webp","mimeType":"image/webp","filesize":1455830,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0145-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":503488,"filename":"sites-0145-01-300x221.webp"},"square":{"url":"/api/media/file/sites-0145-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1214996,"filename":"sites-0145-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0145-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":1327750,"filename":"sites-0145-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":279,"prompt":"$33","title":"AeroCore"},{"category":"sites","id":286,"media":[{"id":320,"alt":"3D Story","caption":null,"folder":null,"updatedAt":"2026-08-13T11:49:04.431Z","createdAt":"2026-08-13T11:49:04.430Z","url":"/api/media/file/sites-0144-01.webp","thumbnailURL":"/api/media/file/sites-0144-01-300x222.webp","filename":"sites-0144-01.webp","mimeType":"image/webp","filesize":830338,"width":640,"height":474,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0144-01-300x222.webp","width":300,"height":222,"mimeType":"image/webp","filesize":304998,"filename":"sites-0144-01-300x222.webp"},"square":{"url":"/api/media/file/sites-0144-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":755208,"filename":"sites-0144-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0144-01-600x444.webp","width":600,"height":444,"mimeType":"image/webp","filesize":773392,"filename":"sites-0144-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":277,"prompt":"$34","title":"3D Story"},{"category":"sites","id":287,"media":[{"id":321,"alt":"Halo Benefits","caption":null,"folder":null,"updatedAt":"2026-08-13T11:49:22.291Z","createdAt":"2026-08-13T11:49:22.291Z","url":"/api/media/file/sites-0143-01.webp","thumbnailURL":"/api/media/file/sites-0143-01-300x222.webp","filename":"sites-0143-01.webp","mimeType":"image/webp","filesize":190382,"width":640,"height":474,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0143-01-300x222.webp","width":300,"height":222,"mimeType":"image/webp","filesize":74400,"filename":"sites-0143-01-300x222.webp"},"square":{"url":"/api/media/file/sites-0143-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":164884,"filename":"sites-0143-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0143-01-600x444.webp","width":600,"height":444,"mimeType":"image/webp","filesize":187338,"filename":"sites-0143-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":274,"prompt":"$35","title":"Halo Benefits"},{"category":"sites","id":288,"media":[{"id":322,"alt":"Agency Services","caption":null,"folder":null,"updatedAt":"2026-08-13T11:49:35.573Z","createdAt":"2026-08-13T11:49:35.573Z","url":"/api/media/file/sites-0142-01.webp","thumbnailURL":"/api/media/file/sites-0142-01-300x222.webp","filename":"sites-0142-01.webp","mimeType":"image/webp","filesize":277682,"width":640,"height":474,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0142-01-300x222.webp","width":300,"height":222,"mimeType":"image/webp","filesize":97700,"filename":"sites-0142-01-300x222.webp"},"square":{"url":"/api/media/file/sites-0142-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":277132,"filename":"sites-0142-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0142-01-600x444.webp","width":600,"height":444,"mimeType":"image/webp","filesize":252598,"filename":"sites-0142-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":268,"prompt":"$36","title":"Agency Services"}],"page":19,"query":"","totalDocs":455,"totalPages":23}]

Only pay for cloud storage your teams actually use.

Storage costs

Starter

Team

Enterprise

Got Questions?

Demand for resilient propulsion is rising as aerospace programs move faster, fly farther, and require engines built with absolute precision.

Propulsion programs need a partner that can move from concept to certified hardware.

Unmatched propulsion data across every flight-critical layer.

Hands
Off.

Auren

{splitText}

Program stories from the people building flight-ready power.

How a reusable upper-stage program moved from thermal risk to stable qualification.

Inside the test cell where telemetry, vibration, and injector response converge.

Why sub-micron inspection changes the way aerospace teams plan reliability.

Designing feed systems and ignition envelopes for hydrogen-ready propulsion.

The operational cadence behind launch-window support and post-test analysis.

Explore Veldara

Unlock Three.js

Connect Everything

Instantly craft immersive 3D worlds on the web.

Veldara 8

` - Text: "Meet USD Halo." - Classes: `text-black text-4xl md:text-5xl font-medium leading-tight mb-8` - Inline style: `{ letterSpacing: '-0.03em' }` 2. CTA pill button (black capsule, text-left icon-right pattern): - Element: `

Meet USD Halo.

HandsOff.

Auren

{splitText}

Only pay for cloud storage your teams actually use.

Storage costs

Starter

Team

Enterprise

Got Questions?

Demand for resilient propulsion is rising as aerospace programs move faster, fly farther, and require engines built with absolute precision.

Propulsion programs need a partner that can move from concept to certified hardware.

Unmatched propulsion data across every flight-critical layer.

Program stories from the people building flight-ready power.

How a reusable upper-stage program moved from thermal risk to stable qualification.

Inside the test cell where telemetry, vibration, and injector response converge.

Why sub-micron inspection changes the way aerospace teams plan reliability.

Designing feed systems and ignition envelopes for hydrogen-ready propulsion.

The operational cadence behind launch-window support and post-test analysis.

Explore Veldara

Unlock Three.js

Connect Everything

Instantly craft immersive 3D worlds on the web.

Veldara 8

Meet USD Halo.

Hands
Off.