Deploy

2026-07-28 07:32:31 +00:00
parent 1316a9adec
commit 94586b6bb6
1 changed files with 129 additions and 0 deletions
@@ -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>
  )
 }