Hero

La primera sección que ve el visitante. Incluye headline animado, subtitulo con propuesta de valor, boton CTA, prueba social con avatares y video de demo embebido.

Import

import { Hero } from "@/components/landing";

Que incluye

Badge superior con icono animado ("Tu aventura SaaS comienza aqui")
Headline animado con Framer Motion y texto gradiente
Subtitulo con propuesta de valor y badges inline (tiempo ahorrado, primer euro)
Boton CTA principal con icono y flecha animada
Prueba social: avatares de builders, contador y estrellas
Video demo embebido de YouTube con glass-card
Background con imagen a pantalla completa y overlay gradiente
Sparkles CSS-animated flotantes (15 posiciones predefinidas para evitar hydration mismatch)
Efecto de luz de antorcha con pulse

Tips

Responde POR QUE el visitante deberia quedarse en los primeros 3 segundos.
Usa verbos de accion en el CTA: "Comenzar Aventura", no "Mas información".
El subtitulo debe incluir un número concreto (30 dias, primer euro). Los números convierten.
La prueba social es clave: muestra caras reales, no avatares genericos.
El video demo debajo del fold genera confianza. Si no tienes video, muestra un screenshot.

Personalizacion

Cambiar el headline

Edita directamente el <motion.h1> en components/landing/hero.tsx:

components/landing/hero.tsx

<motion.h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-black">
  Tu aventura hacia el{" "}
  <span className="text-gradient">Indie Hacking</span>
  <br />
  empieza aqui
</motion.h1>

Cambiar el video de demo

Configura el ID del video en lib/config.ts:

lib/config.ts

hero: {
  youtubeVideoId: "TU_VIDEO_ID",
},

Reemplaza las imágenes en public/pfp/ y actualiza el array avatars:

const avatars = [
  "/pfp/pfpuno.jpeg",
  "/pfp/pfpdos.jpeg",
  // ...
];

Cambiar contador de builders

Edita lib/config.ts:

socialProof: {
  buildersCount: "+50",
  buildersLabel: "builders activos",
},

Hero

On this page