Tech Stack

Seccion visual que muestra las tecnologias incluidas en el boilerplate con logos animados y compatibilidad con herramientas de IA.

Import

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

Que incluye

• Titulo con texto gradiente ("Tu arsenal de herramientas")
• Grid responsive de logos de tecnologias con hover scale y glow
• 8 tecnologias: Next.js 16, TypeScript, Tailwind CSS, Shadcn/ui, Prisma, Stripe, Better Auth, Resend
• Nombre de cada tecnologia debajo del logo
• Seccion "Compatible con" mostrando herramientas IA (Cursor, Claude, ChatGPT, Copilot, Windsurf)
• Animaciones de entrada escalonadas con Framer Motion
• Background con gradiente sutil

Tips

• Muestra solo las tecnologias principales. No abrumes con logos de librerias secundarias.
• Los logos deben ser reconocibles al instante. Usa logos oficiales.
• La sección de compatibilidad con IA es un diferenciador. Mantenla actualizada.
• Esta sección genera confianza tecnica. Colócala cerca de Features o antes de Pricing.

Personalizacion

Cambiar tecnologias

Edita el array technologies en components/landing/tech-stack.tsx:

const technologies = [
  {
    name: "Next.js 16",
    icon: "/tecnologias-ia/nextjs.png",
  },
  {
    name: "TypeScript",
    icon: "/tecnologias-ia/typescript.png",
  },
  // ... mas tecnologias
];

Cambiar herramientas IA compatibles

Edita el array aiTools:

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

Añadir un logo

1. Añade la imagen a public/tecnologias-ia/
2. Añade un objeto al array technologies:

{
  name: "Tu Tecnologia",
  icon: "/tecnologias-ia/tu-logo.png",
},