feat(ui): add imgText card type and update projection section layout

Add new imgText card type to GridCard component with icon and side-by-side image layout. Update ProjectionSection to use grid-cols-12 layout with integrated GridCard components for international projection content. Include two new image assets supporting the new card display format.

src/components/cards/GridCard.astro

@@ -6,7 +6,8 @@ const { props } = Astro.props;
 const imageUrl = props.image || ''
 //const bgClass = props.type === 'text'? `bg-[${props.bgColor}]` : `bg-[url(${props.image})] bg-cover`
 ---
-<div class="aspect-square overflow-hidden">
+{props.type !== 'imgText' && (
+    <div class="aspect-square overflow-hidden">
     <div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}>
         { props.type === 'text' && (
             <div class="p-16">
@@ -21,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/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>
-        <div class="col-span-1 h-full bg-[#CBA16A]">
+        <div class="col-span-4 over h-full bg-[#CBA16A]">
             <BoxContainer props={{
                 bgImage: '../src/assets/dove-bg.webp',
                 bgColor: '#CBA16A',
             }} />
+            <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">
+                <img src="/src/assets/logo-ligth.webp" class="w-1/2" alt="Logo del CPyJ">
+            </div>
         </div>
-        <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" alt="Logo del CPyJ">
-        </div>
     </div>
 </div>