63 lines
2.4 KiB
TypeScript
63 lines
2.4 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|