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:T14f4,Build an "Our Comprehensive Branding Approach" section as a React component using TypeScript, Tailwind CSS 3, and Framer Motion. The section sits on a dark background (`#0f0f0f`) with white text. Font is `'DM Sans', sans-serif` (loaded via Google Fonts: `https://fonts.googleapis.com/css?family=DM+Sans:500,400`). Here is the exact specification: --- **Overall Section Container:** - `

` with `overflow-x-hidden`, `bg-[#0f0f0f]`, `text-white`, inline style `fontFamily: "'DM Sans', sans-serif"` - Inner wrapper: `mx-auto max-w-7xl px-6 py-24 sm:px-10 lg:px-16 lg:py-32` - All animations use the easing curve `[0.22, 1, 0.36, 1]` and trigger once when scrolled into view using Framer Motion's `useInView` with `{ once: true, margin: "-60px" }` --- **Header (top of section):** - Flex row (`flex items-start gap-4`) with `mb-20` - Two lines of text stacked vertically: - Line 1: "Our Comprehensive" in `text-[#6e6e6e]` (gray), `font-light`, size `clamp(2rem, 3.4vw, 2.6rem)`, `leading-[1.18]`, `tracking-[-0.01em]`. Animates from `opacity:0, y:20` to visible, duration `0.7s`. - Line 2: "Branding Approach" in `text-white`, same font styling. Same animation but with `delay: 0.1s`. - A small square button to the right: `h-7 w-7`, `border border-white/20`, contains a plus icon (SVG: two perpendicular lines forming a +, `stroke="currentColor"`, `strokeWidth="1.3"`, viewBox `0 0 12 12`). Text color `text-white/70`, hover: `bg-white/10 text-white`. Animates scale from 0.8 to 1, opacity 0 to 1, delay `0.25s`. --- **Content Row (below header):** - `flex flex-col gap-12 lg:flex-row lg:items-start lg:gap-10` - Left side: `flex min-w-0 flex-1 flex-col gap-8 sm:flex-row sm:items-start sm:gap-10` containing the portrait and testimonial - Right side: the circle diagram --- **Left: Glitch Portrait** - Container: `relative shrink-0`, fixed size `width: 250px`, `height: 310px` - Contains an `` filling the container with `object-cover`, using this Pexels image: `https://images.pexels.com/photos/3778212/pexels-photo-3778212.jpeg?auto=compress&cs=tinysrgb&w=600` - 10 small white glitch blocks (`bg-white`) absolutely positioned around the edges of the portrait (some overflow outside). Each block has a fixed pixel `width` and `height` and percentage-based `left`/`top`. They animate in with `scale: 0 -> 1`, `opacity: [0, 1, 0.9]`, staggered by `0.05s` starting at `delay: 0.5s`, duration `0.35s`. - The exact glitch block positions (x%, y%, width px, height px): ``` (2, -3, 22, 22), (12, -5, 14, 10), (28, -2, 10, 10), (82, 22, 8, 8), (-4, 75, 16, 12), (8, 82, 10, 10), (-2, 88, 18, 16), (56, 82, 12, 14), (70, 90, 10, 10), (42, 94, 8, 6) ``` - The entire portrait group animates from `opacity:0, y:24` to visible, duration `0.8s`, delay `0.2s`. --- **Left: Testimonial Text (next to portrait)** - Container: `min-w-0 max-w-[420px]` - Opening curly quote character `\u201C` in `text-[#555]`, font `Georgia, 'Times New Roman', serif`, `fontSize: "3.2rem"`, `lineHeight: 0.7`. Animates in with `y:14`, delay `0.3s`. - Quote paragraph: "We kept seeing the same pattern -- brands with potential lost between messy processes, scattered visuals, and forgettable websites. This studio exists to align it all into one clear, consistent story." Use `—` for the em-dash. Styled as `text-white/90`, size `clamp(1.05rem, 1.5vw, 1.28rem)`, `font-normal`, `leading-[1.58]`. Animates from `y:20`, delay `0.4s`. - Attribution block `mt-10`: - Name: "Alex West" in `text-[1.15rem] font-medium tracking-[0.01em] text-white` - Title: "Founder & Creative Director" (`&` in JSX) in `mt-1 text-[0.85rem] tracking-wide text-[#6e6e6e]` - Both animate together from `y:14`, delay `0.55s`. --- **Right: Circle Diagram** - Wrapper: `flex w-full max-w-[360px] shrink-0 items-center justify-center self-center sm:max-w-[400px] lg:max-w-[440px]` - Inner container has `aspect-ratio: 1/1`, position relative, animates opacity 0->1, delay `0.4s`, duration `0.8s`. - SVG with `viewBox="0 0 100 100"`, absolutely filling the container: - A circle centered at `(50, 50)` with radius `30`, `stroke="white"`, `strokeWidth="0.18"`, `opacity="0.45"` - 3 lines radiating from center `(50,50)` outward to radius `36` (30+6) at these angles: - "websites" at 215 degrees - "brands" at 335 degrees - "ui/ux design" at 110 degrees - Lines default: `strokeWidth: 0.18`, `opacity: 0.45`. On hover of corresponding label: `strokeWidth: 0.6`, `opacity: 1`. Transition duration `0.3s`. - 3 text labels positioned at radius `46` (30+16) from center at the same angles, using `transform: translate(-50%, -50%)` for centering. Styled with `fontSize: clamp(1.25rem, 2.8vw, 2.4rem)`, `letterSpacing: -0.01em`, `text-white`, `whitespace-nowrap`. - Default `fontWeight: 300`, on hover of that label: `fontWeight: 700` (transition `0.25s`). - Each label animates in with `opacity:0, y:16` to visible, staggered by `0.15s` starting at delay `0.6s`, duration `0.7s`. - Hover state is shared: hovering a label highlights both the label (bold) and its corresponding SVG line. --- **Dependencies:** React 18, Framer Motion (v12+), Tailwind CSS 3. Uses `useState`, `useRef`, `useInView` from framer-motion, and `motion` components for all animations. No external animation libraries beyond Framer Motion.24:T2d9c,Build a pixel-faithful recreation of the landing CTA section. Use React 18 + Vite + TypeScript, TailwindCSS, `framer-motion`, `clsx` + `tailwind-merge` as `cn()`. Dark theme background (`#000000`), Inter font, Material Symbols Outlined for icons. Use the white-alpha "landing" palette in `tailwind.config.ts`: ```ts landing: { surface: "rgba(255, 255, 255, 0.10)", "surface-hover": "rgba(255, 255, 255, 0.16)", border: "rgba(255, 255, 255, 0.10)", "border-strong": "rgba(255, 255, 255, 0.20)", text: "rgba(255, 255, 255, 0.80)", "text-muted": "rgba(255, 255, 255, 0.60)", } ``` Add a global `.liquid-glass` utility (frosted translucent surface): ```css .liquid-glass { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.25); } ``` Add keyframes in `index.css` for the inner Velorah hero animation: ```css @keyframes fade-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-rise { animation: fade-rise .8s ease-out both; } .animate-fade-rise-delay { animation: fade-rise .8s ease-out .25s both; } .animate-fade-rise-delay-2 { animation: fade-rise .8s ease-out .5s both; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { scrollbar-width: none; } ``` Load fonts in `index.html`: Inter (400/500/600), Instrument Serif (400 + italic), Material Symbols Outlined. --- ## Assets - Foreground "grass / horizon" PNG that overlays the bottom of the section — load directly from this URL (no local asset): `https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png` - CloudFront video URL used **inside** the Velorah dashboard preview (exact): `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4` --- ## Helper components (must exist) ### `FadeUp` (`framer-motion`) ```tsx ``` ### `MIcon` — Material Symbols Outlined span, supports `name`, `size`, `fill`, `weight`, `grade`, `opticalSize`, applied via `fontVariationSettings: "'FILL' x, 'wght' y, 'GRAD' z, 'opsz' s"`. ### `PrimaryButton` (landing primitive) - White pill, black text, `rounded-full`, sizes `sm/md/lg` (default `lg`: `h-12 px-9 text-sm font-medium`). - Class: `inline-flex items-center justify-center rounded-full bg-white/80 hover:bg-white text-black leading-none transition-colors`. - Wraps children in an `AnimatedText` component that slides current text up and reveals duplicate from below on hover (200–300ms ease). - Polymorphic via `as="a" | "button"`, default `a`. ### `ChatPanel` (left side of the dashboard mock) - Vertical flex column inside `rounded-2xl border border-white/10`, background `rgba(8,8,10,0.6)` + `backdrop-filter: blur(24px)`. - Header row: 28px circular `bg-white/5` with `MIcon name="auto_awesome" size={14}`, then two-line label: **"Vibe Design course"** (text-sm font-medium white) + **"Learn how to build website with AI"** (text-[11px] white/40). - Messages scroll area (`scrollbar-hide`, `space-y-4`, px-4 py-5). Seed messages: 1. assistant — "Welcome to the Vibe Design course! I'll guide you through building stunning websites with AI. What would you like to learn first?" 2. user — "I want to learn how to build a hero section with a cinematic video background using AI." 3. assistant — "Great choice! In this course, you'll learn how to create full-screen looping videos, liquid glass nav bars, email signups, and manifesto buttons — all with AI assistance. Let's dive in!" - Message bubbles: `max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed`. User = `bg-white/15 text-white/90` (right-aligned). Assistant = `bg-white/5 text-white/70 border border-white/5` (left). - Props: `initialScroll?: "top" | "bottom"` (CTA uses `"top"`), `animateMessagesIn?: boolean` (CTA passes `true`, each message wrapped in `FadeUp delay={i * 0.12} y={16}`). - Input row: `.liquid-glass rounded-2xl` containing a 1-row autosize `

` (transparent, placeholder "Ask about the course...") + white square send button (`bg-white text-black rounded-xl p-2`) with `MIcon name="arrow_upward" size={16}`. Enter (no shift) sends. Pushing user msg also pushes a canned assistant reply.

### `VelorahHeroPreview` (right side of the dashboard mock)
```tsx
const VIDEO_SRC = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4";
```
- Wrapper: `relative w-full h-full overflow-hidden rounded-2xl`, inline `backgroundColor: "hsl(201 100% 13%)"` (deep teal as the video-loading color).
- `<video autoPlay loop muted playsInline preload="auto">` absolutely positioned, `object-cover`, `z-0`.
- Nav row (`relative z-10 flex items-center justify-between px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4`):
  - Left brand: `Velorah®` with `font-family: 'Instrument Serif', serif`, `text-sm sm:text-base md:text-lg`, `tracking-tight`, `®` as `<sup className="text-[0.5em]">`.
  - Center (hidden < md): `Home` (white) · `Studio` · `About` · `Journal` · `Reach Us` — `text-[9px] lg:text-[10px] text-white/60` with `hover:text-white` on the inactive items.
  - Right: `.liquid-glass rounded-full px-2.5 sm:px-3 py-1 text-[9px] sm:text-[10px] text-white` reading **Begin Journey**.
- Hero block (`flex flex-col items-center text-center px-3 sm:px-4 pt-3 sm:pt-5 md:pt-7 pb-6`):
  - `<h1>` Instrument Serif, `font-normal leading-[0.95] tracking-[-0.03em]`, `text-lg sm:text-2xl md:text-3xl lg:text-4xl max-w-[90%]`, class `animate-fade-rise`. Content: `Where <em class="not-italic text-white/55">dreams</em> rise <em class="not-italic text-white/55">through the silence.</em>`
  - Paragraph `animate-fade-rise-delay text-white/60 text-[9px] sm:text-[11px] md:text-xs leading-relaxed max-w-[80%] sm:max-w-sm md:max-w-md mt-2 sm:mt-3 md:mt-4`: "We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work."
  - Pill button `animate-fade-rise-delay-2 liquid-glass rounded-full px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 md:py-2.5 text-[9px] sm:text-[10px] text-white mt-3 sm:mt-4 md:mt-5` reading **Begin Journey**.

### `CtaDashboardMock`
Frame around ChatPanel + VelorahHeroPreview:
```tsx
<div className="liquid-glass w-full max-w-[1100px] aspect-[3/4] sm:aspect-[16/10] lg:aspect-[16/9] rounded-2xl mx-auto overflow-hidden p-2 sm:p-3">
  <div className="grid h-full grid-cols-1 sm:grid-cols-[minmax(220px,320px)_1fr] gap-2 sm:gap-3">
    <div className="min-h-0 hidden sm:block"><ChatPanel initialScroll="top" animateMessagesIn /></div>
    <div className="min-h-0"><VelorahHeroPreview /></div>
  </div>
</div>
```

---

## `CtaSection` — exact layout & behavior

```tsx
const sectionRef = useRef<HTMLElement>(null);
const isMobile = useIsMobile(); // tailwind md breakpoint hook
const { scrollYProgress } = useScroll({ target: sectionRef, offset: ["start end", "end start"] });
const dashboardY = useTransform(scrollYProgress, [0, 1], ["120px", "-120px"]);
const grassY     = useTransform(scrollYProgress, [0, 1], isMobile ? ["80px", "-40px"] : ["200px", "-200px"]);
```

Markup:
```tsx
<section
  ref={sectionRef}
  id="cta"
  className="relative w-full"
  style={{ background: "linear-gradient(to bottom, transparent 0%, #14191E 100%)" }}
>
  <div className="relative mx-auto max-w-[1080px] px-4 sm:px-6 pt-24 sm:pt-32 md:pt-40 pb-[440px] sm:pb-[520px] md:pb-[440px]">
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-8 items-start">
      {/* Left column */}
      <div className="relative z-20 max-w-[400px]">
        <FadeUp delay={1}>
          <h2 className="text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground">
            Learn how can one go from 0 to $11.5k with AI in 60 days.
          </h2>
        </FadeUp>
        <FadeUp delay={0.1}>
          <p className="mt-6 text-landing-text text-base sm:text-lg leading-[1.5] max-w-[380px]">
            Learn to turn your ideas into stunning websites with AI — the same skills agencies charge $5,000 for. Join the UI Rocket training and start building like a pro today.
          </p>
        </FadeUp>
        <FadeUp delay={0.2} className="mt-10">
          <PrimaryButton as="button">Start for free</PrimaryButton>
        </FadeUp>
      </div>
    </div>
  </div>

{/* Dashboard pinned to right edge, behind grass, parallax Y */}
  <motion.div
    style={{ y: dashboardY }}
    className="absolute top-[440px] sm:top-[460px] md:top-[500px] lg:top-20 left-4 right-4 sm:left-auto sm:-right-[8%] md:-right-[10%] lg:-right-[12%] z-10 sm:w-[85%] md:w-[80%] lg:w-[68%]"
  >
    <CtaDashboardMock />
  </motion.div>

{/* Foreground grass — in front of dashboard, parallax Y */}
  <motion.img
    src="https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png"
    alt=""
    aria-hidden
    style={{ y: grassY }}
    className="pointer-events-none select-none absolute left-0 right-0 bottom-[-40px] sm:bottom-[-80px] lg:bottom-[-140px] w-full z-30 object-cover"
  />
</section>
```

### Behavior summary
- Section fades from transparent → `#14191E` vertically.
- On scroll, the dashboard translates from `+120px` → `-120px` (parallax up). The grass image translates `+200px` → `-200px` desktop, `+80px` → `-40px` mobile, on top of the dashboard (`z-30` over `z-10`).
- Left column stays static, on top of the grass (`z-20` left text container would otherwise be covered — keep grass at `z-30` to overlap the dashboard while the heading visually sits left of it).
- Headline `Learn how can one go from 0 to $11.5k with AI in 60 days.` enters with a delayed FadeUp; paragraph + button stagger in afterward.
- Mobile (< sm): dashboard stacks below the heading (`top-[440px]`), chat panel hides (`hidden sm:block`), only the Velorah preview shows.
- Button is `PrimaryButton as="button"` reading **Start for free**; hover triggers the AnimatedText slide.

---

## Acceptance checklist
- [ ] Section bg: `transparent → #14191E` linear gradient bottom.
- [ ] Inter font globally; Instrument Serif used in Velorah brand + headline; Material Symbols Outlined for icons.
- [ ] Headline copy is exactly: `Learn how can one go from 0 to $11.5k with AI in 60 days.`
- [ ] Subtext copy is exactly the paragraph above; button label exactly `Start for free`.
- [ ] `CtaDashboardMock` uses `.liquid-glass` frame, aspect `3/4 → 16/10 → 16/9`, ChatPanel left (hidden on mobile) + Velorah right.
- [ ] Velorah `<video>` uses the exact CloudFront URL, `autoPlay loop muted playsInline preload="auto"`, fallback bg `hsl(201 100% 13%)`.
- [ ] Velorah inner copy/animation classes match (`animate-fade-rise`, `-delay`, `-delay-2`).
- [ ] `useScroll` + `useTransform` parallax: dashboard `120 → -120`, grass `200 → -200` (desktop) / `80 → -40` (mobile).
- [ ] Grass image loaded from Cloudinary URL (`https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1780586778/cta-bg_mlwy5s.png`) sits at `z-30` over dashboard (`z-10`), pointer-events-none, full width.
- [ ] FadeUp entrance order: heading (delay 1) → paragraph (0.1) → button (0.2).
- [ ] PrimaryButton: white pill, black text, AnimatedText hover slide.25:T16d7,---

Build a **Video Stories section** for an aerospace company called "EngineTech." This is a light-background section with a centered header and a horizontally-scrolling rail of video story cards with scroll-snap, edge bleed, and hover/focus opacity transitions.

---

## SECTION CONTAINER (`.video-stories`)

- Position relative, z-index 90, min-height 100vh.
- Padding: `clamp(46px, 5vw, 88px) 0 clamp(44px, 4vw, 74px)`.
- Overflow hidden.
- Background: `#f7f8f8`. Color: `#111111`.

---

## HEADER (`.video-stories__header`)

- Width: `min(100% - 96px, 900px)`. Centered with `margin: 0 auto clamp(38px, 4vw, 74px)`.

**H2:**

- Text: "Program stories from the people building flight-ready power."
- Margin 0, color `#111111`, `font-size: clamp(38px, 4.4vw, 76px)`, weight 300, letter-spacing 0, line-height 1.08.

**P:**

- Text: "Short field notes from integration leads, test engineers, and manufacturing teams moving advanced propulsion systems from requirement reviews to repeatable flight hardware."
- Max-width 720px, margin `22px 0 0`, color `#697272`, `font-size: clamp(16px, 1.25vw, 21px)`, weight 420, line-height 1.55.

---

## RAIL (`.video-stories__rail`)

- CSS grid with horizontal auto-flow: `grid-auto-flow: column`, `grid-auto-columns: minmax(520px, 34vw)`.
- Gap: `clamp(28px, 3vw, 54px)`.
- `overflow-x: auto`. `overscroll-behavior-x: contain`. `scroll-snap-type: x mandatory`.
- Padding: `0 max(48px, calc((100vw - var(--hero-max-width)) / 2 + 48px)) 36px` (so first/last card aligns with content max-width on wide screens, with 48px minimum edge gutter).
- Hide scrollbar: `scrollbar-width: none` and `::-webkit-scrollbar { display: none }`.
- Has `aria-label="EngineTech video previews"`.

---

## STORY CARD (`.story-card`)

- `scroll-snap-align: center`. `min-width: 0`.
- Default state: `opacity: 0.54; transform: translateY(10px)`.
- Hover/focus state: `opacity: 1; transform: none`.
- Transition: `opacity 260ms ease, transform 260ms ease`.

**Media (`.story-card__media`):**

- A `<video>` element with `autoplay muted loop playsinline`.
- Display block, width 100%, height auto, `aspect-ratio: 16 / 9`.
- Border-radius 12px. Background `#dfe5e6`. `object-fit: cover`, `object-position: center`.
- Box-shadow: `0 18px 48px rgb(21 34 34 / 0.1)`.

**Content (`.story-card__content`):**

- Padding `24px 28px 0`.
- `<p>` (category tag): margin `0 0 12px`, color `#111111`, font-size 15px, weight 760, line-height 1.
- `<h3>` (title): max-width 680px, margin 0, color `#252b2b`, `font-size: clamp(18px, 1.22vw, 24px)`, weight 520, letter-spacing 0, line-height 1.38.
- `<span>` (meta): display block, margin-top 14px, color `#858d8d`, font-size 14px, line-height 1.4.

---

## THE 5 CARDS (in order)

**Card 1:**
- Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_032431_5e054107-51c0-4162-9f0f-3a40054761ef.mp4`
- Category: "Integration Review"
- Title: "How a reusable upper-stage program moved from thermal risk to stable qualification."
- Meta: "Reusable systems · 04:20"

**Card 2:**
- Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_032535_4ccc152e-0cc8-4ee5-a698-e1a98cea8a1e.mp4`
- Category: "Hot-Fire Campaign"
- Title: "Inside the test cell where telemetry, vibration, and injector response converge."
- Meta: "Validation · 03:45"

**Card 3:**
- Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_033707_b842a2ea-f223-4804-96d0-737ab67510fc.mp4`
- Category: "Manufacturing Floor"
- Title: "Why sub-micron inspection changes the way aerospace teams plan reliability."
- Meta: "Precision build · 05:10"

**Card 4:**
- Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_032431_5e054107-51c0-4162-9f0f-3a40054761ef.mp4` (same as card 1)
- Category: "Hydrogen Pathway"
- Title: "Designing feed systems and ignition envelopes for hydrogen-ready propulsion."
- Meta: "H2 systems · 04:55"

**Card 5:**
- Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_032535_4ccc152e-0cc8-4ee5-a698-e1a98cea8a1e.mp4` (same as card 2)
- Category: "Mission Support"
- Title: "The operational cadence behind launch-window support and post-test analysis."
- Meta: "Field readiness · 03:30"

---

## FOOTER PROGRESS INDICATOR (`.video-stories__footer`)

- Display flex, `align-items: center`, gap 8px.
- Width: `min(100% - 96px, 900px)`. Margin: `28px auto 0`.
- Has `aria-hidden="true"`.

Contents (in order):

1. First `<span>`: 56px wide × 4px tall, border-radius 999px, background `#cfd4d4`.
2. Second `<span>`: same as first.
3. Third `<span>`: **320px wide** × 4px tall, border-radius 999px, background `#111111` (active progress).
4. `<strong>`: text "05 / 05", margin-left 18px, color `#7a8282`, font-size 14px, weight 650, `letter-spacing: 0.02em`.

---

## RESPONSIVE BREAKPOINTS

**At 860px:**

- `.video-stories__header` and `.video-stories__footer` width: `min(100% - 48px, 900px)`.
- Rail: `grid-auto-columns: minmax(320px, 82vw)`. Padding: `0 24px 30px`.
- Story cards always at full opacity, no transform offset (`opacity: 1; transform: none`).

**At 560px:**

- Header and footer width: `min(100% - 32px, 900px)`.
- Card content padding becomes `18px 4px 0`.
- Active footer bar (third span) width shrinks to 150px.

---

## GLOBAL STYLES

**CSS custom property used:** `--hero-max-width: 1820px`.

**Font stack:** `"Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` with `-webkit-font-smoothing: antialiased` and `text-rendering: geometricPrecision`.

**Color palette:** No purple or violet. Light background `#f7f8f8`. Dark text `#111111`, `#252b2b`. Muted neutrals `#697272`, `#858d8d`, `#7a8282`. Pale divider `#cfd4d4`. Video placeholder bg `#dfe5e6`.26:T359e,Create a single full-viewport (`h-[100dvh]`) Nike-branded section in React + Tailwind CSS + GSAP. It must be **fully mobile responsive**. The app requires `react-player` and `gsap` installed via npm.

---

### 1. Dependencies to Install
Install `react-player` and `gsap`.

### 2. Globals & Configuration (`src/index.css`)
Replace `index.css` with this exact Tailwind v4 and Google Fonts configuration:
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Manrope", sans-serif;
  --font-serif: "Instrument Serif", serif;
}
```

### 3. SpotlightReveal Component (`src/components/SpotlightReveal.tsx`)

An interactive cursor-following SVG spotlight mask. The user's mouse reveals a hidden video layer underneath a static image overlay. On mobile/touch devices, falls back to touch tracking.

```tsx
import { useEffect, useRef } from 'react';

interface SpotlightRevealProps {
  imageSrc: string;
  videoSrc: string;
  isPlaying?: boolean;
  baseRadius?: number;
}

export default function SpotlightReveal({
  imageSrc,
  videoSrc,
  isPlaying = true,
  baseRadius = 420,
}: SpotlightRevealProps) {
  const NUM_TRAILS = 6;
  const videoRef = useRef<HTMLVideoElement>(null);
  const pointsRef = useRef(
    Array.from({ length: NUM_TRAILS }, () => ({ x: -1000, y: -1000 }))
  );

useEffect(() => {
    if (videoRef.current) {
      if (isPlaying) {
        videoRef.current.play().catch(() => {});
      } else {
        videoRef.current.pause();
      }
    }
  }, [isPlaying]);

useEffect(() => {
    let targetX = window.innerWidth / 2,
      targetY = window.innerHeight / 2;
    const handleMouseMove = (e: MouseEvent) => {
      targetX = e.clientX;
      targetY = e.clientY;
    };
    window.addEventListener('mousemove', handleMouseMove);

let animationFrameId: number;
    const animate = () => {
      const points = pointsRef.current;
      points[0].x += (targetX - points[0].x) * 0.2;
      points[0].y += (targetY - points[0].y) * 0.2;
      for (let i = 1; i < points.length; i++) {
        points[i].x += (points[i - 1].x - points[i].x) * 0.35;
        points[i].y += (points[i - 1].y - points[i].y) * 0.35;
      }
      for (let i = 0; i < points.length; i++) {
        const circle = document.getElementById(`trail-${i}`);
        if (circle) {
          circle.setAttribute('cx', points[i].x.toString());
          circle.setAttribute('cy', points[i].y.toString());
        }
      }
      animationFrameId = requestAnimationFrame(animate);
    };
    animate();
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      cancelAnimationFrame(animationFrameId);
    };
  }, []);

return (
    <div className="absolute inset-0 w-full h-full z-0 bg-black pointer-events-none overflow-hidden flex items-center justify-center">
      <div className="absolute inset-0 w-full h-full flex items-center justify-center overflow-hidden pointer-events-none">
        <video
          ref={videoRef}
          src={videoSrc}
          className="absolute inset-0 w-full h-full object-cover"
          muted
          loop
          playsInline
        />
      </div>
      <svg
        className="absolute inset-0 w-full h-full"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <radialGradient id="holeGradient">
            <stop offset="0%" stopColor="black" stopOpacity="1" />
            <stop offset="60%" stopColor="black" stopOpacity="0.8" />
            <stop offset="100%" stopColor="black" stopOpacity="0" />
          </radialGradient>
          <mask
            id="spotlight-mask"
            maskContentUnits="userSpaceOnUse"
            x="0"
            y="0"
            width="100%"
            height="100%"
          >
            <rect width="100%" height="100%" fill="white" />
            {Array.from({ length: NUM_TRAILS })
              .reverse()
              .map((_, reversedIndex) => {
                const i = NUM_TRAILS - 1 - reversedIndex;
                return (
                  <circle
                    key={`trail-${i}`}
                    id={`trail-${i}`}
                    cx="-1000"
                    cy="-1000"
                    r={baseRadius - i * 35}
                    fill="url(#holeGradient)"
                    opacity={1 - i * 0.15}
                  />
                );
              })}
          </mask>
        </defs>
        <image
          href={imageSrc}
          width="100%"
          height="100%"
          preserveAspectRatio="xMidYMid slice"
          mask="url(#spotlight-mask)"
        />
      </svg>
    </div>
  );
}
```

**How it works:**
- A `<video>` plays fullscreen behind everything.
- An SVG `<image>` is overlaid on top, masked by a radial gradient mask.
- 6 trail circles follow the cursor with easing (leader at 0.2 lerp, followers at 0.35 lerp). Where the circles are, the mask cuts a hole revealing the video underneath.
- `baseRadius` controls the spotlight size (default 420 for section 1, 520 for this section 2).
- `isPlaying` toggles video play/pause via hover zones defined in the parent.

---

### 4. Section 2 Layout (`src/App.tsx`)

**Exact assets:**
- **Image overlay (static):** `https://github.com/dsMagnatov/Acreage-landing-assets/blob/main/02604201313.png?raw=true`
- **Video (revealed on hover):** `https://pikaso.cdnpk.net/private/production/4024859125/d070ae9c-55df-47aa-acbe-4ee66337855c-0.mp4?token=exp=1777075200~hmac=4202c1d0ec90137eb6dffa8e0db93ed7569a68b2016165d8b1b567f888869ff5`
- **SpotlightReveal baseRadius:** `520`

**Section container:**
```tsx
<section
  className="relative z-10 w-full h-[100dvh] overflow-hidden bg-black text-white"
  style={{ boxShadow: '0 -20px 50px rgba(0,0,0,0.5)' }}
>
```
- Full viewport height, black background, white text, top inset shadow for depth when scrolling.

**Element 1 -- SpotlightReveal background:**
```tsx
<SpotlightReveal
  imageSrc="https://github.com/dsMagnatov/Acreage-landing-assets/blob/main/02604201313.png?raw=true"
  videoSrc="https://pikaso.cdnpk.net/private/production/4024859125/d070ae9c-55df-47aa-acbe-4ee66337855c-0.mp4?token=exp=1777075200~hmac=4202c1d0ec90137eb6dffa8e0db93ed7569a68b2016165d8b1b567f888869ff5"
  isPlaying={isSecondVideoPlaying}
  baseRadius={520}
/>
```

**Element 2 -- Two invisible hover trigger zones (toggle video play/pause):**
```tsx
{/* Right-side hover zone */}
<div
  className="absolute right-[calc(8%+100px)] bottom-[12%] w-[calc(50%-50px)] h-[calc(50%+230px)] z-30"
  onMouseEnter={() => setIsSecondVideoPlaying(true)}
  onMouseLeave={() => setIsSecondVideoPlaying(false)}
/>
{/* Left-side hover zone */}
<div
  className="absolute left-[calc(8%+200px)] top-[calc(20%+190px)] w-[calc(15%+250px)] h-[calc(22.5%+130px)] -translate-y-full z-30"
  onMouseEnter={() => setIsSecondVideoPlaying(true)}
  onMouseLeave={() => setIsSecondVideoPlaying(false)}
/>
```
These are transparent interactive areas that trigger the video. Make them responsive: on mobile, simplify to a single full-width touch zone or auto-play the video.

**Element 3 -- Stats card (top-left area):**
Positioned `absolute left-[calc(8%+200px)] top-[20%] z-20`. Width `320px`. Glassmorphism card with:
- `background: rgba(0, 0, 0, 0.16)`, `backdrop-filter: blur(80px)`, `border: 1px solid rgba(255,255,255,0.1)`, `border-radius: 2px (rounded-sm)`.
- Padding: `px-8 py-6`.

Card contents:
1. **Big stat:** `78%` in `font-serif italic`, color `#DA3A16`, size `72px`, `leading-[80px]`, `tracking-tight`.
2. **Inline SVG chart** next to the stat (inside a `w-[11px]` wrapper, but the SVG itself is `width: 160px, height: 80px`). The chart is a wavy line in `#DA3A16` with a drop shadow filter in the same orange-red color. Exact SVG path:
```svg
<svg style="width:160px;height:80px" viewBox="0 0 289 138" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#filter0_d_878_28499)">
    <path d="M22.5 48.7306C39.7833 48.7306 49.34 54.94 63.1667 69.2965C76.9933 83.653 86.55 110.5 103.833 110.5C121.117 110.5 130.673 84.2876 144.5 59.2856C158.327 34.2837 167.883 19.5573 185.167 19.5573C202.45 19.5573 208.55 57.6673 225.833 57.6673C243.117 57.6673 249.217 19.5 266.5 19.5" stroke="#DA3A16" stroke-width="2"/>
  </g>
  <defs>
    <filter id="filter0_d_878_28499" x="0" y="0" width="289" height="138" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset dy="4"/>
      <feGaussianBlur stdDeviation="11.25"/>
      <feComposite in2="hardAlpha" operator="out"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0.854902 0 0 0 0 0.227451 0 0 0 0 0.0862745 0 0 0 1 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_878_28499"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_878_28499" result="shape"/>
    </filter>
  </defs>
</svg>
```
3. **Title:** `"NEXT-GEN CUSHIONING ARCHITECTURE"` -- `font-serif`, white, `text-[15px]`, `tracking-[0.02em]`, uppercase, `mb-2`, `leading-tight`.
4. **Subtitle:** `"Impact Absorption & Energy Return Dynamics"` -- `font-serif`, `text-white/60`, `text-[13px]`.

On mobile: reposition this card to `left-4 top-[15%]` or `top-auto bottom-[55%]`, reduce width to `w-[280px]`, scale the stat to `text-[48px]`.

**Element 4 -- Hero headline (bottom-left):**
Positioned `absolute left-[8%] bottom-[12%] z-20`, `max-w-[500px]`.

```html
<h2 class="text-[44px] leading-[1.05] tracking-tight flex flex-col">
  <span class="font-sans font-medium">Bringing Aerospace-</span>
  <span class="font-sans font-medium">Grade Infrastructure</span>
  <span class="font-serif font-normal pt-1">
    <span class="not-italic">Directly To Your </span>
    <span class="italic">Everyday</span>
  </span>
  <span class="font-serif italic font-normal">Urban Exploration</span>
</h2>
```

- Lines 1-2 use `font-sans` (Manrope) `font-medium`.
- Lines 3-4 use `font-serif` (Instrument Serif). Line 3 mixes non-italic "Directly To Your" with italic "Everyday". Line 4 is fully italic.
- On mobile: reduce to `text-[24px] sm:text-[32px] md:text-[44px]`, position `left-4 bottom-[8%]`, `max-w-[90%]`.

**Element 5 -- Nike branded CTA block (bottom-right):**
Positioned `absolute right-[calc(8%+100px)] bottom-[12%] z-20`, stacked vertically with `flex flex-col items-center`.

Two stacked boxes, each `w-[180px]`:
1. **Top box (white):** `bg-white`, `py-[6px]`, centered text: `"THE SCIENCE OF IMPACT CONTROL"` in `text-black font-serif text-[10px] uppercase font-bold tracking-[0.08em] leading-[16px]`.
2. **Bottom box (Nike red):** `bg-[#DA3A16]`, `h-[100px]`, centered Nike swoosh SVG in white, `width="86"`. Exact swoosh path:
```svg
<svg width="86" viewBox="135.5 361.38 420.32 149.8" fill="white" xmlns="http://www.w3.org/2000/svg">
  <path d="m181.86 511.11c-12.524-0.49755-22.77-3.9244-30.782-10.289-1.529-1.2159-5.1725-4.8616-6.3949-6.3992-3.2489-4.0853-5.4578-8.0611-6.931-12.472-4.5334-13.579-2.2002-31.397 6.6737-50.953 7.5979-16.742 19.322-33.347 39.776-56.344 3.013-3.384 11.986-13.281 12.043-13.281 0.0216 0-0.46749 0.84706-1.083 1.8786-5.3183 8.9082-9.8689 19.401-12.348 28.485-3.9823 14.576-3.502 27.085 1.4068 36.784 3.3862 6.6822 9.1913 12.47 15.719 15.67 11.428 5.5993 28.159 6.0625 48.592 1.3554 1.4068-0.32599 71.116-18.831 154.91-41.123 83.794-22.294 152.36-40.52 152.37-40.505 0.0237 0.0193-194.68 83.333-295.75 126.56-16.007 6.8431-20.287 8.5715-27.812 11.214-19.236 6.7551-36.467 9.9783-50.396 9.4251z"/>
</svg>
```

On mobile: reposition to `right-4 bottom-[8%]`, reduce width to `w-[140px]`, reduce box height to `h-[80px]`.

---

### 5. Color Palette
| Token | Value | Usage |
|---|---|---|
| Background | `#000000` | Section bg |
| Nike Red/Orange | `#DA3A16` | Stat text, chart stroke, chart glow shadow, Nike logo box |
| Text primary | `#FFFFFF` | Headlines, card title |
| Text muted | `rgba(255,255,255,0.6)` | Card subtitle (`text-white/60`) |
| Card bg | `rgba(0,0,0,0.16)` | Glassmorphism card |
| Card border | `rgba(255,255,255,0.1)` | Card border |
| CTA top box | `#FFFFFF` bg / `#000000` text | Label box |

### 6. Typography Rules
| Element | Font | Weight | Size | Style |
|---|---|---|---|---|
| Headline lines 1-2 | Manrope (`font-sans`) | 500 (medium) | 44px | Normal |
| Headline lines 3-4 | Instrument Serif (`font-serif`) | 400 (normal) | 44px | Italic (mixed on line 3) |
| Stat number | Instrument Serif | 400 | 72px | Italic |
| Card title | Instrument Serif | 400 | 15px | Normal, uppercase |
| Card subtitle | Instrument Serif | 400 | 13px | Normal |
| CTA label | Instrument Serif | 700 (bold) | 10px | Normal, uppercase |

### 7. Mobile Responsive Requirements

Implement these breakpoints:
- **< 640px (mobile):** Stack elements vertically. Stats card moves to top-center with reduced dimensions. Headline drops to `text-[24px]` at `left-4 bottom-[30%]`. Nike CTA block moves to center-bottom. Hover zones become a single full-area touch zone. Consider auto-playing the video on mobile since there's no hover. Reduce `baseRadius` to `280` on mobile.
- **640px-1024px (tablet):** Stats card shifts to `left-[5%] top-[18%]`, headline to `text-[32px]`. CTA block to `right-[5%]`.
- **> 1024px (desktop):** Use the exact desktop positions described above unchanged.

### 8. State Management
```tsx
const [isSecondVideoPlaying, setIsSecondVideoPlaying] = useState(false);
```
Controlled by the invisible hover zones. On mobile, default to `true` (auto-play) or use `onTouchStart`/`onTouchEnd`.

---27: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
```
<div
  className="relative flex flex-col px-6 md:px-8 pt-6 md:pt-8 pb-8 md:pb-10"
  style={{ backgroundColor: bg, minHeight: '100%' }}
>
```

### 1. Top labels row
```
<div
  className="flex items-start justify-between mb-auto"
  {...anim(visible, 0, { y: 12, duration: 1400 })}
>
```
- Left label: `<span className="text-xs font-normal" style={{ color: TEXT_COLOR }}>` — 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
```
<div
  className="flex flex-col items-center py-8"
  style={{ flex: 1, justifyContent: 'center', ...anim(visible, 300, { y: 40, duration: 1800 }).style }}
>
```

#### Image container
```
<div
  className="overflow-hidden"
  style={{
    width: 'clamp(140px, 40%, 220px)',
    aspectRatio: '220/340',
    backgroundColor: '#D9D9D9',
    borderRadius: '2px',
    flexShrink: 0,
  }}
>
  <img
    src={product.image}
    alt={product.name}
    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
  />
</div>
```

#### Caption (below image)
```
<div className="text-center mt-4" {...anim(visible, 600, { y: 10, duration: 1400 })}>
  <p className="text-sm font-normal" style={{ color: TEXT_COLOR }}>{product.name}</p>
  <p className="text-xs font-normal mt-1" style={{ color: TEXT_COLOR }}>{product.size}</p>
</div>
```

### 3. Bottom row — notes + button

```
<div className="flex items-end justify-between gap-4 flex-wrap">
```

#### Notes column (left side)
```
<div className="flex flex-col gap-0.5" {...anim(visible, 900, { y: 16, duration: 1400 })}>
```
For each note object, render a `<div key={note.ingredient}>` containing two `<p>` tags:
- Label: `<p className="text-xs leading-snug" style={{ color: TEXT_COLOR, fontWeight: noteStyle === 'bold' ? 700 : 400 }}>{note.label}</p>`
- Ingredient: `<p className="text-xs font-bold tracking-widest uppercase leading-snug" style={{ color: TEXT_COLOR }}>{note.ingredient}</p>`

#### SHOP NOW button (right side)
```
<button
  className="text-xs font-bold tracking-widest uppercase border px-6 py-3 relative group shrink-0"
  style={{
    color: TEXT_COLOR,
    borderColor: TEXT_COLOR,
    backgroundColor: 'transparent',
    ...anim(visible, 1150, { y: 16, duration: 1400 }).style,
  }}
>
  <span className="relative z-10 group-hover:text-black transition-colors duration-500">SHOP NOW</span>
  <span
    className="absolute inset-0 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-500 ease-out"
    style={{ backgroundColor: '#ffffff' }}
  />
</button>
```

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<HTMLDivElement>(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

```
<section ref={ref} className="relative w-full">
  <div className="flex flex-col md:grid md:min-h-screen" style={{ gridTemplateColumns: '1fr 1fr' }}>
```

Three children inside:

#### Child 1: ProductPanel (always visible)
```
<ProductPanel
  bg={BG_BLUE}
  product={SCENT_PRODUCT}
  notes={SCENT_PRODUCT.notes}
  visible={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`)
```
<div className="hidden md:block relative overflow-hidden" style={{ backgroundColor: '#111', minHeight: '100%' }}>
  <video autoPlay muted loop playsInline className="absolute inset-0 w-full h-full object-cover">
    <source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_151802_1bbf9a81-a7cb-4be1-b858-f1cd92b62b96.mp4" type="video/mp4" />
  </video>
</div>
```
- 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)
```
<div className="md:hidden relative overflow-hidden" style={{ height: '75vw', backgroundColor: '#111' }}>
  <video autoPlay muted loop playsInline className="absolute inset-0 w-full h-full object-cover">
    <source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_151802_1bbf9a81-a7cb-4be1-b858-f1cd92b62b96.mp4" type="video/mp4" />
  </video>
</div>
```
- 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 fill28:Tc00,Create a React web application using Vite and Tailwind CSS v4 that perfectly replicates a dark-themed glowing feature card section.

**Libraries Required:**
- React 19, Vite, Tailwind CSS v4
- `lucide-react` for icons
- `motion/react` (Framer Motion) for animations

**Global Page Layout:**
- Set the main wrapper to `min-h-screen bg-[#0A0A0B] flex flex-col items-center justify-center p-6 md:p-12 font-sans`.
- Create a CSS grid to hold the cards: `grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-3 lg:gap-3 w-full max-w-[936px]`.

**The Feature Card Component Requirements:**
- Build a reusable `<FeatureCard />` component taking `title`, `description`, `icon`, `gradient`, and `delay` props.
- Wrap the entire card in a `<motion.div>`.
- Card size restrictions wrapper: `relative flex flex-col justify-start items-start w-full max-w-[260px] md:max-w-[300px] group mx-auto`.
- **Glow Background (Crucial):** Create an absolute positioned `div` behind the card content with `w-full h-[260px] md:h-[300px] opacity-60 rounded-[40px] pointer-events-none`. Apply inline styles: `background: gradient` and `filter: "blur(45px)"`.
- **Foreground Card with Gradient Border (Crucial):** On top of the glow, create a relative container with `self-stretch h-[260px] md:h-[300px] rounded-[40px] z-10 overflow-hidden`.
- Apply an 8px solid transparent border to this foreground card.
- Use the background-clip technique strictly for the border gradient via inline styles:
  `background: linear-gradient(#1A1A1C, #1A1A1C) padding-box, ${gradient} border-box;`
- Content Inner Layout: Inside the foreground, use `w-full h-full p-7 flex flex-col justify-between`.
- Icons should have `size={32}` and `strokeWidth={2.5}`, wrapped in a `text-white/90` div.
- Titles: `text-white font-medium text-xl mb-3 tracking-tight`.
- Descriptions: `text-gray-400 text-[14px] leading-[1.6] font-normal selection:bg-white/20`.

**Animations (Framer Motion):**
- The main `<motion.div>` wrapper should animate as follows:
  - Initial state: `{ opacity: 0, y: 30 }`
  - Animate state: `{ opacity: 1, y: 0 }`
  - Transition: `{ duration: 0.8, ease: "easeOut", delay }`

**Data for the 3 Cards:**
Instantiate three of these cards inside the main grid with the following exact data:

1. **Card 1 ("Hardware"):** 
   - Icon: `<Monitor />` from lucide-react. 
   - Delay: `0.1`
   - Description: "My entire desktop setup is built for power. It is silent, durable, and holds my focus."
   - Gradient: `linear-gradient(137deg, #FF3D77 0%, #FFB1CE 45%, #FF9D3C 100%)`

2. **Card 2 ("Studio"):** 
   - Icon: `<Palette />` from lucide-react. 
   - Delay: `0.2`
   - Description: "Studio is where I define every single pixel. It is the hub for each canvas I deliver."
   - Gradient: `linear-gradient(137deg, #FFFFFF 0%, #7DD3FC 45%, #06B6D4 100%)`

3. **Card 3 ("Motion"):** 
   - Icon: `<Zap />` from lucide-react. 
   - Delay: `0.3`
   - Description: "I use Motion to build lively prototypes, bridging the gap between views and code."
   - Gradient: `linear-gradient(137deg, #4361EE 0%, #E0AEFF 45%, #F72585 100%)`29:T2f41,# Core Features Section

Build a single React + TypeScript + Tailwind + framer-motion section called `CoreFeaturesSection`. Match every detail below exactly.

## Stack & Global Setup

- React 18, Vite, TypeScript, TailwindCSS, `framer-motion`, `clsx` + `tailwind-merge` (helper `cn`).
- Dark theme. Page background `#000000` (set on `body`).
- Font: **Inter** (Google Fonts, weights 300–700) as default sans.
- Icons: **Material Symbols Rounded** via Google Fonts link:
  `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200`
- Tailwind tokens (HSL): `--background: 270 80% 3%;` `--foreground: 0 0% 100%;` mapped to `background` / `foreground`.
- Extra Tailwind color: `landing.surface: rgba(255,255,255,0.10)`.

## Helper: `cn`
```ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export const cn = (...i: ClassValue[]) => twMerge(clsx(i));
```

## Material Icon component (`MIcon`)
```tsx
export const MIcon = ({ name, size = 16, className = "" }:{name:string;size?:number;className?:string}) => (
  <span
    className={`material-symbols-rounded ${className}`}
    style={{ fontSize: size, fontVariationSettings: `"FILL" 0, "wght" 400, "GRAD" 0, "opsz" ${size}` }}
  >{name}</span>
);
```

## `FadeUp` primitive (scroll reveal)
- `framer-motion` `motion.div`. `initial={{opacity:0,y:24}}`, `whileInView={{opacity:1,y:0}}`, `viewport={{once:true,amount:0.3}}`, `transition={{duration:0.6,delay,ease:[0.22,1,0.36,1]}}`. Respect `useReducedMotion` (no y offset).

## `SpotlightBorder` (mouse-tracked 1px gradient border)
- Wrapper with `position:relative` + chosen radius (`rounded-xl|2xl|3xl|full`).
- Listens to `window` `mousemove`; sets CSS vars `--spot-x`, `--spot-y` from `getBoundingClientRect`.
- Absolutely positioned `<span>` overlay with:
```ts
{
  background: `radial-gradient(${size}px circle at var(--spot-x,-200px) var(--spot-y,-200px), rgba(255,255,255,${intensity}), rgba(255,255,255,0) 60%)`,
  padding: "1px",
  WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
  WebkitMaskComposite: "xor",
  maskComposite: "exclude",
}
```
- Props: `radius`, `size` (px), `intensity` (0–1). Used three times in this section with sizes 360/600/360 and intensity 0.5.

## Tab data (exact URLs, order matters)
```ts
const tabs = [
  { label: "Exclusive Tutorial",
    image: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260521_222821_06fd2e74-16a5-4e7f-90ed-14e6760e7edb.png&w=1280&q=85",
    caption: "Step-by-step guides to master AI design tools." },
  { label: "Courses",
    image: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260521_222901_b133c5f0-191c-4285-a018-a68fd9c9f5ac.png&w=1280&q=85",
    caption: "Structured learning paths to level up your skills." },
  { label: "Templates",
    image: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260521_225713_3226e3ad-3364-42b1-99bd-ed82005c0524.png&w=1280&q=85",
    caption: "Production-ready designs you can customize instantly." },
  { label: "Animated Backgrounds",
    image: "https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260521_222832_223716d0-9b6c-4c48-98a6-a5e3c02e2962.png&w=1280&q=85",
    caption: "Motion-ready visuals that bring your projects to life." },
];
```

## Behavior
- `active` state, default `0`. `pausedRef = useRef(false)`.
- `setInterval` every **5000ms**: if not paused, `active = (active+1) % 4`.
- Arrow buttons & tab clicks set `pausedRef.current = true` (auto-rotation stops after first user interaction).

## Section Layout

```tsx
<section className="relative w-full bg-background py-12 sm:py-16">
  <div className="mx-auto max-w-[1180px] px-4 sm:px-6">
```

### Header row (flex, stacks on mobile)
- Left column `max-w-2xl`:
  - Pill (FadeUp d=0): `inline-flex items-center gap-2 rounded-full bg-landing-surface border border-white/10 px-3 py-1 text-xs text-foreground/80 backdrop-blur` with `1.5x1.5` dot `bg-foreground/70` + text "Core Features".
  - Heading (FadeUp d=0.1): `text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground`. Content: `One platform to run your<br className="hidden sm:block"/><span className="text-foreground/55"> entire AI design journey.</span>`
- Right (FadeUp d=0.2, `max-w-sm md:pt-2`): paragraph `text-sm sm:text-base leading-relaxed text-foreground/65`: "UI Rocket brings your lessons, templates, tools, and community into one space — so you stop switching between tabs and start shipping real AI-powered work."
- Wrapper: `mb-14 flex flex-col gap-10 md:flex-row md:items-end md:justify-between`.

### Tab pills (desktop only)
`SpotlightBorder radius="full" size={360} intensity={0.5}` `mx-auto mb-6 hidden w-full p-1 sm:block`.
Inside: `grid grid-cols-2 sm:grid-cols-4 gap-1 rounded-full p-1`.
Each button: `rounded-full px-4 py-2.5 text-sm transition-colors duration-300`. Active: `bg-white/[0.06] text-foreground border border-white/15`. Inactive: `text-foreground/55 hover:text-foreground/80 border border-transparent`. Click → `select(i)`.

### Image stage
`SpotlightBorder radius="2xl" size={600} intensity={0.5}` `relative mx-auto w-full p-2 sm:p-3`.
Inner: `relative overflow-hidden rounded-2xl border border-white/10` with inline `style={{ backgroundColor:"#0e0e0e" }}`.
Aspect frame: `relative aspect-[16/10] w-full`.

Render all 4 `<img>` absolutely stacked (`absolute inset-0 h-full w-full object-cover transition-opacity duration-400`). Active one `opacity-100`, others `opacity-0`. Use `loading="eager" decoding="async"`.

Overlay all 4 `TabDashboardMock` panels (absolute, fade). Wrapper per mock:
`absolute inset-1 flex items-center justify-center p-[3%] sm:p-[4%] transition-opacity duration-300` + active `opacity-100` else `opacity-0 pointer-events-none`.

Mock list (label → title, activeNav):
- Courses → "Courses" / "Courses"
- Templates → "Templates" / "Templates"
- Animated Backgrounds → "Animated Backgrounds" / "Backgrounds"
- Exclusive Tutorial → "Exclusive Tutorials" / "Tutorials"

### Arrow / caption bar
`SpotlightBorder radius="full" size={360} intensity={0.5}` `mx-auto mt-6 w-full p-1`.
Inside: `flex items-center justify-between gap-4 rounded-full px-3 py-2`.
- Left/right buttons: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-foreground/80 transition-colors hover:bg-white/[0.08] hover:text-foreground`. Icons: `arrow_back` / `arrow_forward` size 16. Click → `go(-1)` / `go(1)`.
- Center caption box: `min-h-[1.5rem] flex-1 overflow-hidden text-center`. Use `AnimatePresence mode="wait"` + `motion.p` keyed by `tabs[active].label`, initial `{opacity:0,y:6}`, animate `{opacity:1,y:0}`, exit `{opacity:0,y:-6}`, `duration 0.25`. Classes `px-2 text-sm text-foreground/75`. Mobile shows label (`sm:hidden font-medium text-foreground`), desktop shows `tabs[active].caption` (`hidden sm:inline`).

## `TabDashboardMock` (auto-scaled dashboard preview)

Fixed design canvas **900 × 562** (16:10). Outer wrapper measures itself with `ResizeObserver` and sets `transform: scale(min(w/900, h/562))`, `transformOrigin: center center`, `flexShrink: 0`.

Wrapper: `relative h-full w-full overflow-hidden flex items-center justify-center`.
Inner card (the 900×562 box): `flex overflow-hidden rounded-2xl bg-white/[0.04] backdrop-blur-xl shadow-2xl`.

### Sidebar (`w-[210px]`, `flex flex-col gap-1 p-3`)
- Brand row: `mb-3 flex items-center justify-between px-2 py-2`.
  - Left: icon box `flex h-6 w-6 items-center justify-center rounded-md` with inline gradient `linear-gradient(135deg, rgb(158,103,250), rgb(254,106,187) 50%, rgb(255,156,101))`, `MIcon "rocket_launch" size={14} className="text-white"`, label `text-[13px] font-semibold text-white` = "UI Rocket".
  - Right: `MIcon "search" size={14} className="text-white/40"`.
- Nav list (`flex flex-col gap-0.5`). Items:
  Dashboard/`grid_view`, Courses/`school`, Templates/`dashboard`, Tutorials/`play_circle`, Backgrounds/`auto_awesome`, Pricing/`sell`.
  Item base: `flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[12px] transition-colors`. Active: `bg-white/[0.08] text-white`. Inactive: `text-white/55 hover:text-white/80`. Icon size 14.

### Main column (`flex min-w-0 flex-1 flex-col p-3`)
Inside: `flex h-full w-full flex-col overflow-hidden rounded-2xl bg-black/20`.
Header: `flex items-center justify-between px-4 py-3`.
- Left group: blue square `flex h-7 w-7 items-center justify-center rounded-md bg-[rgb(59,130,246)] text-white` + `MIcon "add" size={16}`. Title `text-base font-semibold text-white` = `title` prop.
- Right group (`flex items-center gap-2.5`): `MIcon "notifications" size={16} text-white/60`, pill `rounded-full bg-[rgb(59,130,246)] px-2.5 py-1 text-[11px] font-medium text-white` = "Invite", avatar `h-7 w-7 rounded-full bg-cover bg-center ring-1 ring-white/10` with `backgroundImage: url(https://i.pravatar.cc/64?img=12)`.
Body: `flex-1 overflow-hidden px-4 pb-4`. Render `children` here.

## Tab content panels (children passed to mock)

Each panel fills the body with a small grid of cards in the same monochrome white-alpha style (`bg-white/[0.04] border border-white/10 rounded-xl`, headings `text-white text-[13px] font-medium`, body `text-white/60 text-[11px]`). Compose roughly:

- **CoursesTabContent**: 2×3 grid of course cards. Each card: 16:9 thumb using the module covers below; title; meta row "X lessons · Y min" in `text-white/50 text-[10px]`.
- **TemplatesTabContent**: 3×2 grid of template cards with browser-frame thumbnails (3 dots row) using the same module covers as placeholder; small "Premium" pill `bg-white/10 text-[10px] rounded-full px-2 py-0.5`.
- **BackgroundsTabContent**: 3×2 grid of looping `<video autoplay muted loop playsinline>` tiles. Sources: use the CloudFront MP4s in the assets list. Overlay play icon (see asset) bottom-right.
- **ExclusiveTutorialTabContent**: featured large card (left, 60%) + 3 stacked rows (right, 40%). Featured uses tutorial thumbnail with floating play icon, title, "12 min · Pro" meta. Each row: 64x40 thumb + 2-line title + meta.

Assets (use exact URLs):
- Play icon SVG:
  `https://miptxtnhvjrkpmnjgdhk.supabase.co/storage/v1/object/public/training-assets/landing/play_icon.svg`
- Module / template cover thumbnails (cycle through):
  - `https://miptxtnhvjrkpmnjgdhk.supabase.co/storage/v1/object/public/training-assets/landing/module-cover-1.png`
  - `.../module-cover-2.png`
  - `.../module-cover-3.png`
  - `.../module-cover-4.png`
  - `.../module-cover-5.png`
  - `.../module-cover-6.png`
- Tutorial thumbnails: reuse the four `images.higgs.ai` URLs from the tabs array.
- Background videos (CloudFront, use as `<video>` `src`):
  - `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260521_014404_bg1.mp4`
  - `.../hf_20260521_014404_bg2.mp4` … through `bg6.mp4`
  (If a specific URL 404s, fall back to the matching higgs.ai poster image as a static tile.)

## Putting it together
```tsx
<CoreFeaturesSection />
```
Mount inside a page with `bg-background text-foreground font-inter antialiased`. No other dependencies.

## Acceptance checklist
- [ ] 4 tabs auto-rotate every 5s until user interacts, then stop.
- [ ] SpotlightBorder shows a soft white radial highlight that follows the cursor on all three bordered shells.
- [ ] Image cross-fades over 400ms; caption cross-fades with 6px y motion (250ms).
- [ ] TabDashboardMock scales as a single unit to fit its container while preserving 900×562 internal layout.
- [ ] Sidebar active item highlighted matches the visible tab.
- [ ] Header, pill, paragraph use Inter, exact tracking and color tokens specified.
- [ ] All asset URLs above load directly (no local imports).2a:T2a46,Build a dark-themed FAQ section for a React 18 + Vite + TypeScript app using TailwindCSS, framer-motion, and Radix UI Accordion. Match these specs exactly.

## Stack & Global Setup

- React 18, Vite, TypeScript, TailwindCSS
- Dependencies: `framer-motion`, `@radix-ui/react-accordion`, `clsx`, `tailwind-merge`
- `cn()` helper: `twMerge(clsx(inputs))` exported from `@/lib/utils`
- Dark theme background `#000000`, font `Inter`, Material Symbols Outlined for icons
- Tailwind `theme.extend.colors`:
  - `landing.surface: "rgba(255,255,255,0.10)"`
  - `landing.surface-hover: "rgba(255,255,255,0.16)"`
  - `border: "rgba(255,255,255,0.10)"`
  - `foreground: "hsl(0 0% 100%)"` (semantic; use `text-foreground`, `text-foreground/60`, `text-foreground/70`, `text-foreground/80`)
  - `background: "#000000"` (semantic)

## Helper Components

### MIcon (Material Symbols Outlined)
```tsx
type Props = { name: string; size?: number; className?: string; fill?: 0|1; weight?: number; grade?: number; opsz?: number };
export const MIcon = ({ name, size=20, className, fill=0, weight=400, grade=0, opsz=24 }: Props) => (
  <span
    className={cn("material-symbols-outlined leading-none", className)}
    style={{ fontSize: size, fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opsz}` }}
  >{name}</span>
);
```
Include in `index.html`:
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
```

### FadeUp (framer-motion scroll reveal)
- `motion.div`, `initial={{opacity:0, y:24}}`, `whileInView={{opacity:1, y:0}}`, `viewport={{once:true, amount:0.3}}`, `transition={{duration:0.6, delay, ease:[0.22,1,0.36,1]}}`. Honors `useReducedMotion`.

### SpotlightBorder (cursor-tracked 1px gradient ring)
- Wrapper `relative` with `rounded-{radius}` (xl/2xl/3xl/full).
- Inside, an absolute-inset `<span>` with style:
```ts
{
  background: `radial-gradient(${size}px circle at var(--spot-x,-200px) var(--spot-y,-200px), rgba(255,255,255,${intensity}), rgba(255,255,255,0) 60%)`,
  padding: "1px",
  WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
  WebkitMaskComposite: "xor",
  maskComposite: "exclude",
}
```
- Global mousemove listener writes `--spot-x` / `--spot-y` on the element (relative to its bounding rect).
- Polymorphic `as`: div | button | section. Export both the component and `spotlightMaskStyle(size, intensity)` helper for reuse inline.

### Radix Accordion wrapper (shadcn-style)
`Accordion`, `AccordionItem` (`border-b` default), `AccordionTrigger` (flex justify-between, hides built-in chevron when class includes `[&>svg]:hidden`), `AccordionContent` (with `data-[state=open]:animate-accordion-down`, `data-[state=closed]:animate-accordion-up`). Use standard shadcn accordion file.

Tailwind keyframes (in config):
```js
keyframes: {
  "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" } },
  "accordion-up":   { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" } },
},
animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out" }
```

## Data

```ts
type CategoryKey = "general" | "ai" | "integrations";
const categories = [
  { key: "general", label: "General" },
  { key: "ai", label: "AI & Capabilities" },
  { key: "integrations", label: "Integrations & Security" },
];
const faqs: Record<CategoryKey, {q:string; a:string}[]> = {
  general: [
    { q: "What is UI Rocket?", a: "UI Rocket is a learning platform for designers who want to master AI-powered design workflows and ship production-ready websites faster." },
    { q: "Who is this for?", a: "Designers, founders, and creators who want to level up their AI design skills and build real, shippable products." },
    { q: "Do I need prior design experience?", a: "No. The curriculum starts from fundamentals and progressively builds toward advanced AI-driven workflows." },
    { q: "How long does it take?", a: "Most members make meaningful progress within a few weeks of consistent practice." },
    { q: "Is there a community?", a: "Yes. You get access to a private community of designers and founders building with AI." },
  ],
  ai: [
    { q: "Which AI tools do you cover?", a: "We focus on Lovable, Figma AI, image generation models, and the workflows that tie them together into a real design process." },
    { q: "Will AI replace designers?", a: "No. Designers who use AI fluently will replace those who don't. The course teaches you to be the former." },
    { q: "Do I need API keys?", a: "No. Everything you need is included — no separate API keys, subscriptions, or hidden setup." },
    { q: "Can I use these skills with any tool?", a: "Yes. The principles transfer across tools — you'll learn frameworks, not button-clicks." },
    { q: "How often is the content updated?", a: "Regularly. As AI tools evolve, we update the curriculum so you're always learning what's current." },
  ],
  integrations: [
    { q: "Which tools does UI Rocket integrate with?", a: "UI Rocket works alongside Lovable, Figma, and the most common modern design and dev tools." },
    { q: "Is my data secure?", a: "Yes. Your data is encrypted in transit and at rest, and never shared with third parties." },
    { q: "Is my data used to train AI models?", a: "No. Your work and account data are never used to train AI models." },
    { q: "Who can access our workspace data?", a: "Only members you explicitly invite. Access is fully under your control." },
    { q: "Where is my data stored?", a: "On secure cloud infrastructure with industry-standard compliance and backups." },
  ],
};
```

## Section Layout (`FaqSection.tsx`)

- `<section id="faq" className="relative w-full bg-background py-12 sm:py-16">`
- Inner container: `mx-auto max-w-[1080px] px-4 sm:px-6`

### Header (top, two-column on lg)
- Flex column on mobile, `lg:flex-row lg:items-end lg:justify-between`, `mb-14`, `gap-10`.
- Left block (`max-w-2xl`):
  - Pill (FadeUp delay 1): `inline-flex items-center gap-2 rounded-full bg-landing-surface border border-white/10 px-3 py-1 text-xs text-foreground/80 backdrop-blur`, with leading `1.5×1.5` dot `bg-foreground/70`, label "FAQ".
  - Heading (FadeUp delay 0.1): `text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground` — "Answers to the questions" `<br className="hidden sm:block"/>` " that come up most."
- Right paragraph (FadeUp delay 0.2): `max-w-sm text-sm sm:text-base text-foreground/60` — "Learn how UI Rocket works, what it covers, how the workflow flows, and what you can expect day to day."

### Body grid
`grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-8 lg:gap-12 items-stretch`

#### Left column (sticky category list + "Got Questions" card)
- Outer `flex flex-col gap-4 lg:h-full`.
- Top wrapper `lg:flex-1` containing a `SpotlightBorder` (radius `2xl`, size 280) with classes `flex flex-col p-2 sm:p-3 lg:sticky lg:top-24`.
  - Inside, map `categories`. Each item is itself a `SpotlightBorder as="button" radius="full" size={200} intensity={0.4}` with classes:
    - Base: `w-full text-center px-5 py-3 text-sm transition-colors`
    - Active: `bg-landing-surface border border-white/10 text-foreground`
    - Inactive: `border border-transparent text-foreground/60 hover:text-foreground`
  - `onClick` sets `active` state (`useState<CategoryKey>("general")`).
- Bottom "Got Questions?" card: `SpotlightBorder` radius `2xl` size 360 with `mt-8 lg:mt-0 p-2 sm:p-3`, containing nested `SpotlightBorder` radius `2xl` size 260 intensity 0.4 with `border border-white/10 bg-landing-surface p-6`:
  - `<h3 className="text-lg font-semibold text-foreground">Got Questions?</h3>`
  - `<p className="mt-2 text-sm text-foreground/60 leading-relaxed">Need help with something? Our team is here to make things easy. Don't hesitate to reach out.</p>`
  - `<a href="mailto:hello@uirocket.com" className="mt-6 inline-flex items-center gap-1 text-sm text-foreground hover:text-foreground/80">Email us <span aria-hidden>→</span></a>`

#### Right column (accordion)
- Outer `SpotlightBorder radius="2xl" size={360} className="p-2 sm:p-3"`.
- Inside: `<Accordion type="single" collapsible className="flex flex-col gap-3">`.
- Use `itemRefs = useRef<Array<HTMLDivElement|null>>([])` and a `useEffect` that adds a `mousemove` listener writing `--spot-x`/`--spot-y` on each item's bounding rect (so each card has its own spotlight).
- Map `faqs[active]`. Each entry wrapped in `<FadeUp delay={0.15 * idx} key={`${active}-${idx}`}>`.
- `AccordionItem`:
  - `value={`${active}-${idx}`}`, ref into `itemRefs`.
  - Classes: `relative rounded-2xl border border-white/10 bg-landing-surface px-6 [&[data-state=open]]:bg-landing-surface-hover`
  - Inside, an absolute-inset `<span aria-hidden className="pointer-events-none absolute inset-0 rounded-2xl" style={spotlightMaskStyle(260, 0.4)} />` to render the per-card spotlight ring.
- `AccordionTrigger`: `py-7 text-left text-sm sm:text-base font-medium text-foreground hover:no-underline [&>svg]:hidden`
  - Children: `<span className="flex-1 pr-4">{q}</span>` and a 28px circular icon button: `flex h-7 w-7 items-center justify-center rounded-full border border-white/15 bg-white/[0.04] text-foreground/70 transition-transform duration-200 group-data-[state=open]:rotate-180`, containing `<MIcon name="expand_more" size={16} />`.
- `AccordionContent`: `pb-7 text-sm text-foreground/60 leading-relaxed` — render `{a}`.

## Behavior

- Switching category re-keys the AccordionItem `value` prefix so all items collapse when category changes.
- Only one item open at a time (`type="single" collapsible`).
- Spotlight ring follows mouse on the outer wrapper containers AND on every individual accordion item independently.
- All entrance animations use FadeUp; reduced-motion disables translate but keeps opacity.

## Acceptance Checklist

- Dark `#000000` background, Inter text, max width 1080px.
- Header: small pill with dot + "FAQ", large heading "Answers to the questions / that come up most.", right-side paragraph aligned to bottom on lg.
- Two-column body: left 280px sticky category list with pill buttons (active = filled surface, inactive = transparent), plus "Got Questions?" card with email CTA arrow.
- Right column: cards stacked with `gap-3`, rounded-2xl, surface fill, open state slightly brighter, 28px circular chevron button rotating 180° on open, content fades/animates via Radix accordion keyframes.
- 1px spotlight ring follows cursor on every SpotlightBorder wrapper and every accordion card.
- Scroll-in FadeUp stagger on header items and on each FAQ row (`0.15 * idx`).
- Switching categories collapses any open item and swaps the question list.2b:T3168,---

# Prompt to Recreate the Nimbus Grid Platform Accordion Section (Standalone)

Build a standalone single-section page: the "Platform Accordion" from Nimbus Grid. Use plain HTML, CSS, and vanilla JS (Vite project, no frameworks). Match every detail below exactly.

---

## Global Setup

**Fonts (Google Fonts, preconnect both `fonts.googleapis.com` and `fonts.gstatic.com`):**
- `IBM Plex Sans` weights 400, 500
- `IBM Plex Mono` weights 400, 500

**CSS variables on `:root`:**
```css
:root {
  color-scheme: dark;
  --bg: #17130d;
  --ink: #fff4d5;
  --muted: #dacaa1;
  --line: rgba(255, 240, 199, 0.28);
  --glass: rgba(255, 239, 199, 0.16);
  --glass-strong: rgba(255, 239, 199, 0.24);
  --accent: #ead09a;
  --accent-2: #ffd879;
  --deep: #4d3f24;
  --radius: 8px;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
}
```

**Resets:** Universal `box-sizing: border-box`. `html { scroll-behavior: smooth; }`. Body: `margin: 0`, background `var(--bg)`, color `var(--ink)`, `font-family: var(--font-sans)`, `font-size: 1rem`, `font-weight: 400`, `line-height: 1.375`, `letter-spacing: 0.0175rem`, antialiased (`-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale`). Anchors: `color: inherit; text-decoration: none;`. All headings/paragraphs: `margin-top: 0`.

**Screen-reader utility:**
```css
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
```

---

## Section: `.platform-accordion`

`<section class="platform-accordion" id="platform">` with a screen-reader-only `<h2 class="sr-only">` inside.

**Outer container styles:**
```css
.platform-accordion {
  position: relative;
  min-height: 420svh;
  border-top: 1px solid rgba(255, 240, 199, 0.1);
  background:
    radial-gradient(circle at 86% 30%, rgba(234, 208, 154, 0.13), transparent 24rem),
    #050604;
}
```

### `.accordion-inner` (sticky viewport frame)

```css
.accordion-inner {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(160px, 0.22fr) minmax(0, 0.78fr);
  gap: clamp(28px, 5vw, 72px);
  height: 100svh;
  padding: clamp(48px, 7vw, 86px) clamp(20px, 5vw, 72px);
  overflow: hidden;
}
```

---

### Left column: `.accordion-nav`

`<div class="accordion-nav" role="tablist">` containing 4 `<button class="accordion-tab">` elements. First button gets class `.active`.

**Tab labels (in order):**
1. `Programmable infra`
2. `Data residency`
3. `Elastic scaling`
4. `Unified visibility`

Each button has `data-accordion-tab="infra|residency|scaling|visibility"` respectively, `role="tab"`, `aria-selected="true|false"`.

```css
.accordion-nav {
  align-self: start;
  display: grid;
  gap: 16px;
  padding-top: 14px;
}

.accordion-tab {
  position: relative;
  border: 0;
  background: transparent;
  color: rgba(255, 247, 222, 0.38);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1rem;
  letter-spacing: 0.08rem;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease;
}

.accordion-tab::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 12px;
  border-radius: 1px;
  background: currentColor;
  vertical-align: 1px;
}

.accordion-tab.active {
  color: var(--accent);
  transform: translateX(2px);
}
```

---

### Right column: `.accordion-stack`

`<div class="accordion-stack" aria-live="polite">` containing 4 `<article class="accordion-card">` elements. First card gets class `.active`.

Each card has `data-accordion-card="infra|residency|scaling|visibility"`.

```css
.accordion-stack {
  position: relative;
  height: min(80svh, 820px);
  align-self: center;
  overflow: hidden;
}

.accordion-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.35fr) minmax(340px, 0.65fr);
  border-top: 1px solid rgba(255, 247, 222, 0.2);
  background: #050604;
  transform: translateY(var(--card-y, 100%));
  clip-path: inset(0 0 var(--card-clip-bottom, 0px) 0);
  will-change: transform, clip-path;
}
```

---

### Card inner structure (each card)

**Left: `.accordion-copy`**
```html
<div class="accordion-copy">
  <h3>[Card title]</h3>
  <p>[Card description]</p>
</div>
```

```css
.accordion-copy {
  padding: 26px 30px 0 0;
}

.accordion-card h3 {
  margin-bottom: 28px;
  color: var(--ink);
  font-size: clamp(24px, 2.2vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.0125rem;
}

.accordion-card p {
  max-width: 340px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.4vw, 22px);
  line-height: 1.55;
}
```

**Right: `.accordion-visual`**

Gold gradient panel containing a dark code window.

```css
.accordion-visual {
  min-height: 100%;
  padding: clamp(34px, 5vw, 64px);
  background:
    linear-gradient(135deg, rgba(234, 208, 154, 0.92), rgba(106, 91, 52, 0.68)),
    radial-gradient(circle at 15% 20%, rgba(255, 247, 222, 0.65), transparent 20rem);
  overflow: hidden;
}
```

**Code window (`.code-window`):**
```css
.code-window {
  width: min(420px, 100%);
  margin-inline: auto;
  padding: 18px 20px 24px;
  border-radius: 8px;
  background: rgba(8, 10, 10, 0.88);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
}

.metric-window {
  margin-top: clamp(18px, 5vw, 70px);
}

[data-accordion-card="infra"] .code-window {
  margin-top: 40px;
}

[data-accordion-card="visibility"] .metric-window {
  margin-top: clamp(12px, 3.75vw, 52px);
}

.code-window > span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: rgba(255, 247, 222, 0.56);
}

.code-window pre {
  margin: 22px 0 0;
  color: rgba(255, 247, 222, 0.82);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.55;
  letter-spacing: 0;
  white-space: pre-wrap;
}
```

Each code window has 3 `<span></span>` dot elements (the 3 macOS-style dots), then a `<pre><code>` block.

---

### Card content (exact text)

**Card 1 — `infra`:**
- Title: `Programmable infra`
- Description: `Define storage pools, quotas, regions, and access policy in code so every workspace ships with the same controls.`
- Code window (no `.metric-window` class):
```
01  storage_pool = {
02    name      = "client-vault"
03    region    = "eu-central"
04    quota     = "24 TiB"
05    policy    = encrypted_fast
06  }
```

**Card 2 — `residency`:**
- Title: `Data residency`
- Description: `Pin departments and client workspaces to approved regions with retention and encryption rules attached from day one.`
- Code window (class: `.code-window .metric-window`):
```
Region policy

EU Central     locked
US East        allowed
AP Southeast   review
Retention      7 years
```

**Card 3 — `scaling`:**
- Title: `Elastic scaling`
- Description: `Expand capacity before teams hit limits, route large transfers through faster lanes, and keep procurement predictable.`
- Code window (class: `.code-window .metric-window`):
```
Capacity forecast

Used       18.4 TiB
Reserved   24 TiB
Burst      ready
Next tier  approved
```

**Card 4 — `visibility`:**
- Title: `Unified visibility`
- Description: `Track growth, usage pressure, inactive files, and compliance drift from a single operational surface.`
- Code window (class: `.code-window .metric-window`):
```
Operations view

Sync health       stable
Cold data         14%
Policy drift       0
Audit export      live
```

---

## JavaScript: Scroll-driven accordion

```js
const accordionSection = document.querySelector(".platform-accordion");
const accordionTabs = Array.from(document.querySelectorAll("[data-accordion-tab]"));
const accordionCards = Array.from(document.querySelectorAll("[data-accordion-card]"));

function updateScrollAccordion() {
  if (!accordionSection || !accordionCards.length) return;

const rect = accordionSection.getBoundingClientRect();
  const scrollable = Math.max(1, rect.height - window.innerHeight);
  const progress = Math.min(1, Math.max(0, -rect.top / scrollable));
  const maxIndex = accordionCards.length - 1;
  const rawIndex = progress * maxIndex;
  const activeIndex = Math.min(maxIndex, Math.max(0, Math.round(rawIndex)));
  const stack = document.querySelector(".accordion-stack");
  const stackHeight = stack ? stack.clientHeight : window.innerHeight * 0.74;
  const collapsedHeight = window.innerWidth <= 820 ? 96 : 84;

const cardPositions = accordionCards.map((_, index) => {
    let y = 0;
    if (index > 0) {
      const segmentProgress = Math.min(1, Math.max(0, rawIndex - (index - 1)));
      const startY = stackHeight + collapsedHeight;
      const endY = index * collapsedHeight;
      y = startY + (endY - startY) * segmentProgress;
    }
    return Math.round(y);
  });

accordionCards.forEach((card, index) => {
    const y = cardPositions[index];
    const nextY = cardPositions[index + 1];
    const visibleHeight = typeof nextY === "number"
      ? Math.max(collapsedHeight, Math.min(stackHeight, nextY + 2))
      : stackHeight;
    const clipBottom = Math.max(0, stackHeight - visibleHeight);

card.style.setProperty("--card-y", `${Math.round(y)}px`);
    card.style.setProperty("--card-clip-bottom", `${Math.round(clipBottom)}px`);
    card.style.zIndex = String(index + 1);
  });

const activeCard = accordionCards[activeIndex];
  if (activeCard) activateAccordionPanel(activeCard.dataset.accordionCard);
}

// Tab click scrolls to the correct segment
accordionTabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    if (!accordionSection || !accordionCards.length) return;
    const index = accordionCards.findIndex(
      (card) => card.dataset.accordionCard === tab.dataset.accordionTab
    );
    const maxIndex = accordionCards.length - 1;
    const scrollable = accordionSection.offsetHeight - window.innerHeight;
    const target = accordionSection.offsetTop + (index / maxIndex) * scrollable;
    window.scrollTo({ top: target, behavior: "smooth" });
  });
});

window.addEventListener("scroll", updateScrollAccordion, { passive: true });
window.addEventListener("resize", updateScrollAccordion);
updateScrollAccordion();
```

**How the scroll math works:**
- The section is `420svh` tall. As the user scrolls through it, `progress` goes from 0 to 1.
- `rawIndex` maps progress to a float 0..3 (for 4 cards).
- Each card starts off-screen at `stackHeight + collapsedHeight` px below, then slides up to `index * collapsedHeight` (84px desktop, 96px mobile) — stacking as visible header strips.
- `clip-path: inset(0 0 VAR 0)` clips the bottom of each card so only the header strip shows when another card sits on top.
- The active card (nearest integer index) is fully revealed (no clip).

---

## Responsive Breakpoints

### `@media (max-width: 820px)`

```css
.platform-accordion {
  min-height: 420svh;
}

.accordion-inner {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 22px;
  padding: 34px 20px;
}

.accordion-nav {
  align-self: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 0;
}

.accordion-stack {
  height: 78svh;
  align-self: stretch;
}

.accordion-card {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.accordion-copy {
  padding: 22px 0 24px;
}

.accordion-visual {
  min-height: 0;
  padding: 28px;
}
```

At 820px: Nav becomes a 2-column grid above the stack. Cards become single-column (copy stacked above visual). Collapsed height changes to 96px (handled in JS via `window.innerWidth <= 820 ? 96 : 84`).

### `@media (max-width: 520px)`

```css
.accordion-nav {
  grid-template-columns: 1fr;
}

.accordion-inner {
  padding-inline: 18px;
}

.accordion-card h3 {
  font-size: 26px;
}

.accordion-card p {
  font-size: 14px;
}

.accordion-visual {
  padding: 18px;
}
```

At 520px: Nav becomes single-column. Tighter padding. Smaller text.

---

## Project structure

```
index.html       (section markup + font links)
styles.css       (all styles + media queries)
script.js        (scroll-driven accordion + tab click)
package.json     (vite ^5.4.2, "type": "module", scripts: dev/build/preview)
vite.config.js   (default export)
```2c:T1c1d,**Prompt:**

Create a "Projects" section using React, Tailwind CSS, and **framer-motion** (`useScroll`, `useTransform`, `motion`). The site uses **Google Font "Kanit"** (weights 300-900) and a dark background `#0C0C0C`. This section overlaps the previous white section slightly with a negative top margin and rounded top corners.

---

## Section Container

- Background: `#0C0C0C`
- Padding: `px-5 sm:px-8 md:px-10`
- Top border radius: `rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px]`
- Negative margin to overlap section above: `-mt-10 sm:-mt-12 md:-mt-14`
- `position: relative`, `z-index: 10`
- Uses framer-motion `useScroll` on the entire section ref with `offset: ['start start', 'end end']` to drive the stacking card animation

## Section Heading

- Wrapped in a `flex flex-col items-center py-20 sm:py-24 md:py-32`
- Text: `"Project"`
- Uses CSS class `hero-heading` which applies:
  ```css
  .hero-heading {
    background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  ```
- `font-black uppercase leading-none tracking-tight text-center w-full`
- Font size: `clamp(3rem, 12vw, 160px)`
- Fade-in animation: `delay: 0, y: 40`

---

## 3 Project Cards (sticky stacking card effect)

Each card is a **sticky card** that stacks on top of the previous card as you scroll, with a subtle scale-down effect.

### Project Data:

**Project 01 -- "Nextlevel Studio" (Client)**
- col1 images (left column, 2 images stacked vertically):
  ```
  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055344_5eff02e0-87a5-41ce-b64f-eb08da8f33db.png&w=1280&q=85
  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055431_11d841fd-8b41-46a5-82e4-b04f2407a7d8.png&w=1280&q=85
  ```
- col2 image (right column, single tall image):
  ```
  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055451_e317bf2d-28d4-48cc-86b0-6f72f25b6327.png&w=1280&q=85
  ```

**Project 02 -- "Aura Brand Identity" (Personal)**
- col1 images:
  ```
  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055654_911201c5-36d9-4bc6-bac7-331adfce159f.png&w=1280&q=85
  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055723_5ceda0b8-d9c2-4665-b2e3-83ba19ba76d1.png&w=1280&q=85
  ```
- col2 image:
  ```
  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055753_adc5dcbd-a8e6-49c0-b43a-9b030d835cea.png&w=1280&q=85
  ```

**Project 03 -- "Solaris Digital" (Client)**
- col1 images:
  ```
  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055759_963cfb0b-4bd1-4b0f-9d0a-09bd6cf95b2f.png&w=1280&q=85
  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_060108_438f781a-9846-4dcc-89ab-c4e6cb830f5b.png&w=1280&q=85
  ```
- col2 image:
  ```
  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260412_055818_9d062121-ad7e-46b9-999a-1a6a692ef1ee.png&w=1280&q=85
  ```

---

## Sticky Stacking Card Animation (framer-motion)

Each card's outer wrapper:
- `height: 85vh`, `display: flex, align-items: start, justify-content: center`
- `position: sticky`, `top: 24px` (md: `top: 32px`)

The inner `motion.div` card:
- `position: absolute`, `width: 100%`, `max-width: 1760px`
- `transform-origin: top`
- Each card is offset vertically: `top: ${index * 28}px` so they peek behind each other
- **Scale animation**: As the user scrolls through the section, earlier cards scale down slightly while later cards remain at scale 1
  - `rangeStart = index / totalCards`
  - `rangeEnd = 1`
  - `targetScale = 1 - (totalCards - 1 - index) * 0.03`
  - `scale = useTransform(progress, [rangeStart, rangeEnd], [1, targetScale])`
  - Example: Card 0 scales from 1 to 0.94, Card 1 scales from 1 to 0.97, Card 2 stays at 1

---

## Project Card Inner Layout

- Background: `#0C0C0C`
- Border: `2px solid #D7E2EA`
- Border radius: `rounded-[40px] sm:rounded-[50px] md:rounded-[60px]`
- Padding: `p-4 sm:p-6 md:p-8`
- `flex flex-col gap-6 sm:gap-8 md:gap-10`

### Top row (header):
- `flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 sm:gap-4`
- **Left side** (`flex items-center gap-6 sm:gap-8 md:gap-10`):
  - **Number**: `text-[#D7E2EA] font-black uppercase leading-none`, size `clamp(3rem, 10vw, 140px)`
  - **Category + Name** (flex column, `gap-2 sm:gap-4 md:gap-6`):
    - Category: `text-[#D7E2EA] font-medium uppercase`, size `clamp(1rem, 2.2vw, 2.1rem)`
    - Name: `text-[#D7E2EA] font-light tracking-wide`, size `clamp(0.9rem, 2vw, 2rem)`
- **Right side**: "Live Project" button (see below)

### Image grid (bottom):
- `flex flex-col md:flex-row gap-4 md:gap-5 w-full`
- **Left column** (`flex flex-col gap-4 md:gap-5 w-full md:w-[40%]`):
  - Image 1: `w-full object-cover`, border-radius `rounded-[40px] sm:rounded-[50px] md:rounded-[60px]`, height `clamp(130px, 16vw, 230px)`
  - Image 2: `w-full object-cover`, border-radius `rounded-[30px] sm:rounded-[40px] md:rounded-[60px]`, height `clamp(160px, 22vw, 340px)`
- **Right column**: Single image, `w-full md:w-[60%] object-cover`, border-radius `rounded-[30px] sm:rounded-[40px] md:rounded-[60px]`, `self-stretch` (fills the height of both left images)

---

## "Live Project" Button

- Pill-shaped (`rounded-full`)
- Border: `2px solid #D7E2EA`
- No background (transparent)
- Padding: `px-8 py-3 sm:px-10 sm:py-3.5`
- Text: `"Live Project"`, `text-[#D7E2EA] font-medium uppercase tracking-widest`, size `text-sm sm:text-base`
- Hover: `bg-[#D7E2EA]/10`, Active: `bg-[#D7E2EA]/20`, transition 200ms
- If href provided, renders as `<a>` with `target="_blank" rel="noopener noreferrer"`
- All cards link to `#`

---

## FadeIn Component (reusable, framer-motion)

- Props: `delay`, `duration` (default 0.7), `x` (default 0), `y` (default 30), `className`, `style`, `as` (HTML element tag, default `div`)
- Uses `motion.create()` to make any HTML element animatable
- Variants: `hidden` = `{ opacity: 0, x, y }`, `visible` = `{ opacity: 1, x: 0, y: 0 }`
- Easing: `[0.25, 0.1, 0.25, 1]`
- Viewport trigger: `{ once: true, margin: "50px", amount: 0 }`

---

**Font (loaded in HTML head):**
```html
<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=Kanit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
```

CSS base: `font-family: 'Kanit', sans-serif` on html/body.

---2d:T23d8,Build a single standalone HTML file (component2.html) for a pricing-packages section. Use one <style> block and one inline <script>. No frameworks. CSS class names must be prefixed with c2- to avoid collisions.

Fonts
Import via Google Fonts in <style>:

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600&family=Cormorant+Garamond:wght@400;500;600&display=swap');
Body default: 'Inter', sans-serif
Title: 'Playfair Display', serif, 400 weight
Prices: 'Cormorant Garamond', serif, 400 weight, letter-spacing -0.02em
Page setup
* { box-sizing: border-box; margin: 0; padding: 0; }
body: background #F0EFED, padding 48px 20px, flex centered, min-height 100vh, antialiased font smoothing.
.c2-container: max-width: 800px; width: 100%.
Header
Eyebrow <p class="c2-eyebrow">PRICING</p>: centered, 0.75rem, letter-spacing 0.18em, uppercase, color #888, margin-bottom 14px. Animates in via c2-fadeUp 0.7s cubic-bezier (.16, 1, .3, 1).
Title <h2 class="c2-title">What package fits <em>you?</em></h2>:
2.8rem, centered, color #2a2a2a, font-weight 400, letter-spacing -0.01em, margin-bottom 36px.
The <em> is italic with color #5a5a5a.
Animates in via c2-fadeUp 0.8s 0.1s cubic-bezier (.16, 1, .3, 1).
Grid wrapper
.c2-grid-wrapper: background #E8E7E5, border-radius 20px, padding 16px, margin-bottom 20px. Animates in c2-fadeUp 0.9s 0.2s.
.c2-grid: CSS grid, two equal columns, gap 20px.
Cards (two of them inside the grid)
.c2-card: white background, border-radius 16px, padding 24px, position relative, overflow hidden, box-shadow 0 2px 10px rgba(0,0,0,0.03), flex column. Transition transform 0.35s, box-shadow 0.35s (same easing). On :hover lifts translateY(-4px) and shadow becomes 0 12px 32px rgba(0,0,0,0.08).

Four 6×6 corner dots, color #d0d0d0, border-radius 50%, pointer-events none, 12px from each corner:

Top-left and top-right via ::before and ::after.
Bottom-left and bottom-right as inline <div class="c2-dot-bl"></div> and <div class="c2-dot-br"></div> placed inside the card.
Card title (.c2-card-title): 1.3rem, font-weight 500, margin-bottom 8px, color #2a2a2a, letter-spacing -0.01em.

Price block (.c2-price): Cormorant Garamond, 3.2rem, baseline-aligned flex with gap 8px, padding-bottom 12px, border-bottom 1px solid #e5e5e5, min-height 76px. The <span> for the unit text inside is Inter, 0.85rem, color #999, weight 300. The amount span (.c2-price-amount) has a transition opacity 0.25s, transform 0.25s; class c2-flip sets opacity: 0; transform: translateY(-6px) for the price-change animation.

List (.c2-list): no list-style, font-size 0.85rem, color #555, margin-bottom 16px, padding-bottom 16px. Variants .bordered adds border-bottom: 1px solid #e5e5e5; .bordered-top adds border-top: 1px solid #e5e5e5; padding-top: 20px. Each <li>: margin-bottom 12px, flex centered, gap 8px. li::before content '❖', color #c0c0c0, font-size 0.9rem.

Description (.c2-desc): 0.85rem, color #666, line-height 1.6, max-width 210px, margin-bottom: auto.

Button (.c2-btn): black bg, white text, padding 11px 26px, border-radius 30px, font-size 0.85rem, weight 500, font-family inherit, margin-top 32px, width fit-content, z-index 2, position relative. Transition transform 0.2s, background 0.2s, box-shadow 0.2s. Hover: translateY(-1px), background #1a1a1a, shadow 0 6px 18px rgba(0,0,0,0.18). Active: translateY(0). :focus-visible: outline 2px solid #2a2a2a, outline-offset 3px.

Tree image (.c2-tree): position absolute, bottom 0, right 20px, width 120px, z-index 1, pointer-events none. Transition transform 0.5s (cubic-bezier (.16, 1, .3, 1)). On .c2-card:hover .c2-tree: translateY(-3px) rotate(-1.5deg).

Card 1 — Product Design
Title: Product Design
Price: $75 + unit Hourly
List with bordered bottom, items: Experienced Designer, Fast Delivery, Conversion Focused, Tailored Design Strategy
Description: Perfect if you're looking to build a dashboard, app, etc... and get it "done-right" the first time.
Button: Contact Us with data-package="Product Design"
Tree image: https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/viktor/gold%20tree.webp, alt empty, loading="lazy"
Card 2 — Web Design
data-card="web" on the card div
Title: Web Design
Price: <span class="c2-price-amount" data-price>$1,500</span> + <span data-price-note>One-time</span>
Toggle (.c2-toggle, role="tablist", aria-label="Page count"):
Inline-flex, background #f0f0f0, border-radius 20px, padding 4px, margin-bottom 15px, font-size 0.75rem, user-select none.
Two <span> children with role="tab", tabindex="0", data-pages="single"|"multi", aria-selected. Padding 5px 14px, border-radius 16px, color #666, cursor pointer, transition background/color/box-shadow 0.25s.
.active: background white, color #1a1a1a, shadow 0 2px 5px rgba(0,0,0,0.05). Default Single-page is active and aria-selected="true"; Multi-page is aria-selected="false".
Switch row (.c2-framer, role="switch", tabindex="0", aria-checked="false", aria-label="Add Framer development"): flex centered, gap 10px, font-size 0.8rem, color #555, margin-bottom 30px, cursor pointer, user-select none, width fit-content.
Label: Framer Development
.c2-switch: 34×20px, background #e5e5e5, border-radius 10px, position relative, transition background 0.25s.
.c2-switch::after: 16×16px white circle, left 2px, top 2px, border-radius 50%, shadow 0 1px 3px rgba(0,0,0,0.15), transition left 0.25s (same easing).
.c2-framer.on .c2-switch: background #2a2a2a. .c2-framer.on .c2-switch::after: left 16px.
List with bordered bordered-top, items: Experienced Designer, Fast Delivery, Conversion Focused, 50/50 Secure Payments
Two <br> tags before the button
Button: Contact Us with data-package="Web Design"
Tree image: https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/viktor/purple%20tree.webp, alt empty, loading="lazy"
Bottom card (outside the grid wrapper)
.c2-bottom-card: background #E8E7E5, border-radius 16px, padding 32px 32px 4px 32px, flex column, position relative, overflow hidden, min-height 220px. Animates in c2-fadeUp 1s 0.35s cubic-bezier (.16, 1, .3, 1). Hide .c2-dot-bl, .c2-dot-br inside this variant. The .c2-btn inside has margin-top 60px.

Contents:

<h3 class="c2-card-title">Unique Request</h3> with weight 500
<p class="c2-bottom-desc">Are you looking for something custom?<br>Don't hesitate to contact us, and we'll help brainstorming your product to success.</p> — 0.85rem, color #666, line-height 1.6, max-width 600px, margin-bottom -20px, z-index 2, position relative.
Button: Contact Us with data-package="Custom"
Landscape image (.c2-landscape): https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/viktor/landscape.webp, position absolute, bottom 0, right 0, width 360px, z-index 1, pointer-events none, alt empty, loading="lazy".
Keyframes
@keyframes c2-fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
The eyebrow uses translateY(10px) initial, the title translateY(14px), grid wrapper and bottom card translateY(20px).

Media queries
@media (max-width: 768px):

body padding 32px 16px
.c2-title: 2.1rem, margin-bottom 28px
.c2-grid: grid-template-columns: 1fr
.c2-tree: width 96px, right 12px, opacity 0.85
.c2-desc, .c2-bottom-desc: max-width none
.c2-landscape: width 240px, opacity 0.85
.c2-bottom-card: padding 28px 24px 4px 24px; its .c2-btn margin-top 40px
@media (max-width: 480px):

.c2-title: 1.8rem
.c2-price: 2.6rem
.c2-landscape: width 180px
@media (prefers-reduced-motion: reduce): set animation-duration, animation-iteration-count, transition-duration to 0.01ms !important on *, *::before, *::after.

JavaScript (IIFE at end of <body>)
State for the Web Design card only:

const BASE = { single: 1500, multi: 2500 };
const FRAMER_ADDON = 800;
const state = { pages: 'single', framer: false };
render():

Compute total = BASE[state.pages] + (state.framer ? FRAMER_ADDON : 0).
Format as '$' + total.toLocaleString('en-US').
If unchanged, return early.
Add c2-flip to [data-price], then after 160ms set textContent and remove the class.
Set [data-price-note] to 'One-time + Framer' if framer is on, else 'One-time'.
selectPages(value):

No-op if same. Update state. Toggle active class and aria-selected on each tab. Call render.
Bind to each toggle option:

click → selectPages(opt.dataset.pages)
keydown: Enter/Space selects; ArrowLeft selects single, ArrowRight selects multi, then focus the just-selected element.
toggleFramer():

Flip state.framer. Toggle .on class on .c2-framer. Update aria-checked. Call render.
Bound to click and keydown (Enter/Space).
Each .c2-btn: click logs [c2] contact requested: followed by the package label; for Web Design, append the current page mode and + Framer if on.

Verification expectations
After loading at desktop width:

Default Web Design price reads $1,500 with note One-time.
Clicking Multi-page updates price to $2,500 with brief flip animation.
Toggling Framer adds $800 and changes note to One-time + Framer (so multi + framer = $3,300).
Mobile (375px): grid stacks, trees scale to 96px, landscape to 240px, no horizontal overflow.
No console errors.2e:T10c2,---

**Prompt:**

Create a full-viewport services section (100vh) with a solid gray background (`#C5C5C5`), vertically centered content, containing a counter label, a heading/subtext row, and a 3-column card grid with video thumbnails.

**Section layout:**
- `position: relative; z-index: 2; background-color: #C5C5C5`
- `display: flex; flex-direction: column; justify-content: center`
- `height: 100vh`
- Padding: `70px 32px 80px 32px`

**Content (top to bottom):**

**1. Counter label:**
- Text: `"003 / 005"`
- `font-size: 11px; letter-spacing: 0.08em; color: #666; margin-bottom: 20px`
- Fade-up animation with `delay: 0`

**2. Heading + subtext row:**
- A flex row (`display: flex; gap: 48px; align-items: flex-start; margin-bottom: 32px`)
- **Left column** (heading): `flex-shrink: 0; width: 32%`
  - `<h2>` with text: `"EXPLORE WHAT WE OFFER"`
  - Each word is an individual `<span>`, displayed via `display: flex; flex-wrap: wrap; gap: 0.25em`
  - Word-by-word staggered fade-up: first word at `delay: 0.1`, each adds `0.1s`, with `y: 28px`
  - Typography: `font-size: clamp(26px, 3vw, 42px); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; color: #1a1a1a; margin: 0; max-width: 320px`
- **Right column** (subtext): `flex: 1; padding-top: 8px`
  - `<p>` text: `"We provide all-in-one AI automation services in one place."`
  - `font-size: 14px; line-height: 1.65; color: #3a3a3a; max-width: 320px; margin: 0`
  - Fade-up with `delay: 0.25`

**3. Cards grid:**
- `display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 20px; align-items: stretch`
- 3 cards, each with staggered fade-up: `delay: 0.4`, `0.55`, `0.70`

**Card data:**

| # | Video URL | Title | Description |
|---|-----------|-------|-------------|
| 1 | `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260513_220333_48163edc-995f-4513-9f44-48dbb07a7329.mp4` | Process Streamlining | We automate your processes by linking together the daily tools you rely upon. Lifting throughput and improving overall output. |
| 2 | `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260513_221040_e6ba7c5a-864e-46e9-871e-341a176a7e3e.mp4` | Strategic advisory | We craft intelligent assistants that are adaptive, grasp context, and are skilled enough to handle highly intricate customer requests. |
| 3 | `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260513_221104_fb538584-5b87-495f-952e-09ddd5a1792a.mp4` | Assistant engineering | Through our knowledge, we explore deep into your business and advise you on how AI powered automations may transform your operations. |

**Card structure (each card):**
- Container: `background: transparent; border: 1px solid rgba(0,0,0,0.18); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; padding-top: 16px`
- **Video area:** `width: 100%; aspect-ratio: 4/3; position: relative; overflow: hidden`
  - `<video>` with `autoPlay muted loop playsInline`, styled `position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block`
- **Text area:** `padding: 24px 28px 28px 28px`
  - Title `<h3>`: `font-size: 18px; font-weight: 600; color: #1a1a1a; margin: 0; margin-bottom: 14px`
  - Description `<p>`: `font-size: 13px; line-height: 1.6; color: #3a3a3a; margin: 0`

**Animation (FadeUp component -- same as section 2):**
All animated elements use Framer Motion `whileInView` with `viewport: { once: true, amount: 0.2 }`, easing `[0.22, 1, 0.36, 1]`, duration `0.7s`, default `y: 24px` unless overridden.

**Font:**
```css
@import url('https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var');
* { font-family: 'Helvetica Now Var', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
```

**Mobile responsive (max-width: 900px):**
- Section padding: `90px 18px 60px 18px`
- Section becomes `height: auto; min-height: 100vh` (so cards aren't crushed)
- Heading + subtext row stacks vertically: `flex-direction: column; gap: 16px; margin-bottom: 24px`
- Heading column becomes `width: 100%`
- Cards grid becomes single column: `grid-template-columns: 1fr; gap: 16px`

**Tech stack:** React 18, TypeScript, Vite, Tailwind CSS 3, Framer Motion 12.

---2f:T3b22,Build a fullscreen sign-in page with a **real-time liquid glass refraction effect** over a looping background video. Use React 18 + TypeScript + Tailwind CSS + Vite. Only dependency beyond React is `lucide-react`. Font: **Inter** (400, 500, 600, 700) from Google Fonts. Must be fully mobile responsive.

Create exactly 4 files: `src/LiquidGlass.tsx`, `src/FadeUp.tsx`, `src/App.tsx`, `src/index.css`.

---

## CRITICAL: The glass effect is NOT a CSS blur or backdrop-filter. It is a per-pixel canvas refraction engine. You MUST use the EXACT code below for `src/LiquidGlass.tsx`. Do not modify, simplify, or rewrite any of the math. Copy it verbatim:

```tsx
import { useEffect, useRef } from 'react';

/* eslint-disable @typescript-eslint/no-explicit-any */

class LiquidGlass {
  bg: any;
  opt: any;
  _lut: Float32Array | null;
  _lutKey: string;

constructor(bgEl: any, options: any = {}) {
    this.bg = bgEl;
    this.opt = Object.assign({
      size: 120, shape: 'circle', rx: null,
      distort: 0.06, edgeCurl: 0.04, brightness: 0.06,
      specular: 0.20, border: 0.18, borderWidth: 1,
      sceneW: null, sceneH: null,
    }, options);
    this._lut = null;
    this._lutKey = '';
  }

_getLUT(D: number) {
    const key = `${D}:${this.opt.distort}:${this.opt.edgeCurl}`;
    if (this._lut && this._lutKey === key) return this._lut;
    this._lutKey = key;
    const lut = new Float32Array(256);
    for (let i = 0; i < 256; i++) {
      const r = i / 255;
      if (r < 0.7) {
        lut[i] = r * (1.0 - this.opt.distort * (1 - r));
      } else {
        const t = (r - 0.7) / 0.3;
        lut[i] = Math.min(0.985, r * (1 - this.opt.distort * (1 - r)) + t * t * this.opt.edgeCurl);
      }
    }
    return (this._lut = lut);
  }

_inShape(nx: number, ny: number, D: number) {
    const { shape, rx, size } = this.opt;
    if (shape === 'circle') return nx * nx + ny * ny < 1.0;
    const r = (rx != null ? rx : size * 0.3) / (size / 2);
    const ax = Math.abs(nx), ay = Math.abs(ny), lim = 1 - r;
    if (ax > 1 || ay > 1) return false;
    if (ax <= lim || ay <= lim) return true;
    return (ax - lim) ** 2 + (ay - lim) ** 2 <= r * r;
  }

_normR(nx: number, ny: number, D: number) {
    const { shape, rx, size } = this.opt;
    if (shape === 'circle') return Math.sqrt(nx * nx + ny * ny);
    const r = (rx != null ? rx : size * 0.3) / (size / 2);
    const ax = Math.abs(nx), ay = Math.abs(ny), lim = 1 - r;
    const dx = Math.max(0, ax - lim), dy = Math.max(0, ay - lim);
    const dr = Math.sqrt(dx * dx + dy * dy);
    return (dr > 0 ? (lim + dr) : Math.max(ax, ay));
  }

_cropBackground(cx: number, cy: number, D: number, sW: number, sH: number) {
    if (!this.bg) return null;
    const bw = this.bg.naturalWidth || this.bg.videoWidth;
    const bh = this.bg.naturalHeight || this.bg.videoHeight;
    if (!bw || !bh) return null;
    const R = D / 2;
    const off = document.createElement('canvas');
    off.width = D; off.height = D;
    const octx = off.getContext('2d')!;
    octx.drawImage(this.bg,
      Math.max(0, (cx - R) * (bw / sW)), Math.max(0, (cy - R) * (bh / sH)),
      D * (bw / sW), D * (bh / sH),
      0, 0, D, D
    );
    return octx.getImageData(0, 0, D, D).data;
  }

_bilinear(sd: Uint8ClampedArray, x: number, y: number, D: number): [number, number, number] {
    const x0 = Math.floor(x), y0 = Math.floor(y);
    const x1 = Math.min(D - 1, x0 + 1), y1 = Math.min(D - 1, y0 + 1);
    const fx = x - x0, fy = y - y0;
    const w00 = (1 - fx) * (1 - fy), w10 = fx * (1 - fy), w01 = (1 - fx) * fy, w11 = fx * fy;
    const a = (y0 * D + x0) * 4, b = (y0 * D + x1) * 4, c = (y1 * D + x0) * 4, d = (y1 * D + x1) * 4;
    return [
      sd[a] * w00 + sd[b] * w10 + sd[c] * w01 + sd[d] * w11,
      sd[a + 1] * w00 + sd[b + 1] * w10 + sd[c + 1] * w01 + sd[d + 1] * w11,
      sd[a + 2] * w00 + sd[b + 2] * w10 + sd[c + 2] * w01 + sd[d + 2] * w11,
    ];
  }

_drawOverlays(ctx: CanvasRenderingContext2D, D: number, R: number) {
    const { shape, rx, size, specular, border, borderWidth } = this.opt;
    const RX = rx != null ? rx : size * 0.3;
    ctx.save();
    ctx.beginPath();
    shape === 'circle' ? ctx.arc(R, R, R, 0, Math.PI * 2) : ctx.roundRect(0, 0, D, D, RX);
    ctx.clip();
    if (specular > 0) {
      const grd = ctx.createRadialGradient(R * 0.5, R * 0.28, 0, R * 0.5, R * 0.38, R * 0.45);
      grd.addColorStop(0, `rgba(255,255,255,${specular})`);
      grd.addColorStop(0.6, `rgba(255,255,255,${+(specular * 0.2).toFixed(3)})`);
      grd.addColorStop(1, 'rgba(255,255,255,0)');
      ctx.fillStyle = grd; ctx.fillRect(0, 0, D, D);
    }
    ctx.restore();
    if (border > 0) {
      const h = borderWidth / 2;
      ctx.save();
      ctx.strokeStyle = `rgba(255,255,255,${border})`;
      ctx.lineWidth = borderWidth;
      ctx.beginPath();
      shape === 'circle' ? ctx.arc(R, R, R - h, 0, Math.PI * 2)
        : ctx.roundRect(h, h, D - borderWidth, D - borderWidth, RX);
      ctx.stroke(); ctx.restore();
    }
  }

render(canvas: HTMLCanvasElement, cx: number, cy: number, sW: number, sH: number) {
    const D = this.opt.size, R = D / 2;
    if (canvas.width !== D || canvas.height !== D) {
      canvas.width = D; canvas.height = D;
    }
    const sd = this._cropBackground(cx, cy, D, sW, sH);
    if (!sd) return false;
    const lut = this._getLUT(D);
    const ctx = canvas.getContext('2d')!;
    const out = ctx.createImageData(D, D);
    const od = out.data;
    const boost = this.opt.brightness;
    for (let py = 0; py < D; py++) {
      for (let px = 0; px < D; px++) {
        const nx = (px / R) - 1, ny = (py / R) - 1;
        if (!this._inShape(nx, ny, D)) {
          const i = (py * D + px) * 4; od[i] = od[i + 1] = od[i + 2] = od[i + 3] = 0; continue;
        }
        const normR = this._normR(nx, ny, D);
        const alpha = normR > 0.93 ? Math.max(0, (1 - normR) / 0.07) : 1.0;
        const theta = Math.atan2(ny, nx);
        const bend = lut[Math.min(255, Math.round(normR * 255))];
        const sx = Math.min(D - 1.001, Math.max(0, bend * Math.cos(theta) * R + R));
        const sy = Math.min(D - 1.001, Math.max(0, bend * Math.sin(theta) * R + R));
        const [rv, gv, bv] = this._bilinear(sd, sx, sy, D);
        const b = (1 + boost * Math.max(0, 1 - normR * 1.6)) * 0.75;
        const oi = (py * D + px) * 4;
        od[oi] = Math.min(255, rv * b); od[oi + 1] = Math.min(255, gv * b);
        od[oi + 2] = Math.min(255, bv * b); od[oi + 3] = Math.round(alpha * 255);
      }
    }
    ctx.clearRect(0, 0, D, D);
    ctx.putImageData(out, 0, 0);
    this._drawOverlays(ctx, D, R);
    return true;
  }
}

const GLASS_OPTIONS = {
  shape: 'roundedrect' as const,
  rx: 16,
  distort: 0.06,
  edgeCurl: 0.04,
  brightness: 0.06,
  specular: 0.20,
  border: 0.18,
  borderWidth: 1,
};

interface LiquidGlassCanvasProps {
  videoRef: React.RefObject<HTMLVideoElement | null>;
  sceneRef: React.RefObject<HTMLDivElement | null>;
  cardRef: React.RefObject<HTMLDivElement | null>;
}

export default function LiquidGlassCanvas({ videoRef, sceneRef, cardRef }: LiquidGlassCanvasProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

useEffect(() => {
    let glass: LiquidGlass | null = null;
    let rafId: number | null = null;
    let isRunning = false;

const BG_VIDEO = videoRef.current;
    const SCENE_EL = sceneRef.current;
    const CARD_EL = cardRef.current;
    const GLASS_CV = canvasRef.current;

if (!BG_VIDEO || !SCENE_EL || !CARD_EL || !GLASS_CV) return;

function setupGlass() {
      const sceneR = SCENE_EL!.getBoundingClientRect();
      const cardR = CARD_EL!.getBoundingClientRect();
      const W = Math.round(cardR.width);
      const H = Math.round(cardR.height);
      const isMobile = W < 640;
      const D = isMobile ? W : Math.max(W, H);

GLASS_CV!.width = D;
      GLASS_CV!.height = D;

glass = new LiquidGlass(BG_VIDEO, Object.assign({}, GLASS_OPTIONS, {
        size: D,
        sceneW: sceneR.width,
        sceneH: sceneR.height,
      }));
    }

function renderLoop() {
      if (!glass) return;
      const sceneR = SCENE_EL!.getBoundingClientRect();
      const cardR = CARD_EL!.getBoundingClientRect();
      const cx = cardR.left - sceneR.left + cardR.width / 2;
      const cy = cardR.top - sceneR.top + cardR.height / 2;
      glass.opt.sceneW = sceneR.width;
      glass.opt.sceneH = sceneR.height;
      glass.render(GLASS_CV!, cx, cy, sceneR.width, sceneR.height);
      rafId = requestAnimationFrame(renderLoop);
    }

function startGlass() {
      if (isRunning) return;
      isRunning = true;
      setupGlass();
      renderLoop();
    }

function stopGlass() {
      if (rafId) cancelAnimationFrame(rafId);
      rafId = null;
      isRunning = false;
    }

function handleResize() {
      stopGlass();
      setupGlass();
      renderLoop();
      isRunning = true;
    }

BG_VIDEO.addEventListener('canplay', startGlass);
    BG_VIDEO.addEventListener('playing', startGlass);

if (BG_VIDEO.readyState >= 3) startGlass();

window.addEventListener('resize', handleResize);

return () => {
      stopGlass();
      BG_VIDEO.removeEventListener('canplay', startGlass);
      BG_VIDEO.removeEventListener('playing', startGlass);
      window.removeEventListener('resize', handleResize);
    };
  }, [videoRef, sceneRef, cardRef]);

return (
    <canvas
      ref={canvasRef}
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        display: 'block',
        zIndex: 0,
      }}
    />
  );
}
```

---

## `src/FadeUp.tsx` -- Use this exact code:

```tsx
import { useEffect, useRef, useState, type ReactNode } from 'react';

interface FadeUpProps {
  children: ReactNode;
  delay?: number;
  duration?: number;
  className?: string;
}

export default function FadeUp({
  children,
  delay = 0,
  duration = 700,
  className = '',
}: FadeUpProps) {
  const [visible, setVisible] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
    const timer = setTimeout(() => setVisible(true), delay);
    return () => clearTimeout(timer);
  }, [delay]);

return (
    <div
      ref={ref}
      className={className}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : 'translateY(20px)',
        transition: `opacity ${duration}ms cubic-bezier(0.16, 1, 0.3, 1), transform ${duration}ms cubic-bezier(0.16, 1, 0.3, 1)`,
        transitionDelay: '0ms',
      }}
    >
      {children}
    </div>
  );
}
```

---

## `src/index.css`

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

---

## `index.html` head -- Load Inter font:

```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@400;500;600;700&display=swap" rel="stylesheet" />
<title>Solace - Login</title>
```

---

## `src/App.tsx` -- The sign-in page layout

### Structure:

1. **Outermost div** (assign `sceneRef`): `relative min-h-screen w-full overflow-hidden`. Contains the video and the centered card.

2. **Background video** (assign `videoRef`): `absolute inset-0 h-full w-full object-cover`, autoPlay, muted, loop, playsInline, crossOrigin="anonymous".
   **Video URL:** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260606_135315_5f9e8a4c-09bc-4a97-9f75-8a387d4258ee.mp4`

3. **Centering wrapper:** `relative z-10 flex min-h-screen items-center justify-center px-4 py-8`.

4. **Card** (assign `cardRef`): `relative w-full max-w-lg overflow-hidden rounded-2xl p-6 shadow-2xl sm:p-10 md:p-14`. No background color -- the `<LiquidGlassCanvas>` component is placed inside as the first child, acting as the card's background. All form content goes inside a `relative z-[1]` wrapper div above the canvas.

### Card content (each item wrapped in `<FadeUp>` with staggered delays 0, 100, 200, ... 900ms):

1. **(delay 0) Logo:** An inline SVG, 48x48, viewBox `0 0 256 256`, white fill. Path: `M 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 128 L 64 128 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z M 128 64 L 128 128 L 64.5 128 L 32 95 L 0 64 L 0 0 L 64 0 Z M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 128 0 L 192 0 Z`. Centered, `mb-6`.

2. **(delay 100) Heading:** `"Step back in!"` -- `text-3xl sm:text-4xl md:text-5xl font-medium tracking-tight text-center mb-2`. Text styled with `bg-gradient-to-r from-white to-purple-300 bg-clip-text text-transparent`.

3. **(delay 200) Subtitle:** `"Log in to continue your mindful exercises, calm routines, and wellness pathway"` -- `text-xs sm:text-sm md:text-base text-white/60 leading-relaxed text-center mb-6 sm:mb-8`. A `<br>` hidden on mobile (`hidden sm:inline`).

4. **(delay 300) Email field:** Label `"Email"` (`text-sm font-medium text-white/70 mb-1.5 block`). Input: `w-full rounded-xl border border-white/15 bg-white/5 px-4 py-3.5 text-sm text-white placeholder-white/30 outline-none transition-colors focus:border-white/30 focus:bg-white/10`. Placeholder: `"Your email address"`.

5. **(delay 400) Password field:** Same label/input styling. Password toggle button using `Eye`/`EyeOff` from lucide-react (size 20): `absolute right-4 top-1/2 -translate-y-1/2 text-white/40 hover:text-white/70`. Placeholder: `"Type your password"`.

6. **(delay 500) Remember/Reset row:** `flex items-center justify-between`. Left: custom checkbox using hidden input with Tailwind `peer` -- a 20x20 div (`h-5 w-5 rounded border border-white/20 bg-white/5 peer-checked:border-purple-400 peer-checked:bg-purple-500`) plus a white checkmark SVG (`absolute left-0.5 top-0.5 hidden peer-checked:block h-4 w-4`, path `M5 13l4 4L19 7` strokeWidth 3). Label `"Stay signed in"` (`text-sm text-white/70`). Right: `"Reset password?"` button (`text-sm text-white/70 hover:text-white`).

7. **(delay 600) Sign In button:** `w-full rounded-full bg-white py-3.5 text-base font-semibold text-gray-900 hover:bg-white/90 active:scale-[0.98]`.

8. **(delay 700) Divider:** `my-6 flex items-center gap-4` with two `h-px flex-1 bg-white/15` lines around `"Or"` (`text-sm text-white/40`).

9. **(delay 800) Google button:** `flex w-full items-center justify-center gap-3 rounded-full border border-white/15 bg-white/5 py-3.5 text-sm font-medium text-white hover:bg-white/10 active:scale-[0.98]`. Contains the standard 4-color Google "G" SVG (20x20, paths with fills `#4285F4`, `#34A853`, `#FBBC05`, `#EA4335`) and text `"Continue with Google"`.

10. **(delay 900) Join link:** `mt-6 text-center text-sm text-white/50` with `"New to this platform?"` and a `"Join Now"` button (`font-medium text-white hover:text-purple-300`).

---

The entire form is wrapped in `<form className="space-y-5">`. The form `onSubmit` handler calls `e.preventDefault()`.

---30:T1470,---

> **Setup requirements before building the section:**
>
> **Google Fonts** -- Load these in `index.html` `<head>`:
> ```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=Anton&family=Condiment&display=swap" rel="stylesheet" />
> ```
>
> **Tailwind config** -- Extend `theme` with these exact custom values:
> ```js
> fontFamily: {
>   grotesk: ['Anton', 'sans-serif'],
>   condiment: ['Condiment', 'cursive'],
> },
> colors: {
>   cream: '#EFF4FF',
>   neon: '#6FFF00',
> }
> ```
> `font-grotesk` maps to **Anton** (a tall, condensed display font). `font-condiment` maps to **Condiment** (a flowing cursive/script font).
>
> **No additional CSS classes or animations are used in this section.** No keyframes, no transitions, no hover states. It is a static layout.
>
> ---
>
> **Build the following section as a React component using Tailwind CSS:**
>
> A `<section>` tag with classes `relative overflow-hidden min-h-screen`. No background color -- the background is a fullscreen video.
>
> **Background video:** An absolutely positioned `<video>` element covering the entire section. Classes: `absolute inset-0 w-full h-full object-cover`. Attributes: `autoPlay`, `loop`, `muted`, `playsInline`. The `<source>` element points to:
> ```
> https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4
> ```
> with `type="video/mp4"`.
>
> **Content wrapper:** A `<div>` sitting on top of the video with classes: `relative max-w-[1831px] mx-auto px-4 sm:px-6 md:px-8 py-16 sm:py-20 md:py-24 z-10`.
>
> Inside the content wrapper are **two rows**:
>
> ---
>
> **ROW 1 (top):** A `<div>` with classes `flex flex-col lg:flex-row justify-between items-start gap-8 lg:gap-12 mb-12 sm:mb-16 md:mb-20`. Contains two children:
>
> **Child A -- The heading:** An `<h2>` with classes `font-grotesk text-[32px] sm:text-[48px] md:text-[60px] font-normal uppercase leading-[1.05] sm:leading-[1] md:leading-[1] text-cream relative`. The text content is:
> ```
> Hello!<br />
> I'm orbis
> ```
> (Literally "Hello!" on line 1, "I'm orbis" on line 2, separated by a `<br />`. All rendered uppercase by Tailwind so it displays as "HELLO!" and "I'M ORBIS".)
>
> **Inside the `<h2>`**, after the text, there is an absolutely positioned `<span>` with the word **"Orbis"**. This span has classes: `font-condiment text-[36px] sm:text-[52px] md:text-[68px] font-normal normal-case text-neon mix-blend-exclusion leading-[0.79] tracking-[0.03em] absolute right-[-8px] bottom-[-20px] sm:bottom-[-30px] md:bottom-[-40px] -rotate-1 opacity-90`.
>
> Key details of this span:
> - `normal-case` overrides the parent's uppercase, so it renders as "Orbis" (capital O, lowercase rbis) in the Condiment cursive font.
> - `text-neon` = `#6FFF00` (bright green).
> - `mix-blend-exclusion` makes the green text interact with the video background.
> - `absolute right-[-8px] bottom-[-20px]` (responsive: `sm:bottom-[-30px] md:bottom-[-40px]`) positions it hanging below and slightly right of the parent heading, overlapping the word "orbis" above it.
> - `-rotate-1` gives it a slight counter-clockwise tilt (-1 degree).
> - `leading-[0.79]` is a very tight line-height. `tracking-[0.03em]` adds subtle letter spacing.
> - `opacity-90` makes it 90% opaque.
>
> **Child B -- The paragraph:** A `<p>` with classes `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase text-cream max-w-[266px] leading-relaxed`. The text is:
> > "A digital object fixed beyond time and place. An exploration of distance, form, and silence in space"
>
> (`font-mono` uses the browser's default monospace font. `leading-relaxed` = 1.625 line-height.)
>
> ---
>
> **ROW 2 (bottom):** A `<div>` with classes `flex justify-between items-start`. Contains two children:
>
> **Child A -- Left text column** (always visible): A `<div>` with classes `flex flex-col gap-5 max-w-[335px]`. Contains **two identical `<p>` tags**, each with classes `font-mono text-[14px] sm:text-[15px] md:text-[16px] uppercase lg:text-cream text-[#010828] opacity-10 leading-relaxed`. Both contain the same text:
> > "A digital object fixed beyond time and place. An exploration of distance, form, and silence in space"
>
> Key detail: The color is `text-[#010828]` (near-invisible dark navy matching the page background) by default, switching to `lg:text-cream` (`#EFF4FF`) on large screens. Combined with `opacity-10`, this text is extremely faint/ghostly -- almost invisible, serving as a subtle texture element rather than readable content.
>
> **Child B -- Right text column** (desktop only): A `<div>` with classes `hidden lg:flex flex-col gap-5 max-w-[335px]`. Contains **two identical `<p>` tags** with the exact same classes and text as Child A. This column is hidden on mobile/tablet and only appears on `lg:` (1024px+) screens.
>
> ---
>
> **There are no animations, transitions, hover effects, scroll effects, or JavaScript interactions in this section.** It is purely a static layout with a looping background video. The only "motion" comes from the autoplaying video itself.

---31:T3024,Build a landing page for "Highframe" -- a SaaS product for building internal workflows, smart forms, and automations without code. The page has two responsive versions: **desktop** (served as a standalone HTML file) and **mobile** (served as a standalone HTML file). A React app switches between them via iframe based on viewport width (breakpoint: 768px).

---

### BRAND IDENTITY

- **Product name:** Highframe
- **Logo:** SVG circle icon -- outer circle (r=12, stroke #fff 1.6px), inner arc path (`M13 5a8 8 0 1 1-5.66 2.34`, stroke #fff 1.6px, round linecap), center dot (r=2.4, fill #fff), all within a 26x26 viewBox
- **Tagline:** "Build the tools your team *actually* needs"
- **Sub-headline:** "Turn any process into an intelligent form that routes data and triggers actions instantly."

### FONTS

Load from Google Fonts:
- **Hanken Grotesk** (weights: 400, 500, 600, 700) -- used for body, nav, buttons, UI
- **EB Garamond** (weights: 400, 500, 600 + italic variants) -- used for h1 headings and footer headings

### COLOR SYSTEM (CSS custom properties)

```
--ink: #0c0d0d
--paper: #f4f3f0
--lime: #c7ef6b
--lime-deep: #b6e34f (desktop only)
--green: #16331f (desktop only)
--muted: rgba(255,255,255,.72) (desktop) / rgba(255,255,255,.65) (mobile)
--line: rgba(255,255,255,.16) (desktop) / rgba(255,255,255,.13) (mobile)
--card: rgba(255,255,255,.055) (mobile only)
```

Body background: `#000` (desktop), `#060707` (mobile). All text white.

### HERO BACKGROUND VIDEO

- **URL:** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260604_125109_19424216-4e2a-4560-b9f2-f1b5f6eb2c2e.mp4`
- Attributes: autoplay, muted, loop (desktop) / no loop (mobile), playsinline
- Position: absolute, inset 0, 100% width/height, object-fit: cover
- **Horizontally flipped** using `transform: scaleX(-1)`
- Desktop also has `scale(1.12)` and a Ken Burns animation (`scale(1.12)` to `scale(1.2)`, 26s ease-in-out infinite alternate)
- Mobile has `object-position: center top`; desktop has `object-position: center`
- **No overlay/scrim** on the video
- Mobile loops the video back to 0 at 2 seconds using a `timeupdate` listener
- z-index: -2

---

### DESKTOP HERO SECTION

**Layout:** `.hero` section, min-height 880px, `isolation: isolate`, overflow visible.

**Nav bar** (88px height, flexbox space-between, z-index 5):
- Left: brand logo (26x26 SVG) + "Highframe" text (20px, weight 600, letter-spacing -.01em)
- Right nav links: "Product" (with chevron dropdown SVG), "Resources" (with chevron), "Pricing", "Customers", "Book a demo" (pill button with border `rgba(255,255,255,.4)`, border-radius 999px, padding 10px 20px, frosted background `rgba(255,255,255,.04)`)
- Nav links: 15.5px, weight 500, color `rgba(255,255,255,.88)`, gap 34px

**Hero content** (grid layout, single column):
- `.hero-copy` container: padding 78px top 110px bottom, max-width 620px, z-index 4
- **h1:** EB Garamond, 62px, line-height 1.06, weight 400, letter-spacing -.005em, text-wrap balance. Contains `<em>` for "actually" (italic)
- **Subtitle (`.sub`):** EB Garamond, 22px, line-height 1.5, color `var(--muted)`, max-width 430px
- **CTA buttons** (flex row, gap 14px, margin-top 38px):
  - Primary: "Get started for free" -- `#f4f3f0` bg, `#121312` text, 999px radius, 54px height, 16px weight 600, box-shadow `0 8px 30px rgba(0,0,0,.35)`. Hover: translateY(-2px) + stronger shadow
  - Ghost: "Watch demo" with Material Icons Round play_circle icon -- `rgba(12,13,13,.72)` bg, white text, border `rgba(255,255,255,.32)`, backdrop-filter blur(14px), gap 10px

**Dashboard iframe** (`.dash`):
- Positioned absolutely via CSS custom properties: `--dash-w: 670px`, `--dash-x: 59%`, `--dash-y: 55px`
- border-radius 16px, box-shadow `0 40px 90px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06)`
- Contains iframe to `assets/dashboard-orchestrator.html`, aspect-ratio 1456/1138

**Reveal animations** (triggered by JS on load):
- `.reveal` elements start with `opacity:0; transform:translateY(22px)` and transition with `.8s cubic-bezier(.2,.7,.2,1)`
- Dashboard reveal starts with `translateX(46px) scale(.985)`
- Staggered delays: nav 0s, h1 .12s, subtitle .26s, CTA .4s, dashboard .5s
- Handles visibility state: if page loads hidden, snaps content instantly then animates on visibility change

**Responsive (max-width 860px):**
- Hide nav links, h1 to 42px, hero min-height auto, hero-copy padding reduced
- Dashboard becomes relative positioned, full width, border-radius 14px

**Responsive (max-width 1100px):**
- h1 to 54px

---

### DESKTOP FOOTER

- Transparent background with frosted glass `::after` pseudo-element: `backdrop-filter: blur(12px) saturate(120%)`, gradient from `rgba(10,12,11,.38)` to `rgba(10,12,11,.80)`, `box-shadow: inset 0 1px 0 rgba(255,255,255,.18)`, border-radius 22px 22px 0 0
- `margin-top: -120px` to overlap hero, `border-top: 1px solid rgba(255,255,255,.14)`, border-radius 22px 22px 0 0

**Top grid** (4 columns: `1.1fr 1fr 1fr 1.5fr`, gap 30px, padding 72px top 64px bottom):

Columns 1-3 are link lists:
- **Product:** Workflow builder, AI automations, Smart forms, Data connections, Internal apps
- **Resources:** Mobile, Manifesto, Press, Docs, Pricing
- **Company:** About, Blog, Careers, Customers
- Column headers: 13px, uppercase, letter-spacing .08em, color `rgba(255,255,255,.45)`, weight 600
- Links: 16px, color `rgba(255,255,255,.82)`, gap 14px. Hover: color #fff, translateX(2px)

Column 4 (`.fbrand`):
- Brand logo (28x28) + "Highframe" (23px)
- Description: "Skip the dev queue. Build internal workflows, smart forms, and automations without code." -- 17px, line-height 1.5, color `rgba(255,255,255,.7)`, max-width 330px
- **Waitlist form** (pill shape): flex row, `rgba(255,255,255,.08)` bg, border `rgba(255,255,255,.16)`, border-radius 999px, padding 6px 6px 6px 20px, max-width 440px, backdrop-filter blur(8px), inset box-shadow
  - Mail icon SVG (17x17) + email input (15.5px)
  - Submit button: white bg, `#0c0d0d` text, 999px radius, padding 12px 20px, 15px weight 600

**Bottom bar** (border-top `rgba(255,255,255,.12)`, flex space-between, padding 26px top 38px bottom):
- Left: "(c) 2026  Highframe. All rights reserved." -- 14.5px, color `rgba(255,255,255,.55)`
- Center: Social icons (X/Twitter, LinkedIn, GitHub) -- SVG 18x18, color `rgba(255,255,255,.6)`, gap 22px. Hover: color #fff, translateY(-2px)
- Right: "Privacy Policy", "Terms of Use", "Cookie Policy" -- 14.5px, color `rgba(255,255,255,.6)`, gap 28px

**Responsive (max-width 860px):**
- Grid becomes 2 columns, brand spans full width, bottom stacks vertically

---

### MOBILE HERO SECTION

Wrapped in `.phone` container (max-width 430px, centered, min-height 100dvh, bg #000).

**Layout:** `.hero` section, min-height 100dvh, flexbox column, padding-bottom 28px, isolation isolate.

**Lime glow:** `::after` pseudo-element -- radial gradient of `rgba(199,239,107,.18)`, 280px circle, centered bottom 12%, blur 22px.

**Nav** (flex space-between, padding 26px 22px 0, z-index 10):
- Left: brand logo (24x24) + "Highframe" (18px, weight 600)
- Right: hamburger button (42x42, rounded 11px, border `rgba(255,255,255,.22)`, bg `rgba(0,0,0,.28)`, backdrop-filter blur(12px), three 18px wide / 1.4px tall white bars, gap 5px)

**Hero body** (flex column, center aligned, text-align center, padding 32px 22px 38px, z-index 5):
- **Badge** (hidden by default via `display:none`): pill with green dot (7px, `var(--lime)` with glow), "AI-Powered Workflow", frosted glass style
- **h1:** EB Garamond, `clamp(44px, 12vw, 58px)`, line-height 1, letter-spacing -.025em, max-width 9ch, text-shadow `0 10px 30px rgba(0,0,0,.35)`. `<em>` styled with `color: var(--lime)` and italic
- **Subtitle:** 16px, line-height 1.62, color `rgba(255,255,255,.76)`, max-width 31ch
- **CTA stack** (flex column, gap 11px, max-width 340px):
  - Primary: "Start Free Trial" -- `var(--paper)` bg, `var(--ink)` text, 58px height, 18px radius, 15.5px weight 600. Active: scale(.975) opacity .9
  - Ghost: "Watch Demo" with play circle SVG icon -- `rgba(12,13,13,.78)` bg, border `rgba(255,255,255,.30)`, backdrop-filter blur(14px)

**Dashboard preview** (`.hero-preview`):
- Perspective 3D card: `perspective(1400px) rotateX(17deg) rotateY(-8deg) rotateZ(1deg) translateY(10px)`
- Width `min(88vw, 368px)`, border-radius 32px, padding 10px
- Multi-layered gradient background simulating glass edge lighting
- Complex box-shadows for depth
- `::before` adds highlight gradients, `::after` adds colored glow beneath
- Contains `.preview-shell` with iframe to `dashboard-orchestrator.html` (aspect-ratio 1456/1138)
- **Float animation:** 6.5s ease-in-out infinite, subtle rotation/translate changes at 50% keyframe
- Shell has frosted glass styling with gradient borders via mask technique

**Responsive (max-height 760px):** hero-body justify-content flex-end, h1 clamped smaller

**Reveal animations:** `.r` class, `opacity 0 -> 1`, `translateY(20px) -> none`, .75s `cubic-bezier(.16,1,.3,1)`. Hero items animate immediately, footer items use IntersectionObserver (threshold 0.08). Staggered delays from 0s to .46s.

---

### MOBILE FOOTER

Class `.foot`, bg #000, border-top `rgba(255,255,255,.13)`, border-radius 26px 26px 0 0, padding 54px 22px 44px.

Shimmer `::after`: 1px height, horizontal gradient of white at center fading to transparent at edges.

Box-shadow: `0 1px 0 rgba(255,255,255,.10) inset, 0 -1px 0 rgba(0,0,0,.28) inset`

**Elements in order:**

1. **Mail icon circle** (58px, centered, frosted glass pill `rgba(255,255,255,.13)` bg, border `rgba(255,255,255,.30)`, glow box-shadow)

2. **Heading:** "Skip the dev queue" -- EB Garamond, 38px, weight 400, centered, line-height 1.08, letter-spacing -.015em

3. **Subtitle:** "Build internal workflows, smart forms, and automations without code." -- 15px, line-height 1.55, color `rgba(210,195,210,.72)`, centered

4. **Email form:**
   - Input: 52px height, `rgba(255,255,255,.06)` bg, border `rgba(255,255,255,.20)`, 14px radius, 15px font, backdrop-filter blur(10px). Focus: brighter border + glow ring
   - Button: "Sign up for waitlist" + arrow SVG -- 52px height, `var(--paper)` bg, `var(--ink)` text, 14px radius, 15.5px weight 600, box-shadow `0 10px 36px -14px rgba(255,255,255,.38)`

5. **Accordion** (4 sections: Product, Resources, Company, Legal):
   - Trigger: 16px, weight 500, color `rgba(235,220,230,.86)`, flex with chevron SVG
   - Chevron rotates 180deg on open, .26s cubic-bezier(.4,0,.2,1)
   - Body: max-height 0 -> 300px transition, links 15px color `rgba(255,255,255,.6)`
   - Same link lists as desktop (Product: 5 items, Resources: 5 items, Company: 4 items, Legal: Privacy Policy, Terms of Use, Cookie Policy)
   - Only one accordion open at a time (JS closes others on toggle)

6. **Social buttons** (centered row, gap 10px):
   - X/Twitter, LinkedIn, GitHub -- 46px circles, border `rgba(255,255,255,.18)`, bg `rgba(255,255,255,.04)`, color `rgba(215,190,210,.72)`, backdrop-filter blur(8px)
   - Hover: brighter bg/border/color + glow shadow

7. **Brand lockup card:** frosted glass card (18px radius, `rgba(255,255,255,.07)` bg, border `rgba(255,255,255,.16)`, backdrop-filter blur(14px)), logo (22x22) + "Highframe" (20px) + "(c) 2026 Highframe. All rights reserved." (13px, color `rgba(255,255,255,.38)`)

Reveal stagger delays: mail icon 0s, heading .07s, subtitle .13s, form .19s, accordion .25s, socials .37s, brand .43s.

---

### REACT APP (App.jsx)

Simple responsive switcher:
- Uses `window.matchMedia` to detect mobile (<768px)
- Renders a full-viewport iframe pointing to either `/desktop/index.html` or `/mobile/index.html`
- Switches iframe key on breakpoint change

### KEY IMPLEMENTATION NOTES

- All CSS is inline in `<style>` tags within each HTML file (no external stylesheets beyond Google Fonts)
- Material Icons Round loaded via Google Fonts CDN (desktop only)
- The `dashboard-orchestrator.html` iframe content is a separate file (not described here)
- Desktop uses a tweaks panel system (React + Babel standalone) for adjusting dashboard position via sliders -- this is a dev tool overlay
- `-webkit-font-smoothing: antialiased` and `text-rendering: optimizeLegibility` on body
- `-webkit-tap-highlight-color: transparent` on all interactive elements (mobile)
- `scroll-behavior: smooth` on html32:T2441,Build a single React + TypeScript + Tailwind CSS v3 component called `PrecisionSection`. No external icon libraries — all icons are inline SVG or `<img>` tags. No `useState`, no animations, no hover states. Two separate layouts: a desktop staircase (absolutely-positioned pillars) and a mobile alternating-flow layout. The `sm:` breakpoint controls visibility between them.

---

## Global font

```css
@font-face {
  font-family: 'Mazzard H';
  font-weight: 400;
  font-style: normal;
  src: url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff') format('woff'),
       url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.ttf') format('truetype');
}
@font-face {
  font-family: 'Mazzard H';
  font-weight: 500;
  font-style: normal;
  src: url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff') format('woff'),
       url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.ttf') format('truetype');
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body, * { font-family: 'Mazzard H', sans-serif; }
}
```

---

## File: `src/components/PrecisionSection.tsx`

### Constants (top of file, before the component)

```ts
const LOGO_ICON =
  'https://cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/6870f623cf3df417ce45df05_icon%20logo%20eternacloud.png';

const LINE_GRADIENT =
  'linear-gradient(rgb(28, 78, 255), rgb(254, 136, 27) 0%, rgb(172, 36, 255) 25%, rgb(247, 159, 255) 50%, rgb(255, 214, 0) 66%, rgb(254, 136, 27) 84%, rgba(254, 136, 27, 0) 102%)';

const PILLARS = [
  { label: 'Scopes',     items: ['conditions', 'capacity', 'specs', 'timelines'],     leftVw: 2.8,  bottomVw: 7     },
  { label: 'Integrates', items: ['civil', 'mechanical', 'electrical', 'controls'],     leftVw: 22.4, bottomVw: 9.08  },
  { label: 'Certifies',  items: ['redundancy', 'testing', 'compliance', 'sign-offs'], leftVw: 41.2, bottomVw: 11.16 },
  { label: 'Activates',  items: ['cutover', 'runbooks', 'handoff', 'SLAs'],           leftVw: 61.1, bottomVw: 13.24 },
];
```

---

### Section element

Inline styles only (no Tailwind on the `<section>` itself):

```
background-image: url("https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260418_125638_553b96dc-a1fd-4b2b-81a9-ed7daa80006e.png&w=1280&q=85")
background-size: cover
background-position: center
background-repeat: no-repeat
width: 100%
display: flex
flex-direction: column
align-items: center
text-align: center
padding: clamp(48px, 8vw, 120px) clamp(16px, 4vw, 60px) clamp(48px, 5.56vw, 80px)
gap: clamp(32px, 4vw, 56px)
```

---

### Block 1 — Header

Wrapper `<div>` — inline: `display: flex`, `flex-direction: column`, `align-items: center`, `gap: 36px`

#### Badge pill `<div>`

Inline:
```
background-color: rgb(249, 249, 249)
display: flex
align-items: center
gap: 8px
font-size: clamp(14px, 1.1vw, 18px)
font-weight: 500
border-radius: 36px
padding: clamp(8px, 0.9vw, 14px) clamp(12px, 1.25vw, 20px)
color: rgb(26, 11, 84)
white-space: nowrap
```

Contains this inline SVG (`width: 19`, `height: 18`, `flex-shrink: 0`, `viewBox="0 0 17 16"`, `fill="none"`):

```xml
<g clipPath="url(#prec-clip)">
  <circle cx="8.5" cy="8" r="7" stroke="#c86fff" fill="none" />
  <path d="M9.5 11.5V10.5H7.5V11.5H9.5ZM7.5 14.5C7.5 15.0523 7.94772 15.5 8.5 15.5C9.05228 15.5 9.5 15.0523 9.5 14.5H7.5ZM8.5 11.5H7.5V14.5H8.5H9.5V11.5H8.5Z" fill="rgb(200, 111, 255)" />
  <path d="M12 7H11V9H12V7ZM15 9C15.5523 9 16 8.55228 16 8C16 7.44772 15.5523 7 15 7V9ZM12 8V9H15V8V7L12 7V8Z" fill="rgb(200, 111, 255)" />
  <path d="M5 9H6V7H5V9ZM2 7C1.44772 7 1 7.44772 1 8C1 8.55228 1.44772 9 2 9V7ZM5 8V7H2V8V9H5V8Z" fill="rgb(200, 111, 255)" />
  <path d="M7.5 4.5V5.5H9.5V4.5H7.5ZM9.5 1.5C9.5 0.947715 9.05228 0.5 8.5 0.5C7.94772 0.5 7.5 0.947715 7.5 1.5H9.5ZM8.5 4.5H9.5V1.5H8.5H7.5V4.5H8.5Z" fill="rgb(200, 111, 255)" />
</g>
<defs>
  <clipPath id="prec-clip">
    <rect width="16" height="16" fill="white" transform="translate(0.5)" />
  </clipPath>
</defs>
```

After the SVG: plain text **"Structured Delivery"**

#### Heading + subtext `<div>`

Inline: `display: flex`, `flex-direction: column`, `align-items: center`, `max-width: clamp(700px, 60vw, 900px)`, `gap: 22px`

`<h2>` — inline: `font-size: clamp(28px, 4vw, 56px)`, `font-weight: 500`, `color: rgb(26, 11, 84)`, `line-height: 1.15`, `margin: 0`

Inside the `<h2>`, two `<span>` elements:

**Span 1** — Tailwind class `sm:whitespace-nowrap`, inline `display: block`:
> **One integrated, end-to-end system.**

**Span 2** — inline only:
```
background-image: linear-gradient(90deg, rgb(43, 167, 255), rgb(202, 69, 255) 50%, rgb(254, 136, 27))
-webkit-background-clip: text
background-clip: text
-webkit-text-fill-color: transparent
color: transparent
padding-bottom: 0.3vw
display: block
```
> **Compounding operational value.**

`<p>` below heading — inline: `font-size: clamp(15px, 1.2vw, 20px)`, `color: rgb(169, 151, 206)`, `margin: 0`
> **"NexaCore teams capture, align, validate and deliver exactly what keeps your programs on track."**

---

### Block 2 — Pillars container `<div>`

Inline: `width: 100%`, `max-width: 82.292vw`, `margin: 0 auto`

Contains two children:

---

#### Desktop pillars — `hidden sm:block` (Tailwind)

Inline:
```
position: relative
width: 82.292vw
height: 31.94vw
color: rgb(26, 11, 84)
```

Map over `PILLARS`. Each pillar wrapper `<div>`:
```
position: absolute
bottom: `${pillar.bottomVw}vw`
left: `${pillar.leftVw}vw`
display: flex
flex-direction: column
align-items: center
justify-content: flex-start
```

**Chip `<div>`:**
```
display: flex
align-items: center
justify-content: center
background-image: linear-gradient(135deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.6))
font-size: 18px
font-weight: 500
border-radius: 20px
padding-top: 0.972vw
padding-bottom: 0.972vw
padding-left: 1.736vw
padding-right: 1.736vw
white-space: nowrap
gap: 8px
```

Chip contents:
1. `<img src={LOGO_ICON} alt="" style={{ width: '1.111vw', height: 'auto', display: 'inline-block' }} />`
2. `{pillar.label}`

**Line + items wrapper `<div>`** (directly below chip):
```
position: relative
display: flex
flex-direction: column
align-items: center
justify-content: flex-end
```

**Items container** (absolutely positioned, overlays the line):
```
position: absolute
top: 0.56vw
left: 1.94vw
display: flex
flex-direction: column
gap: 4px
font-size: 16px
align-items: flex-start
justify-content: space-between
```

Each item `<div>`:
```
padding-top: 0.69vw
padding-bottom: 0.69vw
padding-left: 1.04vw
padding-right: 1.04vw
display: flex
align-items: flex-start
```
Text: the item string.

**Vertical gradient line `<div>`** (sibling of items container, rendered after it):
```
background-image: LINE_GRADIENT  (see constant above)
width: 1px
height: 14.24vw
```

---

#### Mobile pillars — Tailwind: `flex flex-col sm:hidden w-full`

Inline: `color: rgb(26, 11, 84)`, `gap: 0`

Map over `PILLARS` with index. `isRight = index % 2 !== 0` (index 1 and 3 are right-aligned).

**Pillar wrapper `<div>`:**
```
display: flex
flex-direction: column
align-items: isRight ? 'flex-end' : 'flex-start'
width: 100%
padding-bottom: 8px
```

**Chip `<div>`:**
```
display: inline-flex
align-items: center
background-image: linear-gradient(135deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.6))
font-size: 15px
font-weight: 500
border-radius: 20px
padding: 10px 18px
white-space: nowrap
gap: 7px
```

Chip contents:
1. `<img src={LOGO_ICON} alt="" style={{ width: 16, height: 'auto' }} />`
2. `{pillar.label}`

**Line + items row `<div>`:**
```
display: flex
flex-direction: isRight ? 'row-reverse' : 'row'
align-items: stretch
width: 100%
```

**Vertical line `<div>`:**
```
width: 1px
flex-shrink: 0
background-image: LINE_GRADIENT
margin-left: isRight ? 0 : 22px
margin-right: isRight ? 22px : 0
min-height: 120px
```

**Items `<div>`:**
```
display: flex
flex-direction: column
gap: 0
padding-left: isRight ? 0 : 20px
padding-right: isRight ? 20px : 0
padding-top: 8px
padding-bottom: 8px
align-items: isRight ? 'flex-end' : 'flex-start'
```

Each item `<div>`:
```
font-size: 14px
color: rgb(100, 80, 160)
padding: 8px 0
```
Text: the item string.

---

## Pillar data reference

| Label | Items | Desktop left | Desktop bottom |
|---|---|---|---|
| Scopes | conditions, capacity, specs, timelines | 2.8vw | 7vw |
| Integrates | civil, mechanical, electrical, controls | 22.4vw | 9.08vw |
| Certifies | redundancy, testing, compliance, sign-offs | 41.2vw | 11.16vw |
| Activates | cutover, runbooks, handoff, SLAs | 61.1vw | 13.24vw |

---

**No animations. No hover states. No scroll effects. No JavaScript logic. Static render only. Desktop: 4 pillars arranged in a rising staircase via `position: absolute` with `bottom` and `left` in `vw` units. Mobile: single column, even-indexed pillars align left, odd-indexed align right, each with a vertical gradient line beside its items list.**33:T1ab7,Build a "Why Us?" bento grid section as a React + TypeScript component using Tailwind CSS 3 and Framer Motion. Font is `'DM Sans', sans-serif` (Google Fonts: `https://fonts.googleapis.com/css?family=DM+Sans:500,400`). Dark background `#0f0f0f`. Here is the exact specification:

---

**Section Container:**

- `<section>` with `bg-[#0f0f0f] px-6 py-24 sm:px-10 lg:px-16 lg:py-32`, inline style `fontFamily: "'DM Sans', sans-serif"`

- Inner wrapper: `mx-auto max-w-7xl`

- All animations use easing `[0.22, 1, 0.36, 1]`, triggered once on scroll via Framer Motion `useInView` with `{ once: true, margin: "-60px" }`

- Each card uses a shared `CardMotion` wrapper that animates from `opacity: 0, scale: 0.95` to `opacity: 1, scale: 1`, duration `0.65s`, with staggered delays

---

**Layout:**

- On mobile (`md:hidden`): single column, cards stacked vertically with `gap-4`

- On desktop (`md:grid md:grid-cols-6 md:gap-4`): explicit 6-column grid with `gridTemplateRows: "repeat(10, minmax(46px, auto))"`. Card placements:

- Header card: `gridColumn: "1 / 3"`, `gridRow: "1 / 5"`

- Speed card (5x): `gridColumn: "3 / 5"`, `gridRow: "1 / 6"`

- Text card (dark): `gridColumn: "5 / 7"`, `gridRow: "1 / 5"`

- Income card (32M+): `gridColumn: "1 / 3"`, `gridRow: "5 / 11"`

- Photo card (100+): `gridColumn: "3 / 5"`, `gridRow: "6 / 11"`

- Projects card (200+): `gridColumn: "5 / 7"`, `gridRow: "5 / 11"`

---

**Shared "Plus Button" component:**

- A `<span>` with `inline-flex h-7 w-7 shrink-0 items-center justify-center border text-xs font-light`, containing the text "+". Has a `dark` variant: when `dark=true` uses `border-black/20 text-black`, otherwise `border-white/30 text-white`.

---

**Card 1 -- Header Card (no background):**

- Delay `0`. Classes: `flex h-full flex-col justify-end pb-4 pr-4`

- Label: "why us?" in `mb-4 inline-block text-sm tracking-[0.15em] text-white/70`

- Heading: `text-[clamp(1.6rem,2.6vw,2.4rem)] font-light leading-[1.2] tracking-tight`

- Line 1: "Seamless" in `text-white`

- Line 2: "Brand, Identity," in `text-[#666]`

- Line 3: "and Web" in `text-[#666]`

- Each line separated by `<br />`

---

**Card 2 -- Income Card (32M+), white background:**

- Delay `0.08`. Classes: `flex h-full flex-col bg-white p-7`

- Top row: flex between the stat and a dark PlusBtn

- Stat: "32M +" in `text-[clamp(1.8rem,3.5vw,2.8rem)] font-light leading-none tracking-tight text-black`

- Subtitle: "Income produced for our customers." in `mt-2 text-[13px] leading-snug text-[#777]`

- Bottom (pushed down with `mt-auto pt-8`): A staircase dot chart

- 26 columns, each a `flex flex-col-reverse gap-[2px]` of 15 cells

- Each cell is `h-[5px] w-[5px] sm:h-[7px] sm:w-[7px]`

- Filled cells (`bg-black`) are computed: for column `c`, base = `floor(c * 0.55)`, active rows = `[base]`, add `base+1` if `c` is odd, add `base-1` if `c > 4` (filter negatives)

- Columns separated by `gap-[2px]`

- Below the chart: year labels `["2016", "2018", "2022", "2024", "2026"]` in `mt-3 flex justify-between pr-2 text-[10px] tracking-wide text-[#aaa]`

---

**Card 3 -- Speed Card (5x), white background:**

- Delay `0.12`. Classes: `flex h-full flex-col bg-white p-7`

- Top area (`flex flex-1 items-start justify-center pt-2`): An SVG diagram `viewBox="0 0 200 180"`, `h-auto w-full max-w-[240px]`:

- 3 concentric circles centered at `(110, 80)` with radii `75`, `50`, `25`, `stroke="#222"`, `strokeWidth="0.8"`, opacities `0.2`, `0.3`, `0.4`

- 4 small black squares with icons at specific positions:

- `rect(68, 42, 16, 16)` with "+" text (white, fontSize 11, fontWeight 300)

- `rect(102, 36, 20, 20)` with lightning bolt emoji (⚡, white, fontSize 13)

- `rect(82, 128, 14, 14)` with minus sign (−, white, fontSize 11, fontWeight 300)

- `rect(138, 128, 14, 14)` with inner white square `rect(142, 132, 6, 6)`

- Bottom (`mt-2`):

- "5x" centered, `text-[clamp(2rem,3.5vw,3rem)] font-light tracking-tight text-black`

- "Quicker than competing firms." centered, `mt-1 text-[13px] text-[#777]`

---

**Card 4 -- Text Card, dark background:**

- Delay `0.18`. Classes: `flex h-full flex-col bg-[#1a1a1a] p-7`

- Top right: a light PlusBtn (white variant), wrapped in `flex justify-end`

- Bottom (pushed down with `mt-auto space-y-5 pb-1`): Two paragraphs:

- "We partner with ambitious brands to craft unified digital identities that merge strategy, design, and code into one seamless experience."

- "We accelerate the journey from concept to launch, eliminating the friction of scattered teams and misaligned visions."

- Both: `text-[13px] leading-[1.7] text-white/60`

---

**Card 5 -- Projects Card (200+), white background:**

- Delay `0.22`. Classes: `relative flex h-full flex-col bg-white p-7`

- Top: A `relative h-24 w-full` container with 7 scattered black squares (`bg-black`), each positioned absolutely with percentage left/top and pixel sizes:

```

(55%, 2%, 30px), (80%, 0%, 24px), (70%, 28%, 16px),

(92%, 18%, 14px), (58%, 22%, 10px), (88%, 36%, 10px),

(46%, 14%, 8px)

```

- Stat: "200 +" in `mt-4 text-[clamp(1.8rem,3.5vw,2.8rem)] font-light leading-none tracking-tight text-black`

- Description: "Delivering projects globally, assisting our clients in reaching their objectives." in `mt-3 max-w-[210px] text-[13px] leading-[1.7] text-[#777]`

---

**Card 6 -- Photo Card (100+), dark overlay on image:**

- Delay `0.28`. Classes: `relative h-full overflow-hidden bg-black`

- Background image: `https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=800`, absolutely positioned, `object-cover opacity-55`

- Gradient overlay: `bg-gradient-to-t from-black/60 via-transparent to-black/30`

- Content container: `relative flex h-full min-h-[380px] flex-col justify-between p-6`

- **Top left**: A logo-like mark -- bold "N" (`text-[1.6rem] font-bold leading-none text-white`) with 3 small white squares beside it: one `10x10`, and two stacked `7x7` (the bottom one at `opacity 50%`), arranged with `gap-[3px]`

- **Top right**: "4.9 / 5" in `text-base font-light leading-none text-white`, with 5 white star SVGs below (`width="11" height="11"`, star path: `M6 0l1.8 3.6L12 4.2 8.9 7.1l.7 4.2L6 9.3 2.4 11.3l.7-4.2L0 4.2l4.2-.6z`)

- **Middle left**: Two small white rectangles: `18x18 bg-white/70` and `18x26 bg-white/40`, with `gap-2`

- **Bottom**: flex between stat and a white square

- "100 +" in `text-[clamp(1.8rem,3.5vw,2.8rem)] font-light leading-none text-white`

- "Joyful clients and growing." in `mt-2 text-[13px] text-white/60`

- A plain `h-12 w-12 bg-white` square on the right

---

**Dependencies:** React 18, Framer Motion (v12+), Tailwind CSS 3. Uses `useRef`, `useInView`, and `motion` from framer-motion. No other libraries.34:T1663,Build a React + TypeScript + Tailwind CSS + Vite section called "Partner with us". It's a large rounded white card with a giant serif heading, a dark pill button containing a portrait avatar, and an interactive mouse-trail effect that drops fading, slightly rotated images wherever the user moves the cursor inside the card.

### Fonts (global, in `src/index.css` before `@tailwind` directives)

```css
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Mondwest';
  src: url('/PPMondwest-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}
```

Place `PPMondwest-Regular.woff2` in `public/`. Also place a square portrait JPG in `public/` (e.g., `viktor.jpg`) to use as the avatar inside the CTA button.

### In-view hook (`src/hooks/useInViewAnimation.ts`)

`IntersectionObserver` with `threshold = 0.1`. Returns `{ ref, isInView }`. Sticky once true.

### Component (`src/components/PartnerSection.tsx`)

**Props**
- `images: string[]` — a list of image URLs used as the trail. Use the same GIF/animation URLs you have on the rest of the page (any 8+ rectangular assets).

**State / refs**
- `trailImages: TrailImage[]` where `TrailImage = { id: number; x: number; y: number; timestamp: number; src: string; rotation: number }`.
- `isHovered: boolean` (default false).
- `sectionRef` — ref on the inner rounded card (for bounding-rect math).
- `lastSpawnTime` — `useRef(0)` for spawn throttling.
- `imageIdCounter` — `useRef(0)` monotonically increasing id.
- `animationRef`, `isInView` from `useInViewAnimation()` placed on the outer `

**Mouse trail behaviour**
- `onMouseEnter` sets `isHovered = true`; `onMouseLeave` sets it false.
- `onMouseMove`:
  - Bail if `!isHovered` or `!sectionRef.current`.
  - Throttle: ignore if `Date.now() - lastSpawnTime.current < 80` ms.
  - Compute `(x, y)` relative to the section's `getBoundingClientRect()` (subtract `rect.left`, `rect.top`).
  - Pick a random image from `images`. Compute `rotation = (Math.random() - 0.5) * 20` degrees.
  - Push a new `TrailImage` with a fresh id, `timestamp = Date.now()`.
- Cleanup loop: `setInterval` every 50 ms removes any trail entry whose age `> 1000` ms.

**Per-image fade math** (applied as inline style on the trail wrapper):
- `age = now - img.timestamp`, `progress = min(age / 1000, 1)`.
- `opacity = 1 - progress`.
- `scale = 1 - progress * 0.15`.
- Position: `left = img.x - 50`, `top = img.y - 50`.
- Transform: `scale(${scale}) rotate(${img.rotation}deg)`.

**Markup**

Outer wrapper:
```html

```
Inner rounded card (this is the trail surface — attach `sectionRef`, `onMouseMove`, `onMouseEnter`, `onMouseLeave` here):
```
w-full max-w-7xl mx-auto py-48 bg-white relative overflow-hidden
shadow-[0_0_0_0.5px_rgba(0,0,0,0.05),0_4px_30px_rgba(0,0,0,0.08)]
rounded-[40px]
```

Inside the card, a centered content block above the trail:
```html

```

Heading:
```
text-[48px] md:text-[64px] lg:text-[80px] leading-[1.1]
text-[#0D212C] tracking-tight font-normal mb-12
```
- Inline style `fontFamily: "'PP Mondwest', serif"`.
- Text: `Partner with us`.
- Animation: when `isInView`, class `animate-fade-in-up`; else `opacity-0`. Inline `animationDelay: isInView ? '0.1s' : '0s'`.

CTA button (centered with `mx-auto`):
```
bg-[#051A24] text-white px-6 py-3.5 rounded-full
flex items-center gap-3
shadow-[0_1px_2px_0_rgba(5,26,36,0.1),0_4px_4px_0_rgba(5,26,36,0.09),0_9px_6px_0_rgba(5,26,36,0.05),0_17px_7px_0_rgba(5,26,36,0.01),0_26px_7px_0_rgba(5,26,36,0),inset_0_2px_8px_0_rgba(255,255,255,0.5)]
hover:bg-[#0D212C] transition-colors duration-200
```
- Animation: `animate-fade-in-up` (or `opacity-0`) with `animationDelay: '0.2s'`.
- Contents:
  1. `` of the portrait: `w-10 h-10 rounded-full object-cover`, `src` = portrait JPG path, `alt="Viktor Oddy"`.
  2. `Start chat with Viktor`.

After the centered content block, render the trail images list (still inside the card, not behind `z-10`):
```jsx
{trailImages.map((img) => (

))}
```

### Colors used
- Dark text / button bg: `#051A24` (button), `#0D212C` (heading and button hover).
- Card surface: `white`.
- Card shadow: `0 0 0 0.5px rgba(0,0,0,0.05), 0 4px 30px rgba(0,0,0,0.08)`.
- Button shadow (layered + inset highlight): as listed above.

### Behaviour summary
- Section fades in on scroll via `IntersectionObserver` (heading delay 0.1s, button delay 0.2s).
- Hovering the rounded card drops a randomized, rotated thumbnail every ~80 ms at the cursor; each thumbnail fades out and shrinks slightly over 1 second, then is removed.
- Trail thumbnails are 96 px wide (`w-24`), centered on the cursor (offset by 50 px), absolutely positioned, `pointer-events-none`, with `rounded-xl` and a soft `shadow-lg`.

### Required dependencies
`react`, `react-dom`, plus Vite + Tailwind toolchain. No `lucide-react` needed for this section.

---35:T31c2,# Recreate the "Course Curriculum" Section — Exact Prompt

Build a React + TypeScript + TailwindCSS section called `CurriculumSection` that exactly matches the spec below.

## Stack & Global Setup

- React 18 + Vite + TypeScript
- TailwindCSS with HSL semantic tokens
- `framer-motion` for animations
- `clsx` + `tailwind-merge` exposed as `cn()` helper in `@/lib/utils`
- Dark theme background: `#000000` (or whatever the page bg is; section uses `bg-background`)
- Body font: **Inter** (loaded globally)
- Icon font: **Material Symbols Outlined** (loaded globally via Google Fonts link, with variable axes FILL, wght, GRAD, opsz)
- Tailwind token: `colors.landing.surface = "rgba(255,255,255,0.10)"`
- Foreground text token resolves to white/near-white via HSL

```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
```

## Helper Components (exact code)

### `cn` helper — `@/lib/utils.ts`
```ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }
```

### `MIcon` — Material Symbols icon (`@/components/landing/icons/MIcon.tsx`)
```tsx
import { CSSProperties } from "react";
interface MIconProps { name: string; size?: number; className?: string; filled?: boolean; weight?: number; style?: CSSProperties; }
export const MIcon = ({ name, size = 16, className = "", filled = false, weight = 400, style }: MIconProps) => (
  <span aria-hidden="true"
    className={`material-symbols-outlined select-none leading-none inline-flex items-center justify-center ${className}`}
    style={{
      fontSize: size, width: size, height: size,
      fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' ${weight}, 'GRAD' 0, 'opsz' ${Math.min(48, Math.max(20, size))}`,
      ...style,
    }}>{name}</span>
);
```

### `FadeUp` — scroll reveal (`@/components/landing/primitives/FadeUp.tsx`)
- Uses `framer-motion` `motion.div` with `initial={{opacity:0, y:24}}`, `whileInView={{opacity:1, y:0}}`, `viewport={{ once:true, amount:0.3 }}`, transition `{ duration:0.6, delay, ease:[0.22,1,0.36,1] }`
- Honors `prefers-reduced-motion` (skip the y translate)
- Props: `delay`, `duration=0.6`, `y=24`, `once=true`, `amount=0.3`, `className`, children

### `SpotlightBorder` — mouse-tracked 1px gradient border (`@/components/landing/effects/SpotlightBorder.tsx`)
- A wrapper with `padding: 1px` whose background is a radial gradient following the cursor.
- Uses CSS masks (`linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)` with `mask-composite: exclude` / `-webkit-mask-composite: xor`) so only the 1px border ring is visible.
- A global `window` `mousemove` listener writes `--spot-x` / `--spot-y` CSS variables on the element via `getBoundingClientRect()`.
- Background style:
```
radial-gradient(${size}px circle at var(--spot-x,-200px) var(--spot-y,-200px), rgba(255,255,255,${intensity}), rgba(255,255,255,0) 60%)
```
- Props: `radius` ('xl'|'2xl'|'3xl'|'full', default '3xl'), `size` (default 300), `intensity` (default 0.35), `as` ('div'|'button'|'section'), `className`, children.
- Renders the parent `Tag` with `relative` + `rounded-*`, and an absolutely-positioned `<span aria-hidden>` filling `inset-0` with the mask style above.

## Section: `CurriculumSection`

File: `src/components/landing/curriculum/CurriculumSection.tsx`

### Data (verbatim)
```ts
const modules = [
  { title: "Module 1", subtitle: "Foundations of AI Design",
    lessons: [
      "Intro to The Future of Design and Building, how it started and where it's going.",
      "AI Design Philosophy / Why and what makes good AI design",
      "What is Claude and 10+ other best AI tools for design",
      "Setting up Claude",
    ]},
  { title: "Module 2", subtitle: "Building with AI",
    lessons: [
      "Creating the Branding/Logo with AI",
      "Pitch Deck Build",
      "Landing Page wireframes",
      "Design a Landing Page with AI",
      "Building High-end web app",
      "GitHub & Vercel Deploy",
      "Creating social media design with AI",
    ]},
  { title: "Module 3", subtitle: "Launch & Growth",
    lessons: [
      "Getting Seen, Launch Videos",
      "Building a portfolio",
      "X (Twitter) Strategy for Designers",
      "Making money selling digital products as a designer",
    ]},
  { title: "Module 4", subtitle: "Making Money as an AI Designer",
    lessons: [
      "Finding Clients + Making Money",
      "How to Make Clients Find You",
      "Selling AI Powered templates",
    ]},
];
```

### Layout & Structure

- `<section>` root: `relative w-full bg-background py-12 sm:py-16`
- Inner container: `mx-auto max-w-[1080px] px-4 sm:px-6`

**Header (centered, mb-12):**
- Pill badge wrapped in `<FadeUp delay={0}>`:
  - `inline-flex items-center gap-2 rounded-full bg-landing-surface border border-white/10 px-3 py-1 text-xs text-foreground/80 backdrop-blur`
  - Inside: `<span class="h-1.5 w-1.5 rounded-full bg-foreground/70" />` then text `"Course Curriculum"`
  - `mb-6`
- Heading in `<FadeUp delay={0.1}>`:
  - `<h2 class="text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground">A fully modern curriculum.</h2>`

**Accordion container:**
- `<SpotlightBorder radius="2xl" size={520} intensity={0.5} className="mx-auto w-full p-2 sm:p-3">`
- Inside: a div `rounded-2xl border border-white/10 px-6 sm:px-8` with inline style `backgroundColor: "#161616"`
- Map `modules`, each wrapped in `<FadeUp delay={0.15 * i} className="border-b border-white/10 last:border-b-0">` containing the `ModuleAccordion`.

### `ModuleAccordion` component (inside same file)

State: `openIndex` (number|null) controlled by parent; initial value `0` (Module 1 open on mount). Click toggles: open if closed, close if same index.

**Header button** (`<button>` full width):
- Class: `flex w-full items-center justify-between gap-4 py-6 text-left`
- Left content (div):
  - Eyebrow: `<div class="text-[11px] uppercase tracking-[0.2em] text-foreground/50">{title}</div>`
  - Subtitle: `<div class="mt-2 text-lg sm:text-xl font-normal text-foreground">{subtitle}</div>`
- Right icon container:
  - `flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border border-white/15 bg-white/[0.04] transition-transform duration-300`
  - When open: add `rotate-180`
  - Icon: `<MIcon name="expand_more" size={16} className="text-foreground/80" />`

**Collapse body:**
- Wrap in `<AnimatePresence initial={false}>`
- When open, render `motion.div` with:
  - `initial={{ height: 0, opacity: 0 }}`
  - `animate={{ height: "auto", opacity: 1 }}`
  - `exit={{ height: 0, opacity: 0 }}`
  - `transition={{ duration: 0.3, ease: "easeInOut" }}`
  - `className="overflow-hidden"`
- Inside: `<ul class="pb-6">` mapping each lesson:
  - `<li class="flex items-center gap-3 border-t border-white/10 py-4 text-sm text-foreground/85">`
  - Check bullet: `<span class="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/[0.06]"><MIcon name="check" size={12} className="text-foreground" /></span>`
  - Lesson text follows the bullet.

### Behavior Specs
- Module 1 starts open on first render.
- Only one module open at a time. Clicking the open module closes it (openIndex set to null).
- The chevron rotates 180° smoothly (300ms) when its module opens.
- Collapse animates height + opacity over 300ms easeInOut.
- The whole accordion card has a 1px border that picks up a soft white glow following the cursor anywhere on the page (SpotlightBorder, size=520, intensity=0.5).
- Pill, heading, and each module row fade up on scroll (intersection ≥30%, fires once). Modules stagger by 0.15s per index.

### Tailwind config additions
```ts
// tailwind.config.ts theme.extend.colors
landing: { surface: "rgba(255, 255, 255, 0.10)" }
```
Background tokens (`bg-background`, `text-foreground`) come from your HSL CSS variables in `index.css`.

## Full Component Source (drop-in)

```tsx
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/lib/utils";
import { MIcon } from "@/components/landing/icons/MIcon";
import { SpotlightBorder } from "@/components/landing/effects/SpotlightBorder";
import { FadeUp } from "@/components/landing/primitives/FadeUp";

type Module = { title: string; subtitle: string; lessons: string[] };

const modules: Module[] = [ /* ...data above verbatim... */ ];

export const CurriculumSection = () => {
  const [openIndex, setOpenIndex] = useState<number | null>(0);
  return (
    <section className="relative w-full bg-background py-12 sm:py-16">
      <div className="mx-auto max-w-[1080px] px-4 sm:px-6">
        <div className="mb-12 flex flex-col items-center text-center">
          <FadeUp delay={0}>
            <span className="mb-6 inline-flex items-center gap-2 rounded-full bg-landing-surface border border-white/10 px-3 py-1 text-xs text-foreground/80 backdrop-blur">
              <span className="h-1.5 w-1.5 rounded-full bg-foreground/70" />
              Course Curriculum
            </span>
          </FadeUp>
          <FadeUp delay={0.1}>
            <h2 className="text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground">
              A fully modern curriculum.
            </h2>
          </FadeUp>
        </div>
        <SpotlightBorder radius="2xl" size={520} intensity={0.5} className="mx-auto w-full p-2 sm:p-3">
          <div className="rounded-2xl border border-white/10 px-6 sm:px-8" style={{ backgroundColor: "#161616" }}>
            {modules.map((m, i) => (
              <FadeUp key={m.title} delay={0.15 * i} className="border-b border-white/10 last:border-b-0">
                <ModuleAccordion module={m} isOpen={openIndex === i} onToggle={() => setOpenIndex(openIndex === i ? null : i)} />
              </FadeUp>
            ))}
          </div>
        </SpotlightBorder>
      </div>
    </section>
  );
};
```

## Acceptance Checklist
- [ ] Centered pill "● Course Curriculum" + heading "A fully modern curriculum." (Inter, normal weight, tight tracking)
- [ ] Card bg `#161616`, 1px white/10 border, rounded-2xl, mouse-tracked spotlight glow on border (size 520, intensity 0.5)
- [ ] 4 module rows separated by `border-white/10`, last row no border
- [ ] Each row: tiny uppercase eyebrow "Module N" (tracking 0.2em, foreground/50) + subtitle (text-lg sm:text-xl)
- [ ] Right-side 36px circular chevron button, rotates 180° on open (300ms)
- [ ] Module 1 open by default; only one open at a time; click open module to close
- [ ] Lessons list inside collapse: each lesson row separated by top border, 20px circular check bullet, text-sm foreground/85
- [ ] Collapse animates height + opacity 300ms easeInOut
- [ ] Pill, heading, and each module fade up on scroll (once, amount 0.3), modules stagger 0.15s
- [ ] Respects `prefers-reduced-motion`36:T275d,Build a "CTA + Footer" section component for a React + Vite + Tailwind CSS project. This is a cinematic full-width call-to-action section with an HLS video background, centered text, two CTA buttons, and a minimal footer bar at the bottom. Black background, white text, liquid glassmorphism effects.

---

### FONTS (import in index.css or HTML head)

```
https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap
```

- Headings: `Instrument Serif` italic -- Tailwind class `font-heading`
- Body: `Barlow` -- Tailwind class `font-body`

Add to `tailwind.config.ts` under `theme.extend.fontFamily`:
```js
heading: ["'Instrument Serif'", "serif"],
body: ["'Barlow'", "sans-serif"],
```

Base styles in `index.css`:
```css
body {
  font-family: 'Barlow', sans-serif;
  background: #000;
  color: #fff;
}
h1, h2, h3 {
  font-family: 'Instrument Serif', serif;
}
```

---

### LIQUID GLASS CSS (add to index.css inside `@layer components`)

```css
@layer components {
  .liquid-glass-strong {
    background: rgba(255, 255, 255, 0.01);
    background-blend-mode: luminosity;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border: none;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05),
      inset 0 1px 1px rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
  }

.liquid-glass-strong::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.2) 20%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0) 60%,
      rgba(255, 255, 255, 0.2) 80%,
      rgba(255, 255, 255, 0.5) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}
```

The `::before` pseudo-element uses a mask-composite trick to render a thin glowing gradient border that fades out in the middle of each side.

---

### DEPENDENCIES

```
npm install lucide-react hls.js
```

- `ArrowUpRight` icon from `lucide-react`
- `hls.js` for streaming the Mux HLS video

---

### HLS VIDEO URL (Mux)

```
https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8
```

This is an HLS stream that requires `hls.js` to play in non-Safari browsers. Safari supports HLS natively via `<video>`.

---

### EXACT COMPONENT CODE

```tsx
import { useEffect, useRef } from "react";
import { ArrowUpRight } from "lucide-react";
import Hls from "hls.js";

const CtaFooter = () => {
  const videoRef = useRef<HTMLVideoElement>(null);

useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

const src = "https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8";

if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(src);
      hls.attachMedia(video);
      return () => hls.destroy();
    } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
      video.src = src;
    }
  }, []);

return (
    <section className="relative py-32 px-6 md:px-16 lg:px-24 text-center overflow-hidden">
      {/* Background HLS Video */}
      <video
        ref={videoRef}
        autoPlay
        loop
        muted
        playsInline
        className="absolute inset-0 w-full h-full object-cover z-0"
      />

{/* Top fade */}
      <div
        className="absolute top-0 left-0 right-0 z-[1] pointer-events-none"
        style={{ height: '200px', background: 'linear-gradient(to bottom, black, transparent)' }}
      />
      {/* Bottom fade */}
      <div
        className="absolute bottom-0 left-0 right-0 z-[1] pointer-events-none"
        style={{ height: '200px', background: 'linear-gradient(to top, black, transparent)' }}
      />

{/* Content */}
      <div className="relative z-10">
        <h2 className="text-5xl md:text-6xl lg:text-7xl font-heading italic text-white tracking-tight leading-[0.85] max-w-3xl mx-auto mb-4">
          Your next website starts here.
        </h2>
        <p className="text-white/60 font-body font-light text-sm md:text-base max-w-xl mx-auto mb-8">
          Book a free strategy call. See what AI‑powered design can do. No commitment, no pressure. Just possibilities.
        </p>
        <div className="flex items-center justify-center gap-6">
          <button className="liquid-glass-strong rounded-full px-6 py-3 text-sm font-medium text-white flex items-center gap-2 hover:bg-white/10 transition-all font-body">
            Book a Call
            <ArrowUpRight className="h-5 w-5" />
          </button>
          <button className="bg-white text-black rounded-full px-6 py-3 text-sm font-medium flex items-center gap-2 hover:bg-white/90 transition-colors font-body">
            View Pricing
            <ArrowUpRight className="h-4 w-4" />
          </button>
        </div>

{/* Footer */}
        <div className="mt-32 pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-white/40 font-body font-light text-xs">
            © 2026 Studio. All rights reserved.
          </p>
          <div className="flex items-center gap-6">
            {["Privacy", "Terms", "Contact"].map((link) => (
              <a key={link} href="#" className="text-white/40 hover:text-white/70 font-body font-light text-xs transition-colors">
                {link}
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default CtaFooter;
```

---

### SECTION STRUCTURE BREAKDOWN

```
<section>  (relative, py-32, px-6 md:px-16 lg:px-24, text-center, overflow-hidden)
  |
  +-- <video>  (absolute inset-0, full cover, z-0, autoPlay loop muted playsInline)
  |
  +-- Top gradient fade  (absolute top-0, 200px tall, black->transparent, z-[1])
  +-- Bottom gradient fade  (absolute bottom-0, 200px tall, transparent<-black, z-[1])
  |
  +-- Content wrapper  (relative z-10)
       |
       +-- <h2> heading
       +-- <p> subtext
       +-- Button row (flex, centered, gap-6)
       |    +-- "Book a Call" (liquid-glass-strong, rounded-full)
       |    +-- "View Pricing" (bg-white text-black, rounded-full)
       |
       +-- Footer bar (mt-32, border-t border-white/10)
            +-- Copyright (left)
            +-- Links: Privacy, Terms, Contact (right)
```

---

### HLS VIDEO SETUP PATTERN

The `useEffect` hook initializes `hls.js` for non-Safari browsers and falls back to native HLS for Safari:

1. Check `Hls.isSupported()` -- if true, create an `Hls` instance, load the `.m3u8` source, attach to the `<video>` element
2. If not supported but the browser can play `application/vnd.apple.mpegurl` (Safari), set `video.src` directly
3. Cleanup: `hls.destroy()` on unmount

The `<video>` element uses `autoPlay loop muted playsInline` -- all four attributes are required for autoplay to work across browsers (especially mobile).

---

### VIDEO OVERLAY FADE PATTERN

Two absolutely positioned `<div>` elements create black gradient fades at the top and bottom edges, making the video blend seamlessly into the surrounding black background:

- **Top fade**: `height: 200px`, `background: linear-gradient(to bottom, black, transparent)`, `z-[1]`, `pointer-events-none`
- **Bottom fade**: `height: 200px`, `background: linear-gradient(to top, black, transparent)`, `z-[1]`, `pointer-events-none`

Content sits at `z-10` above both the video and the fades.

---

### RESPONSIVE BEHAVIOR

| Breakpoint | Heading size | Padding | Footer layout |
|---|---|---|---|
| Mobile (default) | `text-5xl` | `px-6` | Stacked column (`flex-col`) |
| Tablet (`md:`) | `text-6xl` | `px-16` | Horizontal row (`md:flex-row`) |
| Desktop (`lg:`) | `text-7xl` | `px-24` | Horizontal row |

- Button row always horizontal (`flex items-center justify-center gap-6`), buttons stack naturally if viewport is very narrow
- Footer: `flex-col md:flex-row` -- copyright and links stack on mobile, sit side-by-side on tablet+
- Subtext constrained to `max-w-xl mx-auto`
- Heading constrained to `max-w-3xl mx-auto`

---

### TYPOGRAPHY DETAILS

| Element | Classes |
|---|---|
| Heading | `text-5xl md:text-6xl lg:text-7xl font-heading italic text-white tracking-tight leading-[0.85] max-w-3xl mx-auto mb-4` |
| Subtext | `text-white/60 font-body font-light text-sm md:text-base max-w-xl mx-auto mb-8` |
| Glass button text | `text-sm font-medium text-white font-body` |
| Solid button text | `text-sm font-medium` (inherits `text-black` from `bg-white text-black`) |
| Copyright | `text-white/40 font-body font-light text-xs` |
| Footer links | `text-white/40 hover:text-white/70 font-body font-light text-xs transition-colors` |

---

### BUTTON DETAILS

**Primary CTA ("Book a Call"):**
`liquid-glass-strong rounded-full px-6 py-3 text-sm font-medium text-white flex items-center gap-2 hover:bg-white/10 transition-all font-body`
- Glass background with gradient border via `::before`
- `ArrowUpRight` icon at `h-5 w-5`

**Secondary CTA ("View Pricing"):**
`bg-white text-black rounded-full px-6 py-3 text-sm font-medium flex items-center gap-2 hover:bg-white/90 transition-colors font-body`
- Solid white background, black text
- `ArrowUpRight` icon at `h-4 w-4` (slightly smaller than the primary)

---

### EXACT TEXT CONTENT

**Heading**: "Your next website starts here."
**Subtext**: "Book a free strategy call. See what AI-powered design can do. No commitment, no pressure. Just possibilities."
**Button 1**: "Book a Call"
**Button 2**: "View Pricing"
**Copyright**: "(c) 2026 Studio. All rights reserved."
**Footer links**: "Privacy", "Terms", "Contact"

---

### PARENT CONTEXT

This section sits on a `bg-black` parent container as the last section of the page. The top gradient fade blends the video into the section above (which also has a black background). The footer bar is part of this same component -- there is no separate footer component.8:["$","$L22",null,{"activeCategory":"sections","items":[{"category":"sections","id":385,"media":[{"id":422,"alt":"Radial Diagram","caption":null,"folder":null,"updatedAt":"2026-08-13T14:04:54.806Z","createdAt":"2026-08-13T14:04:54.806Z","url":"/api/media/file/sections-0045-01.webp","thumbnailURL":"/api/media/file/sections-0045-01-300x223.webp","filename":"sections-0045-01.webp","mimeType":"image/webp","filesize":273280,"width":640,"height":476,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0045-01-300x223.webp","width":300,"height":223,"mimeType":"image/webp","filesize":106706,"filename":"sections-0045-01-300x223.webp"},"square":{"url":"/api/media/file/sections-0045-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":261298,"filename":"sections-0045-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0045-01-600x446.webp","width":600,"height":446,"mimeType":"image/webp","filesize":283448,"filename":"sections-0045-01-600x446.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":613,"prompt":"$23","title":"Radial Diagram"},{"category":"sections","id":386,"media":[{"id":423,"alt":"Rocket CTA","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:00.070Z","createdAt":"2026-08-13T14:05:00.070Z","url":"/api/media/file/sections-0044-01.webp","thumbnailURL":"/api/media/file/sections-0044-01-300x219.webp","filename":"sections-0044-01.webp","mimeType":"image/webp","filesize":894272,"width":640,"height":468,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0044-01-300x219.webp","width":300,"height":219,"mimeType":"image/webp","filesize":335266,"filename":"sections-0044-01-300x219.webp"},"square":{"url":"/api/media/file/sections-0044-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":866408,"filename":"sections-0044-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0044-01-600x439.webp","width":600,"height":439,"mimeType":"image/webp","filesize":996902,"filename":"sections-0044-01-600x439.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":596,"prompt":"$24","title":"Rocket CTA"},{"category":"sections","id":387,"media":[{"id":424,"alt":"Media Card Carousel","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:04.266Z","createdAt":"2026-08-13T14:05:04.266Z","url":"/api/media/file/sections-0043-01.webp","thumbnailURL":"/api/media/file/sections-0043-01-300x219.webp","filename":"sections-0043-01.webp","mimeType":"image/webp","filesize":692872,"width":640,"height":468,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0043-01-300x219.webp","width":300,"height":219,"mimeType":"image/webp","filesize":233832,"filename":"sections-0043-01-300x219.webp"},"square":{"url":"/api/media/file/sections-0043-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":568494,"filename":"sections-0043-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0043-01-600x439.webp","width":600,"height":439,"mimeType":"image/webp","filesize":641798,"filename":"sections-0043-01-600x439.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":586,"prompt":"$25","title":"Media Card Carousel"},{"category":"sections","id":388,"media":[{"id":425,"alt":"Nike Hover","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:08.090Z","createdAt":"2026-08-13T14:05:08.090Z","url":"/api/media/file/sections-0042-01.webp","thumbnailURL":"/api/media/file/sections-0042-01-300x221.webp","filename":"sections-0042-01.webp","mimeType":"image/webp","filesize":347466,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0042-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":147232,"filename":"sections-0042-01-300x221.webp"},"square":{"url":"/api/media/file/sections-0042-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":358650,"filename":"sections-0042-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0042-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":375692,"filename":"sections-0042-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":585,"prompt":"$26","title":"Nike Hover"},{"category":"sections","id":389,"media":[{"id":426,"alt":"Daisy Sweet","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:13.315Z","createdAt":"2026-08-13T14:05:13.315Z","url":"/api/media/file/sections-0041-01.webp","thumbnailURL":"/api/media/file/sections-0041-01-300x221.webp","filename":"sections-0041-01.webp","mimeType":"image/webp","filesize":1439002,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0041-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":470716,"filename":"sections-0041-01-300x221.webp"},"square":{"url":"/api/media/file/sections-0041-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1112000,"filename":"sections-0041-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0041-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":1234960,"filename":"sections-0041-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":564,"prompt":"$27","title":"Daisy Sweet"},{"category":"sections","id":390,"media":[{"id":427,"alt":"Glow Features","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:13.650Z","createdAt":"2026-08-13T14:05:13.650Z","url":"/api/media/file/sections-0040-01.png","thumbnailURL":"/api/media/file/sections-0040-01-300x223.png","filename":"sections-0040-01.png","mimeType":"image/png","filesize":546255,"width":1834,"height":1362,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0040-01-300x223.png","width":300,"height":223,"mimeType":"image/png","filesize":40334,"filename":"sections-0040-01-300x223.png"},"square":{"url":"/api/media/file/sections-0040-01-500x500.png","width":500,"height":500,"mimeType":"image/png","filesize":93481,"filename":"sections-0040-01-500x500.png"},"small":{"url":"/api/media/file/sections-0040-01-600x446.png","width":600,"height":446,"mimeType":"image/png","filesize":106468,"filename":"sections-0040-01-600x446.png"},"medium":{"url":"/api/media/file/sections-0040-01-900x668.png","width":900,"height":668,"mimeType":"image/png","filesize":191165,"filename":"sections-0040-01-900x668.png"},"large":{"url":"/api/media/file/sections-0040-01-1400x1040.png","width":1400,"height":1040,"mimeType":"image/png","filesize":369615,"filename":"sections-0040-01-1400x1040.png"},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":"/api/media/file/sections-0040-01-1200x630.png","width":1200,"height":630,"mimeType":"image/png","filesize":302481,"filename":"sections-0040-01-1200x630.png"}}}],"order":562,"prompt":"$28","title":"Glow Features"},{"category":"sections","id":391,"media":[{"id":428,"alt":"Glassmorphic Feature Tabs","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:18.027Z","createdAt":"2026-08-13T14:05:18.027Z","url":"/api/media/file/sections-0039-01.webp","thumbnailURL":"/api/media/file/sections-0039-01-300x228.webp","filename":"sections-0039-01.webp","mimeType":"image/webp","filesize":589528,"width":640,"height":486,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0039-01-300x228.webp","width":300,"height":228,"mimeType":"image/webp","filesize":222148,"filename":"sections-0039-01-300x228.webp"},"square":{"url":"/api/media/file/sections-0039-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":658930,"filename":"sections-0039-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0039-01-600x456.webp","width":600,"height":456,"mimeType":"image/webp","filesize":607116,"filename":"sections-0039-01-600x456.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":552,"prompt":"$29","title":"Glassmorphic Feature Tabs"},{"category":"sections","id":392,"media":[{"id":429,"alt":"Rocket FAQ","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:20.439Z","createdAt":"2026-08-13T14:05:20.439Z","url":"/api/media/file/sections-0038-01.webp","thumbnailURL":"/api/media/file/sections-0038-01-300x220.webp","filename":"sections-0038-01.webp","mimeType":"image/webp","filesize":126370,"width":640,"height":470,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0038-01-300x220.webp","width":300,"height":220,"mimeType":"image/webp","filesize":50914,"filename":"sections-0038-01-300x220.webp"},"square":{"url":"/api/media/file/sections-0038-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":147270,"filename":"sections-0038-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0038-01-600x441.webp","width":600,"height":441,"mimeType":"image/webp","filesize":138156,"filename":"sections-0038-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":532,"prompt":"$2a","title":"Rocket FAQ"},{"category":"sections","id":393,"media":[{"id":430,"alt":"Nimbus Sticky Cards","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:23.857Z","createdAt":"2026-08-13T14:05:23.856Z","url":"/api/media/file/sections-0037-01.webp","thumbnailURL":"/api/media/file/sections-0037-01-300x217.webp","filename":"sections-0037-01.webp","mimeType":"image/webp","filesize":297746,"width":640,"height":464,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0037-01-300x217.webp","width":300,"height":217,"mimeType":"image/webp","filesize":108426,"filename":"sections-0037-01-300x217.webp"},"square":{"url":"/api/media/file/sections-0037-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":291360,"filename":"sections-0037-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0037-01-600x435.webp","width":600,"height":435,"mimeType":"image/webp","filesize":286376,"filename":"sections-0037-01-600x435.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":527,"prompt":"$2b","title":"Nimbus Sticky Cards"},{"category":"sections","id":394,"media":[{"id":431,"alt":"Projects Catalog","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:30.280Z","createdAt":"2026-08-13T14:05:30.280Z","url":"/api/media/file/sections-0036-01.webp","thumbnailURL":"/api/media/file/sections-0036-01-300x221.webp","filename":"sections-0036-01.webp","mimeType":"image/webp","filesize":1845618,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0036-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":601186,"filename":"sections-0036-01-300x221.webp"},"square":{"url":"/api/media/file/sections-0036-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1481800,"filename":"sections-0036-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0036-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":1705462,"filename":"sections-0036-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":511,"prompt":"$2c","title":"Projects Catalog"},{"category":"sections","id":395,"media":[{"id":432,"alt":"What Package Fits You","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:30.339Z","createdAt":"2026-08-13T14:05:30.339Z","url":"/api/media/file/sections-0035-01.webp","thumbnailURL":"/api/media/file/sections-0035-01-300x220.webp","filename":"sections-0035-01.webp","mimeType":"image/webp","filesize":7356,"width":480,"height":352,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0035-01-300x220.webp","width":300,"height":220,"mimeType":"image/webp","filesize":4140,"filename":"sections-0035-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":499,"prompt":"$2d","title":"What Package Fits You"},{"category":"sections","id":396,"media":[{"id":433,"alt":"Cognitra Offer","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:33.945Z","createdAt":"2026-08-13T14:05:33.945Z","url":"/api/media/file/sections-0034-01.webp","thumbnailURL":"/api/media/file/sections-0034-01-300x221.webp","filename":"sections-0034-01.webp","mimeType":"image/webp","filesize":228254,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0034-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":97920,"filename":"sections-0034-01-300x221.webp"},"square":{"url":"/api/media/file/sections-0034-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":204714,"filename":"sections-0034-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0034-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":224434,"filename":"sections-0034-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":495,"prompt":"$2e","title":"Cognitra Offer"},{"category":"sections","id":397,"media":[{"id":434,"alt":"Solace sign-in","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:41.851Z","createdAt":"2026-08-13T14:05:41.851Z","url":"/api/media/file/sections-0033-01.webp","thumbnailURL":"/api/media/file/sections-0033-01-300x222.webp","filename":"sections-0033-01.webp","mimeType":"image/webp","filesize":3014022,"width":640,"height":474,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0033-01-300x222.webp","width":300,"height":222,"mimeType":"image/webp","filesize":886518,"filename":"sections-0033-01-300x222.webp"},"square":{"url":"/api/media/file/sections-0033-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":2024110,"filename":"sections-0033-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0033-01-600x444.webp","width":600,"height":444,"mimeType":"image/webp","filesize":2650564,"filename":"sections-0033-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":494,"prompt":"$2f","title":"Solace sign-in"},{"category":"sections","id":398,"media":[{"id":435,"alt":"Orbis Hello","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:48.409Z","createdAt":"2026-08-13T14:05:48.409Z","url":"/api/media/file/sections-0032-01.webp","thumbnailURL":"/api/media/file/sections-0032-01-300x220.webp","filename":"sections-0032-01.webp","mimeType":"image/webp","filesize":1277542,"width":640,"height":470,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0032-01-300x220.webp","width":300,"height":220,"mimeType":"image/webp","filesize":507750,"filename":"sections-0032-01-300x220.webp"},"square":{"url":"/api/media/file/sections-0032-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1137368,"filename":"sections-0032-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0032-01-600x441.webp","width":600,"height":441,"mimeType":"image/webp","filesize":1232308,"filename":"sections-0032-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":474,"prompt":"$30","title":"Orbis Hello"},{"category":"sections","id":399,"media":[{"id":436,"alt":"Global CTA Footer","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:54.132Z","createdAt":"2026-08-13T14:05:54.131Z","url":"/api/media/file/sections-0031-01.webp","thumbnailURL":"/api/media/file/sections-0031-01-300x216.webp","filename":"sections-0031-01.webp","mimeType":"image/webp","filesize":1098184,"width":640,"height":460,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0031-01-300x216.webp","width":300,"height":216,"mimeType":"image/webp","filesize":429424,"filename":"sections-0031-01-300x216.webp"},"square":{"url":"/api/media/file/sections-0031-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1049834,"filename":"sections-0031-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0031-01-600x431.webp","width":600,"height":431,"mimeType":"image/webp","filesize":1098880,"filename":"sections-0031-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":469,"prompt":"$31","title":"Global CTA Footer"},{"category":"sections","id":400,"media":[{"id":437,"alt":"NexaCore Results","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:55.663Z","createdAt":"2026-08-13T14:05:55.663Z","url":"/api/media/file/sections-0030-01.webp","thumbnailURL":"/api/media/file/sections-0030-01-300x218.webp","filename":"sections-0030-01.webp","mimeType":"image/webp","filesize":50818,"width":640,"height":466,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0030-01-300x218.webp","width":300,"height":218,"mimeType":"image/webp","filesize":8446,"filename":"sections-0030-01-300x218.webp"},"square":{"url":"/api/media/file/sections-0030-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":44194,"filename":"sections-0030-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0030-01-600x437.webp","width":600,"height":437,"mimeType":"image/webp","filesize":43232,"filename":"sections-0030-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":468,"prompt":"$32","title":"NexaCore Results"},{"category":"sections","id":401,"media":[{"id":438,"alt":"Bento Grid Stats","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:57.546Z","createdAt":"2026-08-13T14:05:57.546Z","url":"/api/media/file/sections-0029-01.webp","thumbnailURL":"/api/media/file/sections-0029-01-300x216.webp","filename":"sections-0029-01.webp","mimeType":"image/webp","filesize":216374,"width":640,"height":460,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0029-01-300x216.webp","width":300,"height":216,"mimeType":"image/webp","filesize":72124,"filename":"sections-0029-01-300x216.webp"},"square":{"url":"/api/media/file/sections-0029-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":189202,"filename":"sections-0029-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0029-01-600x431.webp","width":600,"height":431,"mimeType":"image/webp","filesize":205548,"filename":"sections-0029-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":464,"prompt":"$33","title":"Bento Grid Stats"},{"category":"sections","id":402,"media":[{"id":439,"alt":"Mouse Trail CTA","caption":null,"folder":null,"updatedAt":"2026-08-13T14:05:59.365Z","createdAt":"2026-08-13T14:05:59.365Z","url":"/api/media/file/sections-0028-01.webp","thumbnailURL":"/api/media/file/sections-0028-01-300x237.webp","filename":"sections-0028-01.webp","mimeType":"image/webp","filesize":179364,"width":640,"height":506,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0028-01-300x237.webp","width":300,"height":237,"mimeType":"image/webp","filesize":75074,"filename":"sections-0028-01-300x237.webp"},"square":{"url":"/api/media/file/sections-0028-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":178102,"filename":"sections-0028-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0028-01-600x474.webp","width":600,"height":474,"mimeType":"image/webp","filesize":167396,"filename":"sections-0028-01-600x474.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":455,"prompt":"$34","title":"Mouse Trail CTA"},{"category":"sections","id":403,"media":[{"id":440,"alt":"Apex Program Accordion","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:01.383Z","createdAt":"2026-08-13T14:06:01.383Z","url":"/api/media/file/sections-0027-01.webp","thumbnailURL":"/api/media/file/sections-0027-01-300x222.webp","filename":"sections-0027-01.webp","mimeType":"image/webp","filesize":110076,"width":640,"height":474,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0027-01-300x222.webp","width":300,"height":222,"mimeType":"image/webp","filesize":40832,"filename":"sections-0027-01-300x222.webp"},"square":{"url":"/api/media/file/sections-0027-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":127568,"filename":"sections-0027-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0027-01-600x444.webp","width":600,"height":444,"mimeType":"image/webp","filesize":114702,"filename":"sections-0027-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":442,"prompt":"$35","title":"Apex Program Accordion"},{"category":"sections","id":404,"media":[{"id":441,"alt":"Liquid Glass CTA","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:06.388Z","createdAt":"2026-08-13T14:06:06.388Z","url":"/api/media/file/sections-0026-01.webp","thumbnailURL":"/api/media/file/sections-0026-01-300x218.webp","filename":"sections-0026-01.webp","mimeType":"image/webp","filesize":897622,"width":640,"height":466,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0026-01-300x218.webp","width":300,"height":218,"mimeType":"image/webp","filesize":351502,"filename":"sections-0026-01-300x218.webp"},"square":{"url":"/api/media/file/sections-0026-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":751484,"filename":"sections-0026-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0026-01-600x437.webp","width":600,"height":437,"mimeType":"image/webp","filesize":838546,"filename":"sections-0026-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":431,"prompt":"$36","title":"Liquid Glass CTA"}],"page":3,"query":"","totalDocs":85,"totalPages":5}]
</article></body></html>