Dev & Code
Free
v1.0
Web3 Hero , Gradient Text, Layered Pill Button & Early Access Badge
Full-screen black Web3 hero with video background, gradient fade-out headline text, layered pill CTA with white glow streak, and early access availability badge.
web3
hero
claude
chatgpt
cursor
react
tailwind
video-background
dark-theme
gradient-text
general-sans
When to use
Use for Web3 projects, crypto platforms, blockchain products, or any tech product launching with an early access / waitlist model.
Recommended LLMs
Claude Sonnet
GPT-4o
Plugins / Skills
Artifacts (Claude)
When to use
The headline uses a gradient that fades from solid white to transparent black — making it look like it's dissolving into the dark background. Paired with the 50% black video overlay and the layered pill button construction, this is a confident, minimal Web3 aesthetic.
What you'll need to customise
- Video URL — swap the CloudFront MP4
- Headline — "Web3 at the Speed of Experience"
- Early access date — "May 1, 2026"
- Subtext — swap out "EOS" for your project name
- "Join Waitlist" CTA — connects to your waitlist form/email
Tips for best results
- The gradient text:
background: linear-gradient(144.5deg, #fff 28%, rgba(0,0,0,0) 115%)— the fade to transparent (not gray) against black background creates the dissolve effect - The pill button is TWO layers: outer
border border-white/[0.6px]ring + inner black/white pill. Build as nested divs, not a single button - The white glow streak on the button top is an absolute positioned blurred white ellipse —
absolute top-0 left-1/2 -translate-x-1/2 w-1/2 h-3 bg-white/20 blur-md rounded-full - "General Sans" from Fontshare (not Google Fonts) — load via
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap') - The nav "Join Waitlist" button is the same construction but with black text on white background
Expected output
React component with:
- Responsive navbar (120px padding desktop, links hidden mobile)
- Full-screen video with 50% black overlay
- Pill early access badge (dot + date)
- Large gradient-fade headline
- Subtitle
- Layered pill CTA button with glow streak
- Responsive at
mdbreakpoint
The Prompt
Copy it, paste it, use it.
Build a full-screen hero section for a Web3 landing page. React + Tailwind CSS.
### Tech Stack
- React + TypeScript
- Tailwind CSS
- Google Fonts alternative — General Sans via Fontshare:
```css
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');
```
Apply: `font-family: 'General Sans', sans-serif` globally
### Background Video
- URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260217_030345_246c0224-10a4-422c-b324-070b7c0eceda.mp4`
- `absolute inset-0 w-full h-full object-cover`
- `autoPlay loop muted playsInline`
- Overlay: `absolute inset-0 bg-black/50` (50% black for readability)
### Navbar
- `flex items-center justify-between px-[120px] md:px-8 py-5 relative z-20`
- Left: logo wordmark white (placeholder "LOGOIPSUM") — `w-[187px] h-[25px]`
- Center (hidden mobile `md:hidden md:flex gap-[30px]`): "Get Started", "Developers", "Features", "Resources"
- Each: white `text-sm font-medium` + ChevronDown icon (14px, `ml-1.5`)
- Right: "Join Waitlist" layered pill button (see button construction below) — dark version
### Layered Pill Button Construction
This button is two nested elements:
```jsx
<div className="relative rounded-full border border-white/[0.006]">
{/* White glow streak on top */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/2 h-3 bg-white/20 blur-md rounded-full -translate-y-1" />
{/* Inner pill */}
<div className="relative bg-black text-white text-sm font-medium px-[29px] py-[11px] rounded-full">
Join Waitlist
</div>
</div>
```
**Navbar version:** inner `bg-black text-white`
**Hero CTA version:** inner `bg-white text-black`
### Hero Content
- `relative z-10 flex flex-col items-center text-center`
- Top padding: `pt-[280px] md:pt-[200px]`
- Bottom padding: `pb-[102px]`
- `gap-10` between elements
**Early Access Badge:**
- `bg-white/10 border border-white/20 rounded-[20px] px-4 py-2 flex items-center gap-2`
- Left: `w-1 h-1 rounded-full bg-white` (dot)
- Text: `text-white/60 text-[13px] font-medium` — "Early access available from"
- Date: `text-white text-[13px] font-medium` — " May 1, 2026"
**Headline:**
- "Web3 at the Speed of Experience"
- `max-w-[613px] text-[56px] md:text-[36px] font-medium leading-[1.28] text-center`
- **Gradient text effect:**
```css
background: linear-gradient(144.5deg, #ffffff 28%, rgba(0,0,0,0) 115%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
```
Apply via Tailwind arbitrary: `[background:linear-gradient(144.5deg,#fff_28%,rgba(0,0,0,0)_115%)] bg-clip-text text-transparent`
**Subtitle:**
- "Powering seamless experiences and real-time connections, EOS is the base for creators who move with purpose, leveraging resilience, speed, and scale to shape the future."
- `text-[15px] font-normal text-white/70 max-w-[680px] text-center`
- `mt-6`
**CTA — "Join Waitlist" (white version):**
- Same layered pill construction as above but inner: `bg-white text-black`