Dev & Code
Free
v1.0
Agency Hero , Floating White Rounded Navbar & Instrument Serif Headline
Premium video agency hero with a floating white rounded navbar, Barlow + Instrument Serif headline, pill CTA, and a 45-degree arrow CTA button. Minimal, ultra-modern.
agency
hero
react
tailwind
claude
lovable
cursor
video-background
creative
barlow
instrument-serif
When to use
Use for video editing agencies, content production studios, or creative services businesses that want a modern, confident landing page.
Recommended LLMs
Claude Sonnet
GPT-4o
Plugins / Skills
Projects (Claude)
Artifacts (Claude)
When to use
The defining feature of this design is the floating white rounded navbar — it sits above the video background, giving a clean "glass card" feel without any blur or transparency. Works especially well when your video has a dark lower section.
What you'll need to customise
- Video URL — swap the CloudFront MP4
- Agency name — "Logoisum" in the navbar logo
- Headline — "Agency that makes your / videos & reels viral" — keep the two-font structure
- Subtext — "Short-form video editing for Influencers, Creators and Brands"
- Navbar CTA — "Book A Free Meeting" button with the diagonal arrow
Tips for best results
- The navbar uses
rounded-[16px]andshadow-sm— it sits inside the hero section, not fixed to the top. Useabsolute top-6 left-6 right-6or a centered constrained container - The 45-degree arrow is a
rotate-[-45deg]ArrowRight icon inside a circular dark button on the right of the CTA - The pill CTA ("See Our Workreel") should have a play icon on the LEFT using lucide-react
Playicon min-h-[90vh]keeps the section from being too tall
Expected output
React component with:
- White rounded floating navbar (not fixed to viewport edge)
- Full-screen video background (no overlay)
- Centered two-line headline (Barlow + Instrument Serif italic)
- Subtext
- White pill "See Our Workreel" CTA with play icon
The Prompt
Copy it, paste it, use it.
Build a premium, responsive hero section for a video editing agency. React + Tailwind CSS. ### Tech Stack - React + TypeScript - Tailwind CSS - lucide-react - Google Fonts: "Barlow" + "Instrument Serif" ### Background Video - URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260228_065522_522e2295-ba22-457e-8fdb-fbcd68109c73.mp4` - `absolute inset-0 w-full h-full object-cover` - `autoPlay loop muted playsInline` - No overlay ### Floating Navbar - NOT fixed — positioned inside the hero section: `absolute top-6 left-6 right-6 z-20` - `bg-white rounded-[16px] shadow-sm px-6 py-4` - `flex items-center justify-between` **Left — Logo:** - Logo image or text wordmark "LOGOISUM" — dark color **Center (desktop, `hidden md:flex gap-8`):** - Links: "About", "Works", "Services", "Testimonial" - Barlow Medium 14px, dark text, `hover:opacity-70 transition-opacity` **Right — "Book A Free Meeting" button:** - `flex items-center gap-3 bg-[#222] text-white rounded-full pl-5 pr-2 py-2` - Text: "Book A Free Meeting" — Barlow Medium 14px - Arrow: `w-8 h-8 bg-white rounded-full flex items-center justify-center` containing ArrowRight icon `rotate-[-45deg] text-[#222] w-4 h-4` ### Hero Content - `min-h-[90vh] flex flex-col items-center justify-center text-center` - Padding: `pt-32 px-4` (accounts for navbar height) - `relative z-10` **Headline (two lines):** - Line 1: "Agency that makes your" - Barlow, `font-medium text-white text-[72px] md:text-[84px] tracking-[-4px] leading-tight` - Line 2: "videos & reels viral" - Instrument Serif, `italic text-white text-[72px] md:text-[84px] leading-tight` **Subtext:** - "Short-form video editing for Influencers, Creators and Brands" - Barlow Medium, 18px, `text-white text-center mt-4 max-w-lg` **CTA Button:** - `flex items-center gap-3 bg-white text-black rounded-full pl-6 pr-2 py-3 mt-8 hover:bg-white/90 transition-colors` - Left: Play icon (lucide-react, `w-4 h-4 text-black`) - Text: "See Our Workreel" — Barlow Medium 16px