vula-projects/vula-d0bbd279
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy

Browse Source
This commit is contained in:
Vula Builder
2026-08-01 16:13:30 +00:00
parent 66d9bcce9a
commit da7450c960
1 changed files with 45 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/OurStorySection.tsx
+45
View File
@@ -0,0 +1,45 @@
import Image from 'next/image'
import Link from 'next/link'
export default function OurStorySection() {
return (
<section data-vula-section="ourstory" id="our-story" className="bg-white py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid items-center gap-14 lg:grid-cols-2">
<div className="relative">
<div className="overflow-hidden rounded-[14px] shadow-[0_16px_40px_rgba(0,0,0,0.08)]">
<Image src="https://images.pexels.com/photos/20164066/pexels-photo-20164066.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Artisan hands weaving a cushion cover in the Durban studio" width={800} height={520} className="h-[420px] w-full object-cover" />
</div>
<div className="absolute -bottom-6 -right-4 rotate-3 rounded-[14px] border-8 border-white bg-[#6b8e23] px-6 py-4 text-white shadow-[0_12px_30px_rgba(0,0,0,0.15)]">
<p className="font-sans text-2xl font-bold">Since 2016</p>
<p className="text-sm text-white/90">Morningside, Durban</p>
</div>
</div>
<div>
<p className="text-sm font-semibold uppercase tracking-[0.2em] text-[#ea580c]">Our story</p>
<h2 className="mt-3 font-sans text-3xl font-bold text-[#1b210d] sm:text-4xl">Made by hand, rooted in KwaZulu-Natal</h2>
<div className="mt-6 space-y-4 text-[#36454F]/80">
<p>Ukaya Home began in a small Morningside studio with three Durban artisans and a single loom. Today we work with a network of 18 crafters across KwaZulu-Natal and the Eastern Cape — weavers, ceramicists and needleworkers who translate Southern African pattern traditions into contemporary homeware.</p>
<p>Each cushion cover is woven from locally sourced cotton and mohair, then finished by hand. Our ceramics are thrown and glazed in small batches, with earthy tones drawn from the KwaZulu-Natal landscape. Every piece carries the maker's mark, and every order ships nationwide from our Durban studio.</p>
</div>
<div className="mt-8 grid gap-4 sm:grid-cols-3">
<div className="rounded-xl bg-[#f7f9f4] p-4">
<p className="font-sans text-2xl font-bold text-[#6b8e23]">18</p>
<p className="text-sm text-[#36454F]/70">Local artisan partners</p>
</div>
<div className="rounded-xl bg-[#f7f9f4] p-4">
<p className="font-sans text-2xl font-bold text-[#6b8e23]">100%</p>
<p className="text-sm text-[#36454F]/70">Handcrafted in SA</p>
</div>
<div className="rounded-xl bg-[#f7f9f4] p-4">
<p className="font-sans text-2xl font-bold text-[#6b8e23]">3-5</p>
<p className="text-sm text-[#36454F]/70">Day dispatch nationwide</p>
</div>
</div>
<Link href="/products" className="mt-8 inline-flex min-h-[48px] items-center justify-center rounded-full bg-[#6b8e23] px-8 py-4 text-sm font-semibold text-white transition-all duration-200 ease-out hover:bg-[#5a7a1e]">Explore the workshop collection</Link>
</div>
</div>
</div>
</section>
)
}