Split Hero Features

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 { ArrowRight, TrendingUp, Users } from "lucide-react";

const stats = [
  { label: "MRR", value: "$48,291", change: "+12.4%", icon: TrendingUp },
  { label: "Active users", value: "1,284", change: "+86 this week", icon: Users },
];

const tasks = [
  { name: "Review Q1 pipeline", status: "In progress", owner: "Sarah K." },
  { name: "Ship billing v2", status: "Done", owner: "Marcus T." },
  { name: "Onboard Acme Corp", status: "Scheduled", owner: "Priya N." },
];

export function SplitHeroFeatures() {
  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:24px_24px] opacity-40" aria-hidden />
      <div className="relative mx-auto max-w-5xl">
        <div className="text-center">
          <p className="text-sm font-medium text-zinc-500">NovaFlow · Workflow automation</p>
          <h2 className="mt-2 text-3xl font-semibold tracking-tight text-zinc-900 sm:text-4xl lg:text-5xl">
            Run your entire operation
            <br className="hidden sm:block" /> from one dashboard
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-sm text-zinc-600 sm:text-base">
            2,400+ teams automate onboarding, billing, and support — avg. 14 hours saved per week.
          </p>
        </div>
        <div className="mt-14 grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
          <div>
            <h3 className="text-xl font-semibold text-zinc-900 sm:text-2xl">See revenue and ops in real time</h3>
            <p className="mt-3 text-sm leading-relaxed text-zinc-600 sm:text-base">
              Connect Stripe, HubSpot, and Slack in minutes. NovaFlow syncs every 60 seconds — no manual exports.
            </p>
            <button className="mt-6 inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-800">
              Start free trial <ArrowRight className="h-4 w-4" />
            </button>
            <p className="mt-3 text-xs text-zinc-500">No credit card · 14-day Pro trial · SOC 2 certified</p>
          </div>
          <div className="rounded-2xl border border-zinc-200/80 bg-white p-5 shadow-[0_8px_40px_rgba(0,0,0,0.06)] sm:p-6">
            <div className="flex items-center justify-between border-b border-zinc-100 pb-4">
              <p className="text-sm font-semibold text-zinc-900">Overview</p>
              <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">Live</span>
            </div>
            <div className="mt-4 grid grid-cols-2 gap-3">
              {stats.map(({ label, value, change, icon: Icon }) => (
                <div key={label} className="rounded-xl border border-zinc-100 bg-zinc-50/80 p-3">
                  <div className="flex items-center gap-1.5 text-zinc-500">
                    <Icon className="h-3.5 w-3.5" /><span className="text-xs">{label}</span>
                  </div>
                  <p className="mt-1 text-lg font-semibold tabular-nums text-zinc-900">{value}</p>
                  <p className="text-xs text-emerald-600">{change}</p>
                </div>
              ))}
            </div>
            <ul className="mt-4 space-y-2">
              {tasks.map((t) => (
                <li key={t.name} className="flex items-center justify-between rounded-lg border border-zinc-100 px-3 py-2 text-xs">
                  <span className="font-medium text-zinc-800">{t.name}</span>
                  <span className="text-zinc-500">{t.owner}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}