Dot Grid Brand

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

const proof = [
  { value: "2,400+", label: "Teams worldwide" },
  { value: "4.9", label: "G2 rating" },
  { value: "$840M", label: "Processed annually" },
];

export function DotGridBrandFeatures() {
  return (
    <section className="relative overflow-hidden bg-[#FAFAFA] px-4 py-24 sm:px-6 sm:py-32">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle,#d4d4d8_1px,transparent_1px)] [background-size:24px_24px] opacity-45" aria-hidden />
      <Sparkles className="absolute left-[12%] top-[28%] h-4 w-4 text-zinc-400 opacity-60 max-sm:hidden" aria-hidden />
      <Sparkles className="absolute right-[14%] top-[38%] h-3 w-3 text-zinc-400 opacity-50 max-sm:hidden" aria-hidden />
      <div className="relative mx-auto max-w-2xl text-center">
        <h2 className="text-4xl font-semibold tracking-tight text-zinc-900 sm:text-5xl lg:text-6xl">NovaFlow</h2>
        <p className="mx-auto mt-4 max-w-md text-sm text-zinc-500 sm:text-base">
          Workflow automation trusted by fast-growing startups and enterprise teams.
        </p>
        <div className="mt-10 grid grid-cols-3 gap-4 border-t border-zinc-200/80 pt-8 sm:gap-8">
          {proof.map(({ value, label }) => (
            <div key={label}>
              <p className="text-xl font-semibold tabular-nums text-zinc-900 sm:text-2xl">{value}</p>
              <p className="mt-1 text-xs text-zinc-500 sm:text-sm">{label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}