Dev & Code
Free
v1.0
Bold Creative Hero , Uppercase Rubik Typography & SVG-Shaped CTA Button
Top-aligned bold hero with video background, massive uppercase Rubik headlines on three lines, and a custom SVG-path CTA button. No animation library needed.
creative
hero
claude
lovable
cursor
react
tailwind
typography
video-background
rubik
When to use
Use for creative agencies, design studios, personal portfolios, or any brand where bold typography is the identity.
Recommended LLMs
Claude Sonnet
GPT-4o
Plugins / Skills
Artifacts (Claude)
When to use
This hero is all about typography as art — the three-line uppercase Rubik headline at text-[100px] with leading-[0.98] is the whole design. The video serves as texture, not storytelling. The SVG-shaped CTA button (custom path, not a standard rounded rectangle) is the attention-to-detail that separates it from generic hero sections.
What you'll need to customise
- Video URL — swap the CloudFront MP4
- Three headline lines — currently "NEW ERA / OF DESIGN / STARTS NOW"
- SVG path — the custom button shape (described below) — test at different sizes
Tips for best results
- Top-aligned content (not centered) gives it a poster/editorial feel — use
pt-32 md:pt-48notitems-center - The tight
leading-[0.98]on the headline means lines almost touch — this is intentional - The SVG button fills the button container absolutely (
absolute inset-0) — the button itself isrelative overflow-hidden text-[100px]is desktop only — scale totext-6xlon mobile using Tailwind responsive variants
Expected output
React component with:
- Standard transparent navbar
- Full-screen video background
- Top-aligned three-line uppercase headline
- Custom SVG-path CTA button
- No animation library
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 - Google Fonts: "Rubik" (Bold, sans-serif) - No animation library ### Background Video - URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260206_044704_dd33cb15-c23f-4cfc-aa09-a0465d4dcb54.mp4` - `absolute inset-0 w-full h-full object-cover` - `autoPlay loop muted playsInline` - Fallback background: `#21346e` ### Layout - `min-h-screen relative overflow-hidden` - Content: top-aligned, NOT centered - Top padding: `pt-32 md:pt-48` on main content block - Standard container with horizontal padding ### Navbar - Transparent, `flex items-center justify-between px-6 md:px-12 py-6` - Logo: text "STUDIO" or logo image — white - Nav links: white, Rubik Medium, hidden mobile - CTA: white text button ### Headline (three lines, each on its own line) - Rubik Bold, Uppercase, White - Desktop: `text-[100px]` — Mobile: `text-6xl` - Letter spacing: `-0.04em` - Line height: `leading-[0.98]` — very tight, lines nearly touching - Line 1: "NEW ERA" - Line 2: "OF DESIGN" - Line 3: "STARTS NOW" ### CTA Button - Fixed size: `w-[184px] h-[65px]` - `relative overflow-hidden cursor-pointer` - Hover: `hover:scale-105 transition-transform` - Active: `active:scale-95` **SVG Background (fills button absolutely):** ```jsx <svg className="absolute inset-0 w-full h-full" viewBox="0 0 184 65" preserveAspectRatio="none" fill="white" > <path d="M0 0 L184 0 L184 65 L0 65 Z" /> </svg> ``` (Use a simple rectangle path for V1 — the shape is the white fill, no border-radius) **Button Text:** - `relative z-10 flex items-center justify-center w-full h-full` - "GET STARTED" — Rubik Bold, Uppercase, `text-[20px]`, `text-[#161a20]`