Case Study Cards

Please implement this code in the current project and add it to (Your Desired Section, e.g. homepage hero, pricing page, dashboard). Change the primary accent color to (YOUR HEX CODE COLOR, e.g. #6366F1).

Requirements:
- Use React + Tailwind CSS (match the project's existing setup)
- Install dependencies if needed: npm install react react-dom
- Keep the layout responsive on mobile and desktop
- Replace placeholder copy with content that fits the project

The UI code:

const cases = [
  { client: "Linear Labs", title: "How Linear cut onboarding time by 40%", tag: "SaaS", result: "+40% activation", gradient: "from-indigo-400 to-violet-600" },
  { client: "Meridian Health", title: "HIPAA-compliant workflows at scale", tag: "Healthcare", result: "12k patients/day", gradient: "from-emerald-400 to-teal-600" },
  { client: "Atlas Commerce", title: "Unified ops across 8 storefronts", tag: "E-commerce", result: "3× faster fulfillment", gradient: "from-amber-400 to-orange-500" },
];

export function CaseStudyFeatures() {
  return (
    <section className="bg-white px-4 py-20 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-5xl">
        <h2 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">Case studies</h2>
        <p className="mt-2 text-sm text-zinc-500">Measurable impact across SaaS, healthcare, and e-commerce.</p>
        <div className="mt-10 flex gap-4 overflow-x-auto pb-2 snap-x snap-mandatory sm:grid sm:grid-cols-3 sm:overflow-visible">
          {cases.map((c) => (
            <article key={c.client} className="w-72 shrink-0 snap-start overflow-hidden rounded-2xl border border-zinc-200/70 bg-[#FAFAFA] shadow-sm sm:w-auto">
              <div className={`relative h-36 bg-gradient-to-br ${c.gradient}`}>
                <div className="absolute inset-0 bg-zinc-900/25" />
                <span className="absolute left-3 top-3 rounded-full border border-white/20 bg-white/10 px-2 py-0.5 text-xs text-white backdrop-blur-sm">{c.tag}</span>
                <p className="absolute bottom-3 left-3 text-xs font-medium text-white/90">{c.client}</p>
              </div>
              <div className="p-4">
                <h3 className="text-sm font-semibold leading-snug text-zinc-900">{c.title}</h3>
                <p className="mt-2 text-xs font-semibold text-emerald-700">{c.result}</p>
                <a href="#" className="mt-3 inline-block text-xs font-medium text-zinc-600 hover:text-zinc-900">Read case study →</a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}