Deploy

2026-07-29 18:15:22 +00:00
parent 9b767dc864
commit 6243f66138
1 changed files with 143 additions and 0 deletions
@@ -0,0 +1,143 @@
+'use client'
+
+import { useState } from "react"
+import { Camera, Mail, MapPin, MessageCircle, Phone, Send, Video, X } from 'lucide-react'
+
+import Button from "@/components/ui/Button"
+import Input from "@/components/ui/Input"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card"
+
+export default function KeepMzansiConnectedSection() {
+  const [formData, setFormData] = useState({ name: "", email: "", message: "" })
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }))
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Simulate send
+    setSubmitted(true)
+    setTimeout(() => setSubmitted(false), 3000)
+  }
+
+  const contactMethods = [
+    { icon: Phone, label: "Call us", value: "+27 11 234 5678" },
+    { icon: Mail, label: "Email", value: "hello@mzansi.co.za" },
+    { icon: MapPin, label: "Visit", value: "42 Bree Street, Cape Town, 8001" },
+  ]
+
+  return (
+    <section data-vula-section="keepmzansiconnected" id="contact" className="py-20 bg-[#ffffff]">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <h2 className="text-4xl font-black uppercase tracking-tight text-[#101418]">
+            Keep <span className="bg-[#d4af37] text-[#101418] px-2">Mzansi</span> connected
+          </h2>
+          <p className="mt-4 text-lg text-[#101418]/70 max-w-xl mx-auto">
+            Hit us up — sizing questions, collab ideas, or just to say &quot;Awe!&quot; We reply fast.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          {/* Enquiry form */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-xl font-bold text-[#101418]">Send a message</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {submitted ? (
+                <p className="text-[#16a34a] font-medium">Thanks yini! We&apos;ll get back to you sharp.</p>
+              ) : (
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <Input
+                    type="text"
+                    name="name"
+                    placeholder="Your name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
+                  />
+                  <Input
+                    type="email"
+                    name="email"
+                    placeholder="Your email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
+                  />
+                  <textarea
+                    name="message"
+                    rows={3}
+                    placeholder="What&apos;s on your mind?"
+                    value={formData.message}
+                    onChange={handleChange}
+                    required
+                    className="w-full border-2 border-[#e7eaef] rounded-lg px-4 py-3 text-sm focus:outline-none focus:border-[#ea580c]"
+                  />
+                  <Button
+                    type="submit"
+                    variant="default"
+                    className="bg-[#ea580c] hover:bg-[#d4500a] text-white font-bold w-full"
+                  >
+                    <Send className="w-4 h-4 mr-2" /> Send
+                  </Button>
+                </form>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Contact details + social */}
+          <div className="space-y-6">
+            <Card>
+              <CardContent className="pt-6 space-y-4">
+                {contactMethods.map((method) => {
+                  const Icon = method.icon
+                  return (
+                    <div key={method.label} className="flex items-start gap-3">
+                      <Icon className="w-5 h-5 mt-0.5 text-[#ea580c]" />
+                      <div>
+                        <p className="text-sm text-[#101418]/60 font-medium">{method.label}</p>
+                        <p className="text-[#101418] font-semibold">{method.value}</p>
+                      </div>
+                    </div>
+                  )
+                })}
+              </CardContent>
+            </Card>
+
+            {/* WhatsApp button */}
+            <a
+              href="https://wa.me/27712345678"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block"
+            >
+              <Button
+                variant="default"
+                size="lg"
+                className="bg-[#16a34a] hover:bg-[#148a3e] text-white font-bold w-full flex items-center justify-center gap-2 border-2 border-[#16a34a] shadow-[6px_6px_0_0_#101418]"
+              >
+                <MessageCircle className="w-5 h-5" /> WhatsApp us now
+              </Button>
+            </a>
+
+            {/* Social links */}
+            <div className="flex gap-4 justify-center pt-4">
+              <a href="https://instagram.com/mzansi" target="_blank" rel="noopener noreferrer" className="p-3 bg-[#e7eaef] rounded-full hover:bg-[#ea580c] hover:text-white transition-all duration-200 ease-out">
+                <Camera className="w-6 h-6" />
+              </a>
+              <a href="https://x.com/mzansi" target="_blank" rel="noopener noreferrer" className="p-3 bg-[#e7eaef] rounded-full hover:bg-[#ea580c] hover:text-white transition-all duration-200 ease-out">
+                <X className="w-6 h-6" />
+              </a>
+              <a href="https://tiktok.com/@mzansi" target="_blank" rel="noopener noreferrer" className="p-3 bg-[#e7eaef] rounded-full hover:bg-[#ea580c] hover:text-white transition-all duration-200 ease-out">
+                <Video className="w-6 h-6" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}