✦ClaudeHero section
Triverra travel hero with glass navbar
A full-viewport travel hero with a slow-motion video, glass navbar and dual-arrow CTA hover.
# Header
A full-viewport travel landing hero for the **Triverra** brand, featuring a slow-motion looping background video, a floating glassmorphic navbar, a large centered headline with a premium dual-arrow hover reveal on the CTA buttons, and a subtle ambient float animation applied to the entire content column.
## Tech stack
- React ("use client")
- framer-motion (motion, AnimatePresence)
- lucide-react (Menu, X icons)
- Tailwind CSS for all styling
## Fonts & global styles
Use the **Gantari** font family for all text. Load it via:
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Gantari:wght@400;500;600;700&display=swap" rel="stylesheet" />
```
Apply `font-family: 'Gantari', sans-serif;` to the root element of the section. All original code uses a `font-gantari` utility — resolve this to the Gantari Google font above.
## Section container
The root is a `<main>` with classes: `relative w-full h-screen min-h-[650px] overflow-hidden flex flex-col justify-between select-none`. Text color throughout is white on top of the dark video.
## Structure, section by section
1. **Background video layer** — an absolutely positioned `div` (`absolute inset-0 -z-10 w-full h-full overflow-hidden`) holding a `<video>` with classes `w-full h-full object-cover scale-[1.02]`, `autoPlay loop muted playsInline`. On mount, set `videoRef.current.playbackRate = 0.8` for a slow cinematic feel. Source: the URL in Assets.
2. **Ambient float wrapper** — a `motion.div` (`w-full h-full flex flex-col relative z-20`) wrapping ALL content that gently drifts: `animate={{ y: [0,-8,0], rotate: [0,0.5,0] }}`, `transition={{ duration: 8, ease: 'easeInOut', repeat: Infinity }}`.
3. **Navbar** (`motion.header`, `w-full pt-[16px] px-6 md:px-[48px] min-[1440px]:px-[64px]`, enters with `initial opacity:0 y:-20`, `animate opacity:1 y:0`, `duration 0.8 ease easeOut`). Inner container is `flex items-center justify-between w-full gap-6 lg:gap-[48px]`.
- **Brand logo** (left): an `<img>` at `h-[22px] md:h-[24px] lg:h-[34px] w-auto object-contain` linking to `#`, hover opacity 0.9.
- **Desktop menu pill** (`hidden lg:flex`): a glass pill `py-2 px-4 gap-6 rounded-full bg-white/10 backdrop-blur-md border border-white/5`. Menu items: Home, Services, Tours, Destinations, Contacts. Each is a button, `text-[16px] tracking-[-0.2px]`. Active item is `text-white font-semibold`, inactive `text-white/80 font-normal hover:text-white`. The active item shows a shared-layout animated dot (`layoutId="activeDot"`) — a `w-1 h-1 rounded-full bg-white` positioned `absolute -bottom-1 left-1/2 -translate-x-1/2`, transition `type:'spring' stiffness:300 damping:30`.
- **Register button** (desktop, `hidden lg:block`): `py-[10px] px-[18px] rounded-full border border-white/60 bg-transparent text-white font-semibold text-[16px] tracking-[-0.2px]`, on hover border becomes fully white (rgba(255,255,255,1)). Label: "Register Now".
- **Mobile trigger** (`block lg:hidden`): a circular button `p-2.5 rounded-full bg-white/10 hover:bg-white/20 border border-white/15 text-white` showing the lucide `Menu` (or `X` when open) at size 20.
4. **Spacer 1x** — `div` with `flexGrow: 1, minHeight: 24px`.
5. **Hero content** — centered column `max-w-[580px]` text-center.
- **Title badge** (p, delay 0.2 duration 0.8, from opacity:0 y:15): text "Your AI Travel Companion - Plan Smarter. Explore Deeper." at `text-[14px] md:text-[18px] font-normal tracking-[-0.4px] md:tracking-[-0.72px] opacity-90 mb-1 lg:mb-2`.
- **Headline** (h1, delay 0.4 duration 1.0 ease `[0.16,1,0.3,1]`, from opacity:0 y:25): two stacked spans "Dream deeper." and "Travel farther." at `text-[42px] sm:text-[60px] lg:text-[80px] font-normal leading-[100%] tracking-[-2px] sm:tracking-[-4px] lg:tracking-[-6px] mb-8 lg:mb-[40px]`, flex-col centered.
- **Button row** (delay 0.6 duration 0.8): `flex flex-col sm:flex-row items-center gap-[12px] mb-6 lg:mb-[18px]`.
- **Primary button** "Build My Trip Free": `w-[240px] sm:w-auto py-[14px] px-[16px] rounded-[12px] bg-white text-[#0C120C] font-medium text-[18px] sm:text-[20px] tracking-[-0.8px] sm:tracking-[-1px] shadow-lg`.
- **Secondary button** "See How It Works": same sizing but `border border-white/40 bg-[#0C120C]/10 text-white backdrop-blur-sm`, hover border rgba(255,255,255,0.7).
- Both buttons use TWO signature hover effects (see Animations): a vertical text-swap slide and a dual-arrow cross-fade.
- **Trusted stat** (p, delay 0.8 duration 0.8): "8370+" (bold white) then " trips planned • Rated " then "4.9" (bold white) then " by travelers worldwide" at `text-white/80 text-[14px] md:text-[16px] tracking-[-0.4px]`.
6. **Spacer 3x** — `div` with `flexGrow: 3, minHeight: 72px`.
7. **Footer description** (motion.footer, delay 1.0 duration 1.0, from opacity:0 y:20): `w-full pb-[32px] px-6`, inner `max-w-[560px] text-center`, paragraph: "Triverra uses advanced AI to create travel plans tailored to your preferences, budget, and pace. Say goodbye to many tabs and decision overload. Enjoy one smart itinerary — ready for your trip." at `text-white/90 text-[14px] md:text-[18px] leading-[140%] tracking-[-0.4px] md:tracking-[-0.72px]`.
8. **Mobile drawer** — wrapped in `AnimatePresence`; when open, a fixed overlay `fixed inset-0 z-50 bg-white/[0.01] backdrop-blur-md lg:hidden flex flex-col pt-[76px] pb-12 px-6 overflow-y-auto`, entering `opacity:0 y:-20` -> `opacity:1 y:0`, exit reverse, `duration 0.4 ease easeInOut`. A close `X` button top-right (`top-[16px] right-6`). Menu list `flex flex-col items-center gap-8 mt-[40px]`, each item `text-[22px] tracking-[-0.4px]` (active white bold / inactive text-white/60). A "Register Now" pill button below with `mt-[64px] w-full max-w-[280px]`.
## Assets (every URL)
- Background video: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20Images/Header%20BG%20travel.mp4`
- Brand logo SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/brand%20logo%20triverra.svg`
- Arrow right SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/arrow-right.svg`
- Arrow up-right SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/arrow-up-right.svg`
All images use `referrerPolicy="no-referrer"`.
## Animations
- **Ambient float**: entire content column drifts `y: [0,-8,0]` and `rotate: [0,0.5,0]`, 8s easeInOut infinite.
- **Entrance stagger**: navbar (0), badge (0.2s), headline (0.4s), buttons (0.6s), stat (0.8s), footer (1.0s), each fading up.
- **Active menu dot**: framer-motion shared layout via `layoutId="activeDot"`, spring stiffness 300 damping 30.
- **Button text-swap on hover** — a masked vertical slide. The label appears twice stacked; on hover the inner column translates up 50%:
```jsx
<span className="relative inline-block overflow-hidden h-[24px] sm:h-[28px] leading-none">
<span
className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]"
style={{ transform: isHovered ? 'translateY(-50%)' : 'translateY(0%)' }}
>
<span className="h-[24px] sm:h-[28px] flex items-center justify-center leading-none">Build My Trip Free</span>
<span className="h-[24px] sm:h-[28px] flex items-center justify-center leading-none">Build My Trip Free</span>
</span>
</span>
```
- **Dual-arrow cross-fade on hover** — an 18x18 masked box holding two absolutely-positioned arrow SVGs. The right arrow fades/slides out to top-right; the up-right arrow fades/slides in, duration 700ms `cubic-bezier(0.16,1,0.3,1)`:
```jsx
<div className="relative w-[18px] h-[18px] shrink-0 overflow-hidden">
<img src="...arrow-right.svg" className="absolute inset-0 w-full h-full object-contain transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]"
style={{ opacity: isHovered ? 0 : 1, transform: isHovered ? 'translate(6px,-6px) scale(0.8)' : 'translate(0,0) scale(1)' }} />
<img src="...arrow-up-right.svg" className="absolute inset-0 w-full h-full object-contain transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]"
style={{ opacity: isHovered ? 1 : 0, transform: isHovered ? 'translate(0,0) scale(1)' : 'translate(-6px,6px) scale(0.8)' }} />
</div>
```
- Primary button arrows are recolored dark green via CSS filter: `invert(7%) sepia(19%) saturate(1441%) hue-rotate(80deg) brightness(96%) contrast(96%)`.
- Secondary button arrows are recolored white via CSS filter: `brightness(0) invert(1)`.
## Responsive behavior
- **lg (1024px+)**: desktop glass menu pill and Register button visible; mobile trigger hidden. Headline scales up to `80px` with `-6px` tracking; horizontal padding grows to `48px`, then `64px` at 1440px.
- **Below lg**: desktop menu and Register button hidden; hamburger trigger shown; tapping opens the full-screen backdrop-blur drawer with a 64px gap before the Register pill.
- **sm (640px+)**: buttons switch from full-width stacked (`w-[240px]`, flex-col) to auto-width row; headline `60px`, button text `20px`.
- **Base/mobile**: headline `42px`, buttons full-width stacked, smaller type throughout.
## Key design principles
- Everything sits over a slow (0.8x) looping travel video with a subtle 1.02 scale.
- Glassmorphism (white/10 fills, backdrop-blur, faint white borders) unifies nav, buttons, and drawer.
- Tight negative letter-spacing on large type for a modern editorial feel.
- The whole content column breathes via a slow ambient float.
- Premium micro-interactions: masked text swap + dual-arrow cross-fade on both CTAs.
## Common mistakes to avoid
- Do not use backtick template literals in the code — use string concatenation.
- Do not omit `playbackRate = 0.8` or the video will play too fast.
- Do not forget `key` on AnimatePresence children.
- Keep the two stacked label copies identical in the text-swap effect.
- Preserve the exact CSS filters so arrow colors match each button.
## Page title
Triverra — Your AI Travel Companion
## Integration (build-safety — do not skip)
- Add this section as a **new** component file with a unique name. Don't edit or overwrite any existing file except to add its import and render it.
- Render it **after** all existing sections; keep every previously built section exactly as-is — never replace or remove them.
- If no project exists, create a minimal React + Tailwind app; if one exists, use it as-is — don't re-scaffold or change the Tailwind/build config or version.
- Keep it self-contained: scope its fonts and any resets to this section; never set global `body`/`html`/`*` styles or a global font.
- Install only the libraries this section names.
