INit
This commit is contained in:
Chief-spartan-117
190
resources/js/pages/art.tsx
Normal file
190
resources/js/pages/art.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import Layout from '@/layouts/client/layout';
|
||||
import artOfWeaving from '@asset/img/art/IMG_4715.jpg';
|
||||
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 { 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/70"></div>
|
||||
<img
|
||||
src={artOfWeaving}
|
||||
alt="Art of Weaving"
|
||||
className="aspect-[16/4] object-cover object-top"
|
||||
/>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user