# Componentes | My SvelteKit Starter

> Galería de componentes UI shadcn-svelte, demos de páginas (about, pricing, faq, SSR, blog) y formulario.

URL: http://localhost:5173/components
Idioma: ES

---

## Componentes

Svelte 5 + Tailwind CSS. Listos para copiar y personalizar.

### UI base

- **Button** — 5 variantes · 3 tamaños · enlace · disabled · loading
- **Card** — 3 variantes · composición
- **Input** — Texto, email y contraseña
- **Textarea** — Entrada multilínea
- **Label** — Etiqueta accesible
- **Spinner** — Indicador SVG
- **Skeleton** — Placeholder con pulso

### Avanzados

- **CopyButton** — Copiar al portapapeles
- **Newsletter** — Suscripción por email
- **Toast** — success · error · info · warning
- **AiPrompt** — Área de prompt para IA

### Ejemplos plantilla

- **About** — Ejemplo de sección corporativa: propuesta breve, valores y bloques que puedes reutilizar en cualquier landing.
- **Pricing** — Tabla de planes con destacado y CTAs; sirve como base para SaaS, servicios o membresías.
- **FAQ** — Acordeón para agrupar dudas habituales (producto, facturación, soporte) sin alargar la página.

---

## Preguntas frecuentes

### ¿Qué es esta plantilla?

Una base lista para webs modernas con SvelteKit 2 y Svelte 5: componentes UI (shadcn-svelte), SEO, i18n, modo oscuro y despliegue pensado para Vercel o Netlify.

### ¿Necesito mucha experiencia en front?

No hace falta ser experto: puedes tocar textos en JSON, colores en CSS y copiar bloques de la galería de componentes. Cuando quieras ir más lejos, el código está organizado para crecer sin líos.

### ¿Puedo usarla en proyectos comerciales?

Sí. La plantilla es MIT: úsala en clientes, productos o landings sin restricciones de licencia de pago.

### ¿Cómo despliego en producción?

Sube el repo a GitHub y conecta el proyecto a Vercel o Netlify. El build es npm run build; revisa PUBLIC_SITE_URL para SEO (sitemap y Open Graph).

### ¿Cómo funcionan los idiomas?

Hay español e inglés con claves en src/lib/i18n. Para añadir otro idioma, crea un JSON nuevo, registra las traducciones y amplía el tipo de locale en el módulo i18n.

### ¿Puedo conectar un CMS?

Sí. El repo incluye piezas opcionales para Sanity; también puedes consumir cualquier API (Strapi, Contentful, Markdown local) desde load o endpoints.

### ¿Qué trae de SEO?

Metadatos centralizados (setSeo), JSON-LD, sitemap, robots y cabeceras de seguridad en hooks.server.ts. Ajusta títulos y descripciones por ruta.

### ¿Está pensada para rendimiento?

Svelte compila a JS ligero; usa imágenes optimizadas, lazy loading donde toque y revisa el bundle con el analizador de Vite si la app crece.