INit

resources/js/components/pages/Home/Swiper.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@/components/ui/button';
+import { Link } from '@inertiajs/react';
+import { MoveRightIcon } from 'lucide-react';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import { Navigation } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+export default function SwiperCarousel({
+    item,
+}: {
+    item: [{ image_url: string; alt: string }];
+}) {
+    return (
+        <>
+            <div
+                className="relative mx-auto max-w-screen-2xl overflow-clip"
+                id="hero_swiper"
+            >
+                <Swiper
+                    // spaceBetween={50}
+                    slidesPerView={1}
+                    loop={true}
+                    autoplay={{
+                        delay: 1500,
+                    }}
+                    className="w-full"
+                    navigation={true}
+                    modules={[Navigation]}
+                >
+                    {item.map((e) => (
+                        <SwiperSlide className="relative !w-full overflow-clip">
+                            <img
+                                src={e.image_url}
+                                alt={e.alt}
+                                className="mx-auto aspect-[16/6.5] h-full !w-full max-w-screen-2xl object-cover object-center max-sm:aspect-video"
+                            />
+                        </SwiperSlide>
+                    ))}
+                </Swiper>
+                <div className="absolute bottom-7 left-12 z-50 flex w-md flex-col gap-6 rounded-lg bg-[#FFF5F1]/80 px-12 py-6 font-serif">
+                    <div className="flex flex-col gap-1">
+                        <h1 className="text-4xl font-medium">
+                            Feel More Like Home
+                        </h1>
+                        <p className="text-xl leading-tight">
+                            Carpets that are made with care from ground up
+                        </p>
+                    </div>
+                    <Link href="">
+                        <Button
+                            variant={'secondary'}
+                            size={'lg'}
+                            className="cursor-pointer border border-primary bg-transparent text-lg ring-primary"
+                        >
+                            Discover More <MoveRightIcon />
+                        </Button>
+                    </Link>
+                </div>
+            </div>
+        </>
+    );
+}