6bdb2204b3
Some checks failed
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Has been cancelled
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { buildWavyTessellationMesh } from "@/components/brand/WavyTessellationMesh";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
className?: string;
|
|
};
|
|
|
|
/** Wavy interlocking tessellation across the green footer (GRV palette). */
|
|
const FOOTER_MESH = buildWavyTessellationMesh(20, 38, 100, 100, {
|
|
diagonalSkew: 0.85,
|
|
amplitude: 0.68,
|
|
});
|
|
|
|
export function FooterTopoPattern({ className }: Props) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"pointer-events-none absolute inset-0 z-0 overflow-hidden bg-[#1a5c38]",
|
|
className
|
|
)}
|
|
aria-hidden
|
|
>
|
|
<svg
|
|
className="absolute left-1/2 top-1/2 h-[135%] w-[135%] -translate-x-1/2 -translate-y-1/2 -rotate-[14deg] scale-110"
|
|
viewBox="0 0 100 100"
|
|
preserveAspectRatio="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
{FOOTER_MESH.map((cell, i) => (
|
|
<path
|
|
key={i}
|
|
d={cell.d}
|
|
fill={cell.fill}
|
|
stroke="rgba(255,255,255,0.05)"
|
|
strokeWidth={0.12}
|
|
/>
|
|
))}
|
|
</svg>
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-t from-[#0d3d26]/18 via-transparent to-transparent"
|
|
aria-hidden
|
|
/>
|
|
</div>
|
|
);
|
|
}
|