DermaPlus - Landing Page

Landing page estática para DermaPlus, clínica dermatológica especializada en tratamientos estéticos personalizados.

🚀 Tecnologías

• Next.js 16 (Static Export / SPA)
• React 19
• Chakra UI v3
• Framer Motion
• TypeScript

📦 Instalación

pnpm install

🛠️ Desarrollo

pnpm dev

Abre http://localhost:3000 en tu navegador.

🏗️ Build para Producción

Este proyecto está configurado para exportación estática (SPA - Single Page Application):

pnpm build

Esto genera una carpeta /out con archivos HTML, CSS y JS estáticos listos para desplegar.

🌐 Despliegue en Vercel

1. Conecta tu repositorio a Vercel
2. Vercel detectará automáticamente la configuración de Next.js
3. El proyecto se desplegará como sitio estático (sin servidor)

📁 Estructura del Proyecto

src/
├── app/
│   ├── layout.tsx          # Layout principal (Client-Side)
│   ├── page.tsx            # Página de inicio
│   └── globals.css         # Estilos globales
├── components/
│   ├── sections/           # Secciones de la landing
│   │   ├── HeroSection.tsx
│   │   ├── ServicesSection.tsx
│   │   └── LeadFormSection.tsx
│   ├── Header.tsx
│   ├── Footer.tsx
│   └── providers.tsx       # Chakra UI Provider
└── lib/
    └── constants.ts        # Constantes y datos

⚙️ Configuración

El proyecto usa exportación estática configurada en next.config.ts:

{
  output: 'export',
  images: {
    unoptimized: true,
  },
}

Esto significa:

• ✅ Sin servidor (SSR/SSG deshabilitado)
• ✅ Todo renderizado en el cliente
• ✅ Archivos estáticos optimizados para CDN
• ✅ Compatible con cualquier hosting estático

🎨 Características

• Diseño responsive
• Animaciones con Framer Motion
• Formulario de contacto con validación
• Video hero de fondo
• Carrusel de servicios
• Tema personalizado con Chakra UI