Deploy

src/components/sections/FindYourIkayaStyleSection.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { ArrowRight } from 'lucide-react'
+
+export default function FindYourIkayaStyleSection() {
+  return (
+    <section data-vula-section="findyourikayastyle" id="find-your-style" className="relative overflow-hidden bg-[#21140d]">
+      <div className="relative h-[70vh] lg:h-[80vh]">
+        <Image
+          src="https://images.pexels.com/photos/25568754/pexels-photo-25568754.jpeg?auto=compress&cs=tinysrgb&h=350"
+          alt="Sunlit Durban lounge styled with iKhaya cushions, throws and ceramics"
+          fill
+          sizes="100vw"
+          className="object-cover opacity-80"
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-[#21140d]/75 via-[#21140d]/30 to-transparent" />
+        <div className="absolute inset-0 flex items-center">
+          <div className="mx-auto w-full max-w-6xl px-4">
+            <div className="max-w-xl">
+              <p className="mb-3 text-sm font-semibold uppercase tracking-widest text-[#e2d9d4]">The iKhaya Edit</p>
+              <h2 className="font-display text-4xl leading-tight text-white sm:text-5xl lg:text-6xl">Ready to bring iKhaya into your home?</h2>
+              <p className="mt-6 mb-8 max-w-md text-lg text-[#f9f5f4]/90">Shop handcrafted cushions, throws and ceramics made by Durban artisans &mdash; shipped nationwide.</p>
+              <Link
+                href="/products"
+                className="inline-flex items-center gap-2 rounded-xl bg-[#ea580c] px-6 py-3.5 text-base font-semibold text-white transition-all duration-200 ease-out hover:gap-3 hover:bg-[#c24a0a]"
+              >
+                Explore the collection <ArrowRight className="h-5 w-5" />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}