fixed imagescaroulsel and added iamges in home
This commit is contained in:
parent
80bc327a34
commit
7bca53e0dd
|
|
@ -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>
|
||||||
))
|
))
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -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" />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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");
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue