Added dayjs for date handling

Added news card for homepage news section
Added news section.
Added basic styling in grid layout per design

astro.config.mjs

@@ -19,7 +19,7 @@ export default defineConfig({
   },
 
   image: {
-    domains: ['placehold.co'],
+    domains: ['placehold.co','ik.imagekit.io'],
     service: imageService(),
   },
 });

package-lock.json

@@ -8,10 +8,12 @@
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/markdoc": "^0.15.10",
+        "@iconify-json/ph": "^1.2.2",
         "@tailwindcss/vite": "^4.1.18",
         "@unpic/astro": "^1.0.2",
         "astro": "^5.17.1",
         "astro-icon": "^1.1.5",
+        "dayjs": "^1.11.19",
         "tailwindcss": "^4.1.18"
       },
       "devDependencies": {
@@ -616,6 +618,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/@iconify-json/ph": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.2.2.tgz",
+      "integrity": "sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/tools": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-4.2.0.tgz",
@@ -2730,6 +2741,12 @@
       "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
       "license": "CC0-1.0"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.19",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",

package.json

@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@astrojs/markdoc": "^0.15.10",
+    "@iconify-json/ph": "^1.2.2",
     "@tailwindcss/vite": "^4.1.18",
     "@unpic/astro": "^1.0.2",
     "astro": "^5.17.1",
     "astro-icon": "^1.1.5",
+    "dayjs": "^1.11.19",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {

src/components/NewsCard.astro

@@ -0,0 +1,19 @@
+---
+import Image from "astro/components/Image.astro";
+import { Icon } from 'astro-icon/components'
+import dayjs from "dayjs";
+
+const { data } = Astro.props;
+const nicedate = dayjs(data.date).format('D MMMM YYYY')
+---
+<div class="bg-[#EBE5D0] p-10">
+    <Icon name="ph:arrow-circle-down-thin" class="text-8xl mb-8" />
+    <p class="font-light text-2xl mb-8">{data.city}, {data.country}<br/>({nicedate}):</p>
+    <h3 class="text-2xl font-bold mb-8">{data.title}</h3>
+
+    
+
+    <div>
+        <Image src={data.thumbnail} alt={data.title} class="aspect-square object-cover" />
+    </div>
+</div>

src/components/NewsSection.astro

@@ -0,0 +1,18 @@
+---
+import Image from "astro/components/Image.astro";
+import { getCollection, getEntry } from "astro:content";
+import NewsCard from "./NewsCard.astro";
+const newsItems = await getCollection("news");
+---
+<div id="news" class="bg-[#22523F] py-20">
+    <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">Noticias</h4>
+    <h2 class="text-white text-6xl font-bold text-center font-secondary mb-4">Actualidad institucional y proyección internacional</h2>
+
+    <div class="grid grid-cols-3 gap-20">
+    {
+		newsItems.map((item) => (
+            <NewsCard data={item.data} />
+		))
+	}
+    </div>
+</div>

src/pages/index.astro

@@ -1,19 +1,12 @@
 ---
 import "../styles/global.css";
-import { getCollection, getEntry } from "astro:content";
+
 import MainLayout from "../layouts/MainLayout.astro";
 import HeroHome from "../components/HeroHome.astro";
-
-const newsItems = await getCollection("news");
+import NewsSection from "../components/NewsSection.astro";
 ---
 
 <MainLayout>
 	<HeroHome />
-	{
-		newsItems.map((item) => (
-			<li>
-				<a href={`/news/${item.id}`}>{item.data.title}</a>
-			</li>
-		))
-	}
+	<NewsSection />
 </MainLayout>