From f463138018a6a3e551e6af2843c231e6011cb7fa Mon Sep 17 00:00:00 2001 From: Julio Ruiz Date: Wed, 11 Feb 2026 00:05:30 -0500 Subject: [PATCH] Added carousel section --- astro.config.mjs | 2 +- package-lock.json | 20 +++++++++ package.json | 1 + src/components/CarouselSection.astro | 59 +++++++++++++++++++++++++ src/components/Header.astro | 40 ++++++++--------- src/components/HeroHome.astro | 2 + src/components/NewsCard.astro | 27 ++++++----- src/components/NewsSection.astro | 2 + src/components/ParticipateSection.astro | 2 + src/pages/index.astro | 23 +++++----- 10 files changed, 135 insertions(+), 43 deletions(-) create mode 100644 src/components/CarouselSection.astro diff --git a/astro.config.mjs b/astro.config.mjs index 04c3c82..cbe4b6e 100644 --- a/astro.config.mjs +++ b/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(), }, }); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0605b4a..8658eca 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ba7ccd2..35a13ca 100644 --- a/package.json +++ b/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": { diff --git a/src/components/CarouselSection.astro b/src/components/CarouselSection.astro new file mode 100644 index 0000000..31960e1 --- /dev/null +++ b/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; +--- + +
+
+
+
+ { + images.map((image) => ( +
+ +
+ )) + } +
+ + +
+ + +
+ +
+
+ +
+
+
+
+ + diff --git a/src/components/Header.astro b/src/components/Header.astro index 4c36cf0..d334eca 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -3,26 +3,24 @@ import Button from "./ui/Button.astro"; ---
-
-
-

- Centro del Reino
De Paz y Justicia -

-
- +
+
+

+ Centro del Reino
De Paz y Justicia +

+ +
diff --git a/src/components/HeroHome.astro b/src/components/HeroHome.astro index 9503b61..3ab9fee 100644 --- a/src/components/HeroHome.astro +++ b/src/components/HeroHome.astro @@ -3,7 +3,9 @@ import HeroImage from '../assets/hero-image.webp'; ---
+
Hero Image
+
\ No newline at end of file diff --git a/src/components/NewsCard.astro b/src/components/NewsCard.astro index 17b1c78..3e4705b 100644 --- a/src/components/NewsCard.astro +++ b/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"); --- +
- -

{data.city}, {data.country}
({nicedate}):

-

{data.title}

+ +

+ {data.city}, {data.country}
({nicedate}): +

+

{data.title}

- - -
- {data.title} -
-
\ No newline at end of file +
+ {data.title} +
+
diff --git a/src/components/NewsSection.astro b/src/components/NewsSection.astro index 6b89bba..9d3a574 100644 --- a/src/components/NewsSection.astro +++ b/src/components/NewsSection.astro @@ -5,6 +5,7 @@ import NewsCard from "./NewsCard.astro"; const newsItems = await getCollection("news"); ---
+

Noticias

Actualidad institucional y proyección internacional

@@ -15,4 +16,5 @@ const newsItems = await getCollection("news"); )) }
+
\ No newline at end of file diff --git a/src/components/ParticipateSection.astro b/src/components/ParticipateSection.astro index ef8edf6..7614012 100644 --- a/src/components/ParticipateSection.astro +++ b/src/components/ParticipateSection.astro @@ -1,6 +1,7 @@ --- ---
+

Participa | Colabora

Sumarse es asumir un compromiso con propósito

@@ -24,4 +25,5 @@

La paz se construye mediante decisiones responsables, liderazgo comprometido y acción sostenida.

+
\ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 699d464..44175d0 100644 --- a/src/pages/index.astro +++ b/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", +]; --- -
- -
- -
- -
+ -
- -
+ + + + +