giarf/familiarenacer-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: nuevas secciones

Browse Source
This commit is contained in:
giarf
2026-04-02 23:54:12 -03:00
parent 00131f311a
commit 868e7d3c23
7 changed files with 451 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
src/components/ProgramInfoPage.astro Normal file
View File

@@ -0,0 +1,271 @@
---
interface Stat {
valor: string;
etiqueta: string;
}
interface Props {
backHref?: string;
kicker: string;
title: string;
lead: string;
paragraphs: string[];
stats: Stat[];
supportTitle?: string;
supportText: string;
}
const {
backHref = '/',
kicker,
title,
lead,
paragraphs,
stats,
supportTitle = 'Cómo apoyar',
supportText,
} = Astro.props;
---
<main class="program-page">
<section class="program-hero">
<div class="hero-copy">
<a href={backHref} class="back-link">← Volver a Renacer</a>
<p class="section-kicker">{kicker}</p>
<h1>{title}</h1>
<p class="hero-lead">{lead}</p>
</div>
<div class="hero-panel">
<div class="panel-badge">Programa Renacer</div>
<p>
Una iniciativa comunitaria que combina apoyo concreto, cercanía y participación de redes
solidarias para responder a necesidades reales.
</p>
</div>
</section>
<section class="program-content">
<div class="content-copy">
{paragraphs.map((paragraph) => <p>{paragraph}</p>)}
</div>
<div class="stats-grid">
{stats.map((stat) => (
<article class="stat-card">
<strong>{stat.valor}</strong>
<span>{stat.etiqueta}</span>
</article>
))}
</div>
</section>
<section class="support-section">
<div class="support-copy">
<p class="section-kicker">Apoyo y comunidad</p>
<h2>{supportTitle}</h2>
<p>{supportText}</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>
<aside class="support-panel">
<h3>Red de colaboración</h3>
<p>
Estos programas se sostienen con voluntariado, donaciones, campañas y trabajo comunitario
constante. Cada aporte ayuda a mantener el acompañamiento en el tiempo.
</p>
</aside>
</section>
</main>
<style>
.program-page {
width: min(100%, 1240px);
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.program-hero,
.program-content,
.support-section {
display: grid;
gap: 1.5rem;
}
.program-hero {
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
align-items: stretch;
}
.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,
.support-copy p,
.hero-panel p,
.support-panel p {
color: #5b6a82;
line-height: 1.8;
}
.hero-lead {
margin-top: 1.2rem;
font-size: 1.08rem;
}
.hero-panel,
.support-panel,
.stat-card {
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-panel {
display: flex;
flex-direction: column;
justify-content: end;
min-height: 20rem;
padding: 1.8rem;
background:
radial-gradient(circle at top left, rgba(8, 52, 183, 0.11), transparent 28%),
linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
}
.panel-badge {
width: fit-content;
margin-bottom: 0.9rem;
padding: 0.5rem 0.8rem;
border-radius: 999px;
background: rgba(8, 52, 183, 0.08);
color: var(--brand-dark);
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.program-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;
}
.support-section {
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
align-items: stretch;
margin-top: 4rem;
}
.support-copy h2 {
font-size: clamp(2rem, 4vw, 3.4rem);
}
.support-panel {
padding: 1.8rem;
background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
}
.support-panel 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) {
.program-hero,
.program-content,
.support-section,
.stats-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.program-page {
padding: 1.25rem 1rem 3rem;
}
}
</style>

40
src/components/RenacerLanding.astro
View File

@@ -37,6 +37,46 @@ const proyectos = [
'Entregamos mercadería, frutas, verduras, higiene y aseo para aliviar la carga diaria de las familias.',
href: '/canasta-familiar/',
},
{
estado: 'Activo',
nombre: 'Ropero Solidario',
bajada: 'Vestimenta digna y economía circular',
detalle:
'Recibimos, seleccionamos y entregamos ropa en buen estado para responder con respeto a necesidades reales.',
href: '/ropero-solidario/',
},
{
estado: 'Temporada',
nombre: 'Navidad Solidaria',
bajada: 'Apadrinamiento y celebración comunitaria',
detalle:
'Una campaña de diciembre que acompaña a niños y niñas con regalos, dulces y una experiencia significativa.',
href: '/navidad-solidaria/',
},
{
estado: 'Anual',
nombre: 'Cena Navideña',
bajada: 'Encuentro y compañía en Noche Buena',
detalle:
'Cada 24 de diciembre compartimos una cena especial con personas y familias que viven esta fecha con dificultad o soledad.',
href: '/cena-navidena/',
},
{
estado: 'Activo',
nombre: 'Sala del Juguete',
bajada: 'Juego, infancia y reutilización',
detalle:
'Un espacio para rescatar el valor del juego y dar nueva vida a juguetes donados por la comunidad.',
href: '/sala-del-juguete/',
},
{
estado: 'Vacaciones',
nombre: 'Tardes Recreativas',
bajada: 'Cuidado y actividades en verano e invierno',
detalle:
'Jornadas seguras con recreación, alimentación y acompañamiento para niños y niñas durante vacaciones.',
href: '/tardes-recreativas/',
},
{
estado: 'En curso',
nombre: 'Germinando Sueños',

28
src/pages/cena-navidena.astro Normal file
View File

@@ -0,0 +1,28 @@
---
import Layout from '../layouts/Layout.astro';
import ProgramInfoPage from '../components/ProgramInfoPage.astro';
---
<Layout
title="Cena Navideña | Renacer"
description="Conoce la Cena Navideña de Renacer, una instancia de encuentro, compañía y entrega para personas y familias que viven la Navidad en dificultad o soledad."
>
<ProgramInfoPage
kicker="Cena Navideña"
title="Una noche de encuentro, compañía y celebración compartida."
lead="La Cena Navideña de Renacer se realiza cada 24 de diciembre y está pensada especialmente para personas y familias que atraviesan dificultades económicas o que viven la Navidad en soledad."
paragraphs={[
'Sabemos que para muchas personas esta fecha puede ser compleja: a veces no alcanza el dinero para una cena especial, y en otros casos, la falta de compañía hace que la celebración pierda su sentido. Por eso abrimos este espacio como una oportunidad para compartir, acompañar y vivir una noche distinta.',
'Desde el año 2006, este programa ha sido parte de nuestra comunidad, creciendo gracias al apoyo de voluntarios y colaboradores. En su versión más reciente, durante la Navidad 2025, se lograron entregar 100 cenas navideñas.',
'La cena consiste en un menú de tres tiempos preparado gracias a las colaboraciones de personas que aportan con alimentos, recursos o tiempo. Además de la atención presencial, el programa contempla la entrega a domicilio para personas con enfermedades, movilidad reducida o adultos mayores.',
'Más que una cena, este programa busca generar un espacio donde las personas puedan sentirse acompañadas, valoradas y parte de una comunidad en una fecha significativa.',
]}
stats={[
{ valor: '24 dic', etiqueta: 'fecha en que se realiza cada año' },
{ valor: '100', etiqueta: 'cenas entregadas en Navidad 2025' },
{ valor: '2006', etiqueta: 'año desde el que forma parte de Renacer' },
{ valor: '3 tiempos', etiqueta: 'estructura del menú compartido' },
]}
supportText="Si deseas colaborar con este programa, puedes hacerlo a través de aportes, voluntariado o difusión para que más personas puedan vivir una Noche Buena acompañada."
/>
</Layout>

28
src/pages/navidad-solidaria.astro Normal file
View File

@@ -0,0 +1,28 @@
---
import Layout from '../layouts/Layout.astro';
import ProgramInfoPage from '../components/ProgramInfoPage.astro';
---
<Layout
title="Navidad Solidaria | Renacer"
description="Conoce Navidad Solidaria de Renacer, una campaña comunitaria de apadrinamiento y celebración para niños y niñas."
>
<ProgramInfoPage
kicker="Navidad Solidaria"
title="Una celebración comunitaria que acompaña a niños y niñas con esperanza y afecto."
lead="Navidad Solidaria de Renacer se desarrolla durante diciembre para acompañar a niños y niñas en una celebración significativa, entregando alegría y contención a través de una experiencia comunitaria."
paragraphs={[
'Está dirigida a niños y niñas desde 1 mes hasta los 15 años, pertenecientes a familias vinculadas a los programas de Renacer.',
'A través de una campaña de apadrinamiento, personas de la comunidad pueden colaborar entregando un regalo a un niño o niña, de forma presencial o a distancia. Cada padrino o madrina recibe información básica de su ahijado o ahijada para que el regalo tenga un sentido más personal.',
'Además del regalo, cada niño o niña recibe una bolsa de dulces y un presente preparado por Renacer, buscando transmitir el sentido de la Navidad desde una mirada de esperanza, amor y comunidad.',
'La entrega se realiza en una celebración organizada por Renacer, con actividades recreativas, juegos y momentos compartidos. Más allá de lo material, este programa busca generar una experiencia significativa y aliviar una carga económica adicional para muchas familias.',
]}
stats={[
{ valor: '167', etiqueta: 'niños y niñas acompañados en la celebración' },
{ valor: '83', etiqueta: 'madrinas participantes' },
{ valor: '39', etiqueta: 'padrinos participantes' },
{ valor: 'Diciembre', etiqueta: 'mes en que se activa esta campaña comunitaria' },
]}
supportText="Si deseas conocer más o ser parte de esta iniciativa, puedes hacerlo a través de nuestros canales y sumarte como padrino, madrina, colaborador o voluntario."
/>
</Layout>

28
src/pages/ropero-solidario.astro Normal file
View File

@@ -0,0 +1,28 @@
---
import Layout from '../layouts/Layout.astro';
import ProgramInfoPage from '../components/ProgramInfoPage.astro';
---
<Layout
title="Ropero Solidario | Renacer"
description="Conoce el programa Ropero Solidario de Renacer y cómo acompaña a familias con vestimenta y apoyo digno durante todo el año."
>
<ProgramInfoPage
kicker="Ropero Solidario"
title="Vestimenta digna, rescate textil y apoyo concreto para la comunidad."
lead="El programa Ropero Solidario de Renacer apoya a familias que enfrentan dificultades para acceder a vestimenta, entregando ropa en buen estado y artículos esenciales según sus necesidades."
paragraphs={[
'Este espacio funciona gracias a la donación de ropa por parte de la comunidad, la cual es recibida, clasificada, seleccionada, lavada y organizada para luego ser entregada de manera digna y respetuosa a quienes lo necesitan.',
'El programa se desarrolla durante todo el año, adaptándose a las distintas temporadas. En invierno, se refuerza la entrega de abrigo para personas en situación de calle, familias e inmigrantes, mientras que en verano se continúa apoyando con vestimenta adecuada a la estación.',
'A través de este programa también promovemos una lógica de economía circular, donde las familias no solo pueden recibir apoyo, sino también donar ropa que ya no utilizan, generando una red de colaboración dentro de la misma comunidad y fomentando la reutilización y el cuidado del entorno.',
'Más allá de la entrega de ropa, este espacio busca ser un apoyo concreto, resguardando la dignidad de cada persona y ofreciendo un entorno de respeto y cercanía.',
]}
stats={[
{ valor: 'Todo el año', etiqueta: 'funcionamiento continuo según temporada' },
{ valor: 'Abrigo', etiqueta: 'refuerzo especial en invierno para calle, familias e inmigrantes' },
{ valor: 'Circular', etiqueta: 'reutilización y rescate textil desde la comunidad' },
{ valor: 'Digno', etiqueta: 'clasificación, lavado y entrega respetuosa' },
]}
supportText="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."
/>
</Layout>

28
src/pages/sala-del-juguete.astro Normal file
View File

@@ -0,0 +1,28 @@
---
import Layout from '../layouts/Layout.astro';
import ProgramInfoPage from '../components/ProgramInfoPage.astro';
---
<Layout
title="Sala del Juguete | Renacer"
description="Conoce la Sala del Juguete de Renacer, un espacio para rescatar el valor del juego, la infancia y la reutilización comunitaria."
>
<ProgramInfoPage
kicker="Sala del Juguete"
title="Un espacio para rescatar el juego, la imaginación y la infancia."
lead="La Sala del Juguete de Renacer está pensada para devolver al juego el lugar que merece en la infancia, ofreciendo a niños y niñas la oportunidad de explorar, imaginar y compartir más allá de las pantallas."
paragraphs={[
'Hoy sabemos que el juego no es solo una forma de entretención, sino una parte fundamental del desarrollo. A través del juego, los niños fortalecen su creatividad, habilidades sociales, expresión emocional y aprendizaje.',
'Este espacio busca recuperar ese tiempo de juego que muchas veces se ve limitado, especialmente en contextos donde predominan las pantallas o donde no siempre existen las condiciones para acceder a juguetes.',
'La Sala del Juguete funciona también como un espacio de economía circular, donde se reciben donaciones de juguetes nuevos y usados en buen estado, los cuales son seleccionados y puestos a disposición de los niños para su uso dentro del espacio o para ser entregados en fechas especiales.',
'Más allá de los objetos, este programa promueve el juego, la reutilización, el cuidado del entorno y la colaboración entre familias como parte del bienestar comunitario.',
]}
stats={[
{ valor: 'Juego', etiqueta: 'como herramienta de desarrollo, encuentro y bienestar' },
{ valor: 'Circular', etiqueta: 'reutilización de juguetes nuevos y usados en buen estado' },
{ valor: 'Infancia', etiqueta: 'espacio pensado para explorar, imaginar y compartir' },
{ valor: 'Comunidad', etiqueta: 'apoyo a celebraciones y actividades durante el año' },
]}
supportText="Si deseas colaborar con la donación de juguetes o conocer más sobre este espacio, puedes hacerlo a través de nuestros canales y campañas comunitarias."
/>
</Layout>

28
src/pages/tardes-recreativas.astro Normal file
View File

@@ -0,0 +1,28 @@
---
import Layout from '../layouts/Layout.astro';
import ProgramInfoPage from '../components/ProgramInfoPage.astro';
---
<Layout
title="Tardes Recreativas | Renacer"
description="Conoce las Tardes Recreativas de Renacer, un espacio seguro y acompañado para niños y niñas durante vacaciones de verano e invierno."
>
<ProgramInfoPage
kicker="Tardes Recreativas"
title="Vacaciones con cuidado, juego y actividades seguras para niños y niñas."
lead="El programa Tardes Recreativas de Renacer ofrece un espacio seguro, acompañado y entretenido para niños y niñas durante las vacaciones de verano e invierno."
paragraphs={[
'Está pensado especialmente para familias donde los adultos deben trabajar en estos períodos y no siempre cuentan con redes de apoyo para el cuidado de sus hijos.',
'Durante estas jornadas, los niños participan en actividades recreativas, artísticas y de convivencia en un entorno supervisado por monitores, donde pueden compartir, aprender y disfrutar su tiempo de manera segura.',
'Además, el programa incluye almuerzo y colación, asegurando que los niños cuenten con una alimentación adecuada durante su permanencia. En verano se realizan juegos con agua, actividades al aire libre y talleres de cocina; en invierno, cine, juegos grupales, manualidades y momentos de relajación.',
'Más allá de las actividades, este espacio busca entregar cuidado, contención y un entorno donde los niños se sientan acompañados, especialmente en períodos donde pueden pasar más tiempo solos.',
]}
stats={[
{ valor: '60', etiqueta: 'niños recibidos en el programa' },
{ valor: 'Verano', etiqueta: 'juegos con agua, aire libre y talleres de cocina' },
{ valor: 'Invierno', etiqueta: 'cine, manualidades y juegos en espacios cerrados' },
{ valor: 'Cuidado', etiqueta: 'incluye almuerzo y colación durante la jornada' },
]}
supportText="Si deseas conocer más o ser parte de esta iniciativa, puedes colaborar con recursos, voluntariado o difusión para fortalecer estos espacios de cuidado."
/>
</Layout>