diff --git a/package.json b/package.json
index 5608f85d..7c1ce80b 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "next": "14.2.16",
     "react": "^18",
     "react-dom": "^18",
-    "react-intersection-observer": "^9.13.1"
+    "react-intersection-observer": "^9.13.1",
+    "swiper": "^11.2.1"
   },
   "devDependencies": {
     "@types/eslint": "^8.56.6",
diff --git a/src/app/[lang]/globals.css b/src/app/[lang]/globals.css
index 14ead5f2..c260a15f 100644
--- a/src/app/[lang]/globals.css
+++ b/src/app/[lang]/globals.css
@@ -52,3 +52,62 @@
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 0, 0, 0.4);
 }
+
+.custom-swiper {
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-image {
+  max-width: 490px;
+  height: auto;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+@media (max-width: 768px) {
+  .carousel-image {
+    max-width: 316px;
+  }
+}
+
+@media (max-width: 768px) {
+  .carousel-image {
+    width: 316.43px;
+    height: 237px;
+  }
+}
+
+@media (min-width: 769px) {
+  .carousel-image {
+    width: 490px;
+    height: 367px;
+  }
+}
+
+.swiper-pagination {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .swiper-pagination {
+    display: block;
+    bottom: 10px;
+    --swiper-theme-color: #ff6f00;
+    --swiper-pagination-bottom: -4px;
+  }
+
+  .swiper-pagination-bullet {
+    opacity: 0.6;
+  }
+}
+
+/* Estilo para o segundo texto */
+.carousel-text-wrapper.second-text .carousel-text {
+  font-family: "Inter", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: justify;
+  color: #6e6e6e; /* Cinza */
+}
diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
index 1ef809e7..49b2186c 100644
--- a/src/app/[lang]/page.tsx
+++ b/src/app/[lang]/page.tsx
@@ -1,3 +1,3 @@
 export default function Home() {
   return <main className="flex-col items-center justify-center">Home</main>;
-}
+}
\ No newline at end of file
diff --git a/src/components/carousel.tsx b/src/components/carousel.tsx
new file mode 100644
index 00000000..4cb3f4bb
--- /dev/null
+++ b/src/components/carousel.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+
+import { Autoplay, Pagination } from "swiper/modules";
+
+interface CarouselProps {
+  items: React.ReactNode[];
+  autoplay?: number;
+}
+
+export default function Carousel({ items, autoplay }: CarouselProps) {
+  const hasText = items.some((item) => item !== undefined);
+
+  return (
+    <Swiper
+      slidesPerView={1}
+      spaceBetween={30}
+      centeredSlides={true}
+      autoplay={
+        autoplay ? { delay: autoplay, disableOnInteraction: false } : false
+      }
+      loop={true}
+      navigation={true}
+      breakpoints={{
+        0: { slidesPerView: hasText ? 1 : 2, spaceBetween: 10 },
+        768: { slidesPerView: hasText ? 2 : 2, spaceBetween: 15 },
+        1024: {
+          slidesPerView: hasText ? 3 : 3,
+          spaceBetween: hasText ? 10 : 20,
+          centeredSlides: hasText ? false : true,
+        },
+      }}
+      pagination={{
+        clickable: false,
+        type: "bullets",
+      }}
+      modules={[Autoplay, Pagination]}
+      className="custom-swiper"
+    >
+      {items.map((item, index) => (
+        <SwiperSlide className="" key={index}>
+          {item}
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  );
+}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 985dbdcb..bb5b1aec 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -12,12 +12,7 @@ const Footer = () => {
     <footer className=" flex flex-col place-items-center bg-[#EBEBEB] px-5 pb-16 pt-8 sm:flex-row sm:place-items-end sm:px-7 md:px-20">
       <div className="flex w-full max-w-[500px] flex-col place-items-center justify-center space-y-5 sm:w-1/2 sm:max-w-max sm:flex-col-reverse md:place-items-start">
         <div className="w-full space-y-6 pb-2.5 sm:mt-[50px] sm:w-80 sm:pb-0">
-          <Image
-            src="/logo/cesium.svg"
-            alt="CeSIUM Logo Icon"
-            width={32}
-            height={37}
-          />
+          <Image src="/logo/cesium.svg" alt="CeSIUM Logo Icon" width={32} height={37} />
           <p className="text-sm leading-[17px] text-[#94959C]">{dict.cesium}</p>
           <div className="justify-left flex h-[30px] space-x-5">
             {dict.socials.map((social) => {