vula-projects/vula-178c5c77
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy

Browse Source
This commit is contained in:
Vula Builder
2026-06-23 08:38:57 +00:00
parent 37cac79af7
commit fb5264cb7c
1 changed files with 76 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/HollaAtUsSection.tsx
+76
View File
@@ -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>
)
}