Created grid section

src/components/cards/GridCard.astro

@@ -0,0 +1,15 @@
+---
+import { Icon } from "astro-icon/components";
+
+const { props } = Astro.props;
+
+const bgClass = props.type === 'text'? `bg-[${props.bgColor}]` : `bg-[url(${props.image})] bg-cover`
+---
+<div class="aspect-square">
+    <div class={`flex flex-col justify-between h-full p-16 ${bgClass}`}>
+        { props.type === 'text' && (
+        <Icon name={props.icon} class="text-8xl" />
+        <p>{props.text}</p>
+        )}
+    </div>
+</div>

src/components/section/GridSection.astro

@@ -0,0 +1,65 @@
+---
+import GridCard from "../cards/GridCard.astro"
+
+const cards = [
+    {
+        type: 'text',
+        icon: 'ph:arrow-circle-down-thin',
+        text: 'Dirección de La Gran Carpa Catedral. Puerto Rico',
+        bgColor: '#EBE5D0'
+    },
+    {
+        type: 'image',
+        image: 'https://picsum.photos/600/600?random=1&grayscale',
+    },
+    {
+        type: 'text',
+        icon: 'ph:arrow-circle-right-thin',
+        text: 'Participación activa en escenarios internacionales.',
+        bgColor: '#BEA48D'
+    },
+    {
+        type: 'image',
+        image: 'https://picsum.photos/600/600?random=1&grayscale',
+    },
+    {
+        type: 'image',
+        image: 'https://picsum.photos/600/600?random=1&grayscale',
+    },
+    {
+        type: 'text',
+        icon: 'ph:arrow-circle-up-thin',
+        text: 'Dirección de La Gran Carpa Catedral. Puerto Rico',
+        bgColor: '#EBE5D0'
+    },
+    {
+        type: 'image',
+        image: 'https://picsum.photos/600/600?random=1&grayscale',
+    },
+    {
+        type: 'text',
+        icon: 'ph:arrow-circle-left-thin',
+        text: 'Participación activa en escenarios internacionales.',
+        bgColor: '#BEA48D'
+    },
+];
+---
+<div>
+    <div class="container mx-auto">
+        <div class="grid 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>

src/components/section/NewsSection.astro

@@ -1,7 +1,6 @@
 ---
-import Image from "astro/components/Image.astro";
 import { getCollection, getEntry } from "astro:content";
-import NewsCard from "../NewsCard.astro";
+import NewsCard from "../cards/NewsCard.astro";
 const newsItems = await getCollection("news");
 ---
 <div id="news" class="bg-[#22523F] py-20">

src/pages/index.astro

@@ -11,6 +11,7 @@ import InfoSection from "../components/section/InfoSection.astro";
 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";
 
 const carouselImages2 = [
   "https://picsum.photos/1920/800?random=1&grayscale",
@@ -24,6 +25,10 @@ const carouselImages2 = [
 
   <InfoSection data={infoboxes} />
 
+  <CarouselSection images={carouselImages2} />
+
+  <GridSection />
+
   <TitleSection title="Dr. José Benjamín Pérez Matos | Trayectoria" />
 
   <ColorSection
@@ -44,6 +49,8 @@ const carouselImages2 = [
 
   <CarouselSection images={carouselImages2} />
 
+
+
   <NewsSection />
 
   <ParticipateSection />