Dev & Code
Free
v1.0
SaaS Hero , HLS Video, Gradient CTA Button with Glow, Social Proof Row
Dark SaaS hero with HLS streaming video, orange gradient primary button with glow effect, glass secondary button, top gradient bar, and social proof avatar row. React + Motion.
saas
hero
react
tailwind
claude
chatgpt
lovable
cursor
hls
framer-motion
dark-theme
animation
When to use
Use for B2B SaaS products — invoicing, finance tools, productivity apps. The orange gradient CTA creates urgency and visual hierarchy.
Recommended LLMs
Claude Sonnet
GPT-4o
Plugins / Skills
Projects (Claude)
Artifacts (Claude)
When to use
This template works for any SaaS product targeting business users. The standout feature is the primary CTA button — an orange gradient with a blur glow beneath it and an animated arrow that slides in on hover. The top 5px gradient bar is a subtle brand detail that elevates the overall polish.
What you'll need to customise
- Video URL — swap the Mux HLS stream for your own
- Product name — replace "ClearInvoice" in the navbar and headline
- Headline — the structure "Manage your [thing] while save [benefit]" is a proven SaaS formula
- Gradient colors — currently
from-[#FF3300] to-[#EE7926](orange-red). Swap to your brand color. - Social proof number — "210k+" stores/users
Tips for best results
- The glow effect under the primary button is critical to making it pop — don't remove the absolute positioned blur div
- The inner border overlay (
border-white/20) on the primary button creates the glassy edge effect - The top gradient bar (
from-[#ccf] via-[#e7d04c] to-[#31fb78]) can be swapped to your brand colors - Use
hls.jsdirectly — NOT react-player — to avoid the AbortError on unmount
Expected output
Full React component with:
- 5px top gradient bar
- Glass navbar with hamburger mobile menu
- HLS video background (100% opacity, no overlay)
- Staggered Motion entrance animations
- Headline + subheadline
- Two CTA buttons with hover effects
- Social proof row (3 avatars + "Trusted by X+" text)
The Prompt
Copy it, paste it, use it.
Create a high-fidelity dark-mode Hero section using React, Tailwind CSS, and `motion/react`.
### Tech Stack
- React + TypeScript (Vite)
- Tailwind CSS
- `motion/react` (Framer Motion v11+)
- lucide-react
- hls.js (NOT react-player — to avoid unmount AbortError)
### Fonts
- Headings: "Switzer" (Medium, tight tracking) — load from Fontshare or use `font-sans` fallback
- Body: "Geist" — `@fontsource/geist-sans` or Google Fonts
### Top Gradient Bar
- `h-[5px] w-full` at the very top of the page
- `background: linear-gradient(90deg, #ccf, #e7d04c, #31fb78)`
### Background Video (BackgroundVideo component)
- Source: `https://stream.mux.com/hUT6X11m1Vkw1QMxPOLgI761x2cfpi9bHFbi5cNg4014.m3u8`
- Autoplay, loop, muted, playsInline
- 100% opacity — no dark overlay
- `absolute inset-0 w-full h-full object-cover -z-10`
- Use hls.js with Safari fallback. Memoize with `useMemo`. Cleanup `hls.destroy()` on unmount.
### Navbar
- Logo left, links center ("Features", "Pricing", "Reviews"), auth right ("Sign In" + "Sign Up")
- Mobile: hamburger toggle → full-width dropdown menu
### Hero Content (centered, staggered Motion entrance)
**Headline:**
- "Manage your online store while save 3x operating cost"
- Switzer Medium, `text-6xl leading-tight tracking-tight`, white
**Subheadline:**
- "ClearInvoice takes the hassle out of billing with easy-to-use tools."
- `text-white/90 text-lg`, Geist
**Animations:** `motion/react` stagger — Text → Buttons → Social Proof, each `initial={{ opacity: 0, y: 20 }}` → `animate={{ opacity: 1, y: 0 }}`, `delay` increments by 0.15s
### CTA Buttons
**Primary — "Start Free Trial":**
- `background: linear-gradient(135deg, #FF3300, #EE7926)`
- `rounded-full px-7 py-3.5 font-semibold text-white relative overflow-hidden`
- Glow: `absolute inset-0 bg-orange-600 blur-lg opacity-20 -z-10` (sits behind button)
- Inner stroke: `border border-white/20 absolute inset-0 rounded-full pointer-events-none`
- Hover: `scale-105`, glow `opacity-60`, ArrowRight slides in from left
**Secondary — "See How It Works":**
- `bg-white/90 backdrop-blur-sm rounded-full px-7 py-3.5 font-semibold text-black`
- Inner stroke: `border border-black/5`
- Hover: `scale-105`, background → solid white
### Social Proof
- 3 overlapping user avatars (use placeholder `bg-gradient-to-br` circles with initials)
- Text: "Trusted by 210k+ stores worldwide"
- `text-sm text-white/80`