fixed imagescaroulsel and added iamges in home

src/components/section/CarouselSection.astro

@@ -4,22 +4,23 @@ import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
 import { Icon } from "astro-icon/components";
-const { images } = Astro.props;
+const { images, class: className } = Astro.props;
 ---
 
 <div class="bg-white">
   <div class="mx-auto">
-    <div class="swiper">
+    <div class="swiper h-200">
       <div class="swiper-wrapper">
         {
           images.map((image) => (
-            <div class="swiper-slide">
-              <div class="flex! flex-col items-center justify-center relative">
-
-              <div class="uppercase text-2xl lg:text-9xl text-white text-shadow-lg absolute font-secondary">
-                {image.text}
-              </div>
-              <Image src={image.image} alt="" />
+            <div class="swiper-slide h-full">
+              <div class="flex!  h-full flex-col items-center justify-center relative">
+                {image.text && (
+                  <div class="uppercase text-2xl lg:text-9xl text-white text-shadow-lg absolute font-secondary">
+                    {image.text}
+                  </div>
+                )}
+                <img class="w-full h-full object-cover object-center" src={image.image} alt={image.text} />
               </div>
             </div>
           ))

src/components/section/NewsSection.astro

@@ -5,8 +5,12 @@ const newsItems = await getCollection("news");
 ---
 <div id="news" class="bg-[#22523F] py-12 lg:py-20">
     <div class="container mx-auto">
-    <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">Noticias</h4>
+    <div class="flex flex-col lg:w-1/2 items-center mx-auto py-8">
+        <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">Noticias</h4>
     <h2 class="text-white text-3xl lg:text-5xl font-bold text-center font-secondary mb-4">Actualidad institucional y proyección internacional</h2>
+    <p class="text-white text-xl text-center">Esta sección reúne las principales actividades, reconocimientos y acciones del Centro del Reino de Paz y Justicia y de su fundador.</p>
+    </div>
+    
 
     <div class="grid md:grid-cols-2 lg:grid-cols-3 md:gap-10 gap-20">
     {

src/pages/index.astro

@@ -21,32 +21,24 @@ import FooterSection from "../components/section/FooterSection.astro";
 
 const carouselImages2 = [
   {
-    image: "https://picsum.photos/1920/800?random=1&grayscale",
+    image: "https://ik.imagekit.io/crpy/tr:w-1920,h-1080,cm-extract,x-0,y-1730/lonely-african-american-male-praying-with-his-hands-bible-with-his-head-down.webp",
     text: "Justicia",
   },
   {
-    image: "https://picsum.photos/1920/800?random=2&grayscale",
+    image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
     text: "Paz",
   },
-  {
-    image: "https://picsum.photos/1920/800?random=3&grayscale",
-    text: "",
-  }
 ];
 
 const carouselImages3 = [
   {
-    image: "https://picsum.photos/1920/800?random=1&grayscale",
+    image: "https://ik.imagekit.io/crpy/lonely-african-american-male-praying-with-his-hands-bible-with-his-head-down.webp",
     text: "Justicia",
   },
   {
-    image: "https://picsum.photos/1920/800?random=2&grayscale",
+    image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
     text: "Paz",
   },
-  {
-    image: "https://picsum.photos/1920/800?random=3&grayscale",
-    text: "",
-  }
 ];
 ---
 
@@ -55,7 +47,7 @@ const carouselImages3 = [
 
   <InfoSection bgColor="bg-white" title="Construyendo el mundo soñado por los profetas: justicia y paz para Israel y toda la humanidad" data={infoboxes} />
 
-  <CarouselSection images={carouselImages3} />
+  <CarouselSection class="object-cover" images={carouselImages3} />
 
   <IdentitySection bgColor="bg-white" colorText="text-[#003421]" initTitle="Identidad Institucional" title="El Centro del Reino de Paz y Justicia" />
 

src/pages/news/[id].astro

@@ -7,6 +7,7 @@ import { Image } from "@unpic/astro";
 import { getCollection, render } from "astro:content";
 import TitleSection from "../../components/section/TitleSection.astro";
 import FooterSection from '../../components/section/FooterSection.astro';
+export const prerender = true;
 // 1. Generate a new path for every collection entry
 export async function getStaticPaths() {
   const posts = await getCollection("news");