Deploy

src/components/sections/CTAShopSection.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import Link from 'next/link'
+import Button from '@/components/ui/Button'
+import { ArrowRight } from 'lucide-react'
+
+export default function CTAShopSection() {
+  return (
+    <section data-vula-section="ctashop" id="cta-shop" className="relative py-24 bg-[#8b5a3c] overflow-hidden">
+      {/* Subtle botanical pattern hint */}
+      <div className="absolute inset-0 opacity-5 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+PHBhdGggZD0iTTM2IDM0Yy0yIDgtMTAgNi0xMCAwIDAtNiA4LTggMTAgMHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=')" />
+      <div className="relative max-w-4xl mx-auto px-4 text-center">
+        <h2 className="text-4xl md:text-5xl font-bold text-white mb-4 leading-tight">
+          Discover Your Skin&apos;s Best-Kept Secret
+        </h2>
+        <p className="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
+          Cold-pressed marula, rooibos-infused oils, and buchu extracts — small-batch handcrafted in Pretoria.
+        </p>
+        <Link href="/products">
+          <Button variant="default" size="lg" className="bg-[#6b8e23] hover:bg-[#5a7a1d] text-white border-none shadow-xl shadow-black/20 group">
+            Explore the Collection
+            <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+          </Button>
+        </Link>
+      </div>
+    </section>
+  )
+}