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

Adding responsive options to all sections

This commit is contained in:
Julio Ruiz 2026-02-12 02:02:09 -05:00
parent feee83f2f7
commit 2da2e29f9a
13 changed files with 54 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/BaseHead.astro
View File

@ -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>

4
src/components/BoxContainer.astro
View File

@ -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 && (

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

@ -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>
)}

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="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>

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

@ -6,6 +6,6 @@ console.log( 'Props', bgColor )
<div 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>

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

@ -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>

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

@ -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>

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

@ -4,13 +4,13 @@ const { title, text, initTitle, colorText, bgColor } = Astro.props;
<div 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>

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="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>
@ -36,8 +36,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>

12
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="grid grid-cols-3 bg-white w-full">
<div class="row-span-2 col-span-2 p-24 text-tertiary">
<div 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,7 +52,7 @@ 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">
<div class="hidden lg:flex bg-[#22523F] object-cover pt-64 justify-end ">
<img src="/img/DRJBP-2.webp" class="h-full object-cover" />
</div>
</div>

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

@ -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>

4
src/pages/index.astro
View File

@ -33,7 +33,7 @@ const carouselImages3 = [
---
<MainLayout>
<HeroHome />
<!-- <HeroHome /> -->
<InfoSection bgColor="bg-white" title="Construyendo el mundo soñado por los profetas: justicia y paz para Israel y toda la humanidad" data={infoboxes} />
@ -67,8 +67,6 @@ const carouselImages3 = [
<ProjectionSection title="Diplomacia Pública y Proyección Internacional" />
<!-- Diplomacia -->
<FormationSection />
<CarouselSection images={carouselImages2} />

1
src/styles/global.css
View File

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