admin/soorya-carpet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: New design and optimization

Browse Source
This commit is contained in:
admin
2025-10-27 13:23:05 +05:45
parent 63777cb3c1
commit db9315ad22
44 changed files with 2877 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
resources/js/pages/bespoke.tsx Normal file
View File

@@ -0,0 +1,128 @@
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>
</>
);
}