Newsletter Component Demo

Todas las variantes del componente de suscripción al newsletter

Card Variant

Diseño centrado en tarjeta con sombra. Ideal para embedding en páginas.

Inline Variant

Layout horizontal compacto. Perfecto para footer o sidebar.

Banner Variant

Ancho completo con fondo destacado. Para separadores entre secciones.

Custom Text

Ejemplo con textos personalizados.

Direct Component Usage

Usando el componente directamente sin el wrapper de sección.

Ejemplos de Uso

1. Card variant en página:

<NewsletterSection
  variant="card"
  sectionBackground="secondary"
  cardBackground="white"
/>

2. Inline variant en footer:

<NewsletterSection
  variant="inline"
  cardBackground="secondary"
  noPadding
/>

3. Banner con fondo primario:

<NewsletterSection
  variant="banner"
  cardBackground="primary"
  title="¡Únete ahora!"
/>

4. Componente directo (sin wrapper):

<Newsletter
  variant="card"
  background="white"
  client:only="svelte"
/>

Props Disponibles

Newsletter.svelte

title - Texto del título principal
subtitle - Texto descriptivo
buttonText - Texto del botón de suscripción
variant - 'card' | 'inline' | 'banner'
background - 'white' | 'secondary' | 'primary'

NewsletterSection.astro

variant - Variante de layout
sectionBackground - Color de fondo de la sección
cardBackground - Color de fondo del componente Newsletter
title / subtitle / buttonText - Textos personalizados
noPadding - Eliminar padding de sección

Pendiente de integración

Este componente actualmente simula el envío del formulario. Es necesario implementar la integración con el backend cuando esté listo el endpoint de suscripción. Ver TODO comments en Newsletter.svelte.