LGCC
/
cdrdpyj
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Co-authored-by: EstebanPaz12 <EstebanPaz12@users.noreply.github.com>

This commit is contained in:
Julio Ruiz 2026-02-12 02:25:33 -05:00
parent c02bca3e28 c572050d02
commit 75212c8862
18 changed files with 75 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/BaseHead.astro
View File

@ -1,18 +1,14 @@
--- ---
const { const { title = "Centro del Reino de Paz y Justicia", description = "" } =
title = "Centro del Reino de Paz y Justicia", Astro.props;
description =""
} = Astro.props;
--- ---
<template> <head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{title}</title> <title>{title}</title>
<meta name="description" content={description} /> <meta name="description" content={description} />
</head> </head>
</template>

4
src/components/BoxContainer.astro
View File

@ -1,4 +1,4 @@
--- ≈---
const { props } = Astro.props; const { props } = Astro.props;
import { Icon } from "astro-icon/components"; import { Icon } from "astro-icon/components";
import Button from "./ui/Button.astro"; import Button from "./ui/Button.astro";
@ -6,7 +6,7 @@ import Button from "./ui/Button.astro";
const background = props.bgImage || props.bgColor; const background = props.bgImage || props.bgColor;
--- ---
<div style={{ background: props.bgImage ? `url('${props.bgImage}') center no-repeat; background-size:680px;` : props.bgColor }} class={`aspect-auto lg:aspect-square py-12 px-16 flex flex-col justify-evenly`}> <div style={{ background: props.bgImage ? `url('${props.bgImage}') center no-repeat; background-size:680px;` : props.bgColor }} class={`aspect-auto xl:aspect-square py-8 px-8 xl:px-16 flex flex-col justify-evenly`}>
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
{props.hasIcon && ( {props.hasIcon && (

4
src/components/cards/GridCard.astro
View File

@ -11,8 +11,8 @@ const imageUrl = props.image || ''
<div class="aspect-square overflow-hidden"> <div class="aspect-square overflow-hidden">
<div class={`flex flex-col justify-center h-full bg-[${props.bgColor}]`}> <div class={`flex flex-col justify-center h-full bg-[${props.bgColor}]`}>
{ props.type === 'text' && ( { props.type === 'text' && (
<div class="p-16 flex flex-col justify-between h-full"> <div class="p-8 sm:p-16 md:p-8 xl:p-16 flex flex-col justify-between h-full">
<Icon name={props.icon} class={`text-8xl text-[${textColor}]`} /> <Icon name={props.icon} class={`text-8xl text-[${textColor}] hidden lg:block`} />
<p class={`text-[${textColor}]`}>{props.text}</p> <p class={`text-[${textColor}]`}>{props.text}</p>
</div> </div>
)} )}

8
src/components/section/AuthoritySection.astro
View File

@ -3,13 +3,13 @@ const { title, titleColor, description, descColor, bgColor } = Astro.props;
--- ---
<div class={`container mx-auto ${bgColor}`}> <div class={`container mx-auto ${bgColor}`}>
<div class="grid grid-cols-12"> <div class="grid grid-cols-3 relative">
<div class={`col-span-8 p-24 h-82 space-y-5 ${descColor}`}> <div class={`col-span-3 sm:col-span-2 p-12 lg:p-24 lg:h-82 ${descColor}`}>
<h2 class={`${titleColor} text-2xl`}><strong>Autoridades</strong> | Centro del Reino de Paz y Justicia</h2> <h2 class={`${titleColor} text-2xl`}><strong>Autoridades</strong> | Centro del Reino de Paz y Justicia</h2>
<p>El <strong>Dr. José Benjamín Pérez Matos</strong> es el <strong>fundador y único referente del Centro del Reino de Paz y Justicia.</strong> Su liderazgo articula visión espiritual, formación intelectual, acción pública y proyección internacional.</p> <p>El <strong>Dr. José Benjamín Pérez Matos</strong> es el <strong>fundador y único referente del Centro del Reino de Paz y Justicia.</strong> Su liderazgo articula visión espiritual, formación intelectual, acción pública y proyección internacional.</p>
</div> </div>
<div class="col-span-4 bg-secondary flex items-end self-end justify-center h-82 overflow-visible"> <div class="hidden sm:flex col-span-1 bg-secondary items-end self-end justify-center h-82 overflow-visible">
<img src="/img/DRJBP-1.webp" class="w-92 h-98 object-contain" alt=""> <img src="/img/DRJBP-1.webp" class="w-48 sm:w-64 lg:w-76 object-contain absolute bottom-0" alt="">
</div> </div>
</div> </div>
</div> </div>

2
src/components/section/ColorSection.astro
View File

@ -6,6 +6,6 @@ console.log( 'Props', bgColor )
<div id={id} class={`bg-[${bgColor}] py-20`}> <div id={id} class={`bg-[${bgColor}] py-20`}>
<div class="container mx-auto w-3/4"> <div class="container mx-auto w-3/4">
<h4 class={`uppercase text-lg ${titleColor} font-primary md:text-xl text-center mb-4 font-bold`}>{title}</h4> <h4 class={`uppercase text-lg ${titleColor} font-primary md:text-xl text-center mb-4 font-bold`}>{title}</h4>
<p class={`text-3xl font-secondary ${textColor} text-center`}>{text}</p> <p class={`text-lg md:text-3xl font-secondary ${textColor} text-center`}>{text}</p>
</div> </div>
</div> </div>

20
src/components/section/ColumnsSection.astro
View File

@ -4,8 +4,8 @@ import { Icon } from "astro-icon/components";
const { props } = Astro.props; const { props } = Astro.props;
--- ---
<div class="container mx-auto"> <div class="container mx-auto">
<div class="grid grid-cols-2 min-h-100"> <div class="grid md:grid-cols-2 min-h-100">
<div class="bg-[#EBE5D0] p-24 grid grid-cols-2"> <div class="bg-[#EBE5D0] p-12 md:p-24 grid lg:grid-cols-2">
<div class="leftcol flex justify-between flex-col min-h-full"> <div class="leftcol flex justify-between flex-col min-h-full">
<h2 class="text-5xl font-secondary text-tertiary font-bold">Justicia</h2> <h2 class="text-5xl font-secondary text-tertiary font-bold">Justicia</h2>
<p class="text-lg text-tertiary">Compromiso activo con un orden justo, basado en principios morales, respeto por la dignidad humana y defensa de valores permanentes.</p> <p class="text-lg text-tertiary">Compromiso activo con un orden justo, basado en principios morales, respeto por la dignidad humana y defensa de valores permanentes.</p>
@ -14,7 +14,7 @@ const { props } = Astro.props;
<Icon name="icon_justice_1" class="text-9xl text-tertiary self-end" /> <Icon name="icon_justice_1" class="text-9xl text-tertiary self-end" />
</div> </div>
</div> </div>
<div class="bg-tertiary p-24 grid grid-cols-2"> <div class="bg-tertiary p-12 md:p-24 grid lg:grid-cols-2">
<div class="leftcol flex justify-between flex-col min-h-full"> <div class="leftcol flex justify-between flex-col min-h-full">
<h2 class="text-5xl font-secondary font-bold text-[#CBA16A]">Integridad</h2> <h2 class="text-5xl font-secondary font-bold text-[#CBA16A]">Integridad</h2>
<p class="text-[#CBA16A] text-lg">Coherencia entre pensamiento, palabra y acción; transparencia institucional y respon- sabilidad en el espacio público.</p> <p class="text-[#CBA16A] text-lg">Coherencia entre pensamiento, palabra y acción; transparencia institucional y respon- sabilidad en el espacio público.</p>
@ -24,17 +24,17 @@ const { props } = Astro.props;
</div> </div>
</div> </div>
</div> </div>
<div class="grid grid-cols-3"> <div class="grid lg:grid-cols-3">
<div class="bg-tertiary p-24 flex justify-between flex-col min-h-full aspect-square"> <div class="bg-tertiary p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square">
<h2 class="text-5xl font-secondary font-bold text-white">Servicio con Propósito</h2> <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-white">Servicio con Propósito</h2>
<p class="text-xl text-[#EBE5D0]">Vocación de acompa- ñamiento y acción orientada a objetivos claros y trascendentes.</p> <p class="text-xl text-[#EBE5D0]">Vocación de acompa- ñamiento y acción orientada a objetivos claros y trascendentes.</p>
</div> </div>
<div class="bg-[#BEA48D] p-24 flex justify-between flex-col min-h-full aspect-square"> <div class="bg-[#BEA48D] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square">
<h2 class="text-5xl font-secondary font-bold text-tertiary">Excelencia</h2> <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-tertiary">Excelencia</h2>
<p class="text-xl text-tertiary">Rigor intelectual, profe- sionalismo y mejora constante en todas las áreas de trabajo.</p> <p class="text-xl text-tertiary">Rigor intelectual, profe- sionalismo y mejora constante en todas las áreas de trabajo.</p>
</div> </div>
<div class="bg-[#22523F] p-24 flex justify-between flex-col min-h-full aspect-square"> <div class="bg-[#22523F] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square">
<h2 class="text-5xl font-secondary font-bold text-tertiary">Diálogo Estratégico</h2> <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-tertiary">Diálogo Estratégico</h2>
<p class="text-tertiary text-xl">Apertura al intercambio entre culturas, naciones y credos, sin renunciar a convicciones ni principios fundamentales.</p> <p class="text-tertiary text-xl">Apertura al intercambio entre culturas, naciones y credos, sin renunciar a convicciones ni principios fundamentales.</p>
</div> </div>
</div> </div>

10
src/components/section/FooterSection.astro
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>

10
src/components/section/FormationSection.astro
View File

@ -1,13 +1,13 @@
--- ---
import { Icon } from "astro-icon/components"; import { Icon } from "astro-icon/components";
--- ---
<div id="programs" 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>
@ -27,7 +27,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>
@ -38,7 +38,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>

10
src/components/section/GridSection.astro
View File

@ -47,20 +47,12 @@ const cards = [
--- ---
<div> <div>
<div class="container mx-auto"> <div class="container mx-auto">
<div class="grid grid-cols-4"> <div class="grid grid-cols-2 md:grid-cols-4">
{ {
cards.map(card =>( cards.map(card =>(
<GridCard props={card} /> <GridCard props={card} />
)) ))
} }
<!-- <div class="aspect-square bg-neutral-200">1</div>
<div class="aspect-square">2</div>
<div class="aspect-square bg-neutral-200">3</div>
<div class="aspect-square">4</div>
<div class="aspect-square">5</div>
<div class="aspect-square bg-neutral-200">6</div>
<div class="aspect-square">7</div>
<div class="aspect-square bg-neutral-200">8</div> -->
</div> </div>
</div> </div>
</div> </div>

12
src/components/section/IdentitySection.astro
View File

@ -4,13 +4,13 @@ const { title, text, initTitle, colorText, bgColor } = Astro.props;
<div id="somos" class="container mx-auto"> <div id="somos" class="container mx-auto">
<div class={`grid grid-cols-12 ${bgColor}`}> <div class={`grid grid-cols-1 md:grid-cols-3 ${bgColor}`}>
<div class="bg-[#22523F] col-span-4 flex items-center justify-center bg-[url('/src/assets/mid-logo-2.webp')] bg-left"> <div class="bg-[#22523F] col-span-1 flex items-center justify-center bg-[url('/src/assets/mid-logo-2.webp')] bg-no-repeat bg-right md:bg-left">
<img src="/img/logo-metalico.webp" alt="Imagen de identidad del CPyJ" class="w-1/2" /> <img src="/img/logo-metalico.webp" alt="Imagen de identidad del CPyJ" class="w-1/4 my-8 md:w-1/2" />
</div> </div>
<div class={`flex flex-col ${colorText} col-span-8 gap-8 py-24 px-32`}> <div class={`flex flex-col ${colorText} col-span-2 gap-8 py-8 md:py-16 lg:py-24 px-8 sm:px-16 lg:px-32`}>
<h2 class="font-primary text-3xl font-bold">{initTitle}</h2> <h2 class="font-primary text-xl md:text-3xl font-bold">{initTitle}</h2>
<h2 class="font-secondary text-5xl font-bold">{title}</h2> <h2 class="font-secondary text-3xl md:text-5xl font-bold">{title}</h2>
<p class="text-lg font-primary leading-relaxed"><b>El Centro del Reino de Paz y Justicia</b> es una organización internacional conformada por <b>miles de voluntarios distribuidos en numerosos países</b>, que actúan de manera coordinada bajo el liderazgo y la guía del <b>Dr. José Benjamín Pérez Matos</b>, único referente del CPyJ.</p> <p class="text-lg font-primary leading-relaxed"><b>El Centro del Reino de Paz y Justicia</b> es una organización internacional conformada por <b>miles de voluntarios distribuidos en numerosos países</b>, que actúan de manera coordinada bajo el liderazgo y la guía del <b>Dr. José Benjamín Pérez Matos</b>, único referente del CPyJ.</p>
<p class="text-lg font-primary leading-relaxed">El Centro cuenta con presencia activa en distintos continentes, articulando personas, líderes, comunidades e instituciones que comparten una visión común: llevar los valores del Reino al espacio público y afrontar, con responsabilidad y convicción, los desafíos que atraviesa el mundo actual.</p> <p class="text-lg font-primary leading-relaxed">El Centro cuenta con presencia activa en distintos continentes, articulando personas, líderes, comunidades e instituciones que comparten una visión común: llevar los valores del Reino al espacio público y afrontar, con responsabilidad y convicción, los desafíos que atraviesa el mundo actual.</p>
<p class="text-lg font-primary leading-relaxed">El CPyJ nace con una misión clara: <b>tender puentes entre la fe y la acción en el ámbito público</b>, integrando reflexión espiritual, formación intelectual y compromiso práctico, con el objetivo de preparar el camino hacia una nueva era, marcada por un orden más justo, una paz verdadera y un mundo mejor, conforme a la visión profética.</p> <p class="text-lg font-primary leading-relaxed">El CPyJ nace con una misión clara: <b>tender puentes entre la fe y la acción en el ámbito público</b>, integrando reflexión espiritual, formación intelectual y compromiso práctico, con el objetivo de preparar el camino hacia una nueva era, marcada por un orden más justo, una paz verdadera y un mundo mejor, conforme a la visión profética.</p>

14
src/components/section/InfoSection.astro
View File

@ -7,19 +7,19 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
--- ---
<div class="container mx-auto"> <div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3"> <div class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-3">
{ infoboxes.map((box) => ( { infoboxes.map((box) => (
<BoxContainer props={box} /> <BoxContainer props={box} />
))} ))}
</div> </div>
<div class="grid grid-cols-3 h-auto bg-white w-full"> <div class="grid grid-cols-1 lg:grid-cols-3 h-auto bg-white w-full">
<div class="col-span-2 row-span-2 p-24 text-tertiary grid gap-8 "> <div class="lg:col-span-2 row-span-2 p-8 lg:p-24 text-tertiary grid gap-8 ">
<div class="grid gap-8"> <div class="grid gap-8">
<h2 class="font-secondary text-5xl font-bold">{title}</h2> <h2 class="font-secondary text-2xl lg:text-5xl font-bold">{title}</h2>
<Icon name="ph:minus" class="text-tertiary text-4xl" /> <Icon name="ph:minus" class="text-tertiary text-4xl" />
<p class="text-lg">El <b>Centro del Reino de Paz y Justicia (CPyJ)</b> es una organización de alcance <b>internacional dedicada a la formación, el diálogo estratégico y la acción pública, orientada a promover la justicia y la paz</b> conforme a los valores eternos proclamados por los profetas, con un compromiso explícito y permanente con Israel y su lugar central en la historia y el destino del mundo.</p> <p class="text-lg">El <b>Centro del Reino de Paz y Justicia (CPyJ)</b> es una organización de alcance <b>internacional dedicada a la formación, el diálogo estratégico y la acción pública, orientada a promover la justicia y la paz</b> conforme a los valores eternos proclamados por los profetas, con un compromiso explícito y permanente con Israel y su lugar central en la historia y el destino del mundo.</p>
</div> </div>
<div class="grid grid-cols-2 gap-8 text-lg leading-relaxed"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 text-lg leading-relaxed">
<p>El CPyJ desarrolla iniciativas educativas, espacios de reflexión profunda y acciones concretas en el ámbito público, integrando principios espirituales, responsabilidad institucional y liderazgo ético. Su labor se inscribe en el campo de la diplomacia pública, entendida como una herramienta legítima para influir en la conversación global, fortalecer vínculos entre naciones y defender valores fundamentales frente a los desafíos del presente y del futuro.</p> <p>El CPyJ desarrolla iniciativas educativas, espacios de reflexión profunda y acciones concretas en el ámbito público, integrando principios espirituales, responsabilidad institucional y liderazgo ético. Su labor se inscribe en el campo de la diplomacia pública, entendida como una herramienta legítima para influir en la conversación global, fortalecer vínculos entre naciones y defender valores fundamentales frente a los desafíos del presente y del futuro.</p>
<p>La paz no es concebida como una consigna abstracta ni como un ideal ingenuo, sino como el resultado de decisiones firmes, liderazgo con valores y compromiso sostenido con propósitos claros, que reconocen el rol insustituible de Israel en la construcción de un orden justo y estable para toda la humanidad.</p> <p>La paz no es concebida como una consigna abstracta ni como un ideal ingenuo, sino como el resultado de decisiones firmes, liderazgo con valores y compromiso sostenido con propósitos claros, que reconocen el rol insustituible de Israel en la construcción de un orden justo y estable para toda la humanidad.</p>
</div> </div>
@ -37,8 +37,8 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
sizeTitle: 'text-2xl', sizeTitle: 'text-2xl',
}} /> }} />
</div> </div>
<div class="col-span-1 py-38 px-24 bg-[#21523F]"> <div class="col-span-1 py-38 lg:px-24 bg-[#21523F]">
<img src="/img/logo-ligth.webp" alt="Logo del CPyJ"> <img src="/img/logo-ligth.webp" alt="Logo del CPyJ" class="w-1/3 lg:w-100 mx-auto">
</div> </div>
</div> </div>
</div> </div>

6
src/components/section/NewsSection.astro
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} />

6
src/components/section/ParticipateSection.astro
View File

@ -1,13 +1,13 @@
--- ---
--- ---
<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-2 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>

14
src/components/section/ProjectionSection.astro
View File

@ -9,10 +9,10 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
<div class="container mx-auto"> <div class="container mx-auto">
<div id="projection" class="grid grid-cols-3 bg-white w-full"> <div id="projection" class="grid lg:grid-cols-3 bg-white w-full">
<div class="row-span-2 col-span-2 p-24 text-tertiary"> <div class="row-span-2 lg:col-span-2 p-12 lg:p-24 text-tertiary">
<div class="flex flex-col gap-5 md:text-lg"> <div class="flex flex-col gap-5 md:text-lg">
<h2 class="font-secondary text-5xl font-bold">{title}</h2> <h2 class="font-secondary text-3xl lg:text-5xl font-bold">{title}</h2>
<Icon name="ph:minus" class="text-tertiary text-4xl" /> <Icon name="ph:minus" class="text-tertiary text-4xl" />
<p class="text-lg">El <strong>Centro del Reino de Paz y Justicia</strong> lleva adelante una activa política de diplomacia pública, entendida como la construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos, instituciones y liderazgos globales.</p> <p class="text-lg">El <strong>Centro del Reino de Paz y Justicia</strong> lleva adelante una activa política de diplomacia pública, entendida como la construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos, instituciones y liderazgos globales.</p>
<p><strong>A través de encuentros, giras internacionales, foros y relaciones institucionales, el CPyJ impulsa:</strong></p> <p><strong>A través de encuentros, giras internacionales, foros y relaciones institucionales, el CPyJ impulsa:</strong></p>
@ -24,7 +24,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
</ul> </ul>
<p>Esta proyección internacional posiciona al CPyJ como un <strong>actor relevante en el debate global sobre el futuro del mundo</strong>, la estabilidad internacional y la vigencia de los valores proféticos.</p> <p>Esta proyección internacional posiciona al CPyJ como un <strong>actor relevante en el debate global sobre el futuro del mundo</strong>, la estabilidad internacional y la vigencia de los valores proféticos.</p>
</div> </div>
<div class="grid grid-cols-2 gap-16 mt-12"> <div class="grid xl:grid-cols-2 gap-16 mt-12">
<GridCard props={{ <GridCard props={{
type: 'imgText', type: 'imgText',
bgColor: '#BEA48D', bgColor: '#BEA48D',
@ -42,7 +42,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
}} /> }} />
</div> </div>
</div> </div>
<div class="row-span-2 col-span-1 over bg-[#CBA16A] relative"> <div class="hidden lg:block row-span-2 col-span-full lg:col-span-1 over bg-[#CBA16A] relative">
<div class="relative"> <div class="relative">
<BoxContainer props={{ <BoxContainer props={{
bgImage: '../src/assets/dove-bg.webp', bgImage: '../src/assets/dove-bg.webp',
@ -52,8 +52,8 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
<img src="/img/logo-ligth.webp" class="w-1/2 mx-auto" alt="Logo del CPyJ"> <img src="/img/logo-ligth.webp" class="w-1/2 mx-auto" alt="Logo del CPyJ">
</div> </div>
</div> </div>
<div class="bg-[#22523F] object-cover pt-64 justify-end flex"> <div class="hidden lg:flex bg-[#22523F] object-cover pt-64 justify-end ">
<img src="/img/DRJBP-1.webp" class="h-full object-cover opacity-20" /> <img src="/img/DRJBP-1.webp" class="h-full object-cover" />
</div> </div>
</div> </div>

6
src/components/section/TitleSection.astro
View File

@ -3,10 +3,10 @@ import { Icon } from 'astro-icon/components'
const { title } = Astro.props; const { title } = Astro.props;
--- ---
<div class="py-20 bg-white"> <div class="py-16 bg-white">
<div class="container mx-auto"> <div class="container mx-auto">
<div class="flex justify-between"> <div class="flex justify-between px-4">
<h2 class="text-tertiary font-secondary text-6xl font-bold">{title}</h2> <h2 class="text-tertiary font-secondary text-xl sm:text-2xl md:text-3xl lg:text-5xl font-bold">{title}</h2>
<Icon name="logo" class="text-6xl" /> <Icon name="logo" class="text-6xl" />
</div> </div>
</div> </div>

2
src/pages/index.astro
View File

@ -68,8 +68,6 @@ const carouselImages3 = [
<ProjectionSection title="Diplomacia Pública y Proyección Internacional" /> <ProjectionSection title="Diplomacia Pública y Proyección Internacional" />
<!-- Diplomacia -->
<FormationSection /> <FormationSection />
<CarouselSection images={carouselImages2} /> <CarouselSection images={carouselImages2} />

10
src/pages/news/[id].astro
View File

@ -21,19 +21,19 @@ const { Content } = await render(post);
--- ---
<MainLayout> <MainLayout>
<div class="container mx-auto py-16"> <!-- <div class="container mx-auto py-16">
<Header /> <Header />
</div> </div> -->
<TitleSection title={post.data.title} /> <TitleSection title={post.data.title} />
<div class="container mx-auto"> <div class="container mx-auto">
{post.data.gallery && <CarouselSection images={post.data.gallery} />} {post.data.gallery && <CarouselSection images={post.data.gallery} />}
<div class="grid grid-cols-10"> <div class="grid md:grid-cols-10">
<div class="col-span-7 bg-white p-20 prose-p:mb-4"> <div class="md:col-span-7 bg-white p-8 md:p-20 prose-p:mb-4">
<Content /> <Content />
</div> </div>
<div class="col-span-3 bg-tertiary"> <div class="md:col-span-3 bg-tertiary">
{ post.data.youtube && ( { post.data.youtube && (
<YouTube id={post.data.youtube} /> <YouTube id={post.data.youtube} />

1
src/styles/global.css
View File

@ -21,5 +21,4 @@
body { body {
font-family: var(--font-primary); font-family: var(--font-primary);
background-color: var(--background); background-color: var(--background);
min-height: 1080px;
} }