Resumen de componentes de sección

Los componentes de sección son los bloques de construcción de cada página de tema. Cada página de tema está compuesta de 12+ secciones, cada una con una variante dedicada por tema.

Secciones disponibles

Hero

Secciones de inicio de pantalla completa con animaciones específicas del tema.

Acerca de (About)

Secciones de presentación de la empresa o el producto.

Características (Features)

Muestras de características del producto con cuadrículas, listas y tarjetas.

Portafolio (Portfolio)

Galerías de proyectos y presentaciones.

Precios (Pricing)

Tablas de precios con planes y comparaciones.

Testimonios (Testimonials)

Prueba social y opiniones de los clientes.

FAQ

Preguntas frecuentes con interfaz de usuario en acordeón.

Llamado a la acción (CTA)

Secciones de llamado a la acción para impulsar las conversiones.

Contacto (Contact)

Formularios de contacto con validación de Valibot.

Barra de navegación (Navbar)

Encabezados y barras de navegación específicos del tema.

Pie de página (Footer)

Pies de página del sitio con enlaces, redes sociales y marca.

Cómo funciona

Cada sección tiene 6 variantes de tema — una para cada tema (Liquid, Glass, Neo, Luxury, Minimal, Aurora). La página dinámica en src/pages/[theme].astro utiliza un mapa de componentes para mostrar la variante correcta:

---
// Simplificado de [theme].astro
const componentMap = {
  liquid: { Hero: HeroLiquid, About: AboutLiquid, ... },
  glass:  { Hero: HeroGlass,  About: AboutGlass,  ... },
  // neo, luxury, minimal, aurora...
};

const components = componentMap[themeId];
---

<components.Hero />
<components.About />
<components.Features />

ℹ️

Sin propiedades externas

Los componentes de sección no aceptan ninguna propiedad (props). Todo el contenido de texto se carga internamente a través de useTranslations() desde src/locales/{lang}/{section}.json. Para cambiar el contenido de cualquier sección, edite el archivo JSON de idioma correspondiente.

Estructura de archivos

Cada sección sigue un patrón de directorio coherente:

src/components/sections/{section}/
├── {Section}Liquid.astro
├── {Section}Glass.astro
├── {Section}Neo.astro
├── {Section}Luxury.astro
├── {Section}Minimal.astro
└── {Section}Aurora.astro

El CSS para cada sección se encuentra en src/styles/components/{section}/.