Deploy

src/components/sections/SalonDifferenceSection.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { GraduationCap, Scissors, Sparkles } from 'lucide-react'
+import { Card, CardContent } from '@/components/ui/Card'
+
+const differences = [
+  { icon: Scissors, title: 'Every service, one address', text: 'Cuts, colour, keratin, braids, perms and nails happen under one Fourways roof — no more driving across Joburg on a Saturday.' },
+  { icon: Sparkles, title: 'Chemistry meets heritage', text: 'Olaplex and Wella colour systems work alongside hand-tied braiding and natural-hair care, so your texture sets the rules.' },
+  { icon: GraduationCap, title: 'Trained in both worlds', text: 'Our stylists study international chemical techniques and African hair traditions — not just one trade.' },
+]
+
+export default function SalonDifferenceSection() {
+  return (
+    <section data-vula-section="salondifference" id="salon-difference" className="bg-[#F0F8FF] py-20 lg:py-24">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto mb-14 max-w-2xl text-center">
+          <p className="mb-2 text-sm font-semibold uppercase tracking-widest text-[#00A8CC]">What sets us apart</p>
+          <h2 className="text-3xl font-bold text-[#1A2B3C] lg:text-4xl">Why natural hair and colour live happily under one roof.</h2>
+          <div className="mx-auto mt-4 h-1 w-16 rounded-full bg-[#FFD700]" />
+        </div>
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+          {differences.map((item) => {
+            const Icon = item.icon
+            return (
+              <Card key={item.title} className="flex flex-col overflow-hidden rounded-xl bg-white shadow-md md:flex-row">
+                <div className="flex h-24 w-full flex-shrink-0 items-center justify-center bg-[#F0F8FF] md:h-auto md:w-1/3">
+                  <Icon className="h-8 w-8 text-[#0077BE]" />
+                </div>
+                <CardContent className="flex-1 p-5">
+                  <h3 className="text-lg font-semibold text-[#1A2B3C]">{item.title}</h3>
+                  <p className="mt-2 text-sm leading-relaxed text-[#1A2B3C]/70">{item.text}</p>
+                </CardContent>
+              </Card>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}