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
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)
- Subscriptions and top-ups included
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']} />