Deploy

src/components/sections/UbuntuTeamSection.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import Image from 'next/image'
+
+const team = [
+  {
+    name: 'Nompumelelo Zondi',
+    role: 'Host & Manager',
+    message:
+      'I have been welcoming guests since 2004. For me, ubuntu means every visitor leaves as family. I love seeing their faces light up when they spot a zebra from the veranda.',
+    image: 'https://images.pexels.com/photos/8837170/pexels-photo-8837170.jpeg?auto=compress&cs=tinysrgb&h=350',
+  },
+  {
+    name: 'Thandiwe Mthembu',
+    role: 'Hospitality Coordinator',
+    message:
+      'Making sure every room is perfect and every breakfast is warm is my joy. KwaNtofontofo is a home, and I take pride in that feeling.',
+    image: 'https://images.pexels.com/photos/8837170/pexels-photo-8837170.jpeg?auto=compress&cs=tinysrgb&h=350',
+  },
+  {
+    name: 'Sipho Dlamini',
+    role: 'Grounds & Maintenance',
+    message:
+      'I keep the garden, pool, and braai area pristine. Our guests deserve a beautiful outside space to relax and connect with nature.',
+    image: 'https://images.pexels.com/photos/8837170/pexels-photo-8837170.jpeg?auto=compress&cs=tinysrgb&h=350',
+  },
+]
+
+export default function UbuntuTeamSection() {
+  return (
+    <section data-vula-section="ubuntuteam" id="ubuntu-team" className="bg-[#FDF6EC] py-24 px-4">
+      <div className="max-w-6xl mx-auto">
+        <h2 className="text-4xl font-bold text-[#2C1810] text-center mb-4">The People Behind the Welcome</h2>
+        <p className="text-center text-[#2C1810]/70 mb-12 max-w-xl mx-auto">
+          A small team with big hearts – our staff live the spirit of ubuntu every day.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {team.map((member, i) => (
+            <div
+              key={i}
+              className="rounded-xl overflow-hidden bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out"
+            >
+              <div className="aspect-[4/5] overflow-hidden">
+                <Image
+                  src={member.image}
+                  alt={member.name}
+                  width={400}
+                  height={500}
+                  className="object-cover w-full h-full"
+                />
+              </div>
+              <div className="p-5">
+                <h3 className="text-lg font-bold text-[#2C1810]">{member.name}</h3>
+                <p className="text-sm font-medium text-[#E67E22] mb-3">{member.role}</p>
+                <p className="text-sm text-[#2C1810]/70 leading-relaxed italic">"{member.message}"</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}