Contrast Split

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 kpis = [
  { label: "Activation rate", value: "68%", width: "w-[68%]" },
  { label: "Time to value", value: "3 days", width: "w-[85%]" },
  { label: "NPS score", value: "72", width: "w-[72%]" },
];

export function ContrastSplitFeatures() {
  return (
    <section className="grid min-h-[480px] lg:grid-cols-2">
      <div className="flex flex-col justify-center bg-[#09090B] px-6 py-16 sm:px-10 lg:px-14">
        <p className="text-xs font-medium uppercase tracking-widest text-zinc-500">Customer story</p>
        <h2 className="mt-3 text-2xl font-semibold tracking-tight text-zinc-50 sm:text-3xl lg:text-4xl">
          Acme Corp cut onboarding from 14 days to 3
        </h2>
        <p className="mt-4 max-w-md text-sm leading-relaxed text-zinc-400">
          "NovaFlow replaced five spreadsheets and two Zapier accounts. Our CS team finally has one source of truth." — Sarah Kim, VP Ops
        </p>
        <div className="mt-8 flex flex-wrap gap-6 text-sm">
          <div><p className="text-2xl font-semibold text-zinc-50">−78%</p><p className="text-zinc-500">Setup time</p></div>
          <div><p className="text-2xl font-semibold text-zinc-50">+40%</p><p className="text-zinc-500">Activation</p></div>
          <div><p className="text-2xl font-semibold text-zinc-50">$180k</p><p className="text-zinc-500">Saved annually</p></div>
        </div>
      </div>
      <div className="flex items-center justify-center bg-[#FAFAFA] px-6 py-16 sm:px-10">
        <div className="w-full max-w-md rounded-2xl border border-zinc-200/80 bg-white p-5 shadow-[0_8px_32px_rgba(0,0,0,0.06)]">
          <p className="text-sm font-semibold text-zinc-900">Acme Corp · Onboarding</p>
          <p className="text-xs text-zinc-500">Last 90 days</p>
          <div className="mt-4 space-y-3">
            {kpis.map(({ label, value, width }) => (
              <div key={label}>
                <div className="flex justify-between text-xs"><span className="text-zinc-600">{label}</span><span className="font-medium text-zinc-900">{value}</span></div>
                <div className="mt-1 h-2 rounded-full bg-zinc-100"><div className={`h-2 rounded-full bg-zinc-900 ${width}`} /></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}