137 lines
7.1 KiB
TypeScript
137 lines
7.1 KiB
TypeScript
import Layout from '@/layouts/client/layout';
|
|
import { useTranslations } from '@/utils/i18n';
|
|
import kaleen from '@asset/img/about/kaleen.jpg';
|
|
import ns from '@asset/img/about/ns.gif';
|
|
import oko from '@asset/img/about/oko.gif';
|
|
import ourStory from '@asset/img/products/sci trad 8.jpg';
|
|
import { Head } from '@inertiajs/react';
|
|
|
|
import { HeartHandshake, Lightbulb, Target } from 'lucide-react';
|
|
export default function About() {
|
|
const { t } = useTranslations();
|
|
return (
|
|
<>
|
|
<Head title="About Us">
|
|
<meta
|
|
name="description"
|
|
content="Experience the finest hand-knotted carpets in Nepal with Soorya Carpet. Each piece is crafted by skilled artisans to deliver unmatched quality, luxury, and timeless design."
|
|
/>
|
|
</Head>
|
|
<Layout>
|
|
<section className="mx-auto flex max-w-screen-2xl flex-col gap-32 px-12 py-12 max-sm:px-8">
|
|
<div className="grid h-1/2 grid-cols-2 gap-20 overflow-clip max-md:grid-cols-1 max-md:gap-12">
|
|
<div className="flex flex-col gap-2">
|
|
<h1 className="font-serif text-5xl leading-tight font-medium tracking-tight max-sm:text-4xl">
|
|
{t('pages.about.sections.first.title')}
|
|
</h1>
|
|
<div className="flex flex-col gap-4 text-sm max-sm:text-base">
|
|
<p>
|
|
{t('pages.about.sections.first.desc.first')}
|
|
</p>
|
|
<p>
|
|
{t(
|
|
'pages.about.sections.first.desc.second',
|
|
)}
|
|
</p>
|
|
<p>
|
|
{t('pages.about.sections.first.desc.third')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<img
|
|
src={ourStory}
|
|
alt="Our Story"
|
|
className="aspect-[5/3] h-full w-full rounded-xl object-cover object-center"
|
|
/>
|
|
</div>{' '}
|
|
<div className="grid h-1/2 grid-cols-2 gap-20 overflow-clip max-md:grid-cols-1 max-md:gap-12">
|
|
<img
|
|
src={kaleen}
|
|
alt="Kaleen Story"
|
|
className="aspect-[5/3] h-full w-full rounded-xl object-cover object-center"
|
|
/>
|
|
<div className="flex flex-col gap-2">
|
|
<h2 className="font-serif text-5xl leading-tight font-medium tracking-tight max-sm:text-4xl">
|
|
{t('pages.about.sections.second.title')}
|
|
</h2>
|
|
<div className="flex flex-col gap-4 text-sm max-sm:text-base">
|
|
<p>
|
|
{t(
|
|
'pages.about.sections.second.desc.first',
|
|
)}
|
|
</p>
|
|
<p>
|
|
{t(
|
|
'pages.about.sections.second.desc.second',
|
|
)}
|
|
</p>
|
|
<p>
|
|
{t(
|
|
'pages.about.sections.second.desc.third',
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-12 py-12 max-md:px-6">
|
|
<h3 className="text-center font-serif text-5xl leading-tight font-medium tracking-tight max-sm:text-4xl">
|
|
{t('pages.about.sections.third.title')}
|
|
</h3>
|
|
<div className="flex gap-8 max-md:flex-col">
|
|
<div className="flex flex-col items-center gap-4 rounded-xl bg-accent px-8 py-8 text-center max-sm:px-4">
|
|
<Lightbulb size={48} color="#5A1A1A" />
|
|
<p className="font-serif text-3xl font-semibold">
|
|
{t(
|
|
'pages.about.sections.third.cards.first.title',
|
|
)}
|
|
</p>
|
|
<p className="text-justify text-lg tracking-tight">
|
|
{t(
|
|
'pages.about.sections.third.cards.first.desc',
|
|
)}
|
|
</p>
|
|
</div>{' '}
|
|
<div className="flex flex-col items-center gap-4 rounded-xl bg-accent px-8 py-8 text-center">
|
|
<Target size={48} color="#5A1A1A" />
|
|
<p className="font-serif text-3xl font-semibold">
|
|
{t(
|
|
'pages.about.sections.third.cards.second.title',
|
|
)}
|
|
</p>
|
|
<p className="text-justify text-lg tracking-tight">
|
|
{t(
|
|
'pages.about.sections.third.cards.second.desc',
|
|
)}
|
|
</p>
|
|
</div>{' '}
|
|
<div className="flex flex-col items-center gap-4 rounded-xl bg-accent px-8 py-8 text-center">
|
|
<HeartHandshake size={48} color="#5A1A1A" />
|
|
<p className="font-serif text-3xl font-semibold">
|
|
{t(
|
|
'pages.about.sections.third.cards.third.title',
|
|
)}
|
|
</p>
|
|
<p className="text-justify text-lg tracking-tight">
|
|
{t(
|
|
'pages.about.sections.third.cards.third.desc',
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-12 py-12">
|
|
<h4 className="text-center font-serif text-5xl leading-tight font-medium tracking-tight max-sm:text-4xl">
|
|
{t('pages.about.sections.fourth.title')}
|
|
</h4>
|
|
<div className="flex items-center justify-center gap-8">
|
|
<img src={ns} alt="NS Standard" />
|
|
<img src={oko} alt="OKO Standard" />
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|