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

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

diff --git a/src/components/sections/AboutThePracticeSection.tsx b/src/components/sections/AboutThePracticeSection.tsx
new file mode 100644
index 0000000..986d742
--- /dev/null
+++ b/src/components/sections/AboutThePracticeSection.tsx
@@ -0,0 +1,95 @@
+import Image from "next/image"
+import Link from "next/link"
+import Button from "@/components/ui/Button"
+
+const ABOUT_IMAGE =
+  "https://uploads.vulai.co.za/vula-uploads/e691b2f9-937a-45fd-a18f-c5b9cf1193f2/library/b7bd1ce029286545686f1fa4cdbe66e3c60b7580f373299a0116a4f8f78c1347.jpg"
+
+const practicePoints = [
+  "Full case history and examination before a single adjustment",
+  "Manual adjustment, spinal decompression and soft-tissue work",
+  "Home exercises that hold the change between visits",
+  "One practice for the whole household — babies, moms, athletes, desk workers",
+]
+
+export default function AboutThePracticeSection() {
+  return (
+    <section data-vula-section="aboutthepractice"
+      id="about-the-practice"
+      className="bg-primary py-20 text-primary-foreground lg:py-28"
+    >
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
+          <div>
+            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-primary-foreground/70">
+              Led by Dr. K.P. Khumalo · M.TECH.CHIRO.S.A
+            </p>
+
+            <h2 className="mt-4 text-3xl font-bold leading-tight sm:text-4xl">
+              Care that starts with a <span className="text-accent">diagnosis</span>, not a guess
+            </h2>
+
+            <p className="mt-5 max-w-[44ch] text-base leading-relaxed text-primary-foreground/85">
+              The Bay Chiro is a specialised, family-friendly chiropractic practice in Richards
+              Bay. Every visit begins with finding out where the pain is actually coming from and
+              why your body started compensating around it — then the treatment plan is built from
+              that answer.
+            </p>
+
+            <p className="mt-4 max-w-[44ch] text-base leading-relaxed text-primary-foreground/85">
+              That is the difference between chasing a symptom and treating a root cause.
+              Adjustments, spinal decompression and soft-tissue work are matched to your age, your
+              work and the sport you play — from a six-week-old baby with colic to a runner nursing
+              a knee.
+            </p>
+
+            <p className="mt-4 max-w-[44ch] text-base leading-relaxed text-primary-foreground/85">
+              Ubuntu shapes how the practice runs. We treat the person and the household around
+              them — the mom carrying a toddler, the father who drives long distances, the student
+              hunched over a laptop since lockdown.
+            </p>
+
+            <ul className="mt-8 divide-y divide-primary-foreground/20 border-y border-primary-foreground/20">
+              {practicePoints.map((point) => (
+                <li key={point} className="py-3 text-sm text-primary-foreground/90">
+                  {point}
+                </li>
+              ))}
+            </ul>
+
+            <div className="mt-8">
+              <Button asChild size="lg" variant="secondary">
+                <Link href="/services">Book an appointment</Link>
+              </Button>
+            </div>
+          </div>
+
+          <div className="relative">
+            <div
+              className="overflow-hidden"
+              style={{ borderRadius: "999px 999px 24px 24px" }}
+            >
+              <div className="relative h-[360px] w-full sm:h-[460px] lg:h-[540px]">
+                <Image
+                  src={ABOUT_IMAGE}
+                  alt="Chiropractor guiding a patient through spinal care at The Bay Chiro"
+                  fill
+                  sizes="(max-width: 1024px) 100vw, 45vw"
+                  className="object-cover"
+                />
+              </div>
+            </div>
+
+            <div className="mt-4 rounded-lg bg-background p-6 text-foreground shadow-md sm:absolute sm:-bottom-8 sm:left-6 sm:mt-0 sm:max-w-xs">
+              <p className="text-sm font-semibold">Dr. K.P. Khumalo</p>
+              <p className="mt-1 text-sm text-muted-foreground">
+                M.TECH.CHIRO.S.A — diagnosing, treating and preventing musculoskeletal and nervous
+                system disorders.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file