191 lines
10 KiB
TypeScript
191 lines
10 KiB
TypeScript
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import Layout from '@/layouts/client/layout';
|
|
import skill from '@asset/img/material/silk balls.jpg';
|
|
import skillYarn from '@asset/img/material/silk yarn.jpg';
|
|
import woolBall from '@asset/img/material/wool balls.jpg';
|
|
import woolYarn from '@asset/img/material/wool yarn.jpg';
|
|
import artOfWeaving from '@asset/img/production/IMG_2719.jpg';
|
|
import { Head } from '@inertiajs/react';
|
|
import { Flower, Hand, Package, Palette, Shirt } from 'lucide-react';
|
|
|
|
export default function Art() {
|
|
return (
|
|
<>
|
|
<Layout>
|
|
<Head title="Art of Weaving" />
|
|
<section>
|
|
<div className="relative">
|
|
<div className="absolute h-full w-full bg-white/60"></div>
|
|
<img
|
|
src={artOfWeaving}
|
|
alt="Art of Weaving"
|
|
className="aspect-[16/4] object-cover object-center"
|
|
/>
|
|
<h1 className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-serif text-7xl font-medium tracking-tight">
|
|
The Art of Weaving
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-12">
|
|
<h2 className="text-center font-serif text-4xl font-medium">
|
|
Our Craft: From Fiber to Fine Rug
|
|
</h2>
|
|
<Tabs
|
|
defaultValue="wool"
|
|
className="grid grid-cols-4 gap-8"
|
|
>
|
|
<TabsList className="!h-auto w-full flex-col">
|
|
<TabsTrigger
|
|
value="wool"
|
|
className="flex w-full gap-2 py-4"
|
|
>
|
|
<Shirt size={24} /> Wool Selection & Sorting
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="dyeing"
|
|
className="w-full py-4"
|
|
>
|
|
<Palette /> Artisan Dyeing
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="hand"
|
|
className="w-full py-4"
|
|
>
|
|
<Hand /> Hand Weaving
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="finish"
|
|
className="w-full py-4"
|
|
>
|
|
<Flower /> Finishing & Washing
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="quality"
|
|
className="w-full py-4"
|
|
>
|
|
<Package /> Quality Control & Packing
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<div className="col-span-3">
|
|
<TabsContent value="wool">
|
|
<div className="flex flex-col gap-2">
|
|
<p className="font-serif text-2xl font-medium">
|
|
Wool Selection & Sorting
|
|
</p>
|
|
<p>
|
|
Careful selection of the finest wool
|
|
fibers, meticulously sorted by
|
|
quality and texture to ensure only
|
|
the best make it into our carpets.
|
|
</p>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="dyeing">
|
|
<div className="flex flex-col gap-2">
|
|
<p className="font-serif text-2xl font-medium">
|
|
Artisan Dyeing
|
|
</p>
|
|
<p>
|
|
Fibers are dyed using traditional
|
|
methods and natural pigments,
|
|
achieving rich, vibrant, and
|
|
enduring colors that tell a story.
|
|
</p>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="hand">
|
|
<div className="flex flex-col gap-2">
|
|
<p className="font-serif text-2xl font-medium">
|
|
Hand Weaving
|
|
</p>
|
|
<p>
|
|
Skilled artisans hand-weave each
|
|
knot with precision and passion,
|
|
creating intricate patterns and
|
|
unparalleled durability.
|
|
</p>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="finish">
|
|
<div className="flex flex-col gap-2">
|
|
<p className="font-serif text-2xl font-medium">
|
|
Finishing & Washing
|
|
</p>
|
|
<p>
|
|
Carpets undergo specialized washing,
|
|
shearing, and meticulous
|
|
hand-finishing to enhance their
|
|
luster and softness.
|
|
</p>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="quality">
|
|
<div className="flex flex-col gap-2">
|
|
<p className="font-serif text-2xl font-medium">
|
|
Quality Control & Packing
|
|
</p>
|
|
<p>
|
|
Each rug passes rigorous quality
|
|
checks before being carefully packed
|
|
for its journey to your home,
|
|
ensuring perfection.
|
|
</p>
|
|
</div>
|
|
</TabsContent>
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
|
|
<div className="mx-auto flex max-w-screen-2xl flex-col gap-12 px-12 py-8">
|
|
<h3 className="text-center font-serif text-4xl font-medium">
|
|
Exquisite Materials
|
|
</h3>
|
|
<div className="grid grid-cols-4 gap-6">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img
|
|
src={skill}
|
|
alt="Skill ball"
|
|
className="aspect-square rounded-lg object-cover object-center"
|
|
/>
|
|
<p className="font-serif text-lg font-medium">
|
|
Skill Ball
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img
|
|
src={skillYarn}
|
|
alt="Skill yarn"
|
|
className="aspect-square rounded-lg object-cover object-center"
|
|
/>
|
|
<p className="font-serif text-lg font-medium">
|
|
Skill Yarn
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img
|
|
src={woolBall}
|
|
alt="wool ball"
|
|
className="aspect-square rounded-lg object-cover object-center"
|
|
/>
|
|
<p className="font-serif text-lg font-medium">
|
|
Wool Ball
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<img
|
|
src={woolYarn}
|
|
alt="wool yarn"
|
|
className="aspect-square rounded-lg object-cover object-center"
|
|
/>
|
|
<p className="font-serif text-lg font-medium">
|
|
Wool Yarn
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
</>
|
|
);
|
|
}
|