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
Create Magic Coloring Pages with AI coloring pages for coding
Turn your words into printable coloring cards for kids
Generate custom black-and-white coloring pages in seconds. Perfect for parents, teachers, and content creators. No design skills needed.
Loved by 500+ parents and teachers
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']} />