Added carousel section

astro.config.mjs

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

package-lock.json

@@ -14,6 +14,7 @@
         "astro": "^5.17.1",
         "astro-icon": "^1.1.5",
         "dayjs": "^1.11.19",
+        "swiper": "^12.1.0",
         "tailwindcss": "^4.1.18"
       },
       "devDependencies": {
@@ -5634,6 +5635,25 @@
         "url": "https://opencollective.com/svgo"
       }
     },
+    "node_modules/swiper": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.0.tgz",
+      "integrity": "sha512-BD4CpAOOyEvZ2f0CDx362ea+vmOwukVcmbsQx+0BhRIaBUz8wvcCd//E7RFmvBZCrfyqXCHUVqmgUwts6ywlxw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",

package.json

@@ -16,6 +16,7 @@
     "astro": "^5.17.1",
     "astro-icon": "^1.1.5",
     "dayjs": "^1.11.19",
+    "swiper": "^12.1.0",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {

src/components/CarouselSection.astro

@@ -0,0 +1,59 @@
+---
+import Image from "astro/components/Image.astro";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import { Icon } from "astro-icon/components";
+const { images } = Astro.props;
+---
+
+<div class="bg-white">
+  <div class="mx-auto">
+    <div class="swiper">
+      <div class="swiper-wrapper">
+        {
+          images.map((image) => (
+            <div class="swiper-slide">
+              <Image src={image} alt="" />
+            </div>
+          ))
+        }
+      </div>
+
+      <!-- If we need pagination -->
+      <div class="swiper-pagination"></div>
+
+      <!-- If we need navigation buttons -->
+      <div class="swiper-button-prev">
+        <Icon name="ph:arrow-circle-left-thin" class="text-white" />
+      </div>
+      <div class="swiper-button-next">
+        <Icon name="ph:arrow-circle-right-thin" class="text-white" />
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import Swiper from "swiper";
+  const swiper = new Swiper(".swiper", {
+    // Optional parameters
+    loop: true,
+
+    // If we need pagination
+    pagination: {
+      el: ".swiper-pagination",
+    },
+
+    // Navigation arrows
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+
+    // And if we need scrollbar
+    scrollbar: {
+      el: ".swiper-scrollbar",
+    },
+  });
+</script>

src/components/Header.astro

@@ -5,9 +5,7 @@ import Button from "./ui/Button.astro";
 <div>
   <div class="flex justify-between py-4">
     <div class="border-l-4 border-primary pl-4">
-            <p
+      <p class="font-secondary text-primary font-bold leading-none py-2 text-md">
-                class="font-secondary text-primary font-bold leading-none py-2 text-md"
-            >
         Centro del Reino<br /> De Paz y Justicia
       </p>
     </div>

src/components/HeroHome.astro

@@ -3,7 +3,9 @@ import HeroImage from '../assets/hero-image.webp';
 ---
 
 <div class="h-screen p-5">
+    <div class="container mx-auto">
     <div class="absolute">
         <img src={HeroImage} alt="Hero Image" class="w-full h-screen object-cover" />
     </div>
+    </div>
 </div>

src/components/NewsCard.astro

@@ -1,19 +1,24 @@
 ---
 import Image from "astro/components/Image.astro";
-import { Icon } from 'astro-icon/components'
+import { Icon } from "astro-icon/components";
 import dayjs from "dayjs";
 
 const { data } = Astro.props;
-const nicedate = dayjs(data.date).format('D MMMM YYYY')
+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>
+  <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" />
+    <Image
+      src={data.thumbnail}
+      alt={data.title}
+      class="aspect-square object-cover"
+    />
   </div>
 </div>

src/components/NewsSection.astro

@@ -5,6 +5,7 @@ import NewsCard from "./NewsCard.astro";
 const newsItems = await getCollection("news");
 ---
 <div id="news" class="bg-[#22523F] py-20">
+    <div class="container mx-auto">
     <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>
 
@@ -15,4 +16,5 @@ const newsItems = await getCollection("news");
 		))
 	}
     </div>
+    </div>
 </div>

src/components/ParticipateSection.astro

@@ -1,6 +1,7 @@
 ---
 ---
 <div class="bg-[#CBA16A] py-20">
+    <div class="container mx-auto">
     <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">Participa | Colabora</h4>
     <h2 class="text-white text-6xl font-bold text-center font-secondary mb-4">Sumarse es asumir un compromiso con propósito</h2>
 
@@ -25,3 +26,4 @@
 
     <p>La paz se construye mediante decisiones responsables, liderazgo comprometido y acción sostenida.</p>
 </div>
+</div>

src/pages/index.astro

@@ -5,18 +5,21 @@ import MainLayout from "../layouts/MainLayout.astro";
 import HeroHome from "../components/HeroHome.astro";
 import NewsSection from "../components/NewsSection.astro";
 import ParticipateSection from "../components/ParticipateSection.astro";
+import CarouselSection from "../components/CarouselSection.astro";
+
+const carouselImages2 = [
+  "https://picsum.photos/1920/800?random=1&grayscale",
+  "https://picsum.photos/1920/800?random=2&grayscale",
+  "https://picsum.photos/1920/800?random=3&grayscale",
+];
 ---
 
 <MainLayout>
-	<div class="max-w-480 mx-auto px-29">
   <HeroHome />
-	</div>
 
-	<div class="max-w-480 mx-auto px-29">
+  <CarouselSection images={carouselImages2} />
+
   <NewsSection />
-	</div>
 
-	<div class="max-w-480 bg-[#CBA16A] px-29">
   <ParticipateSection />
-	</div>
 </MainLayout>