Hex Honeycomb Grid

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:

export function HexHoneycombBackground({ children }: { children?: React.ReactNode }) {
  return (
    <div className="relative min-h-screen overflow-hidden bg-zinc-950">
      <svg className="pointer-events-none absolute inset-0 h-full w-full opacity-[0.15]" aria-hidden>
        <defs>
          <pattern id="hex" width="56" height="100" patternUnits="userSpaceOnUse" patternTransform="scale(0.8)">
            <path d="M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z" fill="none" stroke="rgb(16,185,129)" strokeWidth="1" />
            <path d="M28 50 L56 66 L56 98 L28 114 L0 98 L0 66 Z" fill="none" stroke="rgb(113,113,122)" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#hex)" />
      </svg>
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-zinc-950 via-transparent to-zinc-950/80" aria-hidden />
      {children && <div className="relative z-10">{children}</div>}
    </div>
  );
}