diff --git a/v3/package-lock.json b/v3/package-lock.json
index 0fe6bb21..785566ec 100644
--- a/v3/package-lock.json
+++ b/v3/package-lock.json
@@ -21,6 +21,7 @@
         "astro": "^4.15.5",
         "astro-embed": "^0.7.2",
         "astro-icon": "^1.1.1",
+        "astro-swiper": "^2.4.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.3.0",
@@ -30,7 +31,6 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "sweetalert2": "^11.14.2",
-        "swiper": "^11.1.14",
         "tailwindcss-animate": "^1.0.7",
         "unpic": "^3.18.0",
         "vanilla-cookieconsent": "^3.0.1"
@@ -219,8 +219,7 @@
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-2.10.3.tgz",
       "integrity": "sha512-bL/O7YBxsFt55YHU021oL+xz+B/9HvGNId3F9xURN16aeqDK9juHGktdkCSXz+U4nqFACq6ZFvWomOzhV+zfPw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@astrojs/internal-helpers": {
       "version": "0.4.1",
@@ -477,7 +476,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.8.tgz",
       "integrity": "sha512-Oixnb+DzmRT30qu9d3tJSQkxuygWm32DFykT4bRoORPa9hZ/L4KhVB/XiRm6KG+roIEM7DBQlmg27kw2HZkdZg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.25.7",
@@ -2792,7 +2790,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
       "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2803,7 +2800,6 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -2883,7 +2879,6 @@
       "integrity": "sha512-hQUVn2Lij2NAxVFEdvIGxT9gP1tq2yM83m+by3whWFsWC+1y8pxxxHUFE1UqDu2VsGi2i6RLcv4QvouM84U+ow==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.8.1",
         "@typescript-eslint/types": "8.8.1",
@@ -3169,7 +3164,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
       "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3353,7 +3347,6 @@
       "resolved": "https://registry.npmjs.org/astro/-/astro-4.16.1.tgz",
       "integrity": "sha512-ZeZd+L147HHgHmvoSkve7KM3EutV+hY0mOCa4PwARHEFAAh+omo4MUNoTWsFkfq7ozTgR0PCXQwslrZduoWHNg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@astrojs/compiler": "^2.10.3",
         "@astrojs/internal-helpers": "0.4.1",
@@ -4064,6 +4057,19 @@
         "@iconify/utils": "^2.1.30"
       }
     },
+    "node_modules/astro-swiper": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/astro-swiper/-/astro-swiper-2.4.0.tgz",
+      "integrity": "sha512-oTYMSwqIfyjt3xBrIk4fhxPCtj9DfMTPLnHcZ0VXVhnFFaqyK/2DYpnUV4n1EiGkby/QDa4tZ/bOsHSsH1xogg==",
+      "license": "MIT",
+      "dependencies": {
+        "swiper": "^12.1.3"
+      },
+      "engines": {
+        "node": ">=20",
+        "pnpm": ">=10.30.3"
+      }
+    },
     "node_modules/astrojs-compiler-sync": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/astrojs-compiler-sync/-/astrojs-compiler-sync-1.0.0.tgz",
@@ -4261,7 +4267,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001663",
         "electron-to-chromium": "^1.5.28",
@@ -5182,8 +5187,7 @@
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.3.0.tgz",
       "integrity": "sha512-Ve8dhI4w28qBqR8J+aMtv7rLK89r1ZA5HocwFz6uMB/i5EiC7bGI7y+AM80yAVUJw3qqaZYK7clmZMUR8kM3UA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/embla-carousel-react": {
       "version": "8.3.0",
@@ -5332,7 +5336,6 @@
       "integrity": "sha512-UVIOlTEWxwIopRL1wgSQYdnVDcEvs2wyaO6DGo5mXqe3r16IoCNWkR29iHhyaP4cICWjbgbmFUGAhh0GJRuGZw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.11.0",
@@ -7077,7 +7080,6 @@
       "integrity": "sha512-V0RMVZzK1+rCHpymRv4URK2lNhIRyO8g7U7zOFwVAhJuat74HtkjIQpQRKNCwFEYkRGpafOpmXXLoaoBcyVtBg==",
       "devOptional": true,
       "license": "MPL-2.0",
-      "peer": true,
       "dependencies": {
         "detect-libc": "^1.0.3"
       },
@@ -9481,7 +9483,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.1.0",
@@ -9650,7 +9651,6 @@
       "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -9667,7 +9667,6 @@
       "integrity": "sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@astrojs/compiler": "^2.9.1",
         "prettier": "^3.0.0",
@@ -9769,7 +9768,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -9782,7 +9780,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -10149,7 +10146,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz",
       "integrity": "sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.6"
       },
@@ -10787,9 +10783,9 @@
       }
     },
     "node_modules/swiper": {
-      "version": "11.1.14",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.14.tgz",
-      "integrity": "sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==",
+      "version": "12.1.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.3.tgz",
+      "integrity": "sha512-XcWlVmkHFICI4fuoJKgbp8PscDcS4i7pBH8nwJRBi3dpQvhCySwsWRYm4bOf/BzKVWkHOYaFw7qz9uBSrY3oug==",
       "funding": [
         {
           "type": "patreon",
@@ -10838,7 +10834,6 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
       "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -10988,7 +10983,6 @@
       "integrity": "sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==",
       "devOptional": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -11167,7 +11161,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11526,7 +11519,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
       "integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -12331,7 +12323,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
       "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/v3/package.json b/v3/package.json
index 3efbf09f..f3a9f45a 100644
--- a/v3/package.json
+++ b/v3/package.json
@@ -35,6 +35,7 @@
     "astro": "^4.15.5",
     "astro-embed": "^0.7.2",
     "astro-icon": "^1.1.1",
+    "astro-swiper": "^2.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.3.0",
@@ -44,7 +45,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sweetalert2": "^11.14.2",
-    "swiper": "^11.1.14",
     "tailwindcss-animate": "^1.0.7",
     "unpic": "^3.18.0",
     "vanilla-cookieconsent": "^3.0.1"
diff --git a/v3/src/components/widgets/Carousel.astro b/v3/src/components/widgets/Carousel.astro
new file mode 100644
index 00000000..3d64122a
--- /dev/null
+++ b/v3/src/components/widgets/Carousel.astro
@@ -0,0 +1,43 @@
+---
+import { Swiper, SwiperWrapper, SwiperSlide, SwiperPagination, SwiperLazyPreloader} from 'astro-swiper';
+interface Props {
+  list: {
+    src: string;
+    alt?: string;
+    class: string;
+  }[];
+}
+const { list } = Astro.props;
+
+---
+<Swiper
+  style={{
+    '--swiper-pagination-bullet-inactive-color': '#fff',
+    '--swiper-pagination-bullet-inactive-opacity': 0.5,
+    '--swiper-pagination-bullet-size': '12px',
+  }}
+  options={{
+    spaceBetween: 0,
+    slidesPerView: 1,
+    pagination:{
+      clickable: true,
+      el: ".swiper-pagination",
+    },
+    mousewheel:{ forceToAxis: true, sensitivity: 0.1, releaseOnEdges: true },
+    autoplay:{
+      delay: 2500,
+      disableOnInteraction: true,
+    },
+    scrollbar: true
+  }}
+>
+  <SwiperWrapper>
+    {list.map((item) => (
+      <SwiperSlide>
+        <img src={item.src} class={item.class} loading="lazy" alt={item.alt} />
+        <SwiperLazyPreloader class="swiper-lazy-preloader-white"></SwiperLazyPreloader>
+      </SwiperSlide>
+    ))}
+  </SwiperWrapper>
+  <SwiperPagination/>
+</Swiper>
diff --git a/v3/src/components/widgets/Carousel.jsx b/v3/src/components/widgets/Carousel.jsx
deleted file mode 100644
index 39bce2b0..00000000
--- a/v3/src/components/widgets/Carousel.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/* https://swiperjs.com/demos */
-
-import 'swiper/css';
-import 'swiper/css/pagination';
-import { Autoplay, Pagination, Scrollbar, Mousewheel } from 'swiper/modules';
-import { Swiper, SwiperSlide } from 'swiper/react';
-
-const Carousel = ({ list }) => {
-  return (
-    <Swiper
-      spaceBetween={0}
-      slidesPerView={1}
-      pagination={{ clickable: true }}
-      style={{
-        '--swiper-pagination-bullet-inactive-color': '#fff',
-        '--swiper-pagination-bullet-inactive-opacity': 0.5,
-        '--swiper-pagination-bullet-size': '12px',
-      }}
-      mousewheel={{ forceToAxis: true, sensitivity: 0.1, releaseOnEdges: true }}
-      autoplay={{
-        delay: 2500,
-        disableOnInteraction: true,
-      }}
-      // https://github.com/nolimits4web/swiper/blob/40a705e5bcadf2ee2ee90591ff9ed95c1aaf9026/src/swiper-element.mjs#L286
-      // workaround for {true} which cause console error
-      lazy='true'
-      scrollbar
-      modules={[Pagination, Autoplay, Scrollbar, Mousewheel]}
-    >
-      {list.map((item, i) => (
-        <SwiperSlide key={'p' + i}>
-          <img src={item.src} className={item.className} loading="lazy" alt={item.alt} />
-          <div className="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
-        </SwiperSlide>
-      ))}
-    </Swiper>
-  );
-};
-
-export default Carousel;
diff --git a/v3/src/pages/ar/index.astro b/v3/src/pages/ar/index.astro
index 0c99df3b..41c9d405 100644
--- a/v3/src/pages/ar/index.astro
+++ b/v3/src/pages/ar/index.astro
@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
-import Carousel from '~/components/widgets/Carousel.jsx';
+import Carousel from '~/components/widgets/Carousel.astro';
 import Note from '~/components/widgets/Note.astro';
 
 const metadata = {
@@ -45,12 +45,11 @@ const metadata = {
     <Fragment slot="content">
       <br /><br />
       <Carousel
-        client:load
         list={[
-          { src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/main.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/console.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/custom.png', className: 'rounded-[15px] border border-gray-700' },
+          { src: '/remote.jpg', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/main.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/console.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/custom.png', class: 'rounded-[15px] border border-gray-700' },
         ]}
       />
     </Fragment>
diff --git a/v3/src/pages/de/index.astro b/v3/src/pages/de/index.astro
index a97bbb4c..2e5a84e0 100644
--- a/v3/src/pages/de/index.astro
+++ b/v3/src/pages/de/index.astro
@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
-import Carousel from '~/components/widgets/Carousel.jsx';
+import Carousel from '~/components/widgets/Carousel.astro';
 import Note from '~/components/widgets/Note.astro';
 
 const metadata = {
@@ -49,12 +49,11 @@ const metadata = {
     <Fragment slot="content">
       <br /><br />
       <Carousel
-        client:load
         list={[
-          { src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/main.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/console.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/custom.png', className: 'rounded-[15px] border border-gray-700' },
+          { src: '/remote.jpg', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/main.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/console.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/custom.png', class: 'rounded-[15px] border border-gray-700' },
         ]}
       />
     </Fragment>
diff --git a/v3/src/pages/es/index.astro b/v3/src/pages/es/index.astro
index 1568434b..607507f2 100644
--- a/v3/src/pages/es/index.astro
+++ b/v3/src/pages/es/index.astro
@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
-import Carousel from '~/components/widgets/Carousel.jsx';
+import Carousel from '~/components/widgets/Carousel.astro';
 import Note from '~/components/widgets/Note.astro';
 
 const metadata = {
@@ -45,12 +45,11 @@ const metadata = {
     <Fragment slot="content">
       <br /><br />
       <Carousel
-        client:load
         list={[
-          { src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/main.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/console.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/custom.png', className: 'rounded-[15px] border border-gray-700' },
+          { src: '/remote.jpg', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/main.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/console.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/custom.png', class: 'rounded-[15px] border border-gray-700' },
         ]}
       />
     </Fragment>
diff --git a/v3/src/pages/fr/index.astro b/v3/src/pages/fr/index.astro
index 53648f19..5c82bb60 100644
--- a/v3/src/pages/fr/index.astro
+++ b/v3/src/pages/fr/index.astro
@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
-import Carousel from '~/components/widgets/Carousel.jsx';
+import Carousel from '~/components/widgets/Carousel.astro';
 import Note from '~/components/widgets/Note.astro';
 
 const metadata = {
@@ -45,12 +45,11 @@ const metadata = {
     <Fragment slot="content">
       <br /><br />
       <Carousel
-        client:load
         list={[
-          { src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/main.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/console.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/custom.png', className: 'rounded-[15px] border border-gray-700' },
+          { src: '/remote.jpg', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/main.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/console.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/custom.png', class: 'rounded-[15px] border border-gray-700' },
         ]}
       />
     </Fragment>
diff --git a/v3/src/pages/index.astro b/v3/src/pages/index.astro
index b36b5013..d8b28f8f 100644
--- a/v3/src/pages/index.astro
+++ b/v3/src/pages/index.astro
@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
-import Carousel from '~/components/widgets/Carousel.jsx';
+import Carousel from '~/components/widgets/Carousel.astro';
 import Note from '~/components/widgets/Note.astro';
 
 const metadata = {
@@ -46,12 +46,11 @@ const metadata = {
     <Fragment slot="content">
       <br /><br />
       <Carousel
-        client:load
         list={[
-          { src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/main.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/console.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/custom.png', className: 'rounded-[15px] border border-gray-700' },
+          { src: '/remote.jpg', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/main.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/console.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/custom.png', class: 'rounded-[15px] border border-gray-700' },
         ]}
       />
     </Fragment>
diff --git a/v3/src/pages/it/index.astro b/v3/src/pages/it/index.astro
index 4d8d4928..33d43aaa 100644
--- a/v3/src/pages/it/index.astro
+++ b/v3/src/pages/it/index.astro
@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
-import Carousel from '~/components/widgets/Carousel.jsx';
+import Carousel from '~/components/widgets/Carousel.astro';
 import Note from '~/components/widgets/Note.astro';
 
 const metadata = {
@@ -45,12 +45,11 @@ const metadata = {
     <Fragment slot="content">
       <br /><br />
       <Carousel
-        client:load
         list={[
-          { src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/main.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/console.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/custom.png', className: 'rounded-[15px] border border-gray-700' },
+          { src: '/remote.jpg', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/main.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/console.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/custom.png', class: 'rounded-[15px] border border-gray-700' },
         ]}
       />
     </Fragment>
diff --git a/v3/src/pages/ja/index.astro b/v3/src/pages/ja/index.astro
index 2ceabd63..562f4b1d 100644
--- a/v3/src/pages/ja/index.astro
+++ b/v3/src/pages/ja/index.astro
@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
-import Carousel from '~/components/widgets/Carousel.jsx';
+import Carousel from '~/components/widgets/Carousel.astro';
 import Note from '~/components/widgets/Note.astro';
 
 const metadata = {
@@ -44,12 +44,11 @@ const metadata = {
     <Fragment slot="content">
       <br /><br />
       <Carousel
-        client:load
         list={[
-          { src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/main.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/console.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/custom.png', className: 'rounded-[15px] border border-gray-700' },
+          { src: '/remote.jpg', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/main.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/console.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/custom.png', class: 'rounded-[15px] border border-gray-700' },
         ]}
       />
     </Fragment>
diff --git a/v3/src/pages/ko/index.astro b/v3/src/pages/ko/index.astro
index 65fe8e0c..bfad8a8b 100644
--- a/v3/src/pages/ko/index.astro
+++ b/v3/src/pages/ko/index.astro
@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
-import Carousel from '~/components/widgets/Carousel.jsx';
+import Carousel from '~/components/widgets/Carousel.astro';
 import Note from '~/components/widgets/Note.astro';
 
 const metadata = {
@@ -44,12 +44,11 @@ const metadata = {
     <Fragment slot="content">
       <br /><br />
       <Carousel
-        client:load
         list={[
-          { src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/main.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/console.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/custom.png', className: 'rounded-[15px] border border-gray-700' },
+          { src: '/remote.jpg', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/main.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/console.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/custom.png', class: 'rounded-[15px] border border-gray-700' },
         ]}
       />
     </Fragment>
diff --git a/v3/src/pages/pt/index.astro b/v3/src/pages/pt/index.astro
index ce786922..f2ebf6bf 100644
--- a/v3/src/pages/pt/index.astro
+++ b/v3/src/pages/pt/index.astro
@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
-import Carousel from '~/components/widgets/Carousel.jsx';
+import Carousel from '~/components/widgets/Carousel.astro';
 import Note from '~/components/widgets/Note.astro';
 
 const metadata = {
@@ -45,12 +45,11 @@ const metadata = {
     <Fragment slot="content">
       <br /><br />
       <Carousel
-        client:load
         list={[
-          { src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/main.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/console.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/custom.png', className: 'rounded-[15px] border border-gray-700' },
+          { src: '/remote.jpg', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/main.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/console.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/custom.png', class: 'rounded-[15px] border border-gray-700' },
         ]}
       />
     </Fragment>
diff --git a/v3/src/pages/zh-cn/index.astro b/v3/src/pages/zh-cn/index.astro
index c7c78577..fc4f80b1 100644
--- a/v3/src/pages/zh-cn/index.astro
+++ b/v3/src/pages/zh-cn/index.astro
@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
-import Carousel from '~/components/widgets/Carousel.jsx';
+import Carousel from '~/components/widgets/Carousel.astro';
 import Note from '~/components/widgets/Note.astro';
 
 const metadata = {
@@ -45,12 +45,11 @@ const metadata = {
     <Fragment slot="content">
       <br /><br />
       <Carousel
-        client:load
         list={[
-          { src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/main.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/console.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/custom.png', className: 'rounded-[15px] border border-gray-700' },
+          { src: '/remote.jpg', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/main.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/console.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/custom.png', class: 'rounded-[15px] border border-gray-700' },
         ]}
       />
     </Fragment>
diff --git a/v3/src/pages/zh-tw/index.astro b/v3/src/pages/zh-tw/index.astro
index df408d3d..96d30872 100644
--- a/v3/src/pages/zh-tw/index.astro
+++ b/v3/src/pages/zh-tw/index.astro
@@ -7,7 +7,7 @@ import Content from '~/components/widgets/Content.astro';
 import BlogLatestPosts from '~/components/widgets/BlogLatestPosts.astro';
 import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
-import Carousel from '~/components/widgets/Carousel.jsx';
+import Carousel from '~/components/widgets/Carousel.astro';
 import Note from '~/components/widgets/Note.astro';
 
 const metadata = {
@@ -44,12 +44,11 @@ const metadata = {
     <Fragment slot="content">
       <br /><br />
       <Carousel
-        client:load
         list={[
-          { src: '/remote.jpg', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/main.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/console.png', className: 'rounded-[15px] border border-gray-700' },
-          { src: '/custom.png', className: 'rounded-[15px] border border-gray-700' },
+          { src: '/remote.jpg', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/main.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/console.png', class: 'rounded-[15px] border border-gray-700' },
+          { src: '/custom.png', class: 'rounded-[15px] border border-gray-700' },
         ]}
       />
     </Fragment>