Deploy

2026-07-31 18:44:27 +00:00
parent 43f07da613
commit 12b47d1b7e
1 changed files with 36 additions and 0 deletions
@@ -0,0 +1,36 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { ArrowRight } from 'lucide-react'
+
+export default function ShopCTASection() {
+  return (
+    <section data-vula-section="shopcta" id="shop-collection" className="relative isolate overflow-hidden bg-[#36454F] py-20 lg:py-28">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6">
+        <div className="grid items-center gap-12 lg:grid-cols-2">
+          <div className="relative z-10">
+            <p className="text-xs font-semibold uppercase tracking-[0.25em] text-[#6b8e23]">The full collection</p>
+            <h2 className="mt-4 max-w-2xl text-4xl font-bold leading-tight text-[#f9f5f4] sm:text-5xl" style={{ fontFamily: 'var(--font-bricolage, sans-serif)' }}>Bring the Spirit of KZN Home</h2>
+            <p className="mt-5 max-w-xl text-lg leading-relaxed text-[#f9f5f4]/85">Every cushion, throw and ceramic begins in a rural KwaZulu-Natal community — Nongoma, Bulwer, Impendle and Hluhluwe — made by women-led co-operatives who pass their techniques from generation to generation.</p>
+            <div className="mt-8 flex flex-wrap items-center gap-4">
+              <Link href="/products" className="inline-flex items-center justify-center rounded-xl bg-[#ea580c] px-7 py-3.5 text-base font-bold text-white shadow-lg shadow-[#ea580c]/20 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:bg-[#c2450a]">
+                Shop the Collection
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </Link>
+              <span className="text-sm font-medium text-[#f9f5f4]/70">Free nationwide delivery over R1 000 · EFT and cards accepted</span>
+            </div>
+          </div>
+          <div className="relative hidden lg:block">
+            <div className="relative aspect-[4/3] overflow-hidden rounded-3xl shadow-2xl">
+              <Image src="https://images.pexels.com/photos/1350789/pexels-photo-1350789.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Modern living room styled with handwoven South African cushions and throws" fill sizes="(max-width: 1024px) 0px, 580px" className="object-cover" />
+              <Image src="https://images.pexels.com/photos/32405949/pexels-photo-32405949.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Rural KwaZulu-Natal landscape and artisan heritage overlay" fill sizes="(max-width: 1024px) 0px, 580px" className="object-cover opacity-50 mix-blend-multiply" />
+            </div>
+            <div className="absolute -bottom-6 -left-8 rotate-[-3deg] rounded-2xl bg-[#6b8e23] px-6 py-4 text-[#f9f5f4] shadow-xl">
+              <p className="text-sm font-bold uppercase tracking-wider">Women-led co-ops</p>
+              <p className="text-xs opacity-90">Nongoma · Bulwer · Impendle · Hluhluwe</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}