2024-07-22 11:49:47 +02:00
|
|
|
import { GridPattern } from "./GridPattern";
|
|
|
|
|
|
|
|
|
|
export function HeroPattern() {
|
|
|
|
|
return (
|
|
|
|
|
<div className="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
|
|
|
|
|
<div className="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem] dark:[mask-image:linear-gradient(white,transparent)]">
|
2024-07-22 12:35:55 +02:00
|
|
|
<div className="absolute inset-0 bg-gradient-to-r from-brand-400 to-secondary-600 opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-brand-400/30 dark:to-secondary-600/30 dark:opacity-100">
|
2024-07-22 11:49:47 +02:00
|
|
|
<GridPattern
|
|
|
|
|
width={72}
|
|
|
|
|
height={56}
|
|
|
|
|
x={-12}
|
|
|
|
|
y={4}
|
|
|
|
|
squares={[
|
|
|
|
|
[4, 3],
|
|
|
|
|
[2, 1],
|
|
|
|
|
[7, 3],
|
|
|
|
|
[10, 6],
|
|
|
|
|
]}
|
|
|
|
|
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"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<svg
|
|
|
|
|
viewBox="0 0 1113 440"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
className="absolute left-1/2 top-0 ml-[-19rem] w-[69.5625rem] fill-white blur-[26px] dark:hidden"
|
|
|
|
|
>
|
|
|
|
|
<path d="M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" />
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
