From a87e72f13238a9cc32295d728c1e86595460d4a1 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Wed, 29 Jul 2026 19:04:17 +0000
Subject: [PATCH] Deploy

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

diff --git a/src/components/sections/ConnectWithDivaSection.tsx b/src/components/sections/ConnectWithDivaSection.tsx
new file mode 100644
index 0000000..91f1ccd
--- /dev/null
+++ b/src/components/sections/ConnectWithDivaSection.tsx
@@ -0,0 +1,134 @@
+'use client'
+
+import { useState } from "react"
+import Button from "@/components/ui/Button"
+import Input from "@/components/ui/Input"
+import { Camera, Globe, Linkedin, Mail, MapPin, MessageCircle, X } from 'lucide-react'
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card"
+
+export default function ConnectWithDivaSection() {
+  const [name, setName] = useState("")
+  const [email, setEmail] = useState("")
+  const [message, setMessage] = useState("")
+
+  const contactInfo = {
+    email: "info@divafashion.co.za",
+    phone: "+27 21 555 0199",
+    address: "42 Bree Street, Cape Town City Centre, 8001",
+    whatsappUrl: "https://wa.me/27215550199"
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // In production, send via API
+    console.log({ name, email, message })
+  }
+
+  return (
+    <section data-vula-section="connectwithdiva" id="connect" className="py-20 px-6 bg-[#0077BE] text-white">
+      <div className="max-w-5xl mx-auto">
+        <h2 className="text-3xl font-bold mb-4 text-center">Connect With Diva</h2>
+        <p className="text-white/70 text-center mb-12 max-w-xl mx-auto">
+          Got a style query, collaboration idea, or just want to say hi? We&apos;d love to hear from you.
+        </p>
+
+        <div className="grid md:grid-cols-2 gap-10">
+          {/* Contact form */}
+          <Card className="bg-white text-[#1A2B3C]">
+            <CardHeader>
+              <CardTitle className="text-xl">Send us a message</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium mb-1">Name</label>
+                  <Input
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Your name"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-1">Email</label>
+                  <Input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="you@example.com"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium mb-1">Message</label>
+                  <textarea
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    placeholder="Tell us what you're thinking..."
+                    rows={4}
+                    className="w-full rounded-lg border border-[#e7eaef] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#0077BE]"
+                    required
+                  />
+                </div>
+                <Button type="submit" variant="default" size="lg" className="w-full bg-[#0077BE] hover:bg-[#005fa3] text-white">
+                  Send Message
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+
+          {/* Contact details & social */}
+          <div className="flex flex-col justify-between space-y-8">
+            <div className="space-y-4">
+              <div className="flex items-start gap-3">
+                <Mail className="w-5 h-5 mt-0.5 text-[#FFD700]" />
+                <p className="text-white/90">{contactInfo.email}</p>
+              </div>
+              <div className="flex items-start gap-3">
+                <MapPin className="w-5 h-5 mt-0.5 text-[#FFD700]" />
+                <p className="text-white/90">{contactInfo.address}</p>
+              </div>
+              <Button
+                asChild
+                variant="outline"
+                size="default"
+                className="border-[#FFD700] text-[#FFD700] hover:bg-[#FFD700] hover:text-[#1A2B3C]"
+              >
+                <a href={contactInfo.whatsappUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
+                  <MessageCircle className="w-4 h-4" />
+                  WhatsApp Us
+                </a>
+              </Button>
+            </div>
+
+            {/* Social links */}
+            <div>
+              <h3 className="font-semibold text-lg mb-3">Follow us</h3>
+              <div className="flex gap-4">
+                <a href="https://instagram.com/divafashion" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="text-white hover:text-[#FFD700] transition-colors">
+                  <Camera className="w-6 h-6" />
+                </a>
+                <a href="https://facebook.com/divafashion" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="text-white hover:text-[#FFD700] transition-colors">
+                  <Globe className="w-6 h-6" />
+                </a>
+                <a href="https://x.com/divafashion" target="_blank" rel="noopener noreferrer" aria-label="X" className="text-white hover:text-[#FFD700] transition-colors">
+                  <X className="w-6 h-6" />
+                </a>
+                <a href="https://linkedin.com/company/divafashion" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="text-white hover:text-[#FFD700] transition-colors">
+                  <Linkedin className="w-6 h-6" />
+                </a>
+              </div>
+            </div>
+
+            {/* Note from founder */}
+            <blockquote className="border-l-4 border-[#FFD700] pl-4 italic text-white/80">
+              &ldquo;Fashion is about expressing who you are without saying a word. Diva was born in Cape Town to bring that confidence to every woman.&rdquo;
+              <footer className="mt-2 text-sm text-white/60">— Zanele Mokoena, Founder</footer>
+            </blockquote>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file