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.

Únete a la familia Wacat®

Recibe consejos sobre la salud de tu gato, ofertas exclusivas y novedades directamente en tu correo.

No compartimos tu información. Puedes darte de baja en cualquier momento.

Inline Variant

Layout horizontal compacto. Perfecto para footer o sidebar.

Únete a la familia Wacat®

Recibe consejos sobre la salud de tu gato, ofertas exclusivas y novedades directamente en tu correo.

No compartimos tu información. Puedes darte de baja en cualquier momento.

Banner Variant

Ancho completo con fondo destacado. Para separadores entre secciones.

Únete a la familia Wacat®

Recibe consejos sobre la salud de tu gato, ofertas exclusivas y novedades directamente en tu correo.

No compartimos tu información. Puedes darte de baja en cualquier momento.

Custom Text

Ejemplo con textos personalizados.

¡No te pierdas nada!

Recibe contenido exclusivo, tips de nutrición felina y promociones especiales antes que nadie.

No compartimos tu información. Puedes darte de baja en cualquier momento.

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.