Dev & Code
Free
v1.0
SaaS Hero , Booking Platform with Glassmorphism Badge & Instrument Serif
Full-screen video hero for a booking/travel SaaS. Features a glassmorphism tagline pill, Instrument Serif italic headline, mobile hamburger menu, and purple CTA buttons.
saas
hero
react
tailwind
claude
chatgpt
lovable
cursor
glassmorphism
video-background
booking
When to use
Use for booking platforms, travel apps, hospitality SaaS, or any product with a purple brand identity.
Recommended LLMs
Claude Sonnet
GPT-4o
Plugins / Skills
Projects (Claude)
Artifacts (Claude)
When to use
This hero works great for consumer-facing SaaS where the video background sells the vibe (travel, hospitality, lifestyle). The Instrument Serif italic headline creates elegance while the glassmorphism pill adds a modern touch.
What you'll need to customise
- Video URL — swap the CloudFront MP4 for your own
- Brand color —
#7b39fc(purple) and#2b2344(dark purple) - Product name — "Datacore" in navbar
- Headline — the word "and" in italics is the design detail — keep the font mixing
- CTA labels — "Book a Free Demo" / "Get Started Now"
Tips for best results
- The tagline pill uses two nested glassmorphism layers: outer
bg-[rgba(85,80,110,0.4)] backdrop-blur, innerbg-[#7b39fc] rounded-[6px]badge - The headline splits the word "and" into
font-italicusing an inline<em>— maintain this in the JSX - Load all 4 fonts: Manrope (nav), Cabin (buttons/tags), Instrument Serif (headline), Inter (body)
- The mobile menu is a full-screen black overlay with the same nav links
Expected output
Complete React component with:
- Transparent navbar (desktop links + mobile hamburger overlay)
- Full-screen MP4 video background (no overlay)
- Glassmorphism tagline pill ("New" inner badge + text)
- Large Instrument Serif italic headline
- Sub-headline in Inter
- Two purple CTA buttons
The Prompt
Copy it, paste it, use it.
Create a responsive, full-screen hero section using React and Tailwind CSS. ### Tech Stack - React + TypeScript - Tailwind CSS - No animation library required ### Fonts (load via Google Fonts or @fontsource) - Manrope — UI/nav elements - Cabin — buttons and badge text - Instrument Serif — headline (italic) - Inter — body/subtext ### Brand Colors - Primary: `#7b39fc` (purple) - Dark: `#2b2344` (dark purple) - Background: video (no solid bg color needed) ### Background Video - URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260210_031346_d87182fb-b0af-4273-84d1-c6fd17d6bf0f.mp4` - `autoPlay loop muted playsInline` - `absolute inset-0 w-full h-full object-cover min-h-screen` — no overlay ### Navbar - Full width, transparent, `z-20` - Padding: `px-6 md:px-[120px] py-[16px]` - Left: Logo (white text wordmark or image) - Center (desktop only): "Home", "Services" with ChevronDown, "Reviews", "Contact us" — Manrope Medium 14px white - Right (desktop): "Sign In" (white bg, gray border, black text) + "Get Started" (purple bg, white text) — both Manrope Semibold 14px, `rounded-[8px]` - Mobile: Hide links, show white hamburger icon — tapping opens full-screen black overlay menu with same links ### Hero Content - `z-10 relative` — above video - Top margin: `mt-32` - Center-aligned: `flex flex-col items-center text-center` **Tagline Pill:** - Outer: `bg-[rgba(85,80,110,0.4)] backdrop-blur-md border border-[rgba(164,132,215,0.5)] rounded-[10px] h-[38px] flex items-center px-3 gap-2` - Inner badge: `bg-[#7b39fc] rounded-[6px] px-2 py-0.5 text-xs Cabin Medium white` — text: "New" - Pill text: "Say Hello to Datacore v3.2" — Cabin Medium 14px white **Headline:** - "Book your perfect stay instantly and hassle-free" - Instrument Serif, white, `text-5xl md:text-[96px] leading-[1.1]` - The word "and" must be `<em>` (italic) with slightly different spacing - Max-width: `max-w-4xl` **Subtext:** - "Discover handpicked hotels, resorts, and stays across your favorite destinations. Enjoy exclusive deals, fast booking, and 24/7 support." - Inter Regular 18px, `text-white/70 max-w-[662px]` **CTA Buttons (row, gap-4):** - "Book a Free Demo": `bg-[#7b39fc] text-white rounded-[10px] px-6 py-3 Cabin Medium 16px hover:bg-[#6b2fe8]` - "Get Started Now": `bg-[#2b2344] text-[#f6f7f9] rounded-[10px] px-6 py-3 Cabin Medium 16px hover:bg-[#3a2f5e]`