Swap to shadcn components and polish the design

Components (added via the shadcn MCP/CLI):
- Navbar: NavigationMenu on desktop, Sheet on mobile; drops
  Navbar.module.css and the hand-rolled slide-down menu
- Buttons: shadcn Button via a shared ContactButtons component
  (replaces Button.js and its CSS module)
- Card for price cards, testimonials, the business block and plan;
  Table for prices; Input/Textarea/Label/NativeSelect/RadioGroup and
  Alert in the quote form; Separator in the footer
- Components import cn from @/lib/utils (not the new "cn" package);
  accordion moved to the unified radix-ui package

Design tweaks:
- Geist Sans is actually applied (font variables were on <body>, but
  Tailwind reads them on <html>, so the site fell back to system fonts)
- Theme primary set to the existing brand blue; slightly smaller radius
- Balanced, tighter heading tracking; muted secondary text
- 44px contact buttons; 16px FAQ text; tighter homepage spacing
- Full-width selects with 16px text on phones (no iOS zoom)

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/app/components/ServicePage.js

@@ -1,11 +1,13 @@
 import Link from "next/link";
-import { ArrowRight, Check, MessageSquare, Phone } from "lucide-react";
+import { ArrowRight, Check } from "lucide-react";
 import HeaderSm from "./HeaderSm";
-import Button from "./Button";
+import ContactButtons from "./ContactButtons";
 import CtaBand from "./CtaBand";
 import FaqList from "./FaqList";
 import JsonLd from "./JsonLd";
-import { business, links, pageMetadata, serviceSchema } from "@/lib/site";
+import PriceTable from "./PriceTable";
+import { Card, CardContent } from "@/components/ui/card";
+import { business, pageMetadata, serviceSchema } from "@/lib/site";
 import { services } from "@/lib/services";
 
 const promises = [
@@ -56,16 +58,7 @@ export default function ServicePage({ slug }) {
             {p}
           </p>
         ))}
-        <div className="flex flex-col sm:flex-row gap-3 mt-6">
-          <Button href={links.tel} variant="primary">
-            <Phone aria-hidden="true" />
-            Call {business.phone}
-          </Button>
-          <Button href={links.sms} variant="outlineDark">
-            <MessageSquare aria-hidden="true" />
-            Text me
-          </Button>
-        </div>
+        <ContactButtons className="mt-6" />
       </section>
 
       <section className="container mx-auto max-w-3xl mb-16">
@@ -75,7 +68,7 @@ export default function ServicePage({ slug }) {
             <li key={fix} className="flex gap-2">
               <Check
                 aria-hidden="true"
-                className="size-5 shrink-0 mt-0.5 text-sky-800"
+                className="size-5 shrink-0 mt-0.5 text-primary"
               />
               {fix}
             </li>
@@ -86,25 +79,14 @@ export default function ServicePage({ slug }) {
 
       <section className="container mx-auto max-w-3xl mb-16">
         <h2 className="text-3xl font-bold mb-4">Pricing</h2>
-        <table className="w-full mb-4 text-left">
-          <tbody>
-            {service.prices.map(({ item, price }) => (
-              <tr key={item} className="border-b">
-                <th scope="row" className="py-3 pr-4 font-normal">
-                  {item}
-                </th>
-                <td className="py-3 font-bold text-sky-800">{price}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        <PriceTable items={service.prices} className="mb-4" />
         <p className="mb-2">
           The diagnosis is $35. If I can&apos;t fix it, you don&apos;t pay it.
           Once I know what&apos;s wrong, I&apos;ll tell you what the repair will
           cost before I start. If you decide not to go ahead, the $35 still
           applies.
         </p>
-        <p className="text-slate-600">
+        <p className="text-muted-foreground">
           Labour is $35 an hour. Parts are extra.
         </p>
       </section>
@@ -144,12 +126,18 @@ export default function ServicePage({ slug }) {
             ))}
           </ul>
           {testimonial && (
-            <figure className="mt-8 rounded-lg border bg-white p-6">
-              <blockquote className="mb-3">
-                &ldquo;{testimonial.quote}&rdquo;
-              </blockquote>
-              <figcaption className="font-bold">{testimonial.name}</figcaption>
-            </figure>
+            <Card className="mt-8 shadow-none">
+              <CardContent>
+                <figure>
+                  <blockquote className="mb-3">
+                    &ldquo;{testimonial.quote}&rdquo;
+                  </blockquote>
+                  <figcaption className="font-semibold">
+                    {testimonial.name}
+                  </figcaption>
+                </figure>
+              </CardContent>
+            </Card>
           )}
         </div>
       </section>
@@ -168,7 +156,7 @@ export default function ServicePage({ slug }) {
             <li key={related}>
               <Link
                 href={`/services/${related}`}
-                className="inline-flex items-center gap-1 font-bold text-sky-800 hover:underline"
+                className="inline-flex items-center gap-1 font-bold text-primary hover:underline"
               >
                 {services[related].name}
                 <ArrowRight aria-hidden="true" className="size-4" />