More responsive tweaks

This commit is contained in:
Julio Ruiz 2026-02-12 02:12:54 -05:00
parent 2da2e29f9a
commit c18af4a224
4 changed files with 16 additions and 21 deletions

View File

@ -5,18 +5,18 @@ import jbp from "../../assets/DRJBP-1.webp";
--- ---
<div class="bg-[#22523F]"> <div class="bg-[#22523F]">
<div class="container mx-auto py-20 relative text-[#EBE5D0]"> <div class="container mx-auto py-20 relative text-[#EBE5D0]">
<div class="absolute bottom-0 right-0 w-80"> <div class="absolute bottom-0 right-0 w-80 hidden lg:block">
<Image <Image
src={jbp.src} src={jbp.src}
alt="" alt=""
/> />
</div> </div>
<h4 class="text-lg text-center font-bold uppercase ">Contacto</h4> <h4 class="text-lg text-center font-bold uppercase ">Contacto</h4>
<h2 class="text-6xl text-center font-bold font-secondary my-8">Conectemos con visión y propósito</h2> <h2 class="text-2xl lg:text-5xl text-center font-bold font-secondary my-8">Conectemos con visión y propósito</h2>
<div class="w-2/5 mx-auto"> <div class="px-12 lg:px-4 lg:w-2/5 mx-auto">
<p class="text-lg font-light mb-10">El <strong>Centro del Reino de Paz y Justicia</strong> dispone de canales directos para consultas institucionales, participación en programas y acti- vidades internacionales.</p> <p class="text-lg font-light mb-10">El <strong>Centro del Reino de Paz y Justicia</strong> dispone de canales directos para consultas institucionales, participación en programas y acti- vidades internacionales.</p>
<p class="text-lg font-light mb-10">Correo electrónico: <strong>info@centrodelreinodepazyjusticia.com</strong> Redes sociales: actualizaciones permanentes sobre actividades y convocatorias.</p> <p class="text-lg font-light mb-10 wrap-break-word">Correo electrónico: <strong>info@centrodelreinodepazyjusticia.com</strong> Redes sociales: actualizaciones permanentes sobre actividades y convocatorias.</p>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<form action=""> <form action="">
@ -43,7 +43,7 @@ import jbp from "../../assets/DRJBP-1.webp";
</div> </div>
</div> </div>
<div class="mt-20"> <div class="mt-20">
<p class="text-sm text-white">©2026. Todos los Derechos Reservados. All Rights Reserved. Centro del Reino de Paz y Justicia</p> <p class="px-4 text-sm text-white">©2026. Todos los Derechos Reservados. All Rights Reserved. Centro del Reino de Paz y Justicia</p>
</div> </div>
</div> </div>
</div> </div>

View File

@ -2,13 +2,13 @@
import { Icon } from "astro-icon/components"; import { Icon } from "astro-icon/components";
--- ---
<div class="bg-[#BEA48D] py-32"> <div class="bg-[#BEA48D] py-16 lg:py-32">
<div class="container mx-auto"> <div class="container mx-auto">
<h4 class="text-lg text-center font-bold uppercase text-[#003421]">Programas y areas de acción</h4> <h4 class="text-lg text-center font-bold uppercase text-[#003421]">Programas y areas de acción</h4>
<h2 class="text-6xl text-center font-bold font-secondary my-8 text-[#003421]">Formación y Capacitación</h2> <h2 class="text-3xl lg:text-5xl text-center font-bold font-secondary my-8 text-[#003421]">Formación y Capacitación</h2>
<p class="text-lg w-2/3 mx-auto mb-20 text-[#003421]">El <strong>CPyJ desarrolla cursos, seminarios y programas de formación</strong> dirigidos a líderes, profesionales, referentes institucionales y actores con responsabilidad pública.</p> <p class="text-lg w-2/3 mx-auto mb-20 text-[#003421]">El <strong>CPyJ desarrolla cursos, seminarios y programas de formación</strong> dirigidos a líderes, profesionales, referentes institucionales y actores con responsabilidad pública.</p>
<div class="grid grid-cols-3 gap-20"> <div class="grid xl:grid-cols-3 gap-20">
<div class="bg-[#EBE5D0] p-12 relative pb-40"> <div class="bg-[#EBE5D0] p-12 relative pb-40">
<Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12" /> <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12" />
<h4 class="text-[#003421] font-bold text-2xl mb-12">Area de Formacion</h4> <h4 class="text-[#003421] font-bold text-2xl mb-12">Area de Formacion</h4>
@ -28,7 +28,7 @@ import { Icon } from "astro-icon/components";
</div> </div>
</div> </div>
<div class="bg-[#EBE5D0] p-12 relative"> <div class="bg-[#EBE5D0] p-12 relative pb-40">
<Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12" /> <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12" />
<h4 class="text-[#003421] font-bold text-2xl mb-12">Asesoría y Consultoría</h4> <h4 class="text-[#003421] font-bold text-2xl mb-12">Asesoría y Consultoría</h4>
@ -39,7 +39,7 @@ import { Icon } from "astro-icon/components";
</div> </div>
</div> </div>
<div class="bg-[#EBE5D0] p-12 relative"> <div class="bg-[#EBE5D0] p-12 relative pb-40">
<Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12" /> <Icon name="ph:arrow-circle-down-thin" class="text-6xl mb-12" />
<h4 class="text-[#003421] font-bold text-2xl mb-12">Proyectos de Acción</h4> <h4 class="text-[#003421] font-bold text-2xl mb-12">Proyectos de Acción</h4>

View File

@ -3,12 +3,12 @@ import { getCollection, getEntry } from "astro:content";
import NewsCard from "../cards/NewsCard.astro"; import NewsCard from "../cards/NewsCard.astro";
const newsItems = await getCollection("news"); const newsItems = await getCollection("news");
--- ---
<div id="news" class="bg-[#22523F] py-20"> <div id="news" class="bg-[#22523F] py-12 lg:py-20">
<div class="container mx-auto"> <div class="container mx-auto">
<h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">Noticias</h4> <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">Noticias</h4>
<h2 class="text-white text-6xl font-bold text-center font-secondary mb-4">Actualidad institucional y proyección internacional</h2> <h2 class="text-white text-3xl lg:text-5xl font-bold text-center font-secondary mb-4">Actualidad institucional y proyección internacional</h2>
<div class="grid grid-cols-3 gap-20"> <div class="grid md:grid-cols-2 lg:grid-cols-3 md:gap-10 gap-20">
{ {
newsItems.map((item) => ( newsItems.map((item) => (
<NewsCard data={item} /> <NewsCard data={item} />

View File

@ -1,23 +1,18 @@
--- ---
--- ---
<div class="bg-[#CBA16A] py-20"> <div class="bg-[#CBA16A] py-12 lg:py-20">
<div class="container mx-auto"> <div class="container mx-auto">
<h4 class="text-tertiary text-2xl uppercase font-bold text-center mb-8 font-primary">Participa | Colabora</h4> <h4 class="text-tertiary text-2xl uppercase font-bold text-center mb-8 font-primary">Participa | Colabora</h4>
<h2 class="text-tertiary text-6xl font-bold text-center font-secondary mb-4">Sumarse es asumir un compromiso con propósito</h2> <h2 class="text-tertiary text-3xl lg:text-5xl font-bold text-center font-secondary mb-4">Sumarse es asumir un compromiso con propósito</h2>
<p class="text-tertiary pt-10 text-2xl px-12">La labor del <strong>Centro del Reino de Paz y Justicia</strong> se fortalece mediante la participación de personas e instituciones alineadas con sus valores y objetivos generales. Formas de participar:</p> <p class="text-tertiary pt-10 text-2xl px-12">La labor del <strong>Centro del Reino de Paz y Justicia</strong> se fortalece mediante la participación de personas e instituciones alineadas con sus valores y objetivos generales. Formas de participar:</p>
<div class="grid grid-cols-3 w-3/4 justify-center mx-auto gap-20 my-20"> <div class="grid md:grid-cols-2 w-3/4 justify-center mx-auto gap-20 my-20">
<div class="border-1 border-white text-lg p-8 text-tertiary"> <div class="border-1 border-white text-lg p-8 text-tertiary">
<h5 class="font-bold mb-6">Voluntariado:</h5> <h5 class="font-bold mb-6">Voluntariado:</h5>
<p>colaboración en proyectos formativos, institucionales o internacionales.</p> <p>colaboración en proyectos formativos, institucionales o internacionales.</p>
</div> </div>
<div class="border-1 border-white p-8 text-tertiary">
<h5 class="font-bold text-lg mb-6">Aportes y donaciones:</h5>
<p>sostenimiento de programas y actividades.</p>
</div>
<div class="border-1 border-white p-8 text-tertiary"> <div class="border-1 border-white p-8 text-tertiary">
<h5 class="font-bold text-lg mb-6">Difusión institucional:</h5> <h5 class="font-bold text-lg mb-6">Difusión institucional:</h5>
<p>amplificación de la misión y acciones del CPyJ en espacios públicos.</p> <p>amplificación de la misión y acciones del CPyJ en espacios públicos.</p>