41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
// components/ServiceCard.tsx
|
|
import Link from "next/link";
|
|
import type { Service } from "@/lib/services";
|
|
|
|
export default function ServiceCard({ svc }: { svc: Service }) {
|
|
return (
|
|
<article className="rounded-lg border bg-white/50 dark:bg-neutral-900/50 p-5 shadow-sm hover:shadow transition">
|
|
<h3 className="text-lg font-semibold tracking-tight">
|
|
<Link href={`/services/${svc.slug}`} className="hover:underline">
|
|
{svc.title}
|
|
</Link>
|
|
</h3>
|
|
<p className="mt-2 text-sm text-neutral-600 dark:text-neutral-300">{svc.outcome}</p>
|
|
|
|
<ul className="mt-3 list-disc pl-5 text-sm text-neutral-700 dark:text-neutral-200 space-y-1">
|
|
{svc.deliverables.slice(0, 4).map((d, i) => (
|
|
<li key={i}>{d}</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="mt-4 flex items-center justify-between">
|
|
<span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">{svc.price}</span>
|
|
<div className="flex gap-2">
|
|
<Link
|
|
href={`/services/${svc.slug}`}
|
|
className="inline-flex items-center rounded-md border px-3 py-1.5 text-sm hover:bg-neutral-50 dark:hover:bg-neutral-800"
|
|
>
|
|
See details
|
|
</Link>
|
|
<Link
|
|
href={`/contact?topic=${encodeURIComponent(svc.slug)}`}
|
|
className="inline-flex items-center rounded-md bg-blue-600 text-white px-3 py-1.5 text-sm hover:opacity-90"
|
|
>
|
|
Start now
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|