changed some styles

features/home/components/Carousel.tsx

@@ -2,8 +2,11 @@
 import Image, { type StaticImageData } from "next/image";
 import Link from "next/link";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay } from "swiper/modules";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
+
 import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
 
 type CarouselItem = {
   title: string;
@@ -13,12 +16,20 @@ type CarouselItem = {
 
 export default function HeroCarousel({ items }: { items: CarouselItem[] }) {
   return (
-    <section className="rounded-2xl overflow-hidden">
+    <section className="rounded-2xl overflow-hidden relative">
       <Swiper
-        modules={[Autoplay]}
+        modules={[Autoplay, Navigation, Pagination]}
         slidesPerView={1}
         loop
+        navigation
         autoplay={{ delay: 3000, disableOnInteraction: false }}
+        pagination={{ clickable: true }}
+        className="
+          [&_.swiper-button-next]:text-white!
+          [&_.swiper-button-prev]:text-white!
+          [&_.swiper-pagination-bullet]:bg-white!
+          [&_.swiper-pagination-bullet-active]:bg-white!
+        "
       >
         {items.map((item, i) => (
           <SwiperSlide key={i}>