kirukib
cb404ec079
Some checks failed
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Has been cancelled
Centralize primary, secondary, tertiary, and neutral tokens and apply them across theme variables and UI components. Co-authored-by: Cursor <cursoragent@cursor.com>
121 lines
3.2 KiB
TypeScript
121 lines
3.2 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* Curvy contours from the white section edge, extending downward into the green section.
|
|
*/
|
|
export function TopoCurvyExtend({ className }: Props) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"topo-curvy-extend pointer-events-none absolute top-full right-0 left-0 z-[6] h-28 w-full translate-y-[52%] md:h-40",
|
|
className
|
|
)}
|
|
aria-hidden
|
|
>
|
|
<svg
|
|
className="h-full w-full"
|
|
viewBox="0 0 1440 160"
|
|
preserveAspectRatio="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
{/* Upper curves — sit on the white/green boundary */}
|
|
<path
|
|
d="M-40 24 C 200 2, 480 44, 720 14 S 1180 4, 1480 28"
|
|
fill="none"
|
|
stroke="#37a47a"
|
|
strokeWidth="1.25"
|
|
strokeOpacity="0.45"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M0 8 C 280 32, 560 4, 880 28 S 1240 42, 1480 12"
|
|
fill="none"
|
|
stroke="#37a47a"
|
|
strokeWidth="1"
|
|
strokeOpacity="0.32"
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* Mid curves — dip into green */}
|
|
<path
|
|
d="M120 42 C 320 64, 520 34, 720 78 S 980 46, 1240 88, 1480 52"
|
|
fill="none"
|
|
stroke="#37a47a"
|
|
strokeWidth="1.2"
|
|
strokeOpacity="0.38"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M-20 54 C 240 86, 460 58, 700 104 S 1020 68, 1320 112, 1500 76"
|
|
fill="none"
|
|
stroke="#2d7a52"
|
|
strokeWidth="1"
|
|
strokeOpacity="0.35"
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* Lower curves — deep in green */}
|
|
<path
|
|
d="M80 68 C 360 96, 600 72, 840 118 S 1100 86, 1380 128"
|
|
fill="none"
|
|
stroke="#37a47a"
|
|
strokeWidth="0.9"
|
|
strokeOpacity="0.28"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M200 92 C 440 118, 640 98, 880 138 S 1080 108, 1320 148"
|
|
fill="none"
|
|
stroke="#2d7a52"
|
|
strokeWidth="0.85"
|
|
strokeOpacity="0.26"
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* Vertical strokes — continue downward into green */}
|
|
<path
|
|
d="M360 38 L360 132"
|
|
fill="none"
|
|
stroke="#37a47a"
|
|
strokeWidth="0.75"
|
|
strokeOpacity="0.3"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M720 14 L720 148"
|
|
fill="none"
|
|
stroke="#37a47a"
|
|
strokeWidth="0.9"
|
|
strokeOpacity="0.35"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M1080 46 L1080 138"
|
|
fill="none"
|
|
stroke="#2d7a52"
|
|
strokeWidth="0.7"
|
|
strokeOpacity="0.28"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M520 34 L520 118"
|
|
fill="none"
|
|
stroke="#37a47a"
|
|
strokeWidth="0.65"
|
|
strokeOpacity="0.25"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M920 28 L920 124"
|
|
fill="none"
|
|
stroke="#2d7a52"
|
|
strokeWidth="0.65"
|
|
strokeOpacity="0.22"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|