129 lines
6.5 KiB
TypeScript
129 lines
6.5 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import Layout from '@/layouts/client/layout';
|
|
import { useTranslations } from '@/utils/i18n';
|
|
import bespokeHeader from '@asset/img/products/color swatches.jpg';
|
|
import { Head } from '@inertiajs/react';
|
|
import { ClipboardList, Paintbrush, Palette, Truck } from 'lucide-react';
|
|
|
|
export default function Bespoke({
|
|
product,
|
|
}: {
|
|
product: [{ id: number; title: string; type: string; image_url: string }];
|
|
}) {
|
|
console.log(product);
|
|
const { t } = useTranslations();
|
|
return (
|
|
<>
|
|
<Layout>
|
|
<Head title="Bespoke Design" />
|
|
<section className="">
|
|
<div className="relative">
|
|
<div className="absolute h-full w-full bg-white/30"></div>
|
|
<img
|
|
src={bespokeHeader}
|
|
alt="Bespoke Design"
|
|
className="aspect-[16/4] object-cover object-center max-sm:aspect-[16/9]"
|
|
/>
|
|
<div className="absolute top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col gap-2">
|
|
<h1 className="text-center font-serif text-5xl font-medium tracking-tight max-md:text-4xl max-sm:text-2xl">
|
|
{t('pages.bespoke.sections.banner.title')}
|
|
</h1>
|
|
<p className="text-center text-lg text-gray-800 max-sm:text-sm">
|
|
{t('pages.bespoke.sections.banner.subTitle')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-18 max-sm:px-8">
|
|
<h2 className="text-center font-serif text-4xl font-medium max-md:text-2xl">
|
|
{t('pages.bespoke.sections.first.title')}
|
|
</h2>
|
|
<div className="grid grid-cols-4 gap-4 max-md:grid-cols-2 max-sm:grid-cols-1">
|
|
<div className="flex flex-col items-center justify-center gap-2">
|
|
<ClipboardList size={40} color="#5A1A1A" />
|
|
<p className="text-center font-serif text-xl font-medium">
|
|
{t(
|
|
'pages.bespoke.sections.first.card.first.title',
|
|
)}
|
|
</p>
|
|
<p className="px-4 text-center text-sm">
|
|
{t(
|
|
'pages.bespoke.sections.first.card.first.desc',
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center justify-center gap-2">
|
|
<Palette size={40} color="#5A1A1A" />
|
|
<p className="text-center font-serif text-xl font-medium">
|
|
{t(
|
|
'pages.bespoke.sections.first.card.second.title',
|
|
)}
|
|
</p>
|
|
<p className="px-4 text-center text-sm">
|
|
{t(
|
|
'pages.bespoke.sections.first.card.second.desc',
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center justify-center gap-2">
|
|
<Paintbrush size={40} color="#5A1A1A" />
|
|
<p className="text-center font-serif text-xl font-medium">
|
|
{t(
|
|
'pages.bespoke.sections.first.card.third.title',
|
|
)}
|
|
</p>
|
|
<p className="px-4 text-center text-sm">
|
|
{t(
|
|
'pages.bespoke.sections.first.card.third.desc',
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center justify-center gap-2">
|
|
<Truck size={40} color="#5A1A1A" />
|
|
<p className="text-center font-serif text-xl font-medium">
|
|
{t(
|
|
'pages.bespoke.sections.first.card.fourth.title',
|
|
)}
|
|
</p>
|
|
<p className="px-4 text-center text-sm">
|
|
{t(
|
|
'pages.bespoke.sections.first.card.fourth.desc',
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-18 max-sm:px-8">
|
|
<h3 className="text-center font-serif text-4xl font-medium max-md:text-2xl">
|
|
Bespoke Product
|
|
</h3>
|
|
<div className="grid grid-cols-4 gap-4">
|
|
{product.map((item) => (
|
|
<img
|
|
src={item.image_url}
|
|
alt={item.title}
|
|
className="aspect-[4/5] rounded-lg object-cover object-center"
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
<section className="mx-auto flex max-w-screen-2xl flex-col items-center gap-8 px-12 py-18 max-sm:px-8">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<h4 className="text-center font-serif text-4xl font-medium max-md:text-2xl">
|
|
{t('pages.bespoke.sections.second.title')}
|
|
</h4>
|
|
<p className="text-center max-md:text-sm">
|
|
{t('pages.bespoke.sections.second.desc')} <br />{' '}
|
|
{t('pages.bespoke.sections.second.desc2')}
|
|
</p>
|
|
</div>
|
|
|
|
<Button className="cursor-pointer">
|
|
{t('pages.bespoke.sections.second.button')}
|
|
</Button>
|
|
</section>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|