Featured Three Column

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 lucide-react
- Keep the layout responsive on mobile and desktop
- Replace placeholder copy with content that fits the project

The UI code:

import { Building2, CreditCard, Database } from "lucide-react";

const projects = [
  { icon: Building2, title: "Acme Corp onboarding", desc: "Reduced time-to-first-value from 14 days to 3 days with automated welcome flows.", metric: "−78% setup time", date: "Jan 2026" },
  { icon: CreditCard, title: "Brightline billing portal", desc: "Self-serve subscription management for 12,000+ B2B customers worldwide.", metric: "$2.1M ARR managed", date: "Nov 2025" },
  { icon: Database, title: "Vertex AI pipeline", desc: "Real-time data sync between CRM, warehouse, and support desk in under 200ms.", metric: "340ms avg latency", date: "Sep 2025" },
];

export function FeaturedThreeFeatures() {
  return (
    <section className="bg-white px-4 py-20 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-5xl text-center">
        <h2 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">Customer success stories</h2>
        <p className="mx-auto mt-2 max-w-md text-sm text-zinc-500">Real outcomes from teams using NovaFlow in production.</p>
        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {projects.map(({ icon: Icon, title, desc, metric, date }) => (
            <article key={title} className="rounded-2xl border border-zinc-200/60 bg-[#FAFAFA] p-8 text-left shadow-[0_2px_16px_rgba(0,0,0,0.04)] transition hover:border-zinc-300/80">
              <div className="flex items-center justify-between">
                <div className="flex h-11 w-11 items-center justify-center rounded-xl border border-zinc-200/80 bg-white">
                  <Icon className="h-5 w-5 text-zinc-700" strokeWidth={1.5} />
                </div>
                <span className="text-xs text-zinc-400">{date}</span>
              </div>
              <h3 className="mt-5 text-base font-semibold text-zinc-900">{title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-zinc-600">{desc}</p>
              <p className="mt-3 text-sm font-semibold text-emerald-700">{metric}</p>
              <a href="/customers/acme" className="mt-4 inline-block text-sm font-medium text-zinc-900 underline-offset-4 hover:underline">Read case study →</a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}