From 82a46dc1ec17f4d84cb51903a810213a317e0aa5 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 15 Sep 2026 18:02:58 +0000
Subject: [PATCH] Deploy

---
 .../sections/MeetTheTeamSection.tsx           | 89 +++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 src/components/sections/MeetTheTeamSection.tsx

diff --git a/src/components/sections/MeetTheTeamSection.tsx b/src/components/sections/MeetTheTeamSection.tsx
new file mode 100644
index 0000000..a21755d
--- /dev/null
+++ b/src/components/sections/MeetTheTeamSection.tsx
@@ -0,0 +1,89 @@
+'use client'
+import { useVulaContent } from '@/hooks/useVulaContent'
+import Image from "next/image"
+import Link from "next/link"
+import Badge from "@/components/ui/Badge"
+import Button from "@/components/ui/Button"
+
+
+
+export default function MeetTheTeamSection() {
+  const { items } = useVulaContent('meet_the_team')
+  const team = items.map((i) => i.data as Record<string, any>)
+
+  return (
+    <section data-vula-cms="meet_the_team" data-vula-section="meettheteam" id="meet-the-team" className="bg-muted text-foreground py-20 sm:py-24">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="max-w-[44ch]">
+          <p className="text-sm font-medium uppercase tracking-wide text-primary">Meet the team</p>
+          <h2 className="mt-3 text-3xl sm:text-4xl font-bold tracking-tight">
+            One chiropractor, <span className="text-primary">one unhurried room</span>.
+          </h2>
+        </div>
+
+        <div className="mt-12 grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {team.map((person, i) =>
+            i === 0 ? (
+              <div
+                key={person.name}
+                className="lg:col-span-2 grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center bg-card rounded-3xl shadow-md hover:shadow-xl transition-all duration-200 hover:-translate-y-1 p-6 sm:p-8"
+              >
+                <div
+                  className="lg:col-span-5 relative aspect-[4/5] w-full overflow-hidden"
+                  style={{ borderRadius: "999px 999px 28px 28px" }}
+                >
+                  <Image
+                    src={person.image}
+                    alt={"Portrait of " + person.name}
+                    fill
+                    sizes="(max-width: 1024px) 100vw, 40vw"
+                    className="object-cover"
+                  />
+                </div>
+                <div className="lg:col-span-7">
+                  <h3 className="text-2xl sm:text-3xl font-bold">{person.name}</h3>
+                  <p className="mt-2 text-sm font-medium text-primary">{person.role}</p>
+                  <p className="mt-4 max-w-[44ch] leading-relaxed text-muted-foreground">{person.bio}</p>
+                  {person.tags.length > 0 && (
+                    <div className="mt-6 flex flex-wrap gap-2">
+                      {person.tags.map((tag: string) => (
+                        <Badge key={tag} variant="secondary">{tag}</Badge>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <div
+                key={person.name}
+                className="bg-card rounded-3xl shadow-md hover:shadow-xl transition-all duration-200 hover:-translate-y-1 p-6 flex items-start gap-5"
+              >
+                <div className="relative h-20 w-20 shrink-0 overflow-hidden rounded-full">
+                  <Image
+                    src={person.image}
+                    alt={"Portrait of " + person.name}
+                    fill
+                    sizes="80px"
+                    className="object-cover"
+                  />
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold">{person.name}</h3>
+                  <p className="text-sm font-medium text-primary">{person.role}</p>
+                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{person.bio}</p>
+                </div>
+              </div>
+            )
+          )}
+        </div>
+
+        <div className="mt-10 flex flex-col sm:flex-row sm:items-center gap-4">
+          <Button asChild>
+            <Link href="/services">Book with Dr Khumalo</Link>
+          </Button>
+          <p className="text-sm text-muted-foreground">Medical aid and private patients · Babies welcome from six weeks</p>
+        </div>
+      </div>
+    </section>
+  )
+}