feat: seccion canasta

src/components/CanastaFamiliarPage.astro

@@ -0,0 +1,299 @@
+---
+import { Image } from 'astro:assets';
+import canastaImagenPrincipal from '../assets/canasta-familiar/imagen-principal.jpg';
+import canastaEntrega from '../assets/canasta-familiar/entrega-canasta.jpeg';
+
+const canastaStats = [
+  { valor: '2005', etiqueta: 'año desde el que se desarrolla este programa' },
+  { valor: 'Semanal', etiqueta: 'frecuencia actual de entregas a familias' },
+  { valor: 'Hogar', etiqueta: 'mercadería, frutas, verduras, higiene y aseo' },
+  { valor: 'Flexible', etiqueta: 'entrega a domicilio o con opción de retiro' },
+];
+---
+
+<main class="canasta-page">
+  <section class="canasta-hero">
+    <div class="hero-copy">
+      <a href="/" class="back-link">← Volver a Renacer</a>
+      <p class="section-kicker">Canasta Familiar</p>
+      <h1>Apoyo directo para sostener la mesa y el hogar de muchas familias.</h1>
+      <p class="hero-lead">
+        El Programa Canasta Familiar de Renacer entrega apoyo directo a familias que enfrentan
+        dificultades económicas, a través de alimentos y productos esenciales para el hogar.
+      </p>
+    </div>
+
+    <div class="hero-visual">
+      <Image
+        src={canastaImagenPrincipal}
+        alt="Canasta Familiar de Renacer preparada para apoyo comunitario."
+        widths={[720, 1080]}
+        sizes="(max-width: 960px) 100vw, 46vw"
+      />
+    </div>
+  </section>
+
+  <section class="canasta-content">
+    <div class="content-copy">
+      <p>
+        Las canastas incluyen mercadería, frutas, verduras, artículos de higiene personal y productos
+        de aseo. En algunos casos también se incorporan elementos específicos, como pañales, según
+        las necesidades de cada familia.
+      </p>
+      <p>
+        Las entregas se realizan tanto a domicilio como con opción de retiro, adaptándose a cada
+        situación. Este programa se desarrolla desde el año 2005, acompañando principalmente a
+        familias vinculadas a niños, niñas y jóvenes que participan en los espacios y talleres de
+        Renacer.
+      </p>
+      <p>
+        En el contexto actual, donde el costo de la vida ha aumentado de forma sostenida, muchas
+        familias enfrentan dificultades para cubrir necesidades básicas. A través de este programa,
+        buscamos ser un apoyo concreto que alivie, en parte, esa carga diaria.
+      </p>
+      <p>
+        Este trabajo es posible gracias a la colaboración de personas, aportes solidarios y el apoyo
+        del Ministerio Cristiano Renacer en Cristo. Más allá de la entrega de alimentos, buscamos
+        acompañar con respeto y cercanía la realidad que muchas familias viven hoy.
+      </p>
+    </div>
+
+    <div class="stats-grid">
+      {canastaStats.map((stat) => (
+        <article class="stat-card">
+          <strong>{stat.valor}</strong>
+          <span>{stat.etiqueta}</span>
+        </article>
+      ))}
+    </div>
+  </section>
+
+  <section class="gallery-section">
+    <div class="gallery-copy">
+      <p class="section-kicker">Apoyo concreto</p>
+      <h2>Una red de ayuda que responde a necesidades básicas con cercanía y continuidad.</h2>
+      <p>
+        Si deseas conocer más o ser parte de esta iniciativa, puedes hacerlo a través de nuestros
+        canales. Toda colaboración permite que este apoyo continúe llegando a quienes lo necesitan.
+      </p>
+    </div>
+
+    <div class="gallery-grid">
+      <div class="gallery-card">
+        <Image
+          src={canastaEntrega}
+          alt="Entrega de apoyo del programa Canasta Familiar de Renacer."
+          widths={[520, 800]}
+          sizes="(max-width: 960px) 100vw, 30vw"
+        />
+      </div>
+      <div class="gallery-note">
+        <h3>Cómo apoyar</h3>
+        <p>
+          Puedes colaborar de distintas maneras: aportando económicamente, difundiendo la iniciativa
+          o coordinando apoyo directo para familias que hoy necesitan un alivio real en sus gastos
+          básicos.
+        </p>
+        <div class="note-actions">
+          <a class="primary-link" href="/colaboradormensual/">Colaborar mensualmente</a>
+          <a class="secondary-link" href="mailto:contacto@familiarenacer.cl">Contactar a Renacer</a>
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
+
+<style>
+  .canasta-page {
+    width: min(100%, 1240px);
+    margin: 0 auto;
+    padding: 2rem 1.5rem 4rem;
+  }
+
+  .canasta-hero,
+  .canasta-content,
+  .gallery-grid {
+    display: grid;
+    gap: 1.5rem;
+  }
+
+  .canasta-hero {
+    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+    align-items: center;
+  }
+
+  .back-link {
+    display: inline-flex;
+    margin-bottom: 1rem;
+    color: #52637a;
+    font-weight: 700;
+  }
+
+  .section-kicker {
+    margin: 0 0 0.9rem;
+    color: var(--brand);
+    font-size: 0.86rem;
+    font-weight: 800;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+
+  h1,
+  h2,
+  h3 {
+    margin: 0;
+    font-family: 'Sora', sans-serif;
+    letter-spacing: -0.05em;
+    color: #1b2740;
+  }
+
+  h1 {
+    font-size: clamp(2.8rem, 6vw, 4.8rem);
+    line-height: 0.98;
+  }
+
+  .hero-lead,
+  .content-copy p,
+  .gallery-copy p,
+  .gallery-note p {
+    color: #5b6a82;
+    line-height: 1.8;
+  }
+
+  .hero-lead {
+    margin-top: 1.2rem;
+    font-size: 1.08rem;
+  }
+
+  .hero-visual,
+  .gallery-card,
+  .gallery-note,
+  .stat-card {
+    overflow: hidden;
+    border-radius: 1.6rem;
+    border: 1px solid rgba(29, 39, 56, 0.08);
+    background: white;
+    box-shadow: 0 18px 48px rgba(34, 54, 73, 0.08);
+  }
+
+  .hero-visual :global(img),
+  .gallery-card :global(img) {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+  }
+
+  .hero-visual {
+    min-height: 32rem;
+  }
+
+  .canasta-content {
+    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
+    align-items: start;
+    margin-top: 2rem;
+  }
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+  }
+
+  .stat-card {
+    padding: 1.25rem;
+  }
+
+  .stat-card strong {
+    display: block;
+    color: var(--brand-dark);
+    font-family: 'Sora', sans-serif;
+    font-size: 2rem;
+  }
+
+  .stat-card span {
+    display: block;
+    margin-top: 0.35rem;
+    color: #5b6a82;
+    line-height: 1.5;
+  }
+
+  .gallery-section {
+    margin-top: 4rem;
+  }
+
+  .gallery-copy {
+    max-width: 48rem;
+    margin-bottom: 1.6rem;
+  }
+
+  .gallery-copy h2 {
+    font-size: clamp(2rem, 4vw, 3.4rem);
+  }
+
+  .gallery-grid {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
+    align-items: stretch;
+  }
+
+  .gallery-card {
+    min-height: 26rem;
+  }
+
+  .gallery-note {
+    padding: 1.8rem;
+    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
+  }
+
+  .gallery-note h3 {
+    font-size: 1.6rem;
+  }
+
+  .note-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.9rem;
+    margin-top: 1.5rem;
+  }
+
+  .primary-link,
+  .secondary-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem 1.25rem;
+    border-radius: 1rem;
+    font-weight: 800;
+  }
+
+  .primary-link {
+    background: linear-gradient(180deg, #1b49d6 0%, #0834b7 100%);
+    color: white;
+  }
+
+  .secondary-link {
+    background: rgba(8, 52, 183, 0.06);
+    color: var(--brand-dark);
+    border: 1px solid rgba(8, 52, 183, 0.14);
+  }
+
+  @media (max-width: 960px) {
+    .canasta-hero,
+    .canasta-content,
+    .gallery-grid,
+    .stats-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .hero-visual,
+    .gallery-card {
+      min-height: 0;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .canasta-page {
+      padding: 1.25rem 1rem 3rem;
+    }
+  }
+</style>

src/components/RenacerLanding.astro

@@ -29,6 +29,14 @@ const proyectos = [
       'Entregamos apoyo alimentario constante a personas y familias de más de 10 sectores de Quillota.',
     href: '/comedor-solidario/',
   },
+  {
+    estado: 'Activo',
+    nombre: 'Canasta Familiar',
+    bajada: 'Apoyo alimentario y productos esenciales',
+    detalle:
+      'Entregamos mercadería, frutas, verduras, higiene y aseo para aliviar la carga diaria de las familias.',
+    href: '/canasta-familiar/',
+  },
   {
     estado: 'En curso',
     nombre: 'Germinando Sueños',
@@ -90,7 +98,7 @@ const proyectos = [
     </div>
   </section>
 
-  <section class="section" id="pilares">
+  <section class="section reveal" id="pilares">
     <div class="section-heading">
       <h2>Nuestras áreas de acción</h2>
       <p>
@@ -101,7 +109,7 @@ const proyectos = [
 
     <div class="cards-grid">
       {pilares.map((pilar) => (
-        <article class="info-card">
+        <article class="info-card reveal-item">
           <div class="icon-chip" aria-hidden="true">{pilar.icono}</div>
           <h3>{pilar.titulo}</h3>
           <p>{pilar.descripcion}</p>
@@ -110,8 +118,8 @@ const proyectos = [
     </div>
   </section>
 
-  <section class="section projects-section" id="proyectos">
+  <section class="section projects-section reveal" id="proyectos">
-    <div class="section-heading section-heading-dark">
+    <div class="section-heading section-heading-dark reveal-item">
       <h2>Proyectos en Movimiento</h2>
       <p>Iniciativas vivas que transforman nuestro entorno.</p>
     </div>
@@ -119,7 +127,7 @@ const proyectos = [
     <div class="project-grid">
       {proyectos.map((proyecto) =>
         proyecto.href ? (
-          <a class="project-card project-card-link" href={proyecto.href}>
+          <a class="project-card project-card-link reveal-item" href={proyecto.href}>
             <span class="status-pill">{proyecto.estado}</span>
             <h3>{proyecto.nombre}</h3>
             <p class="project-subtitle">{proyecto.bajada}</p>
@@ -127,7 +135,7 @@ const proyectos = [
             <span class="project-link-copy">Ver proyecto</span>
           </a>
         ) : (
-          <article class="project-card">
+          <article class="project-card reveal-item">
             <span class="status-pill">{proyecto.estado}</span>
             <h3>{proyecto.nombre}</h3>
             <p class="project-subtitle">{proyecto.bajada}</p>
@@ -138,8 +146,8 @@ const proyectos = [
     </div>
   </section>
 
-  <footer class="footer" id="contacto">
+  <footer class="footer reveal" id="contacto">
-    <div class="footer-brand-block">
+    <div class="footer-brand-block reveal-item">
       <a href="/" class="brand footer-brand">Renacer<span>.</span></a>
       <p>
         Organización comunitaria dedicada al desarrollo social, ecológico e inclusivo en la comuna de
@@ -147,14 +155,14 @@ const proyectos = [
       </p>
     </div>
 
-    <div class="footer-column">
+    <div class="footer-column reveal-item">
       <h4>Contacto</h4>
       <p>📍 Alfaro 1000, Quillota</p>
       <a href="mailto:contacto@familiarenacer.cl">✉️ contacto@familiarenacer.cl</a>
       <a href="tel:+56976233481">📞 +56 9 7623 3481</a>
     </div>
 
-    <div class="footer-column">
+    <div class="footer-column reveal-item">
       <h4>Horarios</h4>
       <p>Lunes a Viernes</p>
       <p class="footer-strong">09:00 - 18:00 hrs</p>
@@ -179,6 +187,44 @@ const proyectos = [
 </main>
 
 <style>
+  .reveal-item {
+    opacity: 0;
+    transform: translateY(30px);
+    transition:
+      opacity 820ms ease,
+      transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
+    will-change: opacity, transform;
+  }
+
+  .reveal-item.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .cards-grid .reveal-item:nth-child(2),
+  .project-grid .reveal-item:nth-child(2),
+  .footer .reveal-item:nth-child(2) {
+    transition-delay: 90ms;
+  }
+
+  .cards-grid .reveal-item:nth-child(3),
+  .project-grid .reveal-item:nth-child(3),
+  .footer .reveal-item:nth-child(3) {
+    transition-delay: 160ms;
+  }
+
+  .project-grid .reveal-item:nth-child(4) {
+    transition-delay: 230ms;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .reveal-item {
+      opacity: 1;
+      transform: none;
+      transition: none;
+    }
+  }
+
   .landing-shell {
     width: min(100%, 1440px);
     margin: 0 auto;
@@ -270,7 +316,10 @@ const proyectos = [
   .hero {
     position: relative;
     overflow: hidden;
-    padding: 7rem 1.5rem 8rem;
+    display: flex;
+    align-items: center;
+    min-height: min(42rem, calc(100svh - 5.6rem));
+    padding: clamp(2.5rem, 4.5svh, 4rem) 1.5rem;
   }
 
   .hero-backdrop {
@@ -316,9 +365,9 @@ const proyectos = [
   }
 
   .hero h1 {
-    margin: 2rem auto 0;
+    margin: 1.25rem auto 0;
     max-width: 11ch;
-    font-size: clamp(3.6rem, 10vw, 6.9rem);
+    font-size: clamp(2.7rem, 7.6vw, 5.4rem);
     line-height: 0.96;
     color: #18233b;
   }
@@ -330,24 +379,24 @@ const proyectos = [
 
   .hero-copy {
     max-width: 24ch;
-    margin: 2rem auto 0;
+    margin: 1rem auto 0;
     color: #53637d;
-    font-size: clamp(1.2rem, 2vw, 1.7rem);
+    font-size: clamp(0.98rem, 1.45vw, 1.28rem);
-    line-height: 1.55;
+    line-height: 1.45;
   }
 
   .hero-actions {
     display: flex;
     justify-content: center;
     gap: 1.4rem;
-    margin-top: 2.5rem;
+    margin-top: 1.45rem;
   }
 
   .primary-action,
   .secondary-action {
-    min-width: 15rem;
+    min-width: 12.4rem;
-    padding: 1.3rem 1.65rem;
+    padding: 1rem 1.3rem;
-    font-size: 1.1rem;
+    font-size: 0.98rem;
   }
 
   .primary-action {
@@ -396,7 +445,7 @@ const proyectos = [
   .cards-grid,
   .project-grid {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 1.4rem;
   }
 
@@ -596,16 +645,17 @@ const proyectos = [
     }
 
     .hero {
-      padding: 5rem 1rem 5.5rem;
+      min-height: auto;
+      padding: 2.75rem 1rem 3.25rem;
     }
 
     .hero h1 {
-      font-size: clamp(3rem, 16vw, 4.6rem);
+      font-size: clamp(2.4rem, 12vw, 3.7rem);
     }
 
     .hero-copy {
       max-width: 100%;
-      font-size: 1.08rem;
+      font-size: 0.96rem;
     }
 
     .hero-actions {
@@ -641,3 +691,44 @@ const proyectos = [
     }
   }
 </style>
+
+<script>
+  const initReveal = () => {
+    const revealItems = Array.from(document.querySelectorAll('.reveal-item'));
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    if (prefersReducedMotion) {
+      revealItems.forEach((item) => item.classList.add('is-visible'));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('is-visible');
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      {
+        threshold: 0.12,
+        rootMargin: '0px 0px -6% 0px',
+      }
+    );
+
+    revealItems.forEach((item) => observer.observe(item));
+  };
+
+  const startReveal = () => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(initReveal);
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', startReveal, { once: true });
+  } else {
+    startReveal();
+  }
+</script>

src/pages/canasta-familiar.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '../layouts/Layout.astro';
+import CanastaFamiliarPage from '../components/CanastaFamiliarPage.astro';
+---
+
+<Layout
+  title="Canasta Familiar | Renacer"
+  description="Conoce el programa Canasta Familiar de Renacer y cómo entrega apoyo directo con alimentos y productos esenciales para el hogar."
+>
+  <CanastaFamiliarPage />
+</Layout>