Deploy

src/components/sections/TrustCredentialsSection.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { Award, Shield, ThumbsUp, Users } from 'lucide-react'
+
+export default function TrustCredentialsSection() {
+  const stats = [
+    { icon: Award, value: '32+', label: "Years of Experience", color: "text-[#D4AF37]" },
+    { icon: Users, value: '5,000+', label: "Cases Handled", color: "text-[#D4AF37]" },
+    { icon: ThumbsUp, value: '98%', label: "Client Satisfaction", color: "text-[#D4AF37]" },
+    { icon: Shield, value: 'LSNP', label: "Professional Body Affiliation", color: "text-[#D4AF37]" },
+  ]
+
+  return (
+    <section data-vula-section="trustcredentials" id="trust-credentials" className="py-16 bg-[#000080]">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl font-bold text-white text-center mb-12">Why Choose Mashobane &amp; Associate?</h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+          {stats.map((stat, idx) => {
+            const Icon = stat.icon
+            return (
+              <div key={idx} className="text-center group hover:-translate-y-1 transition-all duration-200">
+                <Icon className="w-12 h-12 mx-auto mb-4 text-[#D4AF37] group-hover:scale-110 transition-transform duration-300" />
+                <p className={`text-4xl font-bold ${stat.color} mb-2`}>{stat.value}</p>
+                <p className="text-sm text-white/80">{stat.label}</p>
+              </div>
+            )
+          })}
+        </div>
+        <div className="mt-10 text-center">
+          <p className="text-white/60 text-sm">
+            Member of the Law Society of the Northern Provinces and Johannesburg Bar Association.
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}