From da7450c960ddf0f1007afd24dad4e99b73d23703 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Sat, 1 Aug 2026 16:13:30 +0000
Subject: [PATCH] Deploy

---
 src/components/sections/OurStorySection.tsx | 45 +++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/sections/OurStorySection.tsx

diff --git a/src/components/sections/OurStorySection.tsx b/src/components/sections/OurStorySection.tsx
new file mode 100644
index 0000000..a26411c
--- /dev/null
+++ b/src/components/sections/OurStorySection.tsx
@@ -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>
+  )
+}
\ No newline at end of file