Deploy

src/components/sections/ChiropracticFaqSection.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useVulaContent } from '@/hooks/useVulaContent'
+import { useState } from 'react'
+import Link from 'next/link'
+import { ArrowRight, ChevronDown } from 'lucide-react'
+import Button from '@/components/ui/Button'
+
+
+
+export default function ChiropracticFaqSection() {
+  const { items } = useVulaContent('chiropractic_faq')
+  const faqs = items.map((i) => i.data as Record<string, string>)
+
+  const [open, setOpen] = useState<number | null>(0)
+
+  return (
+    <section data-vula-cms="chiropractic_faq" data-vula-section="chiropracticfaq" id="chiropractic-faq" className="bg-background text-foreground py-20 sm:py-24">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid gap-12 lg:grid-cols-12">
+          <div className="lg:col-span-5 lg:sticky lg:top-28 lg:self-start">
+            <span className="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Chiropractic care</span>
+            <h2 className="mt-3 text-3xl font-bold leading-tight sm:text-4xl">
+              The questions people ask <span className="text-primary">before</span> their first adjustment.
+            </h2>
+            <p className="mt-4 max-w-[44ch] text-base text-muted-foreground">
+              Straight answers on what a visit involves, who we treat, and how booking works. If yours is not on this list, send it through rather than putting the visit off.
+            </p>
+            <Button asChild variant="outline" className="mt-6">
+              <Link href="/services">
+                See services and book
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Link>
+            </Button>
+          </div>
+
+          <div className="space-y-4 lg:col-span-7">
+            {faqs.map((item, i) => {
+              const isOpen = open === i
+              return (
+                <div
+                  key={item.q}
+                  className="rounded-lg bg-card shadow-md transition-all duration-200 ease-out hover:-translate-y-1 hover:shadow-xl"
+                >
+                  <button
+                    type="button"
+                    onClick={() => setOpen(isOpen ? null : i)}
+                    aria-expanded={isOpen}
+                    className="w-full cursor-pointer p-6 text-left"
+                  >
+                    <span className="flex items-center justify-between gap-4">
+                      <span className="text-base font-semibold text-foreground sm:text-lg">{item.q}</span>
+                      <ChevronDown
+                        className={`h-5 w-5 shrink-0 text-primary transition-transform duration-200 ease-out ${isOpen ? 'rotate-180' : ''}`}
+                      />
+                    </span>
+                  </button>
+                  {isOpen ? (
+                    <p className="px-6 pb-6 text-sm leading-relaxed text-muted-foreground">{item.a}</p>
+                  ) : null}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}