68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import index from '@/routes/index/index';
|
|
import { useTranslations } from '@/utils/i18n';
|
|
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 }];
|
|
}) {
|
|
const { t } = useTranslations();
|
|
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-3xl font-medium max-sm:text-lg">
|
|
{t('pages.home.banner.title')}
|
|
{/* A Beautiful Home
|
|
Deserves A Beautiful Carpet */}
|
|
</h1>
|
|
<p className="text-xl leading-tight max-sm:text-sm">
|
|
{t('pages.home.banner.subTitle')}
|
|
</p>
|
|
</div>
|
|
<Link href={index.product().url}>
|
|
<Button
|
|
variant={'secondary'}
|
|
size={'lg'}
|
|
className="cursor-pointer border border-primary bg-transparent text-lg ring-primary"
|
|
>
|
|
{t('pages.home.banner.button')} <MoveRightIcon />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|