Deploy
This commit is contained in:
Vula Builder
@@ -0,0 +1,143 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { Activity, ArrowRight } from 'lucide-react'
|
||||
import { useProducts } from "@/hooks/useProducts"
|
||||
import Button from "@/components/ui/Button"
|
||||
import { Card } from "@/components/ui/Card"
|
||||
|
||||
const CURRENCY_SYMBOLS: Record<string, string> = {
|
||||
zar: "R",
|
||||
usd: "$",
|
||||
eur: "€",
|
||||
gbp: "£",
|
||||
kes: "KSh",
|
||||
ngn: "₦",
|
||||
ghs: "₵",
|
||||
}
|
||||
|
||||
const formatPrice = (amount: number, code?: string) => {
|
||||
const symbol = CURRENCY_SYMBOLS[(code ?? "zar").toLowerCase()] ?? (code ? code.toUpperCase() : "R")
|
||||
return symbol + (amount / 100).toFixed(0)
|
||||
}
|
||||
|
||||
const conditions = [
|
||||
"Neck, back and joint pain",
|
||||
"Headaches and migraines",
|
||||
"Nerve impingement",
|
||||
"Sports and accident recovery",
|
||||
"Spinal decompression",
|
||||
"Fibromyalgia and infant colic",
|
||||
]
|
||||
|
||||
const skeletonKeys = ["one", "two", "three", "four"]
|
||||
|
||||
export default function ChiropracticServicesSection() {
|
||||
const { products, loading } = useProducts(8)
|
||||
|
||||
return (
|
||||
<section data-vula-section="chiropracticservices" id="chiropractic-services" className="bg-background py-20 text-foreground lg:py-28">
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-3xl">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-primary">Services</p>
|
||||
<h2 className="mt-4 text-3xl font-bold leading-tight sm:text-4xl">
|
||||
A plan shaped by <span className="text-primary">your body</span>, not a queue
|
||||
</h2>
|
||||
<p className="mt-4 max-w-[44ch] text-lg text-muted-foreground">
|
||||
Book the appointment that fits. Every session opens with a proper diagnosis and closes
|
||||
with something you can do at home before the next visit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-muted-foreground">
|
||||
{conditions.map((condition) => (
|
||||
<span key={condition} className="flex items-center gap-2">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-secondary" />
|
||||
{condition}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{skeletonKeys.map((key) => (
|
||||
<div key={key} className="overflow-hidden rounded-lg bg-card shadow-md">
|
||||
<div className="aspect-video w-full animate-pulse bg-muted" />
|
||||
<div className="space-y-3 p-6">
|
||||
<div className="h-4 w-2/3 animate-pulse rounded bg-muted" />
|
||||
<div className="h-3 w-full animate-pulse rounded bg-muted" />
|
||||
<div className="h-3 w-4/5 animate-pulse rounded bg-muted" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{products.map((service) => {
|
||||
const price = service.variants?.[0]?.prices?.[0]
|
||||
return (
|
||||
<Card
|
||||
key={service.id}
|
||||
className="group overflow-hidden rounded-lg shadow-md transition-all duration-200 ease-out hover:-translate-y-1 hover:shadow-xl"
|
||||
>
|
||||
<Link href={"/booking/" + service.id} className="block cursor-pointer">
|
||||
<div className="relative aspect-video w-full overflow-hidden bg-muted">
|
||||
{service.thumbnail ? (
|
||||
<Image
|
||||
src={service.thumbnail}
|
||||
alt={service.title}
|
||||
fill
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
|
||||
className="object-cover transition-transform duration-500 ease-out group-hover:scale-105"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center text-muted-foreground">
|
||||
<Activity className="h-8 w-8" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold leading-snug">{service.title}</h3>
|
||||
{service.description ? (
|
||||
<p className="mt-2 line-clamp-2 text-sm text-muted-foreground">
|
||||
{service.description}
|
||||
</p>
|
||||
) : null}
|
||||
<div className="mt-4 flex items-center justify-between gap-3">
|
||||
{price ? (
|
||||
<span className="text-base font-semibold text-primary">
|
||||
{formatPrice(price.amount, price.currency_code)}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">Enquire at booking</span>
|
||||
)}
|
||||
<span className="inline-flex items-center gap-1 text-sm font-medium text-primary">
|
||||
Book
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-12 flex flex-col items-start gap-4 border-t border-border pt-8 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="max-w-[44ch] text-sm text-muted-foreground">
|
||||
Choose a time online — the practice confirms it with you. Babies from six weeks,
|
||||
pregnant moms, athletes and desk workers are all welcome.
|
||||
</p>
|
||||
<Button asChild variant="secondary">
|
||||
<Link href="/services">
|
||||
See all services
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user