LGCC
/
cdrdpyj
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Added carousel section

This commit is contained in:
Julio Ruiz 2026-02-11 00:05:30 -05:00
parent bb884e1299
commit f463138018
10 changed files with 135 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
astro.config.mjs
View File

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

20
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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": {

59
src/components/CarouselSection.astro Normal file
View File

@ -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>

40
src/components/Header.astro
View File

@ -3,26 +3,24 @@ import Button from "./ui/Button.astro";
---
<div>
<div class="flex justify-between py-4">
<div class="border-l-4 border-primary pl-4">
<p
class="font-secondary text-primary font-bold leading-none py-2 text-md"
>
Centro del Reino<br /> De Paz y Justicia
</p>
</div>
<nav
class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
>
<div class="flex gap-8">
<a href="#">Inicio</a>
<a href="#">Somos</a>
<a href="#">Programas</a>
<a href="#">Noticias</a>
</div>
<div class="w-50">
<Button title="Contacto" url="/contacto" variant="primary" />
</div>
</nav>
<div class="flex justify-between py-4">
<div class="border-l-4 border-primary pl-4">
<p class="font-secondary text-primary font-bold leading-none py-2 text-md">
Centro del Reino<br /> De Paz y Justicia
</p>
</div>
<nav
class="flex justify-evenly gap-10 items-center uppercase text-md text-white"
>
<div class="flex gap-8">
<a href="#">Inicio</a>
<a href="#">Somos</a>
<a href="#">Programas</a>
<a href="#">Noticias</a>
</div>
<div class="w-50">
<Button title="Contacto" url="/contacto" variant="primary" />
</div>
</nav>
</div>
</div>

2
src/components/HeroHome.astro
View File

@ -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>

25
src/components/NewsCard.astro
View File

@ -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>
<h3 class="text-2xl font-bold mb-8">{data.title}</h3>
<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>
<Image
src={data.thumbnail}
alt={data.title}
class="aspect-square object-cover"
/>
</div>
</div>

2
src/components/NewsSection.astro
View File

@ -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>

2
src/components/ParticipateSection.astro
View File

@ -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>

21
src/pages/index.astro
View File

@ -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>
<HeroHome />
<div class="max-w-480 mx-auto px-29">
<NewsSection />
</div>
<CarouselSection images={carouselImages2} />
<div class="max-w-480 bg-[#CBA16A] px-29">
<ParticipateSection />
</div>
<NewsSection />
<ParticipateSection />
</MainLayout>