Hero Section Showcase
Compare different hero variants. Each variant follows the same design tokens and system.
Configurable Hero Section
đď¸ Highly configurable hero block with announcement, social proof, CTAs, and rotating words
Build What You Vibe With vibe for coding
The beginner-friendly Next.js starter
Designed for newcomers and AI coding assistants. Work with Cursor or Claude Code to build modern web apps without the overwhelm.
Trusted by 500+ developers
Hero Variant A â Professional & Clean
đ§ Subtle animations, clean gradient background, professional tone
Build What You Vibe With
vibe for coding
The beginner-friendly Next.js starter optimized for AI assistants like Cursor and Claude Code.
Hero Variant B â Playful & Energetic
đ Bold gradients and more animations for an energetic vibe
vibe for
coding
Build modern web apps with AI.
No overwhelm, just vibes.
Hero Variant C â Simple & Direct
𧊠Minimal distractions and clear messaging with a split layout
Next.js starter for coding
Built for beginners. Optimized for Cursor and Claude Code. All the features you need, none of the complexity.
- AI-optimized architecture
- Authentication & payments included
- Multi-language support (i18n)
- One-time purchase, lifetime updates
Quick Usage
Basic Configurable Hero
Use HeroSection with title, subtitle, description, CTAs, and social proof.
Variant A
Professional & clean configuration.
Variant B
Playful gradients and energetic motion.
Variant C
Simple, direct layout with value props.
Switch the homepage hero
Edit app/[locale]/page.tsx and replace the hero component:
// Example
import { HeroVariantB } from '@/components/marketing';
<HeroVariantB rotatingWords={['coding','marketing','fun','anything','everything']} />