feat: seccion canasta
This commit is contained in:
BIN
src/assets/canasta-familiar/entrega-canasta.jpeg
Normal file
BIN
src/assets/canasta-familiar/entrega-canasta.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
src/assets/canasta-familiar/imagen-principal.jpg
Normal file
BIN
src/assets/canasta-familiar/imagen-principal.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 243 KiB |
299
src/components/CanastaFamiliarPage.astro
Normal file
299
src/components/CanastaFamiliarPage.astro
Normal file
@@ -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>
|
||||
@@ -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">
|
||||
<div class="section-heading section-heading-dark">
|
||||
<section class="section projects-section reveal" id="proyectos">
|
||||
<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">
|
||||
<div class="footer-brand-block">
|
||||
<footer class="footer reveal" id="contacto">
|
||||
<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);
|
||||
line-height: 1.55;
|
||||
font-size: clamp(0.98rem, 1.45vw, 1.28rem);
|
||||
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;
|
||||
padding: 1.3rem 1.65rem;
|
||||
font-size: 1.1rem;
|
||||
min-width: 12.4rem;
|
||||
padding: 1rem 1.3rem;
|
||||
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>
|
||||
|
||||
11
src/pages/canasta-familiar.astro
Normal file
11
src/pages/canasta-familiar.astro
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user