From 94586b6bb65e647b92ce464a917a1aaa00c0c21d Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 28 Jul 2026 07:32:31 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/ConnectWithUsSection.tsx b/src/components/sections/ConnectWithUsSection.tsx
new file mode 100644
index 0000000..9dcb626
--- /dev/null
+++ b/src/components/sections/ConnectWithUsSection.tsx
@@ -0,0 +1,129 @@
+'use client'
+
+import { useState } from "react"
+import Button from "@/components/ui/Button"
+import Input from "@/components/ui/Input"
+import { ArrowRight, Camera, Mail, MessageCircle } from 'lucide-react'
+
+export default function ConnectWithUsSection() {
+  const [name, setName] = useState("")
+  const [email, setEmail] = useState("")
+  const [message, setMessage] = useState("")
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Placeholder — send logic
+  }
+
+  return (
+    <section data-vula-section="connectwithus" id="connect-with-us" className="py-20 bg-[#f9f5f4]">
+      <div className="container mx-auto px-4 max-w-4xl">
+        <div className="text-center mb-14">
+          <h2 className="text-4xl font-serif font-bold text-[#21140d] mb-4">Let&apos;s talk botanicals</h2>
+          <p className="text-lg text-[#21140d]/70 max-w-xl mx-auto leading-relaxed">
+            Whether you need product advice, wholesale pricing, or a ritual recommendation —
+            send us a note. We reply personally within 24 hours.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-12 items-start">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label htmlFor="connect-name" className="block text-sm font-medium text-[#21140d]/80 mb-1">
+                Your name
+              </label>
+              <Input
+                id="connect-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Thandi"
+                required
+                className="w-full border-[#e2dad4] bg-white"
+              />
+            </div>
+            <div>
+              <label htmlFor="connect-email" className="block text-sm font-medium text-[#21140d]/80 mb-1">
+                Email address
+              </label>
+              <Input
+                id="connect-email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="thandi@example.com"
+                required
+                className="w-full border-[#e2dad4] bg-white"
+              />
+            </div>
+            <div>
+              <label htmlFor="connect-message" className="block text-sm font-medium text-[#21140d]/80 mb-1">
+                Message
+              </label>
+              <textarea
+                id="connect-message"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                placeholder="What brings you here?"
+                rows={4}
+                className="w-full border border-[#e2dad4] rounded-lg p-3 bg-white text-[#21140d] placeholder:text-[#21140d]/40 focus:outline-none focus:ring-2 focus:ring-[#8b5a3c]"
+                required
+              />
+            </div>
+            <Button
+              type="submit"
+              variant="default"
+              size="lg"
+              className="w-full bg-[#8b5a3c] hover:bg-[#7a4d32] text-white transition-all duration-200"
+            >
+              Send message <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+          </form>
+
+          <div className="space-y-6 pt-2">
+            <div className="bg-white rounded-xl p-6 border border-[#e2dad4]">
+              <h3 className="text-lg font-semibold text-[#21140d] mb-3">Reach us directly</h3>
+              <div className="space-y-3">
+                <a
+                  href="mailto:hello@ndlovunaturals.co.za"
+                  className="flex items-center gap-3 text-[#21140d]/70 hover:text-[#8b5a3c] transition-colors"
+                >
+                  <Mail className="w-5 h-5 text-[#8b5a3c]" />
+                  hello@ndlovunaturals.co.za
+                </a>
+                <a
+                  href="tel:+27761234567"
+                  className="flex items-center gap-3 text-[#21140d]/70 hover:text-[#8b5a3c] transition-colors"
+                >
+                  <MessageCircle className="w-5 h-5 text-[#16a34a]" />
+                  +27 76 123 4567
+                </a>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-xl p-6 border border-[#e2dad4]">
+              <h3 className="text-lg font-semibold text-[#21140d] mb-3">Follow our story</h3>
+              <div className="flex gap-4">
+                <a
+                  href="https://instagram.com/ndlovunaturals"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="p-3 rounded-full bg-[#f9f5f4] text-[#21140d] hover:bg-[#8b5a3c] hover:text-white transition-all duration-200"
+                >
+                  <Camera className="w-5 h-5" />
+                </a>
+                <a
+                  href="https://wa.me/27761234567"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="p-3 rounded-full bg-[#f9f5f4] text-[#21140d] hover:bg-[#16a34a] hover:text-white transition-all duration-200"
+                >
+                  <MessageCircle className="w-5 h-5" />
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file