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
Crea Páginas Mágicas para Colorear con IA páginas para colorear de coding
Convierte tus palabras en páginas para colorear imprimibles para niños
Genera páginas para colorear personalizadas en blanco y negro en segundos. Perfecto para padres, maestros y creadores de contenido. No se necesitan habilidades de diseño.
Amado por 500+ padres y maestros
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']} />