Deploy

2026-06-23 08:38:57 +00:00
parent 37cac79af7
commit fb5264cb7c
1 changed files with 76 additions and 0 deletions
@@ -0,0 +1,76 @@
+'use client'
+
+import { Camera, Mail, MapPin, MessageCircle, Video } from 'lucide-react'
+
+import Button from '@/components/ui/Button'
+
+export default function HollaAtUsSection() {
+  return (
+    <section data-vula-section="hollaatus" id="holla-at-us" className="bg-white py-20 px-6">
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-4xl md:text-5xl font-bold text-[#18181b] uppercase tracking-tight">
+            Holla at Us
+          </h2>
+          <p className="text-lg text-[#111827]/70 mt-4 max-w-lg mx-auto">
+            We stay connected with the S.A.W community. Slide through — we\'re always down to chat.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* Email */}
+          <div className="text-center p-6 rounded-xl border border-[#e5e7eb] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] transition-all duration-200">
+            <Mail className="w-8 h-8 text-[#18181b] mx-auto mb-4" />
+            <h3 className="text-lg font-bold text-[#18181b] mb-2">Email</h3>
+            <a href="mailto:hello@sawstreetwear.co.za" className="text-[#111827] hover:underline">
+              hello@sawstreetwear.co.za
+            </a>
+          </div>
+
+          {/* WhatsApp */}
+          <div className="text-center p-6 rounded-xl border border-[#e5e7eb] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] transition-all duration-200">
+            <MessageCircle className="w-8 h-8 text-[#25D366] mx-auto mb-4" />
+            <h3 className="text-lg font-bold text-[#18181b] mb-2">WhatsApp</h3>
+            <a
+              href="https://wa.me/27712345678"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[#111827] hover:underline"
+            >
+              +27 71 234 5678
+            </a>
+            <p className="text-sm text-[#111827]/60 mt-2">Mon–Fri 09:00–18:00, Sat 10:00–15:00</p>
+          </div>
+
+          {/* Social + Location */}
+          <div className="text-center p-6 rounded-xl border border-[#e5e7eb] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] transition-all duration-200">
+            <MapPin className="w-8 h-8 text-[#18181b] mx-auto mb-4" />
+            <h3 className="text-lg font-bold text-[#18181b] mb-2">Social &amp; Spot</h3>
+            <div className="flex justify-center gap-4 mb-4">
+              <a href="https://instagram.com/sawstreetwear" target="_blank" rel="noopener noreferrer" className="hover:opacity-70 transition-opacity">
+                <Camera className="w-6 h-6 text-[#18181b]" />
+              </a>
+              <a href="https://tiktok.com/@sawstreetwear" target="_blank" rel="noopener noreferrer" className="hover:opacity-70 transition-opacity">
+                <Video className="w-6 h-6 text-[#18181b]" />
+              </a>
+            </div>
+            <p className="text-sm text-[#111827]/60">
+              Pop-up: 12 Fox Street, Marshalltown, Joburg
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-12 text-center">
+          <Button
+            as="a"
+            href="#drop-signup"
+            variant="default"
+            className="bg-[#18181b] text-white hover:bg-[#36454F] px-8 py-3 rounded-lg font-bold"
+          >
+            DM Us for Collabs
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}