added contet to infosection

src/components/BoxContainer.astro

@@ -3,18 +3,33 @@ const { props } = Astro.props;
 import { Icon } from "astro-icon/components";
 import Button from "./ui/Button.astro";
 
+const background = props.bgImage || props.bgColor;
+
 ---
-<div class={`aspect-square bg-[${props.bgColor}] p-4`}>
+<div style={{ background: props.bgImage ? `url('${props.bgImage}') center/cover no-repeat` : props.bgColor }} class={`aspect-square bg-cover py-12 px-16 flex flex-col justify-evenly`}>
-    <!-- <Icon name="ph:" /> -->
+
-    <h2 class={`text-[${props.titleColor}] font-bold`}>{props.title}</h2>
+     <div class="flex flex-col gap-6">
-    <p class={`text-[${props.textColor}] text-lg`}>{props.copy}</p>
+        {props.hasIcon && (
+        <div class="flex justify-start">
+            <Icon name="ph:minus" class={`w-12 h-12 ${props.titleColor}`} />
+        </div>
+    )}
+        <h2 class={`${props.titleColor} font-bold ${props.sizeTitle} `}>{props.title}</h2>
+        <p class={`${props.textColor} ${props.sizeText}`}>{props.copy}</p>
+     </div>
+    
     
     {props.hasButton && (
-        <Button url="#" variant="primary" title="Leer Más" />
+        <div class=" flex self-start">
+            <Button class="px-6 py-3 uppercase" url="#" variant="primary" title={props.buttonLabel} />
+        </div>
     )}
 
     {props.hasInput && (
-        <input type="text" placeholder="Yay"/>
+        <div class="flex border gap-2 w-full">
+            <input type="email" placeholder="Correo" class="flex-1 p-2 min-w-0 outline-none"/>
+            <Button class="px-6 py-3 uppercase" variant="secondary" title={props.buttonLabel} />
+        </div>
     )}
     </div>
 </div>

src/components/Header.astro

@@ -19,7 +19,7 @@ import Button from "./ui/Button.astro";
         <a href="#">Noticias</a>
       </div>
       <div class="w-50">
-        <Button title="Contacto" url="/contacto" variant="primary" />
+        <Button class="px-8 py-2 uppercase" title="Contacto" url="/contacto" variant="primary" />
       </div>
     </nav>
   </div>

src/components/section/InfoSection.astro

@@ -1,6 +1,7 @@
 ---
 import { infoboxes } from "../../data/content/infosection.js";
 import BoxContainer from "../BoxContainer.astro";
+import { Icon } from "astro-icon/components";
 
 const { data } = Astro.props;
 ---
@@ -8,8 +9,20 @@ const { data } = Astro.props;
 <div class="container mx-auto">
     <div class="grid grid-cols-3">
         { infoboxes.map((box) => (
-            <BoxContainer props={box} />    
+            <BoxContainer  props={box} />    
         ))}
     </div>
-
+    <div class="grid grid-cols-3 bg-white w-full">
+        <div class="col-span-2 row-span-2 p-20 grid grid-rows-3 gap-8">
+            <h2 class="font-secondary text-5xl text-tertiary font-bold">Construyendo el mundo soñado por los profetas: justicia y paz para Israel y toda la humanidad</h2>
+            <Icon name="ph:minus" class="text-tertiary text-4xl" />
+            <p>El Centro del Reino de Paz y Justicia (CPyJ) es una organización de alcance 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 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 class="grid grid-cols-2 gap-8">
+                <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>
+        </div>
+        <div class="col-span-1 bg-primary"></div>
+        <div class="col-span-1 bg-tertiary"></div>
+    </div>
 </div>

src/components/ui/Button.astro

@@ -1,12 +1,13 @@
 ---
-const { variant = "primary", title = "Botón", url = "#" } = Astro.props as {
+const { variant = "primary", title = "Botón", url = "#", class: className } = Astro.props as {
     variant?: Variant;
     title?: string;
     url?: string;
+    class?: string;
 };
 const variants = {
-    primary: "bg-[#EBE6D2] text-[#22523F] hover:bg-[#EBE6D2]/90 rounded-none w-full",
+    primary: "bg-[#EBE6D2] text-[#22523F] hover:bg-[#EBE6D2]/90 rounded-none",
-    secondary: "bg-blue-700",
+    secondary: "bg-[#22523F] text-[#EBE6D2] hover:bg-[#22523F]/90 uppercase rounded-none",
     light: "bg-green-100",
 } as const;
 
@@ -14,10 +15,6 @@ type Variant = keyof typeof variants;
 
 const styles = variants[variant];
 ---
-
+<button class={`${styles} font-bold transition block text-center ${className || ''}`}>
-<a
+    <a href={url} class="inline-block w-full h-full">{title}</a>
-    href={url}
+</button>
-    class={`${styles} px-4 py-2 rounded-md font-bold transition block text-center`}
->
-    {title}
-</a>

src/data/content/infosection.js

@@ -1,32 +1,52 @@
 export const infoboxes = [
   {
-    title: 'Caja 1',
+    title: 'Diplomacia Pública y\nproyección Internacional',
-    copy: 'Lorem ipsum dolor sit amet',
+    copy: 'Construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos',
     bgColor: '#CBA16A',
-    titleColor: '#003421',
+    sizeTitle: 'text-2xl',
-    textColor: '#003421',
+    titleColor: 'text-[#1F5349]',
-    buttonBgColor: '',
+    textColor: 'text-[#003421]',
-    buttonLabelColor: '',
+    sizeText: 'text-xl',
-    buttonLabel: '',
+    buttonLabel: 'Leer más',
     hasButton: true,
+    hasIcon: true,
+    // iconColor: 'text-[#1F5349]',
     hasInput: false
   },
-  // {
+  {
-  //   title: 'Caja 2',
+    title: 'Diplomacia Pública y\nproyección Internacional',
-  //   copy: 'Lorem ipsum dolor sit amet',
+    copy: 'Construcción consciente de vínculos éticos, culturales y estratégicos entre pueblos',
-  //   bg: '#003421',
+    bgColor: '#003421',
-  //   img: ''
+    sizeTitle: 'text-2xl',
-  // },
+    titleColor: 'text-[#CBA16A]',
-  // {
+    textColor: 'text-[#EDE9D9]',
-  //   title: 'Caja 3',
+    sizeText: 'text-xl',
-  //   copy: 'Lorem ipsum dolor sit amet',
+    buttonLabel: 'Leer más',
-  //   bg: '#EBE6D2'
+    bgImage: '../src/assets/dove-bg.webp',
-  // }
+    hasButton: true,
+    hasIcon: true,
+    // iconColor: 'text-[#CBA16A]',
+    hasInput: false
+  },
+  {
+    title: 'Quiero postularme\ncomo Voluntario',
+    copy: 'Sumarse es asumir un compromiso con propósito',
+    bgColor: '#EBE6D2',
+    sizeTitle: 'text-2xl',
+    titleColor: 'text-[#CBA16A]',
+    textColor: 'text-[#003421]',
+    sizeText: 'text-xl',
+    buttonLabel: 'Registrarse',
+    hasButton: false,
+    hasIcon: true,
+    // iconColor: 'text-[#CBA16A]',
+    hasInput: true
+  },
 ]
 
 // bg
 // heading color
-// text color 
+// text color
-// hasButton = boolean 
+// hasButton = boolean
 // hasInput = boolean
 // bgImage