fixed imagescaroulsel and added iamges in home

This commit is contained in:
Esteban Paz 2026-02-13 02:05:38 -05:00
parent 80bc327a34
commit 7bca53e0dd
4 changed files with 21 additions and 23 deletions

View File

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

View File

@ -5,8 +5,12 @@ const newsItems = await getCollection("news");
--- ---
<div id="news" class="bg-[#22523F] py-12 lg:py-20"> <div id="news" class="bg-[#22523F] py-12 lg:py-20">
<div class="container mx-auto"> <div class="container mx-auto">
<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> <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> <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"> <div class="grid md:grid-cols-2 lg:grid-cols-3 md:gap-10 gap-20">
{ {

View File

@ -21,32 +21,24 @@ import FooterSection from "../components/section/FooterSection.astro";
const carouselImages2 = [ 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", text: "Justicia",
}, },
{ {
image: "https://picsum.photos/1920/800?random=2&grayscale", image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
text: "Paz", text: "Paz",
}, },
{
image: "https://picsum.photos/1920/800?random=3&grayscale",
text: "",
}
]; ];
const carouselImages3 = [ 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", text: "Justicia",
}, },
{ {
image: "https://picsum.photos/1920/800?random=2&grayscale", image: "https://ik.imagekit.io/crpy/amigos-bn.webp",
text: "Paz", 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} /> <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" /> <IdentitySection bgColor="bg-white" colorText="text-[#003421]" initTitle="Identidad Institucional" title="El Centro del Reino de Paz y Justicia" />

View File

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