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
Convierte discusiones desordenadas en un plan de acción claro
Deja de perder el hilo después de las reuniones. Genera un plan de acción claro que tu equipo realmente pueda ejecutar.
Sube una grabación o transcripción. Obtén una lista de acciones estructurada y clara: responsables, próximos pasos y seguimientos. Sepa quién hace qué, antes de que todos se olviden.
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']} />