Merge pull request 'Added Columns section' (#3) from feature/ColumnsSection into main

Reviewed-on: #3

src/components/cards/GridCard.astro

@@ -3,13 +3,30 @@ import { Icon } from "astro-icon/components";
 
 const { props } = Astro.props;
 
-const bgClass = props.type === 'text'? `bg-[${props.bgColor}]` : `bg-[url(${props.image})] bg-cover`
+const imageUrl = props.image || ''
+//const bgClass = props.type === 'text'? `bg-[${props.bgColor}]` : `bg-[url(${props.image})] bg-cover`
 ---
-<div class="aspect-square">
+<div class="aspect-square overflow-hidden">
-    <div class={`flex flex-col justify-between h-full p-16 ${bgClass}`}>
+    <div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}>
         { props.type === 'text' && (
+            <div class="p-16">
                 <Icon name={props.icon} class="text-8xl" />
                 <p>{props.text}</p>
+            </div>
+        )}
+        { props.type === 'image' && (
+        <div class="object-cover aspect-square flex">
+            <img src={props.image} alt="" />
+        </div>
         )}
     </div>
 </div>
+
+<style define:vars={{ imageUrl }}>
+  .gridcard {
+    /* Use the CSS variable in the background-image property */
+    background-image: url(var(--imageUrl));
+    background-size: cover;
+    background-position: center;
+  }
+</style>

src/components/section/ColumnsSection.astro

@@ -0,0 +1,41 @@
+---
+import { Icon } from "astro-icon/components";
+
+const { props } = Astro.props;
+---
+<div class="container mx-auto">
+    <div class="grid grid-cols-2 min-h-[400px]">
+        <div class="bg-[#EBE5D0] p-24 grid grid-cols-2">
+            <div class="leftcol flex justify-between flex-col min-h-full">
+                <h2 class="text-5xl font-secondary font-bold">Justicia</h2>
+                <p  >Compromiso activo con un orden justo, basado en principios morales, respeto por la dignidad humana y defensa de valores permanentes.</p>
+            </div>
+            <div class="rightcol flex justify-end align-bottom min-h-full ">
+                <Icon name="ph:scales-thin" class="text-9xl" />
+            </div>
+        </div>
+        <div class="bg-[#003421] p-24 grid 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]">Coherencia entre pensamiento, palabra y acción; transparencia institucional y respon- sabilidad en el espacio público.</p>
+            </div>
+            <div class="rightcol flex justify-end align-bottom min-h-full ">
+                <Icon name="ph:brain-thin" class="text-[#EBE5D0] text-9xl" />
+            </div>
+        </div>
+    </div>
+    <div class="grid grid-cols-3">
+        <div class="bg-[#003421] 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>
+            <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-[#003421]">Excelencia</h2>
+            <p class="text-xl text-[#003421]">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-[#003421]">Diálogo Estratégico</h2>
+            <p>Apertura al intercambio entre culturas, naciones y credos, sin renunciar a convicciones ni principios fundamentales.</p>
+        </div>
+    </div>
+</div>

src/components/section/GridSection.astro

@@ -10,7 +10,7 @@ const cards = [
     },
     {
         type: 'image',
-        image: 'https://picsum.photos/600/600?random=1&grayscale',
+        image: 'https://ik.imagekit.io/crpy/grid_image_1.webp',
     },
     {
         type: 'text',
@@ -20,11 +20,11 @@ const cards = [
     },
     {
         type: 'image',
-        image: 'https://picsum.photos/600/600?random=1&grayscale',
+        image: 'https://ik.imagekit.io/crpy/grid_image_2.webp',
     },
     {
         type: 'image',
-        image: 'https://picsum.photos/600/600?random=1&grayscale',
+        image: 'https://ik.imagekit.io/crpy/grid_image_3.webp',
     },
     {
         type: 'text',
@@ -34,7 +34,7 @@ const cards = [
     },
     {
         type: 'image',
-        image: 'https://picsum.photos/600/600?random=1&grayscale',
+        image: 'https://ik.imagekit.io/crpy/grid_image_4.webp',
     },
     {
         type: 'text',
@@ -48,7 +48,7 @@ const cards = [
     <div class="container mx-auto">
         <div class="grid grid-cols-4">
             {
-                cards.map((card)=>(
+                cards.map(card =>(
                     <GridCard props={card} />
                 ))
             }

src/pages/index.astro

@@ -13,6 +13,7 @@ import { infoboxes } from "../data/content/infosection.js";
 import ColorSection from "../components/section/ColorSection.astro";
 import TitleSection from "../components/section/TitleSection.astro";
 import GridSection from "../components/section/GridSection.astro";
+import ColumnsSection from "../components/section/ColumnsSection.astro";
 
 const carouselImages2 = [
   "https://picsum.photos/1920/800?random=1&grayscale",
@@ -42,12 +43,10 @@ El CPyJ nace con una misión clara: tender puentes entre la fe y la acción en
 
 Su mirada es estratégica, internacional y orientada al futuro, consciente de los conflictos emergentes, las tensiones culturales, los desafíos geopolíticos y la necesidad de liderazgos sólidos capaces de actuar con claridad en tiempos de transformación global.` />
 
-  <CarouselSection images={carouselImages2} />
+  <TitleSection title="Dr. José Benjamín Pérez Matos | Trayectoria" />
 
   <GridSection />
 
-  <TitleSection title="Dr. José Benjamín Pérez Matos | Trayectoria" />
-
   <ColorSection
     bgColor="#22523F"
     titleColor="text-[#ffffff]"
@@ -64,10 +63,14 @@ Su mirada es estratégica, internacional y orientada al futuro, consciente de lo
 
   <TitleSection title="Valores Intitucionales" />
 
+  <ColumnsSection />
+
+  <!-- Diplomacia -->
+
+  <!-- Formacion -->
+
   <CarouselSection images={carouselImages2} />
 
-
-
   <NewsSection />
 
   <ParticipateSection />