GRV-Summit-Site/components/brand/TopoCurvyExtend.tsx
“kirukib” 3693495dd0
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Add site-wide topography patterns and refine section styling.
Use mainwhite.svg on white sections with curvy green transitions into flat green bands, improve text and button contrast, and deploy via OpenNext on Cloudflare Workers.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-20 20:34:36 +03:00

61 lines
1.5 KiB
TypeScript

import { cn } from "@/lib/utils";
type Props = {
className?: string;
};
/**
* Curvy contour lines extending from white pattern sections into the green band below.
*/
export function TopoCurvyExtend({ className }: Props) {
return (
<div
className={cn(
"topo-curvy-extend pointer-events-none absolute right-0 bottom-0 left-0 z-[6] h-16 translate-y-[45%] md:h-24 md:translate-y-[40%]",
className
)}
aria-hidden
>
<svg
className="h-full w-full"
viewBox="0 0 1440 96"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M-40 52 C 180 8, 420 88, 720 44 S 1180 12, 1480 56"
fill="none"
stroke="#1a5c38"
strokeWidth="1.25"
strokeOpacity="0.42"
strokeLinecap="round"
/>
<path
d="M-20 68 C 260 92, 520 28, 800 72 S 1220 88, 1500 38"
fill="none"
stroke="#1a5c38"
strokeWidth="1"
strokeOpacity="0.32"
strokeLinecap="round"
/>
<path
d="M0 36 C 320 64, 640 16, 960 48 S 1320 76, 1480 28"
fill="none"
stroke="#1a5c38"
strokeWidth="1.5"
strokeOpacity="0.28"
strokeLinecap="round"
/>
<path
d="M80 82 C 400 58, 700 94, 1040 62 S 1280 42, 1460 78"
fill="none"
stroke="#2d7a52"
strokeWidth="0.9"
strokeOpacity="0.38"
strokeLinecap="round"
/>
</svg>
</div>
);
}