Deploy

src/components/sections/BrandValuesSection.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { Award, Heart, Users } from 'lucide-react'
+
+export default function BrandValuesSection() {
+  const values = [
+    { icon: Users, title: "Community First", description: "Every purchase from Ubuntu Thread supports local artisans and township collectives across South Africa." },
+    { icon: Heart, title: "Authentic Identity", description: "We blend global streetwear silhouettes with distinctly South African prints, textures, and stories." },
+    { icon: Award, title: "Uncompromising Quality", description: "Premium fabrics and construction ensure our gear withstands the energy of urban life in Joburg, Durban, and Cape Town." }
+  ]
+
+  return (
+    <section data-vula-section="brandvalues" id="values" className="bg-white py-20 lg:py-28">
+      <div className="container mx-auto px-4 max-w-6xl">
+        <div className="text-center mb-16">
+          <p className="text-sm uppercase tracking-widest text-[#d4a843] font-semibold mb-4">Our Ethos</p>
+          <h2 className="text-4xl lg:text-5xl font-bold tracking-tight text-[#0a0a0a] leading-tight">
+            Rooted in Community,<br />Built for the Streets.
+          </h2>
+          <p className="text-lg text-neutral-600 leading-relaxed mt-6 max-w-2xl mx-auto">
+            Ubuntu Thread is more than clothing — it&apos;s a movement that fuses global streetwear culture with the raw energy of South African townships. We exist to dress a generation that moves with purpose and pride.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+          {values.map((v, i) => {
+            const Icon = v.icon
+            return (
+              <div key={i} className="text-center">
+                <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-[#d4a843]/10 mb-5">
+                  <Icon className="w-7 h-7 text-[#d4a843]" />
+                </div>
+                <h3 className="text-xl font-semibold text-[#0a0a0a] mb-2">{v.title}</h3>
+                <p className="text-neutral-600 leading-relaxed">{v.description}</p>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}