diff --git a/bun.lockb b/bun.lockb
index 6760214..554b2b3 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 3dac749..dd07b41 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,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/public/images/imagem1.jpg b/public/images/imagem1.jpg
new file mode 100644
index 0000000..f7a1a8a
Binary files /dev/null and b/public/images/imagem1.jpg differ
diff --git a/public/images/imagem2.jpg b/public/images/imagem2.jpg
new file mode 100644
index 0000000..59c2911
Binary files /dev/null and b/public/images/imagem2.jpg differ
diff --git a/public/images/imagem3.jpg b/public/images/imagem3.jpg
new file mode 100644
index 0000000..c06aa2a
Binary files /dev/null and b/public/images/imagem3.jpg differ
diff --git a/src/app/[lang]/globals.css b/src/app/[lang]/globals.css
index 14ead5f..07b177a 100644
--- a/src/app/[lang]/globals.css
+++ b/src/app/[lang]/globals.css
@@ -52,3 +52,57 @@
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 0, 0, 0.4);
 }
+
+.custom-swiper {
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-image {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  border-radius: 8px;
+  transition: transform 0.3s ease-in-out;
+}
+
+@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/components/carousel.tsx b/src/components/carousel.tsx
new file mode 100644
index 0000000..98aebde
--- /dev/null
+++ b/src/components/carousel.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import { Autoplay, Pagination } from "swiper/modules";
+import { ReactNode } from "react";
+
+interface CarouselItem {
+  image?: string;
+  text?: ReactNode;
+}
+
+interface CarouselProps {
+  items: CarouselItem[];
+}
+
+export default function Carousel({ items }: CarouselProps) {
+  const hasText = items.some((item) => item.text !== undefined);
+
+  return (
+    <Swiper
+      slidesPerView={hasText ? 2 : 3}
+      spaceBetween={20}
+      centeredSlides={true}
+      loop={true}
+      autoplay={{
+        delay: 0,
+        disableOnInteraction: false,
+      }}
+      speed={3000}
+      breakpoints={{
+        0: { slidesPerView: hasText ? 1 : 2, spaceBetween: 10 },
+        768: { slidesPerView: hasText ? 2 : 2, spaceBetween: 15 },
+        1024: {
+          slidesPerView: hasText ? 2 : 3,
+          spaceBetween: hasText ? 10 : 20,
+          centeredSlides: hasText ? false : true,
+        },
+      }}
+      pagination={{
+        clickable: true,
+        type: "bullets",
+      }}
+      modules={[Autoplay, Pagination]}
+      className="custom-swiper"
+    >
+      {items.map((item, index) => (
+        <SwiperSlide key={index}>
+          {item.image ? (
+            <img
+              src={item.image}
+              alt={`Slide ${index + 1}`}
+              className="carousel-image"
+            />
+          ) : item.text ? (
+            <div>{item.text}</div>
+          ) : null}
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  );
+}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 5597376..684e8d7 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -12,7 +12,12 @@ 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) => {
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6d727ba..a5ea04a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,3 +1,4 @@
+import { Orbitron } from "next/font/google";
 import type { Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";