Features

Seccion de funcionalidades con tabs interactivos que muestran las capacidades del producto organizadas por categoria (Emails, Pagos, Auth, Database, SEO, UI y mas).

Import

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

Que incluye

• Headline con propuesta de valor ("Potencia tu app al instante, lanza rapido, factura")
• 7 tabs con iconos de Lucide: Emails, Pagos, Auth, Database, SEO, UI, Mas
• Panel de contenido por tab con lista de features y checkmarks
• Tiempo ahorrado destacado en color primary por cada categoria
• Logos de tecnologias asociadas a cada feature (Resend, Stripe, Better Auth, etc.)
• Seccion inferior "EmpiezaTuSaaS + AI = Lanza tu idea AL INSTANTE" con badges de herramientas IA
• Scroll horizontal en tabs para movil
• Transiciones suaves al cambiar de tab

Tips

• Muestra el beneficio, no la feature. "Checkout preconfigurado" > "Integracion con Stripe".
• Incluye el tiempo ahorrado en cada categoria. Es el argumento de venta mas poderoso.
• Ordena las tabs por importancia para tu audiencia. Emails y Pagos primero porque son lo que mas duele configurar.
• La sección "compatible con IA" es un diferenciador clave. Actualizala con las herramientas mas populares.

Personalizacion

Cambiar features

Edita el array features en components/landing/features.tsx. Cada feature tiene:

const features = [
  {
    id: "emails",
    label: "Emails",          // texto del tab
    icon: Mail,               // icono de Lucide
    title: "Emails",          // titulo del panel
    items: [                  // lista de features
      "Emails transaccionales listos",
      "Plantillas de bienvenida y notificaciones",
      "Recuperación de contraseña",
    ],
    timeSaved: "4 horas",     // tiempo ahorrado
    techs: [                  // logos de tecnologias
      { name: "Resend", icon: "/tecnologias-ia/resend.png" },
    ],
  },
  // ... mas features
];

Cambiar herramientas IA

Edita el array aiTools:

const aiTools = ["Cursor", "Claude", "ChatGPT", "Copilot", "Windsurf"];

Añadir una nueva categoria

Añade un nuevo objeto al array features con un id único y el icono correspondiente de Lucide.