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>
109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* Curved green / white bands like the GRV logo topography.
|
|
* Overlaps the top of the footer — no straight stripe bar.
|
|
*/
|
|
export function FooterTopographicBand({ className }: Props) {
|
|
const contour = "rgba(255,255,255,0.35)";
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"pointer-events-none absolute inset-x-0 top-0 z-0 h-44 -translate-y-[38%] md:h-52 md:-translate-y-[42%]",
|
|
className
|
|
)}
|
|
aria-hidden
|
|
>
|
|
<svg
|
|
viewBox="0 0 1440 220"
|
|
className="h-full w-full"
|
|
preserveAspectRatio="none"
|
|
>
|
|
{/* Alternating curved bands (logo-style flow, not vertical stripes) */}
|
|
<path
|
|
d="M0 0 H1440 V32
|
|
C1180 48 980 12 720 28
|
|
S380 52 0 36 Z"
|
|
fill="#ffffff"
|
|
/>
|
|
<path
|
|
d="M0 36
|
|
C220 54 480 22 720 40
|
|
S1180 58 1440 44
|
|
V76
|
|
C1120 92 860 58 600 74
|
|
S240 98 0 82 Z"
|
|
fill="#37a47a"
|
|
/>
|
|
<path
|
|
d="M0 82
|
|
C300 64 520 96 760 78
|
|
S1240 62 1440 86
|
|
V118
|
|
C1080 102 820 128 560 110
|
|
S200 94 0 112 Z"
|
|
fill="#ffffff"
|
|
/>
|
|
<path
|
|
d="M0 112
|
|
C180 128 420 96 680 114
|
|
S1220 132 1440 108
|
|
V148
|
|
C1000 164 740 136 480 152
|
|
S160 172 0 156 Z"
|
|
fill="#37a47a"
|
|
/>
|
|
<path
|
|
d="M0 156
|
|
C260 140 500 168 760 150
|
|
S1280 134 1440 158
|
|
V220
|
|
H0 Z"
|
|
fill="#37a47a"
|
|
/>
|
|
|
|
{/* Logo-like contour strokes */}
|
|
<path
|
|
d="M0 28 C240 8 480 44 720 26 S1200 12 1440 32"
|
|
fill="none"
|
|
stroke={contour}
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M0 58 C320 78 640 42 960 62 S1280 48 1440 68"
|
|
fill="none"
|
|
stroke={contour}
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
opacity="0.7"
|
|
/>
|
|
<path
|
|
d="M0 96 C200 76 520 108 800 88 S1180 72 1440 94"
|
|
fill="none"
|
|
stroke={contour}
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
opacity="0.5"
|
|
/>
|
|
<path
|
|
d="M0 134 C400 152 720 118 1040 138 S1320 124 1440 142"
|
|
fill="none"
|
|
stroke={contour}
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
opacity="0.4"
|
|
/>
|
|
</svg>
|
|
|
|
{/* Fade into solid footer green */}
|
|
<div className="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-b from-transparent to-[#37a47a]" />
|
|
</div>
|
|
);
|
|
}
|