Compare commits
5 Commits
c02bca3e28
...
d17bca09b1
| Author | SHA1 | Date |
|---|---|---|
Julio Ruiz
|
d17bca09b1 | |
|
Julio Ruiz
|
75212c8862 | |
|
Julio Ruiz
|
c572050d02 | |
|
Julio Ruiz
|
c18af4a224 | |
|
Julio Ruiz
|
2da2e29f9a |
|
|
@ -1,18 +1,14 @@
|
|||
---
|
||||
const {
|
||||
title = "Centro del Reino de Paz y Justicia",
|
||||
description =""
|
||||
} = Astro.props;
|
||||
const { title = "Centro del Reino de Paz y Justicia", description = "" } =
|
||||
Astro.props;
|
||||
---
|
||||
|
||||
<template>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<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} />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
</head>
|
||||
</template>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
---
|
||||
≈---
|
||||
const { props } = Astro.props;
|
||||
import { Icon } from "astro-icon/components";
|
||||
import Button from "./ui/Button.astro";
|
||||
|
|
@ -6,7 +6,7 @@ import Button from "./ui/Button.astro";
|
|||
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">
|
||||
{props.hasIcon && (
|
||||
|
|
|
|||
|
|
@ -3,17 +3,16 @@ import Button from "./ui/Button.astro";
|
|||
---
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between py-4">
|
||||
<div class="md:flex justify-between px-8 md:px-0 md:py-4">
|
||||
<div class="border-l-4 border-primary pl-4">
|
||||
<p class="font-secondary text-primary font-bold leading-none py-2 text-md">
|
||||
Centro del Reino<br /> De Paz y Justicia
|
||||
<p class="font-secondary text-primary font-bold leading-none py-2 text-3xl md:text-lg">
|
||||
<a href="/">Centro del Reino<br /> De Paz y Justicia</a>
|
||||
</p>
|
||||
</div>
|
||||
<nav
|
||||
class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
|
||||
>
|
||||
<div class="flex gap-8 font-primary font-bold">
|
||||
<a class="hover:text-primary transition" href="/">Inicio</a>
|
||||
<div class="hidden md:flex gap-8 font-primary font-bold">
|
||||
<a class="hover:text-primary transition" href="#somos">Somos</a>
|
||||
<a class="hover:text-primary transition" href="#programs">Programas</a>
|
||||
<a class="hover:text-primary transition" href="#news">Noticias</a>
|
||||
|
|
|
|||
|
|
@ -6,34 +6,32 @@ import Header from './Header.astro';
|
|||
<div class="top-16 relative mb container mx-auto">
|
||||
<Header />
|
||||
</div>
|
||||
<div class="h-screen max-h-[1080px] container bg-[url(/img/DRJBP-1.webp)] bg-no-repeat bg-contain bg-bottom mx-auto mt-16">
|
||||
<div class="h-screen pb-20 max-h-[700px] sm:max-h-[900px] md:max-h-[1080px] container bg-[url(/img/DRJBP-1.webp)] bg-no-repeat bg-contain bg-bottom mx-auto mt-16">
|
||||
|
||||
<div class="grid grid-cols-2 h-full">
|
||||
<div class="gap-8 flex flex-col justify-end">
|
||||
<div>
|
||||
<div class="grid md:grid-cols-2 h-full px-6">
|
||||
<div class="gap-8 md:flex flex-col justify-end">
|
||||
<img
|
||||
src="/img/logo-metalico.webp"
|
||||
alt="Logo Metalico"
|
||||
class="w-58 mb-4"
|
||||
class="w-20 sm:24 md:w-32 lg:w-58 mb-4 mt-0"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-primary font-semibold font-secondary mb-24 mt-40">
|
||||
<h1 class="text-6xl mb-8">
|
||||
<div class="text-primary font-semibold font-secondary sm:mb-24 mt-8">
|
||||
<h1 class="text-3xl md:text-6xl sm:mb-8">
|
||||
Dr. José Benjamín<br /> Pérez Matos
|
||||
</h1>
|
||||
<h6 class="font-primary font-light uppercase text-white">Lider Fundador</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-end items-end gap-8">
|
||||
<div class="order-first md:order-last flex flex-col md:justify-end items-end gap-8 ">
|
||||
<div
|
||||
class="w-1/2 font-primary font-medium text-2xl text-primary gap-8 flex flex-col justify-end mb-24"
|
||||
class="md:w-1/2 font-primary font-medium text-2xl text-primary gap-8 flex flex-col justify-end mb-24"
|
||||
>
|
||||
<h2 class="text-[#EAE6D2]">
|
||||
<h2 class="text-[#EAE6D2] text-lg py-8">
|
||||
“El sueño de mi vida es ver cumplida la visión de los
|
||||
profetas: un mundo de justicia y paz para el bien de
|
||||
Israel y de toda la humanidad.”
|
||||
</h2>
|
||||
<div class="w-16 self-end mt-64">
|
||||
<div class="w-16 self-end md:mt-64">
|
||||
<img
|
||||
src="/img/white-dove.webp"
|
||||
alt="White Dove"
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ const imageUrl = props.image || ''
|
|||
<div class="aspect-square overflow-hidden">
|
||||
<div class={`flex flex-col justify-center h-full bg-[${props.bgColor}]`}>
|
||||
{ props.type === 'text' && (
|
||||
<div class="p-16 flex flex-col justify-between h-full">
|
||||
<Icon name={props.icon} class={`text-8xl text-[${textColor}]`} />
|
||||
<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}] hidden lg:block`} />
|
||||
<p class={`text-[${textColor}]`}>{props.text}</p>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ const { title, titleColor, description, descColor, bgColor } = Astro.props;
|
|||
---
|
||||
|
||||
<div class={`container mx-auto ${bgColor}`}>
|
||||
<div class="grid grid-cols-12">
|
||||
<div class={`col-span-8 p-24 h-82 space-y-5 ${descColor}`}>
|
||||
<div class="grid grid-cols-3 relative">
|
||||
<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>
|
||||
<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 class="col-span-4 bg-secondary flex items-end self-end justify-center h-82 overflow-visible">
|
||||
<img src="/img/DRJBP-1.webp" class="w-92 h-98 object-contain" alt="">
|
||||
<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-48 sm:w-64 lg:w-76 object-contain absolute bottom-0" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@ console.log( 'Props', bgColor )
|
|||
<div id={id} class={`bg-[${bgColor}] py-20`}>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -4,8 +4,8 @@ import { Icon } from "astro-icon/components";
|
|||
const { props } = Astro.props;
|
||||
---
|
||||
<div class="container mx-auto">
|
||||
<div class="grid grid-cols-2 min-h-100">
|
||||
<div class="bg-[#EBE5D0] p-24 grid grid-cols-2">
|
||||
<div class="grid md:grid-cols-2 min-h-100">
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -14,7 +14,7 @@ const { props } = Astro.props;
|
|||
<Icon name="icon_justice_1" class="text-9xl text-tertiary self-end" />
|
||||
</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">
|
||||
<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>
|
||||
|
|
@ -24,17 +24,17 @@ const { props } = Astro.props;
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3">
|
||||
<div class="bg-tertiary p-24 flex justify-between flex-col min-h-full aspect-square">
|
||||
<h2 class="text-5xl font-secondary font-bold text-white">Servicio con Propósito</h2>
|
||||
<div class="grid lg:grid-cols-3">
|
||||
<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-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>
|
||||
</div>
|
||||
<div class="bg-[#BEA48D] p-24 flex justify-between flex-col min-h-full aspect-square">
|
||||
<h2 class="text-5xl font-secondary font-bold text-tertiary">Excelencia</h2>
|
||||
<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-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>
|
||||
</div>
|
||||
<div class="bg-[#22523F] p-24 flex justify-between flex-col min-h-full aspect-square">
|
||||
<h2 class="text-5xl font-secondary font-bold text-tertiary">Diálogo Estratégico</h2>
|
||||
<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-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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@ import jbp from "../../assets/DRJBP-1.webp";
|
|||
---
|
||||
<div class="bg-[#22523F]">
|
||||
<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
|
||||
src={jbp.src}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<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">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">
|
||||
<form action="">
|
||||
|
|
@ -43,7 +43,7 @@ import jbp from "../../assets/DRJBP-1.webp";
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
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">
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -27,7 +27,7 @@ import { Icon } from "astro-icon/components";
|
|||
</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" />
|
||||
<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 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" />
|
||||
<h4 class="text-[#003421] font-bold text-2xl mb-12">Proyectos de Acción</h4>
|
||||
|
||||
|
|
|
|||
|
|
@ -47,20 +47,12 @@ const cards = [
|
|||
---
|
||||
<div>
|
||||
<div class="container mx-auto">
|
||||
<div class="grid grid-cols-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4">
|
||||
{
|
||||
cards.map(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>
|
||||
|
|
@ -4,13 +4,13 @@ const { title, text, initTitle, colorText, bgColor } = Astro.props;
|
|||
|
||||
<div id="somos" class="container mx-auto">
|
||||
|
||||
<div class={`grid grid-cols-12 ${bgColor}`}>
|
||||
<div class="bg-[#22523F] col-span-4 flex items-center justify-center bg-[url('/src/assets/mid-logo-2.webp')] bg-left">
|
||||
<img src="/img/logo-metalico.webp" alt="Imagen de identidad del CPyJ" class="w-1/2" />
|
||||
<div class={`grid grid-cols-1 md:grid-cols-3 ${bgColor}`}>
|
||||
<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/4 my-8 md:w-1/2" />
|
||||
</div>
|
||||
<div class={`flex flex-col ${colorText} col-span-8 gap-8 py-24 px-32`}>
|
||||
<h2 class="font-primary text-3xl font-bold">{initTitle}</h2>
|
||||
<h2 class="font-secondary text-5xl font-bold">{title}</h2>
|
||||
<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-xl md:text-3xl font-bold">{initTitle}</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">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>
|
||||
|
|
|
|||
|
|
@ -7,19 +7,19 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
|||
---
|
||||
|
||||
<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) => (
|
||||
<BoxContainer props={box} />
|
||||
))}
|
||||
</div>
|
||||
<div class="grid 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="grid grid-cols-1 lg:grid-cols-3 h-auto bg-white w-full">
|
||||
<div class="lg:col-span-2 row-span-2 p-8 lg:p-24 text-tertiary 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" />
|
||||
<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 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>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>
|
||||
|
|
@ -37,8 +37,8 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
|||
sizeTitle: 'text-2xl',
|
||||
}} />
|
||||
</div>
|
||||
<div class="col-span-1 py-38 px-24 bg-[#21523F]">
|
||||
<img src="/img/logo-ligth.webp" alt="Logo del CPyJ">
|
||||
<div class="col-span-1 py-38 lg:px-24 bg-[#21523F]">
|
||||
<img src="/img/logo-ligth.webp" alt="Logo del CPyJ" class="w-1/3 lg:w-100 mx-auto">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import { getCollection, getEntry } from "astro:content";
|
|||
import NewsCard from "../cards/NewsCard.astro";
|
||||
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">
|
||||
<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) => (
|
||||
<NewsCard data={item} />
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
---
|
||||
<div class="bg-[#CBA16A] py-20">
|
||||
<div class="bg-[#CBA16A] py-12 lg:py-20">
|
||||
<div class="container mx-auto">
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<h5 class="font-bold mb-6">Voluntariado:</h5>
|
||||
<p>colaboración en proyectos formativos, institucionales o internacionales.</p>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
|||
|
||||
<div class="container mx-auto">
|
||||
|
||||
<div id="projection" class="grid grid-cols-3 bg-white w-full">
|
||||
<div class="row-span-2 col-span-2 p-24 text-tertiary">
|
||||
<div id="projection" class="grid lg:grid-cols-3 bg-white w-full">
|
||||
<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">
|
||||
<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" />
|
||||
<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>
|
||||
|
|
@ -24,7 +24,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
|||
</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>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-16 mt-12">
|
||||
<div class="grid xl:grid-cols-2 gap-16 mt-12">
|
||||
<GridCard props={{
|
||||
type: 'imgText',
|
||||
bgColor: '#BEA48D',
|
||||
|
|
@ -42,7 +42,7 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
|
|||
}} />
|
||||
</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">
|
||||
<BoxContainer props={{
|
||||
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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[#22523F] object-cover pt-64 justify-end flex">
|
||||
<img src="/img/DRJBP-1.webp" class="h-full object-cover opacity-20" />
|
||||
<div class="hidden lg:flex bg-[#22523F] object-cover pt-64 justify-end ">
|
||||
<img src="/img/DRJBP-1.webp" class="h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import { Icon } from 'astro-icon/components'
|
|||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
<div class="py-20 bg-white">
|
||||
<div class="py-16 bg-white">
|
||||
<div class="container mx-auto">
|
||||
<div class="flex justify-between">
|
||||
<h2 class="text-tertiary font-secondary text-6xl font-bold">{title}</h2>
|
||||
<div class="flex justify-between px-4">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -68,8 +68,6 @@ const carouselImages3 = [
|
|||
|
||||
<ProjectionSection title="Diplomacia Pública y Proyección Internacional" />
|
||||
|
||||
<!-- Diplomacia -->
|
||||
|
||||
<FormationSection />
|
||||
|
||||
<CarouselSection images={carouselImages2} />
|
||||
|
|
|
|||
|
|
@ -21,19 +21,19 @@ const { Content } = await render(post);
|
|||
---
|
||||
|
||||
<MainLayout>
|
||||
<div class="container mx-auto py-16">
|
||||
<!-- <div class="container mx-auto py-16">
|
||||
<Header />
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<TitleSection title={post.data.title} />
|
||||
|
||||
<div class="container mx-auto">
|
||||
{post.data.gallery && <CarouselSection images={post.data.gallery} />}
|
||||
<div class="grid grid-cols-10">
|
||||
<div class="col-span-7 bg-white p-20 prose-p:mb-4">
|
||||
<div class="grid md:grid-cols-10">
|
||||
<div class="md:col-span-7 bg-white p-8 md:p-20 prose-p:mb-4">
|
||||
<Content />
|
||||
</div>
|
||||
<div class="col-span-3 bg-tertiary">
|
||||
<div class="md:col-span-3 bg-tertiary">
|
||||
{ post.data.youtube && (
|
||||
<YouTube id={post.data.youtube} />
|
||||
|
||||
|
|
|
|||
|
|
@ -21,5 +21,4 @@
|
|||
body {
|
||||
font-family: var(--font-primary);
|
||||
background-color: var(--background);
|
||||
min-height: 1080px;
|
||||
}
|
||||
Loading…
Reference in New Issue