Deploy

src/components/sections/PatientStoriesSection.tsx

@@ -0,0 +1,47 @@
+'use client'
+import { useVulaContent } from '@/hooks/useVulaContent'
+import Link from "next/link"
+import Button from "@/components/ui/Button"
+
+
+
+export default function PatientStoriesSection() {
+  const { items } = useVulaContent('patient_stories')
+  const stories = items.map((i) => i.data as Record<string, string>)
+
+  return (
+    <section data-vula-cms="patient_stories" data-vula-section="patientstories" id="patient-stories" className="bg-primary text-primary-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-foreground/70">From Richards Bay families, athletes and parents</p>
+          <h2 className="mt-3 text-3xl sm:text-4xl font-bold tracking-tight">
+            Relief that <span className="text-accent">holds</span>, in their own words.
+          </h2>
+        </div>
+
+        <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
+          {stories.map((story) => (
+            <figure key={story.name} className="bg-background text-foreground rounded-3xl shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-1 p-6 flex flex-col">
+              <span className="text-lg tracking-widest text-primary" aria-hidden="true">★★★★★</span>
+              <blockquote className="mt-4 leading-relaxed">{story.quote}</blockquote>
+              <figcaption className="mt-6 border-t border-border/60 pt-4">
+                <p className="font-semibold">{story.name}</p>
+                <p className="text-sm text-muted-foreground">{story.detail}</p>
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+
+        <div className="mt-12 flex flex-col sm:flex-row sm:items-center justify-between gap-6 rounded-3xl bg-background text-foreground shadow-lg p-6 sm:p-8">
+          <div className="max-w-[44ch]">
+            <p className="text-lg font-semibold">Not sure whether chiropractic is right for you?</p>
+            <p className="mt-1 text-sm text-muted-foreground">A first consultation covers your history, an examination, and an explanation of what we found — before anything is adjusted.</p>
+          </div>
+          <Button asChild>
+            <Link href="/services">Book an appointment</Link>
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}