AI website build-prompts for ChatGPT

Copy this promptPrompt page

Create a mobile-first logistics company landing page for "CARGOX GROUP" displayed inside an iPhone 15 Pro mockup frame. Use React, TypeScript, Tailwind CSS, and the `motion` library (motion/react) for animations. Use Vite as the build tool.

## Structure

The page is wrapped in a realistic iPhone 15 Pro mockup (aspect ratio 393:852) with:
- Dark frame (#1a1a1a) with 54px border-radius, 8px border (#2a2a2a), inset highlight (#3a3a3a)
- Dynamic Island (126x36px, centered at top, black, 20px border-radius, z-200)
- Home indicator at bottom (134x5px, white 30% opacity)
- Scrollable content area inside with hidden scrollbar and `container-type: size`

The body background is #111111. The scrollable container uses `container-type: size; container-name: phone;` for container queries.

## Fonts

- Import **Barlow Condensed 800** from Google Fonts
- Body font: Helvetica, Arial, sans-serif

## SECTION 1: Hero (full viewport height of the container using `100cqb`)

**Background:** Autoplaying, muted, looping video:
```
https://meez.design/web/media/ext/597d53d9b15f2d2d.mp4
```

**Navbar (absolute, top):**
- Left: "CARGOX" (white) / "GROUP" (yellow #ffda00) in Barlow Condensed 800, uppercase, clamp(22px, 6vw, 32px)
- Right: Hamburger menu icon (lucide-react Menu/X, 28px, white)
- Both slide in from left/right with 0.6s expo-out ease

**Mobile menu overlay:** Fixed, z-99, background #6682c2, centered nav items (Services, Industries, Company) in white 24px. AnimatePresence with scale + opacity transitions. Items stagger in from bottom.

**Hero content (bottom of section, z-10, padding 0 20px 24px):**
- Large headline in Barlow Condensed 800, uppercase, clamp(48px, 14vw, 72px), line-height 0.82:
  - "BEYOND" (white) - slides from x:-400
  - "BORDERS" (yellow #ffda00, text-align right) - slides from x:+400
  - "AND LIMITS" (white) - slides from x:-400
  - Staggered delays: 0s, 0.13s, 0.26s. Duration 0.85s, expo-out [0.16, 1, 0.3, 1]
- CTA Button: Custom SVG pill shape (fill #ffda00) with a circular end section containing a rotating arrow (white stroke, rotates from -135deg to -90deg on hover). Text "Get in touch" centered in the non-circle area. Font: Helvetica 20px, color #002a35. Hover: scale 1.08, y:-2. Tap: scale 0.97.

**Show hero content only after video `onCanPlay` fires** (fade in with AnimatePresence).

## SECTION 2: Info Card

**Background:** `linear-gradient(180deg, #C8C7B3 0%, #F0B172 50%, #EA7C58 100%)`
**Padding:** clamp(60px, 12vh, 120px) 20px

**Tagline** (scroll-triggered, slides from left):
- "LOGISTICS" in Barlow Condensed 800, white, clamp(44px, 13vw, 64px)
- "shaped by scale" / "powered by precision" in Helvetica, clamp(18px, 5vw, 26px), color #1a1a1a

**World Map:**
- Background map image: `https://meez.design/web/media/ext/f9ce5f887859208d.png`
- Aspect ratio 435/340, extends 20px beyond container edges
- SVG overlay (viewBox 0 0 299.037 142.509) at left:10%, top:18%, width:80% with 4 curved route paths in yellow (#FFDA00, 2.5 stroke):
  ```
  M128.161 74.6764C79.9989 130.001 71.9994 46.0005 20.9815 111.737
  M216.999 9.99985C260.499 12.4998 222.499 71.9998 291.999 58.9998
  M130.102 70.9998C144.499 -32.0002 183.852 70.2739 219.999 3.99985
  M14.4999 16.9998C111 20.9998 -53.0003 73.4998 21.4999 107
  ```
- Route lines animate with `pathLength` from 0 to 1, staggered
- Animated yellow arrow polygons (points="0,-4 8,0 0,4") using SVG `<animateMotion>` along each path, rotating automatically
- 5 stop dots at coordinates: [9.519,15.519], [289.519,59.518], [220.519,9.519], [125.518,78.519], [19.519,104.519] - each is a yellow circle r=9.519 with dark center r=3.389 (#002A35). They pop in with scale animation.
- 3 floating transport icons (white circle bg, 16% width, rounded-full, box-shadow):
  - Ship: `https://meez.design/web/media/ext/0d3cbcc042a65ea1.png` at left:26%, top:28.9%
  - Car: `https://meez.design/web/media/ext/457552dcad941164.png` at left:70.8%, top:15.6%, rotate(9.73deg)
  - Plane: `https://meez.design/web/media/ext/c4fe9416e8e5502f.png` at left:55.2%, top:52.1%, rotate(180deg) scaleY(-1)
  - Icons pop in (scale 0.5 -> 1), then continuously float up/down with infinite y animation

**Stats** (scroll-triggered, slide in from opposite sides):
- "3M+" white Barlow Condensed 800, clamp(50px, 14vw, 72px) + "tons of cargo / delivered / without delays" in #1a1a1a, clamp(14px, 3.8vw, 18px)
- "13+" same styling, indented left clamp(40px, 12vw, 90px) + "years of trusted / and reliable / operations"

## SECTION 3: Contact Us

**Background:** #0a1f2b
**Padding:** clamp(48px, 10vh, 96px) 20px clamp(32px, 6vh, 64px)

**Heading** (scroll-triggered fade+slide from bottom):
- "CONTACT " (white) + "US" (yellow #ffda00), Barlow Condensed 800, clamp(44px, 13vw, 64px)
- Subtitle: "Complete the form and our team will contact you soon." in #b0b8bc, clamp(14px, 3.8vw, 18px)

**Form fields** (scroll-triggered, stagger from bottom):
- 3 inputs (First Name, Last Name, E-mail): pill-shaped (40px radius), bg rgba(255,255,255,0.08), white text, clamp(14px, 3.5vw, 16px). On focus: bg brightens to 0.14, slight scale 1.01.
- "Send" button: pill, bg #FFDA00, color #0a1f2b, font-weight 700, clamp(16px, 4vw, 20px). Hover: scale 1.03, y:-2, bg #ffe84d. Tap: scale 0.97.

**Footer info:**
- Email: info@cargox-group.com
- Phone: +380 44 234-7890
- Color #b0b8bc, hover slides right 4px and turns white

**Social icons** (3 white circles 44x44, hover: scale 1.15, y:-3):
- Instagram, LinkedIn, Facebook (inline SVG icons, fill #0a1f2b)

**Scroll-to-top button** (right side): white 44x44 circle with up-arrow SVG, same hover animation.

**Copyright:** "(c) 2025. All rights reserved." in #6b7a80, clamp(12px, 3.2vw, 14px)

## Animation System

- Use `motion/react` (NOT framer-motion)
- Easing curves: EXPO_OUT = [0.16, 1, 0.3, 1], EASE_OUT = [0.25, 0.46, 0.45, 0.94]
- Scroll-triggered reveals using `useInView` from motion/react with `once: true` and margin: '0px 0px -40px 0px' or '0px 0px -60px 0px'
- All scroll animations fire only once
- Transport icons have infinite floating y-axis animation with varying durations (2.5-3.3s)
- Mobile menu uses AnimatePresence for enter/exit

## Dependencies

```json
{
  "motion": "^12.40.0",
  "lucide-react": "^0.344.0",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}
```

Copy this promptPrompt page

Create a single-page hero landing for a wellness/supplements brand called "TerraElix" using React + Tailwind CSS + Lucide React icons. The page is a full-viewport hero with a background image, navbar, headline with word-by-word reveal animations, CTA section, and a 3-panel footer strip. It must be fully responsive (mobile, tablet, desktop).

---

## Fonts

Import from Google Fonts:
- **DM Sans** (weights 400, 500) -- used for brand name, nav links, headline, panel 1 text
- **Inter** (weights 400, 500) -- used for buttons, body text, panel 2/3 text

---

## Background

Full-screen background image covering the entire viewport:
```
url: https://meez.design/web/media/ext/4dfc1a4b05bd693d.webp
background-size: cover; background-position: center; background-repeat: no-repeat;
```

---

## Layout Structure

```
<div> (min-h-screen, flex flex-col, relative, overflow-hidden)
  <nav> -- navbar
  <section> -- hero content (flex-1, flex col, justify-center)
  <div> -- mobile/tablet product image (visible below lg)
  <div> -- 3-panel grid footer
  <img> -- desktop floating product image (absolute, hidden below lg)
</div>
```

---

## Navbar

- **Left:** Brand name "TerraElix" -- white, DM Sans 500, 30px, letter-spacing -0.05em
- **Center (desktop only, hidden on mobile):** Nav links "About", "Products", "Promotions", "Contact" -- DM Sans 500, 18px, text-white/90, gap 10 (lg)
- **Right:** Row of icon buttons + avatar + mobile menu toggle
  - Search icon (Lucide `Search`, size 20, strokeWidth 1.5)
  - Shopping bag icon (Lucide `ShoppingBag`, size 20, strokeWidth 1.5)
  - Return icon (Lucide `CornerUpLeft`, size 20, strokeWidth 1.5)
  - Round avatar image (w-8 h-8, lg:w-10 lg:h-10, rounded-full, object-cover):
    ```
    https://meez.design/web/media/ext/933e27c46b639e84.png
    ```
  - Hamburger menu button (md:hidden, Lucide `Menu` / `X` toggle)

- **Mobile overlay menu:** fixed inset-0 bg-black/90 z-30 with centered nav links (text-2xl, white)

Padding: px-5 sm:px-8 lg:px-10, py-4 lg:py-5

---

## Hero Headline

Font: DM Sans, weight 400, letter-spacing -0.05em

Responsive sizes:
- Base: 48px/50px line-height
- sm: 80px/72px
- md: 110px/95px
- lg: 130px/110px
- xl: 155px/125px

Text layout (3 lines):
```
Line 1: "The" (white) "Power" (white) "of" (white/45 -- dimmed)
Line 2: "Nature" (dimmed) "in" (dimmed) "Every" (white)
Line 3: "Capsule" (white) + inline image
```

Each word is wrapped in a container with overflow-hidden, and the inner span animates with `wordReveal` (translateY 100% + blur to visible). Staggered delays: 0.3s, 0.4s, 0.5s, 0.6s, 0.7s, 0.8s, 0.9s.

**Inline image** after "Capsule" (hidden on mobile, sm:inline-block, align-middle, ml-2 lg:ml-4):
```
https://meez.design/web/media/ext/014f4c2bed24ce90.png
height: clamp(60px, 10vw, 160px); width: auto;
```

---

## CTA Section

Below the headline, mt-8 sm:mt-12 lg:mt-[75px]. Flex row on sm+, column on mobile. Gap: 5 (mobile), 8 (sm), 50px (lg).

- **Button:** "Explore Now" + ArrowUpRight icon. bg-black text-white rounded-md. Sizes: w-full sm:w-[240px] md:w-[280px] lg:w-[310px], h-14 sm:h-16 lg:h-[72px]. Font: Inter 500, responsive text (base to 2xl), letter-spacing -0.03em.
- **Paragraph:** "Discover our new plant-based supplements for daily balance and clean energy." -- white, max-w-[310px], Inter 400, text-sm sm:text-base lg:text-lg, line-height 1.45, letter-spacing -0.03em.

---

## Mobile/Tablet Product Image (lg:hidden)

Visible below lg breakpoint. Oversized, bleeding off edges:
```
https://meez.design/web/media/ext/8f861b7c00ec34fe.png
w-[180%] sm:w-[151%] max-w-[1296px], object-contain, mx-auto, drop-shadow-2xl
margin-bottom: -180px sm:-220px (overlaps panels below)
```

---

## Bottom 3-Panel Grid

`grid grid-cols-1 md:grid-cols-[2fr_1fr_2fr]`, relative z-10.

### Panel 1 (bg-[#ECEDEC])
- Text: "Start your personalized path to natural balance" -- DM Sans 400, text-2xl sm:text-[28px] lg:text-[35px], leading-[1.1], letter-spacing -0.05em, max-w-[350px]
- Link: "Personal Assessment" -- underline, Inter 400, text-base lg:text-lg, letter-spacing -0.03em
- Decorative image (absolute right-0 bottom-0, h-full, mix-blend-multiply):
  ```
  https://meez.design/web/media/ext/c79bc389cb0bf9d4.png
  ```

### Panel 2 (bg-[#FEFDF9]) -- Auto-rotating card carousel
4 cards cycling every 3500ms with fade/slide transition:
1. FlaskConical icon, bg-black circle: "Experience our newly enhanced natural formula"
2. Leaf icon, bg-emerald-800 circle: "Pure organic ingredients sourced sustainably"
3. Droplets icon, bg-cyan-800 circle: "Advanced bioavailability for maximum absorption"
4. Sun icon, bg-amber-700 circle: "Clinically tested for daily energy & vitality"

Each card: icon in a 40px (sm:48px) round colored circle + text (Inter 400, text-sm sm:text-base lg:text-lg, text-black/80, line-height 1.2, letter-spacing -0.03em).

Active card: opacity-100 translate-y-0. Inactive: opacity-0 translate-y-4 absolute.

Bottom dots: 4 thin bars (h-0.5, flex-1, rounded-full). Active: bg-black. Inactive: bg-black/20.

### Panel 3 (bg-black)
- Left: Product image (w-[120px] h-[82px] sm:w-[160px] h-[110px] lg:w-[208px] h-[142px]):
  ```
  https://meez.design/web/media/ext/300c2e1eb0264eef.png
  ```
- Right: "+14K" (white, Inter 400, text-2xl sm:text-3xl lg:text-[35px], letter-spacing -0.05em) + "People have already optimized their wellness" (text-white/60, Inter 400, text-sm sm:text-base lg:text-lg, line-height 1.2)

---

## Desktop Floating Product (lg+ only)

Same image as mobile product, but absolutely positioned for desktop:
```
https://meez.design/web/media/ext/8f861b7c00ec34fe.png
position: absolute; z-0; hidden lg:block;
width: clamp(600px, 80vw, 1412px); height: auto;
bottom: -10%; right: clamp(-400px, -20vw, -100px);
```

---

## Animations (CSS keyframes)

```css
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes wordReveal {
  from { opacity: 0; transform: translateY(100%); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0px); }
}
```

All use `cubic-bezier(0.16, 1, 0.3, 1)` easing with `both` fill mode.

**Classes and their animations:**
- `.animate-fade-up` -- fadeUp 0.8s
- `.animate-fade-in` -- fadeIn 0.7s
- `.animate-slide-left` -- slideInLeft 0.8s
- `.animate-slide-right` -- slideInRight 0.8s
- `.animate-scale-in` -- scaleIn 1s
- `.animate-word-reveal > span` -- wordReveal 0.7s

**Delay classes:** .delay-200 through .delay-1100 (increments of 0.1s)

**Animation assignments:**
- Navbar container: animate-fade-in
- Brand name: animate-slide-left delay-200
- Nav links: animate-fade-in delay-400
- Right icons: animate-slide-right delay-300
- CTA row: animate-fade-up delay-600
- Desktop product image: animate-scale-in delay-700
- Mobile product image: animate-scale-in delay-800
- Panel 1: animate-fade-up delay-900
- Panel 2: animate-fade-up delay-1000
- Panel 3: animate-fade-up delay-1100
- Inline capsule image: animate-scale-in delay-1000

### Source Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TerraElix</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <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=DM+Sans:wght@400;500&family=Inter:wght@400;500&display=swap" rel="stylesheet" />
  <style>
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-40px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(40px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes wordReveal {
      from { opacity: 0; transform: translateY(100%); filter: blur(4px); }
      to { opacity: 1; transform: translateY(0); filter: blur(0px); }
    }
    .animate-fade-up { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .animate-fade-in { animation: fadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .animate-slide-left { animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .animate-slide-right { animation: slideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .animate-scale-in { animation: scaleIn 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .animate-word-reveal { display: inline-block; overflow: hidden; }
    .animate-word-reveal > span { display: inline-block; animation: wordReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }
    .delay-600 { animation-delay: 0.6s; }
    .delay-700 { animation-delay: 0.7s; }
    .delay-800 { animation-delay: 0.8s; }
    .delay-900 { animation-delay: 0.9s; }
    .delay-1000 { animation-delay: 1.0s; }
    .delay-1100 { animation-delay: 1.1s; }
  </style>
</head>
<body class="m-0 p-0">
  <div
    class="min-h-screen font-sans flex flex-col relative overflow-hidden"
    style="background-image: url('https://meez.design/web/media/ext/4dfc1a4b05bd693d.webp'); background-size: cover; background-position: center; background-repeat: no-repeat;"
  >
    <!-- Navbar -->
    <nav class="flex items-center justify-between px-5 sm:px-8 lg:px-10 py-4 lg:py-5 relative z-20 animate-fade-in">
      <span class="text-white animate-slide-left delay-200" style="font-family: 'DM Sans', sans-serif; font-size: 30px; line-height: 38px; letter-spacing: -0.05em; font-weight: 500;">TerraElix</span>

      <!-- Desktop nav -->
      <ul class="hidden md:flex gap-6 lg:gap-10 text-white/90 animate-fade-in delay-400 list-none m-0 p-0" style="font-family: 'DM Sans', sans-serif; font-size: 18px; line-height: 120%; letter-spacing: -0.01em; font-weight: 500;">
        <li class="cursor-pointer hover:text-white transition-colors">About</li>
        <li class="cursor-pointer hover:text-white transition-colors">Products</li>
        <li class="cursor-pointer hover:text-white transition-colors">Promotions</li>
        <li class="cursor-pointer hover:text-white transition-colors">Contact</li>
      </ul>

      <div class="flex items-center gap-3 lg:gap-4 animate-slide-right delay-300">
        <button class="text-white/80 hover:text-white transition-colors bg-transparent border-none cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
        </button>
        <button class="text-white/80 hover:text-white transition-colors bg-transparent border-none cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
        </button>
        <button class="text-white/80 hover:text-white transition-colors bg-transparent border-none cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg>
        </button>
        <img src="https://meez.design/web/media/ext/933e27c46b639e84.png" class="w-8 h-8 lg:w-10 lg:h-10 rounded-full object-cover" alt="Avatar" />

        <!-- Mobile menu button -->
        <button id="menuBtn" class="md:hidden text-white/80 hover:text-white transition-colors ml-2 bg-transparent border-none cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
        </button>
      </div>
    </nav>

    <!-- Mobile menu overlay -->
    <div id="mobileMenu" class="fixed inset-0 bg-black/90 z-30 flex-col items-center justify-center gap-8 md:hidden" style="display: none;">
      <button id="closeMenuBtn" class="absolute top-5 right-5 text-white bg-transparent border-none cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </button>
      <ul class="flex flex-col gap-6 text-white text-2xl font-medium text-center list-none m-0 p-0">
        <li class="cursor-pointer hover:text-white/70 transition-colors">About</li>
        <li class="cursor-pointer hover:text-white/70 transition-colors">Products</li>
        <li class="cursor-pointer hover:text-white/70 transition-colors">Promotions</li>
        <li class="cursor-pointer hover:text-white/70 transition-colors">Contact</li>
      </ul>
    </div>

    <!-- Hero -->
    <section class="px-5 sm:px-8 lg:px-10 flex-1 relative overflow-visible z-10 flex flex-col justify-center">
      <h1
        class="text-[48px] leading-[50px] sm:text-[80px] sm:leading-[72px] md:text-[110px] md:leading-[95px] lg:text-[130px] lg:leading-[110px] xl:text-[155px] xl:leading-[125px] m-0"
        style="font-family: 'DM Sans', sans-serif; font-weight: 400; letter-spacing: -0.05em;"
      >
        <span class="animate-word-reveal"><span class="text-white" style="animation-delay: 0.3s;">The</span></span>
        <span class="animate-word-reveal"><span class="text-white" style="animation-delay: 0.4s;">Power</span></span>
        <span class="animate-word-reveal"><span class="text-white/45" style="animation-delay: 0.5s;">of</span></span>
        <br />
        <span class="animate-word-reveal"><span class="text-white/45" style="animation-delay: 0.6s;">Nature</span></span>
        <span class="animate-word-reveal"><span class="text-white/45" style="animation-delay: 0.7s;">in</span></span>
        <span class="animate-word-reveal"><span class="text-white" style="animation-delay: 0.8s;">Every</span></span>
        <br />
        <span class="animate-word-reveal"><span class="text-white" style="animation-delay: 0.9s;">Capsule</span></span>
        <img
          src="https://meez.design/web/media/ext/014f4c2bed24ce90.png"
          alt=""
          class="hidden sm:inline-block align-middle ml-2 lg:ml-4 animate-scale-in delay-1000"
          style="height: clamp(60px, 10vw, 160px); width: auto;"
        />
      </h1>

      <div class="flex flex-col sm:flex-row sm:items-center mt-8 sm:mt-12 lg:mt-[75px] gap-5 sm:gap-8 lg:gap-[50px] animate-fade-up delay-600">
        <button
          class="flex items-center justify-center gap-2 sm:gap-3 bg-black text-white rounded-md hover:bg-neutral-900 transition-colors flex-shrink-0 w-full sm:w-[240px] md:w-[280px] lg:w-[310px] h-14 sm:h-16 lg:h-[72px] text-base sm:text-lg md:text-xl lg:text-2xl border-none cursor-pointer"
          style="font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: -0.03em;"
        >
          Explore Now
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
        </button>
        <p
          class="text-white max-w-[310px] text-sm sm:text-base lg:text-lg m-0"
          style="font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.45; letter-spacing: -0.03em;"
        >
          Discover our new plant-based supplements for daily balance and clean energy.
        </p>
      </div>
    </section>

    <!-- Mobile/Tablet product image -->
    <div class="relative z-10 flex items-center justify-center pt-0 sm:pt-2 pb-0 sm:block lg:hidden overflow-visible mb-[-180px] sm:mb-[-220px] animate-scale-in delay-800">
      <img
        src="https://meez.design/web/media/ext/8f861b7c00ec34fe.png"
        alt="Product capsules"
        class="w-[180%] sm:w-[151%] max-w-[1296px] h-auto object-contain mx-auto drop-shadow-2xl"
      />
    </div>

    <!-- Bottom panels -->
    <div class="grid grid-cols-1 md:grid-cols-[2fr_1fr_2fr] relative z-10">
      <!-- Panel 1 -->
      <div class="bg-[#ECEDEC] px-5 sm:px-8 py-6 sm:py-8 flex flex-col justify-between relative overflow-hidden min-h-[180px] sm:min-h-[200px] animate-fade-up delay-900">
        <p
          class="relative z-10 text-black max-w-[350px] text-2xl sm:text-[28px] lg:text-[35px] leading-[1.1] m-0"
          style="font-family: 'DM Sans', sans-serif; font-weight: 400; letter-spacing: -0.05em;"
        >
          Start your personalized path to natural balance
        </p>
        <span
          class="relative z-10 text-black underline underline-offset-2 cursor-pointer hover:opacity-70 transition-opacity mt-4 text-base lg:text-lg"
          style="font-family: 'Inter', sans-serif; font-weight: 400; letter-spacing: -0.03em;"
        >
          Personal Assessment
        </span>
        <img
          src="https://meez.design/web/media/ext/c79bc389cb0bf9d4.png"
          alt=""
          class="absolute right-0 bottom-0 h-full w-auto object-contain pointer-events-none z-0"
          style="mix-blend-mode: multiply;"
        />
      </div>

      <!-- Panel 2 - Gallery -->
      <div class="bg-[#FEFDF9] px-5 sm:px-8 py-6 sm:py-8 flex flex-col justify-between min-h-[150px] sm:min-h-[180px] animate-fade-up delay-1000 overflow-hidden">
        <div class="relative flex-1" id="cardContainer">
          <!-- Cards injected by JS -->
        </div>
        <div class="flex gap-2 mt-6" id="cardDots"></div>
      </div>

      <!-- Panel 3 -->
      <div class="bg-black px-5 sm:px-8 py-6 sm:py-8 flex items-center gap-4 sm:gap-6 min-h-[150px] sm:min-h-[180px] animate-fade-up delay-1100">
        <div class="flex-shrink-0">
          <img
            src="https://meez.design/web/media/ext/300c2e1eb0264eef.png"
            alt=""
            class="object-contain w-[120px] h-[82px] sm:w-[160px] sm:h-[110px] lg:w-[208px] lg:h-[142px]"
          />
        </div>
        <div>
          <p
            class="text-white text-2xl sm:text-3xl lg:text-[35px] leading-tight m-0"
            style="font-family: 'Inter', sans-serif; font-weight: 400; letter-spacing: -0.05em;"
          >
            +14K
          </p>
          <p
            class="text-white/60 mt-1 text-sm sm:text-base lg:text-lg m-0"
            style="font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.2; letter-spacing: -0.03em;"
          >
            People have already optimized their wellness
          </p>
        </div>
      </div>
    </div>

    <!-- Background decorative image - desktop only -->
    <img
      src="https://meez.design/web/media/ext/8f861b7c00ec34fe.png"
      alt=""
      class="absolute pointer-events-none z-0 hidden lg:block animate-scale-in delay-700"
      style="width: clamp(600px, 80vw, 1412px); height: auto; bottom: -10%; right: clamp(-400px, -20vw, -100px);"
    />
  </div>

  <script>
    // Mobile menu toggle
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    const closeMenuBtn = document.getElementById('closeMenuBtn');

    menuBtn.addEventListener('click', () => {
      mobileMenu.style.display = 'flex';
    });
    closeMenuBtn.addEventListener('click', () => {
      mobileMenu.style.display = 'none';
    });

    // Card carousel
    const cards = [
      { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/></svg>', text: 'Experience our newly enhanced natural formula', color: 'bg-black' },
      { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 20A7 7 0 0 1 9.8 6.9C15.5 4.9 17 3.5 17 3.5s1.5 0 2.8 1.3c1 .9 1.1 2.2 1.1 2.2s-1.5 1.5-3.5 7.2A7 7 0 0 1 11 20Z"/><path d="M2 21c0-3 1.9-5.6 4.4-6.3"/><path d="M12.3 7.4C14.2 5.5 17 4.5 17 4.5"/></svg>', text: 'Pure organic ingredients sourced sustainably', color: 'bg-emerald-800' },
      { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"/><path d="M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97"/></svg>', text: 'Advanced bioavailability for maximum absorption', color: 'bg-cyan-800' },
      { icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>', text: 'Clinically tested for daily energy & vitality', color: 'bg-amber-700' },
    ];

    let activeCard = 0;
    const container = document.getElementById('cardContainer');
    const dotsContainer = document.getElementById('cardDots');

    function renderCards() {
      container.innerHTML = cards.map((card, i) => `
        <div class="flex items-start gap-4 transition-all duration-500 ease-out ${i === activeCard ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 absolute inset-0'}">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ${card.color} flex items-center justify-center flex-shrink-0 transition-colors duration-500 text-white">
            ${card.icon}
          </div>
          <p class="text-black/80 mt-1 text-sm sm:text-base lg:text-lg m-0" style="font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.2; letter-spacing: -0.03em;">
            ${card.text}
          </p>
        </div>
      `).join('');

      dotsContainer.innerHTML = cards.map((_, i) => `
        <button data-index="${i}" class="h-0.5 flex-1 rounded-full transition-all duration-500 border-none cursor-pointer ${i === activeCard ? 'bg-black' : 'bg-black/20 hover:bg-black/40'}"></button>
      `).join('');
    }

    dotsContainer.addEventListener('click', (e) => {
      const btn = e.target.closest('button');
      if (btn && btn.dataset.index !== undefined) {
        activeCard = parseInt(btn.dataset.index);
        renderCards();
      }
    });

    renderCards();
    setInterval(() => {
      activeCard = (activeCard + 1) % cards.length;
      renderCards();
    }, 3500);
  </script>
</body>
</html>

Copy this promptPrompt page

## Prompt to Recreate CozyPaws Hero Section

**Build a single-page "CozyPaws" pet store hero section using React, Tailwind CSS, and Lucide React icons. The layout is viewport-height (h-screen), no scroll, with three responsive breakpoints (mobile, tablet md, desktop lg+). Use Vite + TypeScript.**

---

### Fonts (Google Fonts)
- **Inter** (weights: 400, 500, 600) — body/UI text
- **DM Serif Display** (weight: 400) — hero heading only

Load via `<link>` in `index.html`:
```
https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600&display=swap
```

Apply with CSS utility class `.font-serif-display { font-family: 'DM Serif Display', serif; }` and `body { font-family: 'Inter', sans-serif; }`

---

### Color Palette
- Background: `#EFFDF0` (light mint green)
- Primary dark green: `#1a3d1a`
- Hover green: `#2a5a2a`
- Orange accent: `#E86A10`
- Orange hover: `#d45e0d`

---

### Asset URLs (all external, do not download)

| Asset | URL |
|-------|-----|
| Logo SVG | `https://meez.design/web/media/ext/ab0d6bb118afd817.svg` |
| Avatar | `https://meez.design/web/media/ext/e1bfa0032b38f8ac.png` |
| Product card (Cat House) | `https://meez.design/web/media/ext/1cd4210c98104a0f.png` |
| Video card (TikTok/YouTube) | `https://meez.design/web/media/ext/4dd3e255a6ec95c0.png` |
| Bottom left image | `https://meez.design/web/media/ext/3d988fce282cf6c2.png` |
| Bottom center image (tallest) | `https://meez.design/web/media/ext/9f19000c199d73da.png` |
| Bottom right image | `https://meez.design/web/media/ext/a1ca55f91181f111.png` |

---

### Header
- Full-width, `px-12` on desktop, `py-4`, relative z-30
- **Left:** Logo image (205x52px desktop, 130x33px mobile)
- **Center nav (hidden below md):** Links "Home" (text-gray-900), "Shop", "Delivery and payment", "Brands", "Blog" (text-gray-600), text-sm font-medium, gap-8
- **Right:** Search button (circle, border, hidden below sm), Favorites button (orange circle, white star icon, badge "4"), Cart button (circle, border, cart icon, badge "1"), Avatar (circle, 40x40)
- Badges: absolute -top-1 -right-1, 20x20, bg-orange, border-2 border-background, white text 10px bold

---

### Desktop Hero Layout (lg+)

**Text layer (z-5):** Centered, `px-12 pt-[5.4rem]`
- Heading: `font-serif-display`, color `#1a3d1a`, `text-[clamp(60px,7.5vw,110px)]`, `leading-[0.95]`, tracking-tight
- Text reads: "Everything" (line 1), "Your Pets Love" (line 2)
- Each word is an `inline-block` with staggered `animate-word-pop` animation

**Left product card:** Absolutely positioned `top-[50px] left-12`
- Width: `clamp(160px,14vw,260px)`
- Image: aspect-ratio 260/257, rounded-2xl, overflow-hidden
- Arrow button bottom-right corner (dark green circle, ArrowUpRight icon)
- Text below: "Cozy Cat House" in gray-700, "$49.99" in dark green bold
- Responsive font sizes via clamp

**Right video card:** Absolutely positioned `top-[50px] right-12`
- Width: `clamp(120px,10vw,177px)`
- Image: aspect-ratio 177/287, rounded-2xl
- Play button (dark green circle) centered near bottom
- Text below play button: "Watch Product Reviews on TikTok and YouTube"

**Bottom 3 images:** Absolutely positioned `bottom-0 left-0 right-0`, z-10, flex items-end, no gaps
- Left image: `flex-1`, max-height `min(70vh, 55vw)`
- Center image: `flex-[1.265]` (wider), max-height `min(85vh, 70vw)`
- Right image: `flex-1`, max-height `min(70vh, 55vw)`
- All images: `w-full h-auto block`

**Overlays on bottom images:**
- Left: "98K+" stat with avatar stack (avatar + green circle with Plus icon)
- Center: "Best Products for Your Pet" white heading + "Explore Products" orange pill button with ArrowRight icon
- Right: "4.6" rating with orange filled Star icon
- All positioned with `bottom: clamp(20px, 4vh, 50px)`

---

### Tablet Layout (md to lg) — Similar to desktop but smaller
- Heading: text-7xl
- Side cards at `top-[80px]`, left-4/right-4, smaller fixed widths (160px/120px)
- Bottom images: same 3-panel flex, maxHeight 60vh/75vh/60vh

---

### Mobile Layout (below md)
- Top section: centered title (36px), subtitle, "Explore Products" button
- Two cards side-by-side (flex, gap-3): product card (aspect-square) + video card (aspect-3/4)
- Stats row: "98K+" with avatars left, divider, "4.6" star right
- Bottom images: same 3-panel flex, no max-height constraint

---

### Animations (CSS keyframes, custom classes)

| Class | Keyframe | Duration | Easing |
|-------|----------|----------|--------|
| `.animate-fade-up` | 0→30px translateY, 0→1 opacity | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-fade-in` | 0→1 opacity | 0.6s | ease-out |
| `.animate-slide-up` | 0→60px translateY | 0.9s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-slide-in-left` | -40px→0 translateX | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-slide-in-right` | 40px→0 translateX | 0.8s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-text-reveal` | translateY(40px) skewY(3deg) blur(4px) → none | 1s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-word-pop` | translateY(60px) scale(0.7) rotate(-4deg) blur(8px) → bounce overshoot → settle | 0.9s | cubic-bezier(0.34, 1.56, 0.64, 1) |
| `.animate-scale-in` | scale(0.85)→1 | 0.7s | cubic-bezier(0.16, 1, 0.3, 1) |
| `.animate-photo-reveal` | translateY(80px) scale(1.02) → normal | 1.1s | cubic-bezier(0.16, 1, 0.3, 1) |

All use `animation-fill-mode: both`. `.animate-word-pop` starts with `opacity: 0`.

**Delay classes:** `.delay-100` through `.delay-1200` in 100ms increments.

---

### Stagger Order
1. Header fades in (100-300ms)
2. Hero heading words pop in (200-600ms stagger)
3. Side cards slide in (600-700ms)
4. Bottom photos reveal upward (600-900ms stagger, center first)
5. Overlay stats/buttons pop in (1000-1200ms)

---

### Key Technical Details
- Container: `h-screen flex flex-col overflow-hidden` (no scrolling)
- Header: `shrink-0`
- Hero section: `flex-1 flex flex-col overflow-hidden`
- All responsive layouts use show/hide (`hidden lg:flex`, etc.), not CSS-only media queries
- Extensive use of `clamp()` for fluid typography and spacing
- Lucide icons used: Search, ShoppingCart, Star, ArrowUpRight, Play, ArrowRight, Plus

Copy this promptPrompt page

626f6c742d63632d6167656e74Let me read all the relevant files to compile the full recreation prompt.
Here's the full recreation prompt:

---

## Prompt to Recreate This Hero Section

Build a full-screen hero section for a creative portfolio using React, Vite, Tailwind CSS, and the Figtree Google Font. The page has two components: a **Navbar** and a **Hero**. No additional packages beyond `lucide-react` (though it's not used here). The entire page is black background with white text.

---

### Setup

- **Font:** Figtree (400, 500, 600) from Google Fonts, loaded in `index.html`
- **Tailwind custom breakpoints (max-width based):**
  - `mobile`: max 809.98px
  - `md-tablet`: min 810px, max 1199.98px
- **CSS variable:** `--ease-spring: cubic-bezier(0.16, 1, 0.3, 1)`

---

### Video Background

Three full-screen looping videos (muted, autoPlay, playsInline, loop) stacked absolutely with crossfade switching. All three render simultaneously; only the active one has `opacity-100`, the others have `opacity-0` with `transition-opacity duration-[1200ms] ease-in-out`.

**Video URLs (CloudFront):**
1. `https://meez.design/web/media/ext/4c7a17ed464fc641.mp4`
2. `https://meez.design/web/media/ext/c1d7ee2322f50681.mp4`
3. `https://meez.design/web/media/ext/05734ea5698e8780.mp4`

**Preloading:** On mount, fetch all videos as blobs and create object URLs for instant playback. Fall back to original URL on failure.

A `bg-black/10` overlay sits above videos at `z-[1]`.

---

### Navbar (absolute positioned, z-10, on top of hero)

- **Layout:** Centered container, max-width 1340px, `py-9 px-[15px]`
- **Left side:** Navigation items formatted as `01 / Works`, `02 / Services`, `03 / About`, `04 / Contact`
  - Index number: `text-[8px] leading-3 tracking-[-0.08px] font-medium uppercase`
  - Label: `text-xs leading-4 tracking-[-0.12px] font-medium uppercase`
  - Each link has a `.nav-link-underline` effect (underline slides in from right on hover via `scaleX` transform)
- **Right side (aligned right):** Email `davies@example.com` and live clock showing `CUP HH:MM:SS` (24h format, updates every second using `Intl.DateTimeFormat('en-GB')`)
- **Mobile:** Nav items hidden, replaced by a `Menu`/`Close` toggle button. Mobile panel uses CSS Grid `grid-rows-[0fr]`/`grid-rows-[1fr]` transition (420ms, spring ease) for smooth expand/collapse. Mobile nav links are large: `text-[28px] leading-8 tracking-[-0.84px]`

---

### Hero Content (z-[2], relative)

Container: `max-w-[1340px]`, full height, flex column, `justify-end items-end`, `gap-[150px]`, `pt-[190px] px-[15px]`

**Section 1 - Video Switcher + Availability (upper area):**
- Left column (`flex-[4]`): Three buttons labeled `01 / WATER WAVE`, `02 / GRIDWAVE`, `03 / LIGHT TUNNEL`. Active button is full opacity, inactive is `opacity-55` with `hover:opacity-75`. On click, sets `activeIndex` to crossfade videos. Each has a `.role-link` class that translates 4px right on hover.
- Right column (`flex-1`): Pulsing dot + "Available for work" text. Dot is 7px circle with glow shadow and infinite pulse animation (scale 1 to 1.45, opacity 1 to 0.45, 1.6s). On slide 1, dot is `#F598F2` pink with pink glow. On slides 2-3, dot is white with white glow.

**Section 2 - Name + CTA (bottom area, pb-[60px]):**
- Left column (`flex-[2]`): Giant name "Viktor." in `text-[200px] leading-[81%] tracking-[-6px] font-medium uppercase`. The period is accent-colored: pink `#F598F2` on slide 1, white on slides 2-3. Animate in with `revealUp` (translateY 80px to 0, 0.9s spring ease).
- Right column (`flex-1`, `pl-[50px]`): Paragraph text ("I craft bold brands and modern websites with purpose...") at `text-base leading-6 tracking-[-0.16px] font-medium`. Below it, a "start a project" button (lowercase) with white border. Button has a fill-up hover effect: `::before` pseudo-element with `#F598F2` background that translateY from 101% to 0 on hover, text turns black, border turns pink. Both animate in with `revealRight` (translateX 100px to 0, 0.9s spring ease), button delayed by 0.08s.

**Reveal animations** trigger once via IntersectionObserver at 0.35 threshold.

---

### Responsive Tablet (810px-1199px)
- Navbar: `py-[30px] px-[18px]`, nav gaps shrink to `gap-4`
- Hero name: `text-[129.6px] leading-[113.4px] tracking-[-7.7px]`
- Bottom section: gap 28px, pb 52px, left padding 24px

### Responsive Mobile (<810px)
- Navbar: `py-6 px-[18px]`, desktop nav hidden, hamburger menu shown
- Hero content: `justify-end items-start gap-[72px] pt-[140px] px-[18px]`
- Switcher + availability stack vertically with `gap-7`
- Bottom section: column layout, `gap-8 pb-11`
- Name: `text-[clamp(68px,21vw,80px)] leading-[96px] tracking-[-4.8px]`
- Paragraph: `max-w-[420px]`

---

### Custom CSS Animations

```css
@keyframes videoFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes revealUp { from { opacity: 0; transform: translateY(80px) } to { opacity: 1; transform: translateY(0) } }
@keyframes revealRight { from { opacity: 0; transform: translateX(100px) } to { opacity: 1; transform: translateX(0) } }
@keyframes dotPulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:0.45; transform:scale(1.45) } }
```

### Accessibility
- `prefers-reduced-motion: reduce` disables all animations
- Semantic landmarks: `<header>`, `<main>`, `<nav>`, `<section>`
- ARIA labels on navigation regions and status elements
- Videos are `aria-hidden="true"`

### Source Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Viktor Hero</title>
  <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=Figtree:wght@400;500;600&display=swap" rel="stylesheet" />
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
      --pink: #F598F2;
    }

    html, body {
      min-height: 100%;
      background: #000;
      font-family: "Figtree", sans-serif;
      overflow-x: hidden;
    }

    /* Animations */
    @keyframes revealUp {
      from { opacity: 0; transform: translateY(80px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes revealRight {
      from { opacity: 0; transform: translateX(100px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes dotPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.45; transform: scale(1.45); }
    }

    .animate-reveal-up { animation: revealUp 0.9s var(--ease-spring) 0.01s forwards; }
    .animate-reveal-right { animation: revealRight 0.9s var(--ease-spring) 0.01s forwards; }
    .animate-reveal-right-delayed { animation: revealRight 0.9s var(--ease-spring) 0.08s forwards; }
    .animate-dot-pulse { animation: dotPulse 1.6s ease-in-out infinite; }

    .hidden-before-reveal { opacity: 0; }
    .hidden-translate-y { transform: translateY(80px); }
    .hidden-translate-x { transform: translateX(100px); }

    /* Hero button */
    .hero-button {
      position: relative;
      isolation: isolate;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 14px 18px;
      border: 1px solid #fff;
      color: #fff;
      background: transparent;
      overflow: hidden;
      font-family: "Figtree", sans-serif;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: -0.12px;
      font-weight: 500;
      text-transform: lowercase;
      text-decoration: none;
      transition: color 260ms ease;
      cursor: pointer;
    }
    .hero-button::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--pink);
      transform: translateY(101%);
      transition: transform 360ms var(--ease-spring);
      z-index: -1;
    }
    .hero-button:hover { color: #000; border-color: var(--pink); }
    .hero-button:hover::before { transform: translateY(0); }

    /* Role links */
    .role-link {
      font-family: "Figtree", sans-serif;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: -0.12px;
      font-weight: 500;
      text-transform: uppercase;
      color: #fff;
      background: transparent;
      border: 0;
      padding: 0;
      cursor: pointer;
      transition: opacity 220ms ease, transform 220ms ease;
    }
    .role-link:hover { opacity: 1 !important; transform: translateX(4px); }
    .role-link.active { opacity: 1; }
    .role-link.inactive { opacity: 0.55; }
    .role-link.inactive:hover { opacity: 0.75; }

    /* Nav link underline */
    .nav-link-underline {
      position: relative;
      text-decoration: none;
      color: #fff;
      transition: opacity 220ms var(--ease-spring), transform 220ms var(--ease-spring);
    }
    .nav-link-underline::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 100%;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 320ms var(--ease-spring);
    }
    .nav-link-underline:hover { opacity: 0.72; }
    .nav-link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

    /* Videos */
    .video-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      transition: opacity 1200ms ease-in-out;
    }
    .video-bg.hidden-video { opacity: 0; }
    .video-bg.visible-video { opacity: 1; }

    /* Layout */
    .hero-main {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #000;
      color: #fff;
    }
    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.1);
      z-index: 1;
      pointer-events: none;
    }
    .content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1340px;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
      gap: 150px;
      padding: 190px 15px 0;
    }

    /* Middle row */
    .middle-row {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 6px;
    }
    .roles-nav {
      flex: 4;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 4px;
      position: relative;
      z-index: 2;
    }
    .availability {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 2;
    }
    .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .dot.pink {
      background: var(--pink);
      box-shadow: 0 0 16px rgba(245, 152, 242, 0.85);
    }
    .dot.white {
      background: #fff;
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.85);
    }
    .availability-text {
      font-size: 12px;
      line-height: 16px;
      letter-spacing: -0.12px;
      font-weight: 500;
      text-transform: uppercase;
      color: #fff;
      white-space: nowrap;
    }

    /* Banner row */
    .banner-row {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      gap: 37px;
      padding-bottom: 60px;
      position: relative;
      z-index: 2;
    }
    .name-col {
      flex: 2;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      min-width: 0;
    }
    .name-col h1 {
      width: 100%;
      margin: 0;
      font-family: "Figtree", sans-serif;
      font-size: 200px;
      line-height: 81%;
      letter-spacing: -6px;
      font-weight: 500;
      text-transform: uppercase;
      color: #fff;
      text-align: left;
      white-space: nowrap;
    }
    .name-col h1 .accent { transition: color 400ms ease; }
    .name-col h1 .accent.pink { color: var(--pink); }
    .name-col h1 .accent.white { color: #fff; }

    .info-col {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding-left: 50px;
    }
    .info-inner {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 40px;
    }
    .info-inner p {
      margin: 0;
      width: 100%;
      font-family: "Figtree", sans-serif;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: -0.16px;
      font-weight: 500;
      text-align: left;
      color: #fff;
    }

    /* Navbar */
    .navbar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      padding: 36px 15px;
      overflow: hidden;
      color: #fff;
    }
    .navbar-inner {
      width: 100%;
      max-width: 1340px;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 10px;
      overflow: hidden;
    }
    .nav-left {
      flex: 2;
      min-width: 0;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 77px;
      padding-left: 6px;
      overflow: hidden;
    }
    .nav-links {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 20px;
      overflow: hidden;
    }
    .nav-item {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 4px;
      white-space: nowrap;
    }
    .nav-item .index {
      font-family: "Figtree", sans-serif;
      font-size: 8px;
      line-height: 12px;
      letter-spacing: -0.08px;
      font-weight: 500;
      text-transform: uppercase;
      color: #fff;
    }
    .nav-item a {
      font-family: "Figtree", sans-serif;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: -0.12px;
      font-weight: 500;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .nav-right {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 10px;
      padding-right: 6px;
      padding-bottom: 8px;
      overflow: hidden;
    }
    .nav-right-inner {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 4px;
      overflow: hidden;
    }
    .nav-right-inner a {
      font-family: "Figtree", sans-serif;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: -0.12px;
      font-weight: 500;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .time-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 4px;
      white-space: nowrap;
    }
    .time-row span {
      font-family: "Figtree", sans-serif;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: -0.12px;
      font-weight: 500;
      text-transform: uppercase;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }

    /* Mobile menu button */
    .menu-btn {
      display: none;
      border: 0;
      padding: 0;
      background: transparent;
      appearance: none;
      font-family: "Figtree", sans-serif;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: -0.12px;
      font-weight: 500;
      text-transform: uppercase;
      color: #fff;
      white-space: nowrap;
      cursor: pointer;
    }

    /* Mobile panel */
    .mobile-panel {
      display: none;
      width: 100%;
      max-width: 1340px;
      overflow: hidden;
      transition: grid-template-rows 420ms var(--ease-spring);
    }
    .mobile-panel.open { grid-template-rows: 1fr; }
    .mobile-panel.closed { grid-template-rows: 0fr; }
    .mobile-panel-inner {
      min-height: 0;
      overflow: hidden;
    }
    .mobile-nav {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 28px;
    }
    .mobile-nav .nav-item a {
      font-size: 28px;
      line-height: 32px;
      letter-spacing: -0.84px;
    }
    .mobile-nav .nav-item .index { padding-top: 3px; }
    .mobile-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-top: 28px;
    }

    /* Tablet: 810px - 1199px */
    @media (max-width: 1199.98px) and (min-width: 810px) {
      .navbar { padding: 30px 18px; }
      .nav-left { gap: 48px; }
      .nav-links { gap: 16px; }
      .content { gap: 120px; padding-top: 170px; padding-left: 24px; padding-right: 24px; }
      .banner-row { gap: 28px; padding-bottom: 52px; }
      .info-col { padding-left: 24px; }
      .name-col h1 { font-size: 129.6px; line-height: 113.4px; letter-spacing: -7.7px; }
      .info-inner p { font-size: 15px; line-height: 23px; }
    }

    /* Mobile: <810px */
    @media (max-width: 809.98px) {
      .navbar { padding: 24px 18px; overflow: visible; }
      .navbar-inner { justify-content: space-between; overflow: visible; }
      .nav-left { flex: 1; gap: 0; padding-left: 0; }
      .nav-links { display: none; }
      .nav-right { flex: initial; width: auto; padding: 0; overflow: visible; }
      .nav-right-inner { display: none; }
      .menu-btn { display: inline-flex; }
      .mobile-panel { display: grid; }

      .content {
        justify-content: flex-end;
        align-items: flex-start;
        gap: 72px;
        padding: 140px 18px 0;
      }
      .middle-row {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 28px;
        padding: 0;
      }
      .availability { justify-content: flex-start; }
      .banner-row {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 32px;
        padding-bottom: 44px;
      }
      .name-col { width: 100%; flex: initial; }
      .name-col h1 {
        font-size: clamp(68px, 21vw, 80px);
        line-height: 96px;
        letter-spacing: -4.8px;
      }
      .info-col {
        width: 100%;
        flex: initial;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 22px;
        padding-left: 0;
      }
      .info-inner { width: 100%; flex: initial; gap: 28px; }
      .info-inner p { max-width: 420px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
      }
    }
  </style>
</head>
<body>

  <!-- Navbar -->
  <header class="navbar">
    <div class="navbar-inner">
      <div class="nav-left">
        <nav class="nav-links" aria-label="Primary navigation">
          <div class="nav-item">
            <span class="index">01 /</span>
            <a href="/" class="nav-link-underline">Works</a>
          </div>
          <div class="nav-item">
            <span class="index">02 /</span>
            <a href="/" class="nav-link-underline">Services</a>
          </div>
          <div class="nav-item">
            <span class="index">03 /</span>
            <a href="/" class="nav-link-underline">About</a>
          </div>
          <div class="nav-item">
            <span class="index">04 /</span>
            <a href="/" class="nav-link-underline">Contact</a>
          </div>
        </nav>
      </div>
      <div class="nav-right">
        <div class="nav-right-inner">
          <a href="mailto:viktor@example.com" class="nav-link-underline">viktor@example.com</a>
          <div class="time-row" aria-label="Current time">
            <span>CUP</span>
            <span id="clock">00:00:00</span>
          </div>
        </div>
        <button class="menu-btn nav-link-underline" type="button" id="menuBtn">Menu</button>
      </div>
    </div>
    <div class="mobile-panel closed" id="mobilePanel">
      <div class="mobile-panel-inner">
        <nav class="mobile-nav" aria-label="Mobile navigation">
          <div class="nav-item">
            <span class="index">01 /</span>
            <a href="/" class="nav-link-underline">Works</a>
          </div>
          <div class="nav-item">
            <span class="index">02 /</span>
            <a href="/" class="nav-link-underline">Services</a>
          </div>
          <div class="nav-item">
            <span class="index">03 /</span>
            <a href="/" class="nav-link-underline">About</a>
          </div>
          <div class="nav-item">
            <span class="index">04 /</span>
            <a href="/" class="nav-link-underline">Contact</a>
          </div>
        </nav>
        <div class="mobile-info">
          <a href="mailto:viktor@example.com" class="nav-link-underline" style="font-family:'Figtree',sans-serif;font-size:12px;line-height:16px;letter-spacing:-0.12px;font-weight:500;text-transform:uppercase;white-space:nowrap;">viktor@example.com</a>
          <div class="time-row" style="width:fit-content;">
            <span>CUP</span>
            <span id="clockMobile">00:00:00</span>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- Hero -->
  <main class="hero-main" id="heroMain" aria-label="Portfolio hero">
    <video class="video-bg visible-video" id="video0" src="https://meez.design/web/media/ext/4c7a17ed464fc641.mp4" autoplay muted loop playsinline preload="auto" aria-hidden="true"></video>
    <video class="video-bg hidden-video" id="video1" src="https://meez.design/web/media/ext/c1d7ee2322f50681.mp4" autoplay muted loop playsinline preload="auto" aria-hidden="true"></video>
    <video class="video-bg hidden-video" id="video2" src="https://meez.design/web/media/ext/05734ea5698e8780.mp4" autoplay muted loop playsinline preload="auto" aria-hidden="true"></video>

    <div class="overlay" aria-hidden="true"></div>

    <section class="content">
      <!-- Middle: roles + availability -->
      <div class="middle-row">
        <nav class="roles-nav" aria-label="Hero variants">
          <button class="role-link active" type="button" data-index="0">01 / WATER WAVE</button>
          <button class="role-link inactive" type="button" data-index="1">02 / GRIDWAVE</button>
          <button class="role-link inactive" type="button" data-index="2">03 / LIGHT TUNNEL</button>
        </nav>
        <div class="availability" aria-label="Availability status">
          <span class="dot pink animate-dot-pulse" id="statusDot" aria-hidden="true"></span>
          <span class="availability-text">Available for work</span>
        </div>
      </div>

      <!-- Banner: name + copy -->
      <div class="banner-row">
        <div class="name-col hidden-before-reveal hidden-translate-y" id="nameCol">
          <h1>Viktor<span class="accent pink" id="accentDot">.</span></h1>
        </div>
        <div class="info-col">
          <div class="info-inner">
            <p class="hidden-before-reveal hidden-translate-x" id="infoParagraph">I shape digital experiences that feel as good as they look. Every choice is intentional, blending beauty with purpose. Crafted to grow with you.</p>
            <a href="/" class="hero-button hidden-before-reveal hidden-translate-x" id="heroBtn">start a project</a>
          </div>
        </div>
      </div>
    </section>
  </main>

  <script>
    (function() {
      // Clock
      function updateClock() {
        const now = new Date();
        const time = new Intl.DateTimeFormat('en-GB', {
          hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
        }).format(now);
        document.getElementById('clock').textContent = time;
        const mobile = document.getElementById('clockMobile');
        if (mobile) mobile.textContent = time;
      }
      updateClock();
      setInterval(updateClock, 1000);

      // Mobile menu
      const menuBtn = document.getElementById('menuBtn');
      const mobilePanel = document.getElementById('mobilePanel');
      let menuOpen = false;
      menuBtn.addEventListener('click', function() {
        menuOpen = !menuOpen;
        menuBtn.textContent = menuOpen ? 'Close' : 'Menu';
        mobilePanel.classList.toggle('open', menuOpen);
        mobilePanel.classList.toggle('closed', !menuOpen);
      });

      // Video switching
      let activeIndex = 0;
      const videos = [
        document.getElementById('video0'),
        document.getElementById('video1'),
        document.getElementById('video2')
      ];
      const roleButtons = document.querySelectorAll('.role-link');
      const statusDot = document.getElementById('statusDot');
      const accentDot = document.getElementById('accentDot');

      function setActive(index) {
        if (index === activeIndex) return;
        activeIndex = index;

        videos.forEach(function(v, i) {
          v.classList.toggle('visible-video', i === activeIndex);
          v.classList.toggle('hidden-video', i !== activeIndex);
        });

        roleButtons.forEach(function(btn, i) {
          btn.classList.toggle('active', i === activeIndex);
          btn.classList.toggle('inactive', i !== activeIndex);
        });

        if (activeIndex === 0) {
          statusDot.classList.add('pink');
          statusDot.classList.remove('white');
          accentDot.classList.add('pink');
          accentDot.classList.remove('white');
        } else {
          statusDot.classList.remove('pink');
          statusDot.classList.add('white');
          accentDot.classList.remove('pink');
          accentDot.classList.add('white');
        }
      }

      roleButtons.forEach(function(btn) {
        btn.addEventListener('click', function() {
          setActive(parseInt(btn.getAttribute('data-index')));
        });
      });

      // Reveal on scroll (IntersectionObserver)
      const heroMain = document.getElementById('heroMain');
      const nameCol = document.getElementById('nameCol');
      const infoParagraph = document.getElementById('infoParagraph');
      const heroBtn = document.getElementById('heroBtn');

      const observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            nameCol.classList.remove('hidden-before-reveal', 'hidden-translate-y');
            nameCol.classList.add('animate-reveal-up');

            infoParagraph.classList.remove('hidden-before-reveal', 'hidden-translate-x');
            infoParagraph.classList.add('animate-reveal-right');

            heroBtn.classList.remove('hidden-before-reveal', 'hidden-translate-x');
            heroBtn.classList.add('animate-reveal-right-delayed');

            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.35 });

      observer.observe(heroMain);

      // Preload videos as blobs for smoother playback
      var videoUrls = [
        'https://meez.design/web/media/ext/4c7a17ed464fc641.mp4',
        'https://meez.design/web/media/ext/c1d7ee2322f50681.mp4',
        'https://meez.design/web/media/ext/05734ea5698e8780.mp4'
      ];
      videoUrls.forEach(function(url, i) {
        fetch(url).then(function(res) { return res.blob(); }).then(function(blob) {
          videos[i].src = URL.createObjectURL(blob);
        }).catch(function() {});
      });
    })();
  </script>
</body>
</html>