Merge branch 'main' of https://gitea.carpa.com/LGCC/cdrdpyj

# Conflicts:
#	src/components/cards/GridCard.astro

src/components/cards/GridCard.astro

@@ -22,6 +22,22 @@ const imageUrl = props.image || ''
         )}
     </div>
 </div>
+)}
+
+
+{ props.type === 'imgText' && (
+    <div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}>
+        <div class="grid grid-cols-1 gap-0 p-8 font-bold">
+            <div class="px-12 py-10">
+                <Icon name={props.icon} class="text-3xl" />
+                <p class="font-primary text-xl">{props.text}</p>
+            </div>
+                <div class="object-cover aspect-square flex">
+                <img class="w-full h-auto object-cover" src={props.image} alt="" />
+                </div>
+        </div>
+    </div>
+)}
 
 <style define:vars={{ imageUrl }}>
   .gridcard {

src/components/section/ParticipateSection.astro

@@ -2,28 +2,30 @@
 ---
 <div class="bg-[#CBA16A] py-20">
     <div class="container mx-auto">
-    <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 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-white text-6xl font-bold text-center font-secondary mb-4">Sumarse es asumir un compromiso con propósito</h2>
+    <h2 class="text-tertiary text-6xl font-bold text-center font-secondary mb-4">Sumarse es asumir un compromiso con propósito</h2>
 
-    <p>La labor del CPyJ 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 gap-20 my-20">
+    <div class="grid grid-cols-3 w-3/4 justify-center mx-auto gap-20 my-20">
-        <div class="border-1 border-white p-8">
+        <div class="border-1 border-white text-lg p-8 text-tertiary">
-            <h5>Voluntariado:</h5>
+            <h5 class="font-bold mb-6">Voluntariado:</h5>
             <p>colaboración en proyectos formativos, institucionales o internacionales.</p>
         </div>
 
-        <div class="border-1 border-white p-8">
+        <div class="border-1 border-white p-8 text-tertiary">
-            <h5>Aportes y donaciones:</h5>
+            <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">
+        <div class="border-1 border-white p-8 text-tertiary">
-            <h5>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>
         </div>
     </div>
+    <div class="flex justify-center">
+            <p class="text-tertiary text-xl px-12 font-bold mx-auto">La paz se construye mediante decisiones responsables, liderazgo comprometido y acción sostenida.</p>
 
-    <p>La paz se construye mediante decisiones responsables, liderazgo comprometido y acción sostenida.</p>
+    </div>
 </div>
 </div>

src/components/section/ProjectionSection.astro

@@ -1,5 +1,6 @@
 ---
 import { infoboxes } from "../../data/content/infosection.js";
+import GridCard from "../cards/GridCard.astro";
 import BoxContainer from "../BoxContainer.astro";
 import { Icon } from "astro-icon/components";
 
@@ -8,8 +9,8 @@ const { bgColor, titleColor, textColor, title, text } = Astro.props;
 
 <div class="container mx-auto">
 
-    <div class="grid grid-cols-3 h-auto bg-white w-full">
+    <div class="grid grid-cols-12 overflow-hidden bg-white w-full">
-        <div class="col-span-2 row-span-2 p-24 text-tertiary grid gap-8 ">
+        <div class="row-span-2 col-span-8 p-24 text-tertiary grid gap-8 ">
             <div class="grid gap-5 md:text-lg">
                 <h2 class="font-secondary text-5xl font-bold">{title}</h2>
                 <Icon name="ph:minus" class="text-tertiary text-4xl" />
@@ -23,15 +24,34 @@ 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">
+                    <GridCard props={{
+                        type: 'imgText',
+                        bgColor: '#BEA48D',
+                        icon: 'ph:minus',
+                        image: '/src/assets/JBP-MBM.webp',
+                        text: 'La vinculación con líderes políticos, académicos y sociales.'
+
+                    }} />
+                <GridCard props={{
+                        bgColor: '#BEA48D',
+                        type: 'imgText',
+                        image: '/src/assets/pueblo-judio.webp',
+                        icon: 'ph:minus',
+                        text: 'Apoyo claro y permanente al pueblo judío y al Estado de Israel'
+                    }} />
             </div>
-        <div class="col-span-1 h-full bg-[#CBA16A]">
+            
+        </div>
+        <div class="col-span-4 over h-full bg-[#CBA16A]">
             <BoxContainer props={{
                 bgImage: '../src/assets/dove-bg.webp',
                 bgColor: '#CBA16A',
             }} />
-        </div>
+            <div class="col-span-1 py-38 px-24 flex items-start relative justify-center bg-[#22523F] h-full bg-[url('/src/assets/DRJBP-2.webp')] bg-no-repeat bg-center">
-        <div class="col-span-1 py-38 px-24 bg-[#22523F] bg-[url('/src/assets/DRJBP-2.webp')] bg-cover bg-center">
+                <img src="/src/assets/logo-ligth.webp" class="w-1/2" alt="Logo del CPyJ">
-            <img src="/src/assets/logo-ligth.webp" alt="Logo del CPyJ">
             </div>
         </div>
+        
+    </div>
 </div>