Back to prompts
✦ClaudeDesign
Triverra travel hero with glass navbar
A full-viewport travel hero with a slow-motion video, glass navbar and dual-arrow CTA hover.
Loading the original X post…
Open original on XA full-viewport travel hero with a slow-motion video, glass navbar and dual-arrow CTA hover.
The prompt
✦Claude (AI builder)
| 1 | # Header |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | ## Tech stack |
| 6 | - React ("use client") |
| 7 | - framer-motion (motion, AnimatePresence) |
| 8 | - lucide-react (Menu, X icons) |
| 9 | - Tailwind CSS for all styling |
| 10 | |
| 11 | ## Fonts & global styles |
| 12 | Use the **Gantari** font family for all text. Load it via: |
| 13 | ```html |
| 14 | <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| 15 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| 16 | <link href="https://fonts.googleapis.com/css2?family=Gantari:wght@400;500;600;700&display=swap" rel="stylesheet" /> |
| 17 | ``` |
| 18 | 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. |
| 19 | |
| 20 | ## Section container |
| 21 | 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. |
| 22 | |
| 23 | ## Structure, section by section |
| 24 | 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. |
| 25 | 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 }}`. |
| 26 | 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]`. |
| 27 | - **Brand logo** (left): an `<img>` at `h-[22px] md:h-[24px] lg:h-[34px] w-auto object-contain` linking to `#`, hover opacity 0.9. |
| 28 | - **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`. |
| 29 | - **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". |
| 30 | - **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. |
| 31 | 4. **Spacer 1x** — `div` with `flexGrow: 1, minHeight: 24px`. |
| 32 | 5. **Hero content** — centered column `max-w-[580px]` text-center. |
| 33 | - **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`. |
| 34 | - **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. |
| 35 | - **Button row** (delay 0.6 duration 0.8): `flex flex-col sm:flex-row items-center gap-[12px] mb-6 lg:mb-[18px]`. |
| 36 | - **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`. |
| 37 | - **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). |
| 38 | - Both buttons use TWO signature hover effects (see Animations): a vertical text-swap slide and a dual-arrow cross-fade. |
| 39 | - **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]`. |
| 40 | 6. **Spacer 3x** — `div` with `flexGrow: 3, minHeight: 72px`. |
| 41 | 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]`. |
| 42 | 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]`. |
| 43 | |
| 44 | ## Assets (every URL) |
| 45 | - Background video: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20Images/Header%20BG%20travel.mp4` |
| 46 | - Brand logo SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/brand%20logo%20triverra.svg` |
| 47 | - Arrow right SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/arrow-right.svg` |
| 48 | - Arrow up-right SVG: `https://cdn.jiro.build/Jahid/Random/Triverra/All%20SVG/arrow-up-right.svg` |
| 49 | All images use `referrerPolicy="no-referrer"`. |
| 50 | |
| 51 | ## Animations |
| 52 | - **Ambient float**: entire content column drifts `y: [0,-8,0]` and `rotate: [0,0.5,0]`, 8s easeInOut infinite. |
| 53 | - **Entrance stagger**: navbar (0), badge (0.2s), headline (0.4s), buttons (0.6s), stat (0.8s), footer (1.0s), each fading up. |
| 54 | - **Active menu dot**: framer-motion shared layout via `layoutId="activeDot"`, spring stiffness 300 damping 30. |
| 55 | - **Button text-swap on hover** — a masked vertical slide. The label appears twice stacked; on hover the inner column translates up 50%: |
| 56 | ```jsx |
| 57 | <span className="relative inline-block overflow-hidden h-[24px] sm:h-[28px] leading-none"> |
| 58 | <span |
| 59 | className="flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]" |
| 60 | style={{ transform: isHovered ? 'translateY(-50%)' : 'translateY(0%)' }} |
| 61 | > |
| 62 | <span className="h-[24px] sm:h-[28px] flex items-center justify-center leading-none">Build My Trip Free</span> |
| 63 | <span className="h-[24px] sm:h-[28px] flex items-center justify-center leading-none">Build My Trip Free</span> |
| 64 | </span> |
| 65 | </span> |
| 66 | ``` |
| 67 | - **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)`: |
| 68 | ```jsx |
| 69 | <div className="relative w-[18px] h-[18px] shrink-0 overflow-hidden"> |
| 70 | <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)]" |
| 71 | style={{ opacity: isHovered ? 0 : 1, transform: isHovered ? 'translate(6px,-6px) scale(0.8)' : 'translate(0,0) scale(1)' }} /> |
| 72 | <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)]" |
| 73 | style={{ opacity: isHovered ? 1 : 0, transform: isHovered ? 'translate(0,0) scale(1)' : 'translate(-6px,6px) scale(0.8)' }} /> |
| 74 | </div> |
| 75 | ``` |
| 76 | - Primary button arrows are recolored dark green via CSS filter: `invert(7%) sepia(19%) saturate(1441%) hue-rotate(80deg) brightness(96%) contrast(96%)`. |
| 77 | - Secondary button arrows are recolored white via CSS filter: `brightness(0) invert(1)`. |
| 78 | |
| 79 | ## Responsive behavior |
| 80 | - **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. |
| 81 | - **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. |
| 82 | - **sm (640px+)**: buttons switch from full-width stacked (`w-[240px]`, flex-col) to auto-width row; headline `60px`, button text `20px`. |
| 83 | - **Base/mobile**: headline `42px`, buttons full-width stacked, smaller type throughout. |
| 84 | |
| 85 | ## Key design principles |
| 86 | - Everything sits over a slow (0.8x) looping travel video with a subtle 1.02 scale. |
| 87 | - Glassmorphism (white/10 fills, backdrop-blur, faint white borders) unifies nav, buttons, and drawer. |
| 88 | - Tight negative letter-spacing on large type for a modern editorial feel. |
| 89 | - The whole content column breathes via a slow ambient float. |
| 90 | - Premium micro-interactions: masked text swap + dual-arrow cross-fade on both CTAs. |
| 91 | |
| 92 | ## Common mistakes to avoid |
| 93 | - Do not use backtick template literals in the code — use string concatenation. |
| 94 | - Do not omit `playbackRate = 0.8` or the video will play too fast. |
| 95 | - Do not forget `key` on AnimatePresence children. |
| 96 | - Keep the two stacked label copies identical in the text-swap effect. |
| 97 | - Preserve the exact CSS filters so arrow colors match each button. |
| 98 | |
| 99 | ## Page title |
| 100 | Triverra — Your AI Travel Companion |
| 101 | |
| 102 | ## Integration (build-safety — do not skip) |
| 103 | - 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. |
| 104 | - Render it **after** all existing sections; keep every previously built section exactly as-is — never replace or remove them. |
| 105 | - 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. |
| 106 | - Keep it self-contained: scope its fonts and any resets to this section; never set global `body`/`html`/`*` styles or a global font. |
| 107 | - Install only the libraries this section names. |
What this prompt is good for
Visual direction
Moodboards, style guides, and design briefs
Marketing creative
Hero artwork and high-converting visual assets
Brand identity
Consistent aesthetics across typography and form
Rapid prototyping
Iterate variations in seconds with precision
