🚧 wip: add base hero section component

features/home/index.tsx

@@ -1,7 +1,13 @@
 "use client";
 
+import Hero from "./sections/Hero/main";
+
 const HomeIndex = () => {
-  return <div className="text-center w-full">HomePage</div>;
+  return (
+    <div className="w-full pt-4">
+      <Hero />
+    </div>
+  );
 };
 
 export default HomeIndex;

features/home/sections/Hero/main.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay, Pagination, Navigation } from "swiper/modules";
+import "swiper/css";
+
+const Hero = () => {
+  return (
+    <div className="h-140 rounded-md overflow-hidden">
+      <Swiper
+        spaceBetween={0}
+        slidesPerView={1}
+        onSlideChange={() => console.log("slide change")}
+        onSwiper={(swiper) => console.log(swiper)}
+        className="h-full"
+        autoplay={{ delay: 5000, disableOnInteraction: false }}
+        modules={[Autoplay, Pagination, Navigation]}
+      >
+        <SwiperSlide className="bg-red-500">Slide 1</SwiperSlide>
+        <SwiperSlide className="bg-blue-500">Slide 2</SwiperSlide>
+        <SwiperSlide className="bg-green-500">Slide 3</SwiperSlide>
+      </Swiper>
+    </div>
+  );
+};
+
+export default Hero;