Deploy

src/components/sections/CriminalLawServicesSection.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import Link from "next/link"
+import { useMedusaProducts } from "@/hooks/useMedusaProducts"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/Card"
+import Button from "@/components/ui/Button"
+import { BookOpen, Clock, FileText, Gavel, Handshake, Scale, Shield, UserCheck } from 'lucide-react'
+
+const serviceIcons = [
+  Scale, Shield, FileText, Handshake,
+  Clock, BookOpen, UserCheck, Gavel
+]
+
+export default function CriminalLawServicesSection() {
+  const { products: services, isLoading } = useMedusaProducts(8)
+
+  if (isLoading) {
+    return (
+      <section data-vula-section="criminallawservices" id="criminal-services" className="py-20 bg-neutral-50">
+        <div className="container mx-auto px-4 text-center">
+          <div className="animate-pulse space-y-6">
+            <div className="h-8 bg-gray-300 rounded w-1/3 mx-auto" />
+            <div className="h-4 bg-gray-200 rounded w-1/2 mx-auto" />
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
+              {[...Array(6)].map((_, i) => (
+                <div key={i} className="h-48 bg-gray-100 rounded-lg" />
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <section id="criminal-services" className="py-20 bg-neutral-50">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-[#000080] mb-4">
+            Criminal Defence Services
+          </h2>
+          <p className="text-lg text-neutral-600 max-w-2xl mx-auto">
+            Comprehensive criminal law expertise covering every stage of the case — from arrest to appeal.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {(services ?? []).map((service, index) => {
+            const Icon = serviceIcons[index % serviceIcons.length]
+            const price = service.variants?.[0]?.prices?.[0]
+            const formattedPrice = price
+              ? `R${(price.amount / 100).toFixed(2)}`
+              : "Contact us for pricing"
+
+            return (
+              <Card key={service.id} className="shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out">
+                <CardHeader>
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 rounded-lg bg-[#d4af37]/10 text-[#000080]">
+                      <Icon className="w-6 h-6" />
+                    </div>
+                    <CardTitle className="text-lg font-bold text-[#000080] line-clamp-2">
+                      {service.title}
+                    </CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="text-neutral-600 line-clamp-3 min-h-[3rem]">
+                    {service.description ?? "Professional criminal defence representation tailored to your case."}
+                  </CardDescription>
+                  <p className="mt-4 text-sm font-semibold text-[#000080]">
+                    {formattedPrice}
+                  </p>
+                </CardContent>
+                <CardFooter>
+                  <Link href={`/booking/${service.id}`} className="w-full">
+                    <Button
+                      variant="default"
+                      size="md"
+                      className="w-full bg-[#d4af37] text-[#000080] hover:bg-[#c5a031] border-none font-semibold"
+                    >
+                      Book This Service
+                    </Button>
+                  </Link>
+                </CardFooter>
+              </Card>
+            )
+          })}
+        </div>
+        <div className="text-center mt-12">
+          <Link href="/services">
+            <Button
+              variant="outline"
+              size="lg"
+              className="border-[#000080] text-[#000080] hover:bg-[#000080] hover:text-white"
+            >
+              View All Services
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}