🚧 wip: add base hero section component

bun.lock

@@ -17,6 +17,7 @@
         "react-dom": "19.2.3",
         "shadcn": "^3.6.3",
         "sonner": "^2.0.7",
+        "swiper": "^12.1.2",
         "tailwind-merge": "^3.4.0",
         "tw-animate-css": "^1.4.0",
         "ua-parser-js": "^2.0.8",
@@ -1328,6 +1329,8 @@
 
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
 
+    "swiper": ["swiper@12.1.2", "", {}, "sha512-4gILrI3vXZqoZh71I1PALqukCFgk+gpOwe1tOvz5uE9kHtl2gTDzmYflYCwWvR4LOvCrJi6UEEU+gnuW5BtkgQ=="],
+
     "tabbable": ["tabbable@6.4.0", "", {}, "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg=="],
 
     "tagged-tag": ["tagged-tag@1.0.0", "", {}, "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng=="],

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;

package.json

@@ -21,6 +21,7 @@
     "react-dom": "19.2.3",
     "shadcn": "^3.6.3",
     "sonner": "^2.0.7",
+    "swiper": "^12.1.2",
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",
     "ua-parser-js": "^2.0.8"

shared/types/swiper.d.ts

@@ -0,0 +1,2 @@
+declare module "swiper/css";
+declare module "swiper/css/*";