Feature List + Aside

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 { Check } from "lucide-react";

const features = [
  { title: "Tailwind CSS & TypeScript", desc: "Strict types and utility-first styling out of the box." },
  { title: "120+ native integrations", desc: "Connect Slack, HubSpot, Salesforce, and more in one click." },
  { title: "Sub-200ms API responses", desc: "Global edge network with 99.98% uptime SLA." },
];

const integrations = ["Slack", "Stripe", "HubSpot", "Notion", "Salesforce", "Zendesk"];

export function FeatureListAside() {
  return (
    <section className="relative overflow-hidden bg-[#FAFAFA] px-4 py-20 sm:px-6 lg:px-8">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle,#d4d4d8_1px,transparent_1px)] [background-size:20px_20px] opacity-35" aria-hidden />
      <div className="relative mx-auto grid max-w-5xl items-center gap-12 lg:grid-cols-2">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">Why teams switch to NovaFlow</h2>
          <p className="mt-3 text-sm text-zinc-600">Rated 4.9/5 on G2 · Trusted by 2,400+ companies worldwide.</p>
          <ul className="mt-8 space-y-5">
            {features.map(({ title, desc }) => (
              <li key={title} className="flex items-start gap-3">
                <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-zinc-300/80 bg-white">
                  <Check className="h-3 w-3 text-zinc-700" strokeWidth={2.5} />
                </span>
                <div>
                  <p className="text-sm font-medium text-zinc-900">{title}</p>
                  <p className="mt-0.5 text-sm text-zinc-500">{desc}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>
        <div className="rounded-2xl border border-zinc-200/80 bg-white p-6 shadow-[0_8px_40px_rgba(0,0,0,0.05)]">
          <div className="flex items-center justify-between">
            <p className="text-sm font-semibold text-zinc-900">Connected apps</p>
            <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">99.98% uptime</span>
          </div>
          <div className="mt-4 grid grid-cols-3 gap-2">
            {integrations.map((name) => (
              <div key={name} className="rounded-lg border border-zinc-100 bg-zinc-50 px-2 py-3 text-center text-xs font-medium text-zinc-700">{name}</div>
            ))}
          </div>
          <div className="mt-4 rounded-xl bg-zinc-900 p-4 text-white">
            <p className="text-xs text-zinc-400">Avg. API latency</p>
            <p className="text-2xl font-semibold tabular-nums">142ms</p>
            <p className="text-xs text-emerald-400">−38ms vs industry avg</p>
          </div>
        </div>
      </div>
    </section>
  );
}