Engineering Intelligent Systems for the Next Era

// Modern, accessible React component with TypeScript
import { type ReactNode } from "react";

interface ServiceCardProps {
  title: string;
  tagline: string;
  deliverables: string[];
  ctaHref: string;
}

export function ServiceCard({ title, tagline, deliverables, ctaHref }: ServiceCardProps) {
  return (
    <article className="rounded-xl border border-border bg-surface p-6 shadow-sm">
      <h3 className="text-xl font-semibold text-foreground">{title}</h3>
      <p className="mt-1 text-sm text-accent">{tagline}</p>
      <ul className="mt-4 space-y-2">
        {deliverables.map((item) => (
          <li key={item} className="flex items-center gap-2 text-sm text-muted-foreground">
            <span className="size-1.5 rounded-full bg-accent" />
            {item}
          </li>
        ))}
      </ul>
      <a href={ctaHref} className="mt-6 inline-flex font-mono text-xs font-semibold text-accent hover:underline">
        Learn More →
      </a>
    </article>
  );
}