1import { GridPattern } from '@/components/GridPattern'
 2
 3export function HeroPattern() {
 4  return (
 5    <div className="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
 6      <div className="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem] dark:[mask-image:linear-gradient(white,transparent)]">
 7        <div className="absolute inset-0 bg-gradient-to-r from-[#36b49f] to-[#DBFF75] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#36b49f]/30 dark:to-[#DBFF75]/30 dark:opacity-100">
 8          <GridPattern
 9            width={72}
10            height={56}
11            x="-12"
12            y="4"
13            squares={[
14              [4, 3],
15              [2, 1],
16              [7, 3],
17              [10, 6],
18            ]}
19            className="absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5"
20          />
21        </div>
22        <svg
23          viewBox="0 0 1113 440"
24          aria-hidden="true"
25          className="absolute left-1/2 top-0 ml-[-19rem] w-[69.5625rem] fill-white blur-[26px] dark:hidden"
26        >
27          <path d="M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" />
28        </svg>
29      </div>
30    </div>
31  )
32}