AI website build-prompts for Wix

Copy this promptPrompt page

Create a fullscreen hero section for a SaaS product called "flowpath" using React, Tailwind CSS, and Lucide React icons. The section should be a single `<section>` filling the viewport (`h-screen w-full overflow-hidden`).

**Background:**
- A looping, muted, autoplaying `<video>` element covering the full section with `object-cover`. Video URL: `https://meez.design/web/media/ext/00e8673d6c0cdef2.mp4`
- A subtle dark overlay on top of the video: `bg-black/10`

**Font:**
- Use "Helvetica Now Text" as the primary font, loaded from: `https://db.onlinewebfonts.com/c/08e020de1811ec4489f82d1247a42c09?family=Helvetica+Now+Text`
- Fallback stack: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
- Applied globally via `* { font-family: ... }` in CSS

**Navigation (top, not fixed/sticky):**
- Full-width with responsive horizontal padding (`px-5 sm:px-6 md:px-12 lg:px-16`) and vertical padding (`py-4 sm:py-5`)
- Logo: An inline SVG diamond shape (28x28) with two overlapping diamond paths at 0.9 and 0.5 opacity, followed by the text "flowpath" in white, `text-lg sm:text-xl font-medium tracking-tight`
- Desktop nav (hidden on mobile): horizontal flex with items "Product" (dropdown: Connections, Workflows, Insights), "Solutions" (dropdown: Guides, Use cases, API reference), "About" (dropdown: Our story, Open roles, Reach us), "Plans" (no dropdown)
- Nav buttons: `text-white/90 hover:text-white text-sm font-medium`, with a `ChevronDown` icon (3.5x3.5) that rotates 180 degrees when dropdown is open
- Dropdowns open on hover (onMouseEnter/onMouseLeave), positioned `absolute top-full left-0`, using a custom `.liquid-glass` class, `rounded-xl py-3 px-2 min-w-[160px] shadow-xl`. Dropdown items: `text-white/80 hover:text-white text-sm rounded-lg hover:bg-white/5`
- Desktop CTA: "Log in" link (`text-white/90 hover:text-white text-sm font-medium`) and "Try it free" button using `.liquid-glass rounded-full px-5 py-2 text-white text-sm font-medium`
- Mobile menu button: animated toggle between `Menu` and `X` icons with rotation/scale/opacity transitions (duration-300)
- Mobile menu: absolutely positioned below nav, slides in with `cubic-bezier(0.16,1,0.3,1)` easing over 400ms. Background: `bg-[#2C221C]/95 backdrop-blur-xl rounded-2xl p-6`. Shows all nav items with sub-items indented, plus a bordered footer with Log in and Try it free

**Hero Content (below nav, top-aligned, not vertically centered):**
- Container: `flex-1 flex items-start justify-center` with `pt-16 sm:pt-20 md:pt-24` for spacing from the nav
- Text wrapper: `text-center max-w-3xl`
- Heading `<h1>`: `text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl leading-[1.05] tracking-[-0.02em]`
  - Content (with line breaks):
    ```
    Bridge the
    gaps. <span class="text-white/60">Ditch the</span>
    <span class="text-white/60">grindwork.</span>
    ```
- Subheading `<p>`: `text-white/80 text-sm sm:text-base md:text-lg leading-relaxed max-w-md mx-auto mt-6 sm:mt-8`
  - Text: "Flowpath unifies your complete wellness tools, so your crew spends less energy plugging gaps and more on real progress."
- Two CTA buttons side by side (`flex flex-wrap items-center justify-center gap-3 sm:gap-4 mt-6 sm:mt-8`):
  1. "Begin your journey" - solid white button: `px-5 sm:px-6 py-2.5 sm:py-3 bg-white text-gray-900 text-sm font-semibold rounded-full hover:bg-white/90`
  2. "See it live" - glass button: `px-5 sm:px-6 py-2.5 sm:py-3 liquid-glass rounded-full text-white text-sm font-semibold hover:bg-white/10`

**Custom CSS (`.liquid-glass` class):**
```css
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

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

**Additional CSS utilities:**
```css
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-dropdown { animation: dropdown-in 0.2s ease-out; }
.duration-400 { transition-duration: 400ms; }
```

**Important notes:**
- Dropdown elements need `!absolute` (Tailwind important modifier) to override the `position: relative` from `.liquid-glass`
- The entire section is fully responsive with breakpoints at sm, md, lg, xl
- No external UI libraries beyond Lucide React for icons
- Tailwind config is default with no extensions

Copy this promptPrompt page

Build a single full-viewport marketing landing page for **Boomerang**, a conversational AI platform for financial institutions. Tech: React + TypeScript + Vite + Tailwind CSS + Lucide React (`ArrowRight` only). No other UI libraries.

---

### Fonts (exact)

Load in `index.html`:

1. **Display / serif:** `P22 Mackinac W01 Book`  
   `https://meez.design/web/media/ext/7989306331865be9.woff2`

2. **UI / sans:** Inter weights 300, 400, 500, 600  
   `https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap`

Tailwind `fontFamily`:
- `sans: ['Inter', 'sans-serif']`
- `serif: ['P22 Mackinac W01 Book', 'Georgia', 'serif']`

Body: `font-family: 'Inter', sans-serif` with antialiased smoothing. Page title: `Build Lasting Relationships`. Background: pure white `#FFFFFF`. Primary text/chrome: `#191919`.

---

### CloudFront video (exact URL — required)

```
https://meez.design/web/media/prompt-media/v/83285e780cd09e92.mp4
```

---

### Hero video background — boomerang playback (critical behavior)

Implement a `BoomerangVideoBg` absolute full-bleed background (`absolute inset-0 z-0`) with:

1. Wrapper: `scale-[1.15] origin-top overflow-hidden` (slightly oversized, anchored from top).
2. Hidden/capture `<video>`: `src` = CloudFront URL above, `muted`, `playsInline`, `preload="auto"`, `crossOrigin="anonymous"`, `className="w-full h-full object-cover object-top"`.
3. On load: play once (no native loop). While playing, capture every frame to offscreen canvases (prefer `requestVideoFrameCallback`, else `requestAnimationFrame`). Cap capture width at **960px**, scale height proportionally. Deduplicate by `currentTime`.
4. On `ended`: stop capture, store frames, switch from video to a display `<canvas>` (`w-full h-full object-cover object-top`).
5. Canvas playback: ping-pong / boomerang at **30fps** (`interval = 1000/30`). Advance frame index forward to last, then reverse to first, forever.
6. While frames aren’t ready, show the live video; once ready, hide video (`display: none`) and show canvas.

This is the main motion: a soft looping forward→reverse background video behind the hero.

---

### Logo (exact SVG)

Custom SVG mark (not Lucide), `viewBox="0 0 256 256"`, `fill="currentColor"`:

```
M 144 256 L 27.598 256 L 144 139.598 Z
M 256 207.5 L 200 256 L 200 56 L 0 56 L 48 0 L 256 0 Z
M 0 204.402 L 0 112 L 92.402 112 Z
```

Navbar size: `w-6 h-6 text-[#191919]`. Wordmark beside it: “Boomerang”, `font-semibold text-base tracking-tight text-[#191919]`, gap `2.5`.

---

### Fixed navbar

- `fixed top-0 left-0 right-0 z-50`
- Padding: `px-6 sm:px-10 md:px-14`, `py-4 sm:py-5`
- Three zones: logo left | center links (hidden below `md`) | CTA right
- Links: Product, Solutions, Pricing, Company — `text-sm text-[#191919]/70`, hover to full `#191919`, `transition-colors duration-200`, hrefs `#product` `#solutions` `#pricing` `#company`
- CTA button: “Book A Demo” — `px-5 py-2.5 bg-[#191919] text-white text-sm font-medium rounded-lg hover:bg-[#191919]/90 transition-colors duration-200`
- No nav background / blur / border — transparent over the video

---

### Hero section (first viewport = full screen)

- `relative flex flex-col items-center overflow-hidden h-screen`
- Video bg at `z-0`; content at `z-10`

**Hero copy block** (centered):
- Top padding: `pt-24 sm:pt-26 md:pt-32`, horizontal `px-4 sm:px-6`
- H1 (serif Mackinac):  
  `Build lasting` + line break + `relationships.`  
  Classes: `font-serif text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[1.1] tracking-tighter text-[#191919] font-normal`
- Subcopy max-width `max-w-sm sm:max-w-md`, `mt-5 sm:mt-6 md:mt-8`, `text-sm md:text-base text-[#191919]/70 leading-relaxed`:  
  “Conversational AI platform for modern financial institutions — agents that handle the full borrower lifecycle across email, SMS, and voice.”
- Second “Book A Demo” button: `mt-6 sm:mt-8 md:mt-10 px-6 sm:px-8 py-3 sm:py-3.5` same black pill styling as nav CTA

**Bottom info panel** (`mt-auto`, sits on bottom of viewport):
- Outer: `w-full max-w-5xl px-4 sm:px-6`
- Card: `bg-white/90 backdrop-blur-sm border border-gray-200 border-b-0 pt-8 sm:pt-12 md:pt-16 px-5 sm:px-8 md:px-12 pb-0 shadow-sm` — flush to bottom (no bottom border/radius)
- **Row 1 — 2 cols** (`md:grid-cols-2`, gaps `6 / 8 / 16`):
  - Left: micro-label `WHAT DO WE DO?` — `text-[11px] uppercase tracking-[0.2em] text-[#191919]/50 font-medium`  
    then H2 serif: “Conversations that / build momentum” — `mt-3 text-2xl sm:text-3xl md:text-4xl font-serif font-normal leading-tight tracking-tight` (line break from `sm` up)
  - Right: body bottom-aligned — `text-sm md:text-[15px] text-[#191919]/70 leading-relaxed`:  
    “Conversational AI built for regulated financial institutions. Agents that hold a real conversation, plug into the systems you run, and show their work.”
- **Hairline divider:** `mt-6 sm:mt-8 md:mt-10 h-px bg-gray-200 w-full`
- **Row 2 — 3 interactive rows** (`sm:grid-cols-3`, gap `2` / `3`):
  - Items:
    - `01 / Conversational`
    - `02 / Connected`
    - `03 / Compliant`
  - Each: `bg-[#F4F3F3] hover:bg-[#eaeaea] transition-all duration-200 cursor-pointer`, `px-4 sm:px-6 py-3.5 sm:py-4`, flex space-between
  - Number: `text-[#191919]/40`; slash: `mx-2 text-[#191919]/30`; label: `font-medium`
  - Lucide `ArrowRight` `w-4 h-4 text-gray-400`; on group hover: `text-gray-700` + `translate-x-0.5`, `transition-all duration-200`

---

### Layout / motion summary

- Page: `min-h-screen bg-white overflow-x-hidden`
- Only intentional motions:
  1. Boomerang video ping-pong on canvas
  2. Color transitions on nav links & buttons (200ms)
  3. Feature-row hover bg + arrow nudge (200ms)
- No purple, no cards-as-hero, no stat strips, no floating badges. One composition: brand + headline + one sentence + CTA + full-bleed video, with the “What do we do?” panel anchored at the bottom of the first viewport.
- Responsive: nav links hide below `md`; feature rows stack on mobile; typography scales as specified.

Reproduce pixel-faithfully: same copy, colors (`#191919`, `#F4F3F3`, white/90 glass panel), fonts, CloudFront URL, and the capture→boomerang canvas video technique.

---

Copy this promptPrompt page

Recreate this exact full-viewport portfolio landing page — pixel-perfect match.

═══════════════════════════════════════
TECH / STACK
═══════════════════════════════════════
- React + TypeScript + Tailwind CSS + Vite
- Icons: lucide-react (`Play`, `Menu`, `X`)
- Single full-screen page: `h-screen w-full overflow-hidden`
- Root: `relative h-screen w-full overflow-hidden bg-black text-white`

═══════════════════════════════════════
FONTS (exact)
═══════════════════════════════════════
Load in <head>:

1) Inter (Google Fonts) — body/default:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

2) basis33 (pixel/bitmap monospace) — for `.font-pixel`:
<link href="https://meez.design/web/media/ext/47a28c1e2fef21f6.woff2" rel="stylesheet">

CSS:
- body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
- .font-pixel { font-family: 'basis33', monospace; }

Where basis33 (font-pixel) is used:
- "ROBERTS" under ADAM
- "ENGINEERING" under DESIGN &
- Brand blurb under name
- Labels "What I Do" and "Services"
- Words "UNEXPECTED" and "EXPERIENCES" inside the hero headline (1.25em size)

Where Inter is used:
- Everything else (nav, ADAM, DESIGN &, body copy, showreel button, awards, footer)

Page title: "Adam Roberts - Design & Engineering"

═══════════════════════════════════════
BACKGROUND VIDEO (exact URL — do not substitute)
═══════════════════════════════════════
Full-bleed background <video>:
src="https://meez.design/web/media/prompt-media/v/5198a3596261af2f.mp4"

Attributes: autoPlay muted loop playsInline
Classes: absolute inset-0 h-full w-full object-cover lg:scale-[1.2]
(On large screens, video is scaled 120% for a slight crop/zoom)

All UI sits above video at z-10. No dark overlay — white text over the video.

═══════════════════════════════════════
LOGO (exact SVG)
═══════════════════════════════════════
White geometric “GP / Grilled Pixels” mark, 28×28, viewBox="0 0 256 256":
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 256 256" fill="none">
  <path d="M 160 88 L 194 34 L 216 0 L 256 0 L 256 40 L 221.5 93.5 L 200 128 L 256 128 L 256 256 L 96 256 L 96 168 L 64.246 220 L 40 256 L 0 256 L 0 216 L 34 162 L 56 128 L 0 128 L 0 0 L 160 0 Z" fill="white" />
</svg>
Used in top-left navbar AND inside the mobile menu header.

═══════════════════════════════════════
LAYOUT STRUCTURE (top → bottom)
═══════════════════════════════════════
Outer content wrapper (above video):
relative z-10 flex h-full flex-col px-5 sm:px-6 md:px-10 lg:px-14

── 1. NAVBAR ──
flex items-center justify-between py-6

Left: logo SVG
Right desktop (md+): horizontal links, gap-8, text-sm tracking-wide
  ABOUT | PROCESS | PROJECTS | CATALOG | D.O.T | TALK
  Each: href="#", hover:opacity-70 transition-opacity
Right mobile (<md): hamburger button (Menu icon size 24), p-2 hover:opacity-70

── 2. FOUR-COLUMN META GRID ──
mt-4 grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8

COL 1 (left):
  h2 text-lg md:text-xl tracking-wide leading-tight
    Line1: "ADAM" (font-normal Inter)
    Line2: "ROBERTS" (font-pixel text-2xl md:text-3xl)
  Then: * asterisk at text-[10px] text-white/50 mt-3
  Then brand blurb font-pixel mt-1 text-xs text-white/60 leading-relaxed, line breaks EXACTLY:
    Grilled Pixels is my
    personal brand - I came up
    with it in 2004 based on
    "cooking up ideas"

COL 2 (text-right on mobile 2-col, text-left on lg):
  h2 same sizing
    Line1: "DESIGN &" (Inter font-normal)
    Line2: "ENGINEERING" (font-pixel text-2xl md:text-3xl)

COL 3:
  Label: "What I Do" — text-base tracking-widest text-white/50 uppercase mb-3 font-pixel
  Body: text-sm text-white/90 leading-relaxed max-w-[220px]
    "I create the top 1% of experiences for brands and digital products"

COL 4 (text-right on mobile 2-col, text-left on lg):
  Label: "Services" — same label styles as What I Do
  ul text-sm text-white/90 leading-relaxed space-y-0.5:
    - Branding
    - Creative Direction & Strategy
    - UX/UI Design
    - Web Development (React/Nextjs)
    - 3D, WebGL / Photography
    - Video & Animation

── 3. FLEX SPACER ──
<div className="flex-1" />  ← pushes bottom block to viewport bottom

── 4. BOTTOM SECTION (pb-4) ──

ROW A — grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 items-end

LEFT — Hero headline:
  h1: text-3xl sm:text-4xl md:text-5xl lg:text-[3.75rem] xl:text-[4.25rem]
      tracking-wide uppercase font-normal
      inline style: lineHeight: 0.72
  Exact line breaks:
    I BRING THE
    UNEXPECTED TO     ← "UNEXPECTED" is font-pixel font-normal text-[1.25em] inline-block leading-none align-baseline
    BRAND & DIGITAL
    EXPERIENCES       ← "EXPERIENCES" same pixel treatment as UNEXPECTED

RIGHT — column flex flex-col gap-4 sm:gap-6 justify-end:
  A) PLAY SHOWREEL button (self-start):
     flex items-center gap-3
     border border-white/30 px-6 py-3
     backdrop-blur-sm bg-white/5
     hover:bg-white/10 transition-colors
     Play icon: lucide Play size={14} fill="white"
     Label: text-sm tracking-wider "PLAY SHOWREEL"

  B) Awards row (self-start on mobile, lg:self-end):
     flex flex-wrap items-stretch gap-2 sm:gap-3 text-sm text-white/80
     Three dark chips, each: bg-[#0B0B0B] px-3 sm:px-4 py-2, flex items-center gap-2
       1) "FWA" font-bold text-sm sm:text-base tracking-tight + "x1" text-white/50 text-xs
       2) "W." font-bold text-lg sm:text-xl + "x7" text-white/50 text-xs
       3) "CSSDesignAwards" font-bold text-[10px] sm:text-xs tracking-tight + "x22" text-white/50 text-xs

ROW B — footer strip:
  mt-4 sm:mt-5 grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4 pt-4
  Left: text-xs text-white/60
    "Open to freelance, contract or full-time. "
    then link "Schedule a call" — text-red-500 hover:text-red-400 transition-colors href="#"
  Right: text-xs text-white/60 sm:text-right
    "5 full cases • 82 archive fragments • 22 catalog items"
    (use &bull; or • between parts)

═══════════════════════════════════════
MOBILE FULLSCREEN MENU
═══════════════════════════════════════
State: menuOpen boolean

Overlay: fixed inset-0 z-50 bg-black/95 backdrop-blur-md flex flex-col
Transition: transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
  open:  opacity-100 pointer-events-auto
  closed: opacity-0 pointer-events-none

Header: flex items-center justify-between px-6 py-6
  Left: same logo SVG
  Right: X button (size 24) closes menu — p-2 hover:opacity-70

Nav: flex flex-col items-center justify-center flex-1 gap-8
  Same 6 links as desktop, text-2xl tracking-widest
  Staggered entrance when opening:
    transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
    open:  opacity-100 translate-y-0
    closed: opacity-0 translate-y-4
    transitionDelay when open: `${100 + i * 60}ms` (i = 0..5) → 100,160,220,280,340,400ms
    when closed: delay 0ms
  Clicking a link closes the menu

═══════════════════════════════════════
ANIMATIONS / INTERACTIONS SUMMARY
═══════════════════════════════════════
1. Background video: continuous autoplay loop, muted
2. Nav link hover: opacity → 70%
3. Showreel button hover: bg white/5 → white/10
4. Schedule a call hover: red-500 → red-400
5. Mobile menu overlay: 500ms cubic-bezier(0.16,1,0.3,1) fade
6. Mobile menu links: staggered fade+slide-up (60ms steps, start 100ms)
7. Hamburger / close icon hover: opacity 70%
8. NO scroll (overflow-hidden, h-screen) — single locked viewport composition
9. NO page load entrance animation on desktop content (static on paint)
10. Video scales to 1.2× at lg breakpoint

═══════════════════════════════════════
COLOR TOKENS
═══════════════════════════════════════
- Page bg: #000000 (black)
- Primary text: #ffffff
- Muted: white/90, white/80, white/60, white/50
- Accent link: Tailwind red-500 (Schedule a call)
- Award chips: #0B0B0B
- Showreel button: border white/30, fill white/5, blur
- Mobile overlay: black/95 + backdrop blur

═══════════════════════════════════════
RESPONSIVE BREAKPOINTS (Tailwind defaults)
═══════════════════════════════════════
- < md: hamburger + 2-col meta grid; awards/showreel stack under headline
- md+: desktop nav links
- lg+: 4-col meta grid; 2-col bottom (headline | showreel+awards); video scale 1.2
- sm/md/lg/xl: progressive padding and headline size as listed above

═══════════════════════════════════════
DO NOT
═══════════════════════════════════════
- Do not add cards, purple gradients, cream backgrounds, or extra sections
- Do not change copy, award counts, or line breaks
- Do not replace the CloudFront video URL
- Do not use Inter for pixel words — must be basis33
- Do not add scrolling or a second viewport section
```
```

Copy this promptPrompt page

**Build a single-page React + TypeScript landing page for a travel app called "Wandor" using Vite, Tailwind CSS, and lucide-react. The page is a full-viewport hero section with a looping background video, a frosted-glass prompt card, and a navigation bar.**

**Fonts (load in index.html `<head>`):**
- Google Fonts link: `https://fonts.googleapis.com/css2?family=Special+Elite&family=Geist:wght@400;500;600;700&display=swap`
- Include preconnect to fonts.googleapis.com and fonts.gstatic.com (crossorigin).
- Body / UI font: "Geist" (sans-serif), weights 400/500/600/700.
- Logo font: "Special Elite" (typewriter serif), used only for the wordmark.
- Page title: `Wandor — Where will you go next?`

**Tailwind config (tailwind.config.js) — extend theme:**
- `fontFamily.sans`: `['Geist', 'sans-serif']`
- `fontFamily.display`: `['Special Elite', 'serif']`
- Custom colors under key `wandor`:
  - `dark: '#0a0a0a'`
  - `text: '#1a1a1a'`
  - `muted: '#767676'`
  - `prompt: '#905831'` (a brown/terracotta)

**Global CSS (index.css):**
- Standard Tailwind directives (base/components/utilities).
- `body`: `font-family: 'Geist', sans-serif; overflow-x: hidden; background: #fff;`

**Layout — single `<section>` that fills the viewport:**
- Section: `relative min-h-svh w-full overflow-hidden`.

**Background video (z-0):**
- `<video>` absolutely positioned `inset-0 w-full h-full object-cover z-0`.
- Exact `src`: `https://meez.design/web/media/prompt-media/v/4274a69e25d7e8a7.mp4`
- Attributes: `autoPlay muted loop playsInline`.

**Top gradient overlay (z-1):**
- Absolutely positioned `inset-x-0 top-0 h-[687px] pointer-events-none z-[1]`.
- Inline style background: `linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)` — a white-to-transparent vertical fade covering the top 687px so the nav and headline read clearly over the video.

**Content wrapper (z-2):**
- `relative z-[2] max-w-[1360px] mx-auto`.

**Navigation bar:**
- `<nav>`: `flex items-center justify-between px-20 pt-6 pb-4` (mobile: `px-6 pt-5`).
- Left: wordmark `<span className="font-display text-[40px] text-black leading-none select-none">wandor</span>` (mobile: `text-[32px]`).
- Center: absolutely centered group `absolute left-1/2 -translate-x-1/2 flex gap-8` (hidden on mobile via `max-md:hidden`). Three buttons: "Discover", "Pricing", "FAQs". Each button: `bg-transparent border-none cursor-pointer font-sans text-[15px] font-medium uppercase text-wandor-text tracking-[0.04em] transition-opacity hover:opacity-55`.
- Right: flex group `flex items-center gap-8`:
  - "Login" button (hidden on mobile): `bg-transparent border-none cursor-pointer font-sans text-[15px] font-semibold uppercase text-[#292929] tracking-[0.04em] transition-opacity hover:opacity-55`.
  - "Plan My Trip" button: `bg-wandor-dark text-[#fafafa] border-none cursor-pointer font-sans text-[15px] font-medium uppercase tracking-[0.04em] px-5 py-3.5 rounded-full transition-all hover:bg-[#333] active:scale-95`.

**Hero body:**
- Container: `flex flex-col items-center px-6 pt-16 pb-24 text-center`.
- Headline `<h1>`: `font-sans text-[clamp(40px,6vw,68px)] font-medium text-wandor-text leading-[1.05] tracking-[-0.04em] max-w-[820px] mb-5`. Text: "Where will you go next?"
- Subtitle `<p>`: `font-sans text-xl font-medium text-wandor-muted leading-relaxed max-w-[500px] mb-10`. Text: "Tell our AI where you're going and what you love. We'll create a personalized itinerary for you."

**Liquid glass prompt card:**
- Wrapper `<div>`: `relative w-[701px] max-md:w-[calc(100vw-48px)] min-h-[208px] bg-white/[0.06] border-[3px] border-white rounded-[44px] shadow-[0_0_4px_0_rgba(0,0,0,0.15)] overflow-hidden backdrop-blur-[20px]`. This is the liquid-glass effect: very low-opacity white fill, thick white border, heavy backdrop blur, soft shadow, large pill radius.
- Prompt text `<p>`: absolutely positioned `left-[29px] top-[57px] -translate-y-1/2 w-[609px] max-md:w-[calc(100%-58px)] font-sans text-xl max-md:text-[17px] font-medium text-wandor-prompt leading-relaxed break-words`. Text: "I'm planning a 7-day trip to Japan in October. I love food, hidden cafes, scenic hikes, and want to avoid crowds...." (note the trailing "....").
- "Plan My Trip" CTA button inside card: `absolute bottom-[21px] right-[21px] w-[156px] h-14 bg-black border-none rounded-[44px] shadow-[0_0_2px_0_rgba(0,0,0,0.05)] cursor-pointer flex items-center justify-center font-sans text-base font-medium text-[#fafafa] uppercase tracking-[0.02em] transition-all hover:bg-[#333] active:scale-95`. Text: "Plan My Trip".
- Hidden file input: `<input ref={fileInputRef} type="file" accept="image/*,.pdf" className="hidden" />`.
- Upload button: `absolute left-[21px] top-[137px] w-11 h-11 bg-transparent border border-white/70 rounded-full cursor-pointer flex items-center justify-center backdrop-blur-[14px] transition-transform hover:scale-105 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2`. `aria-label="Upload inspiration"`. On click, trigger the hidden file input via a ref. Inside, render the lucide-react `Upload` icon: `<Upload className="w-[18px] h-[18px] text-wandor-text flex-shrink-0" />`.

**Interactions / animations:**
- All buttons use `transition-opacity` / `transition-all` / `transition-transform` with `hover:opacity-55`, `hover:bg-[#333]`, `hover:scale-105`, and `active:scale-95` for tactile micro-interactions.
- The glass card and upload button use `backdrop-blur-[20px]` / `backdrop-blur-[14px]` for the liquid-glass frosted effect over the video.
- The video autoplays muted and loops continuously for ambient motion.
- The top white-to-transparent gradient overlay ensures the nav and headline remain legible over the video.

**Responsive behavior:**
- At `max-width: 760px` (Tailwind `max-md`): nav padding shrinks to `px-6 pt-5`, logo drops to 32px, center nav links and Login button hide, glass card becomes `calc(100vw - 48px)` wide with prompt text at 17px and width `calc(100%-58px)`.

**App structure:**
- `src/App.tsx` imports `Hero` from `@/components/Hero` and renders it inside a wrapping `<div>`.
- `Hero.tsx` contains all the markup above plus a `NavButton` helper component for the centered links.
- Use the `@/` path alias (maps to `src/`) configured in `vite.config.ts` via `resolve.alias`.

---

## Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Wandor — Where will you go next?</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=Special+Elite&family=Geist:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body { font-family: 'Geist', sans-serif; overflow-x: hidden; background: #fff; }

    .hero { position: relative; min-height: 100svh; width: 100%; overflow: hidden; }

    .hero-video {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; z-index: 0;
    }

    .hero-overlay {
      position: absolute; inset-inline: 0; top: 0; height: 687px;
      background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
      pointer-events: none; z-index: 1;
    }

    .hero-content { position: relative; z-index: 2; max-width: 1360px; margin-inline: auto; }

    nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 24px 80px 16px; position: relative;
    }

    .logo { font-family: 'Special Elite', serif; font-size: 40px; color: #000; line-height: 1; user-select: none; }

    .nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 32px; }

    .nav-links button {
      background: none; border: none; cursor: pointer;
      font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 500;
      text-transform: uppercase; color: #1a1a1a; letter-spacing: 0.04em; transition: opacity 0.15s;
    }
    .nav-links button:hover { opacity: 0.55; }

    .nav-actions { display: flex; align-items: center; gap: 32px; }

    .btn-login {
      background: none; border: none; cursor: pointer;
      font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 600;
      text-transform: uppercase; color: #292929; letter-spacing: 0.04em; transition: opacity 0.15s;
    }
    .btn-login:hover { opacity: 0.55; }

    .btn-plan {
      background: #0a0a0a; color: #fafafa; border: none; cursor: pointer;
      font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.04em;
      padding: 14px 20px; border-radius: 9999px; transition: background 0.15s, transform 0.1s;
    }
    .btn-plan:hover { background: #333; }
    .btn-plan:active { transform: scale(0.95); }

    .hero-body {
      display: flex; flex-direction: column; align-items: center;
      padding: 64px 24px 96px; text-align: center;
    }

    h1 {
      font-family: 'Geist', sans-serif; font-size: clamp(40px, 6vw, 68px);
      font-weight: 500; color: #1a1a1a; line-height: 1.05; letter-spacing: -0.04em;
      max-width: 820px; margin-bottom: 20px;
    }

    .subtitle {
      font-family: 'Geist', sans-serif; font-size: 20px; font-weight: 500;
      color: #767676; line-height: 1.4; max-width: 500px; margin-bottom: 40px;
    }

    .glass-card {
      position: relative; width: 701px; height: 208px;
      background: rgba(255,255,255,0.06); border: 3px solid white;
      border-radius: 44px; box-shadow: 0 0 4px 0 rgba(0,0,0,0.15); overflow: hidden;
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    }

    .card-prompt {
      position: absolute; left: 29px; top: 57px; transform: translateY(-50%); width: 609px;
      font-family: 'Geist', sans-serif; font-size: 20px; font-weight: 500;
      color: #905831; line-height: 1.4; word-break: break-word;
    }

    .card-cta {
      position: absolute; bottom: 21px; right: 21px; width: 156px; height: 56px;
      background: #000; border: none; border-radius: 44px;
      box-shadow: 0 0 2px 0 rgba(0,0,0,0.05); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Geist', sans-serif; font-size: 16px; font-weight: 500;
      color: #fafafa; text-transform: uppercase; letter-spacing: 0.02em;
      transition: background 0.15s, transform 0.1s;
    }
    .card-cta:hover { background: #333; }
    .card-cta:active { transform: scale(0.95); }

    .upload-btn {
      position: absolute; left: 21px; top: 137px; width: 44px; height: 44px;
      background: transparent; border: 1px solid rgba(255,255,255,0.7);
      border-radius: 44px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      transition: transform 0.15s; padding: 0;
    }
    .upload-btn:hover { transform: scale(1.05); }
    .upload-btn:focus-visible { outline: 2px solid white; outline-offset: 2px; }

    .upload-icon { width: 18px; height: 18px; flex-shrink: 0; }

    #file-input { display: none; }

    @media (max-width: 760px) {
      nav { padding: 20px 24px 16px; }
      .logo { font-size: 32px; }
      .nav-links, .btn-login { display: none; }
      .glass-card { width: calc(100vw - 48px); height: auto; min-height: 208px; }
      .card-prompt { width: calc(100% - 58px); font-size: 17px; }
    }
  </style>
</head>
<body>
  <section class="hero">
    <video class="hero-video"
      src="https://meez.design/web/media/prompt-media/v/4274a69e25d7e8a7.mp4"
      autoplay muted loop playsinline></video>

    <div class="hero-overlay"></div>

    <div class="hero-content">
      <nav>
        <span class="logo">wandor</span>
        <div class="nav-links">
          <button>Discover</button>
          <button>Pricing</button>
          <button>FAQs</button>
        </div>
        <div class="nav-actions">
          <button class="btn-login">Login</button>
          <button class="btn-plan">Plan My Trip</button>
        </div>
      </nav>

      <div class="hero-body">
        <h1>Where will you go next?</h1>
        <p class="subtitle">Tell our AI where you're going and what you love. We'll create a personalized itinerary for you.</p>

        <div class="glass-card">
          <p class="card-prompt">I'm planning a 7-day trip to Japan in October. I love food, hidden cafés, scenic hikes, and want to avoid crowds....</p>
          <button class="card-cta">plan My trip</button>
          <input type="file" id="file-input" accept="image/*,.pdf" />
          <button class="upload-btn" aria-label="Upload inspiration"
            onclick="document.getElementById('file-input').click()">
            <svg class="upload-icon" viewBox="0 0 19.5001 19.5" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <path d="M0.750049 14.75C0.750049 15.68 0.750049 16.145 0.852269 16.5265C1.12967 17.5617 1.93832 18.3704 2.97359 18.6478C3.35509 18.75 3.82008 18.75 4.75005 18.75H14.75C15.68 18.75 16.145 18.75 16.5265 18.6478C17.5618 18.3704 18.3704 17.5617 18.6478 16.5265C18.75 16.145 18.75 15.68 18.75 14.75"
                stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M14.25 5.24997C14.25 5.24997 10.9358 0.75001 9.75003 0.75C8.56413 0.74999 5.25005 5.25 5.25005 5.25M9.75003 1.75V13.75"
                stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </section>
</body>
</html>