forked from emre/www_projectmycelium_com
sasha-astiadi
0d9f357881
- Integrated next-themes for dark mode theming with default dark theme - Added new UI components (GridBlink, Spotlight) and enhanced world map with cyan glow effects - Updated homepage messaging to emphasize Mycelium as a living network with new audience imagery
64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type SpotlightProps = {
|
|
className?: string;
|
|
fill?: string;
|
|
};
|
|
|
|
export const Spotlight = ({ className, fill }: SpotlightProps) => {
|
|
return (
|
|
<svg
|
|
className={cn(
|
|
"animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[138%] lg:w-[84%] opacity-100 mix-blend-screen",
|
|
className
|
|
)}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 3787 2842"
|
|
fill="none"
|
|
>
|
|
<g filter="url(#filter)">
|
|
<ellipse
|
|
cx="1924.71"
|
|
cy="273.501"
|
|
rx="1924.71"
|
|
ry="273.501"
|
|
transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
|
|
fill={fill || "url(#spotlightGradient)"}
|
|
fillOpacity="1"
|
|
/>
|
|
</g>
|
|
|
|
<defs>
|
|
{/* ✅ Cyan radial gradient */}
|
|
<radialGradient
|
|
id="spotlightGradient"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(2200 1600) rotate(90) scale(1800 2800)"
|
|
>
|
|
<stop offset="0%" stopColor="#00eaff" stopOpacity="0.95" />
|
|
<stop offset="40%" stopColor="#00eaff" stopOpacity="0.35" />
|
|
<stop offset="100%" stopColor="#00eaff" stopOpacity="0" />
|
|
</radialGradient>
|
|
|
|
<filter
|
|
id="filter"
|
|
x="0.860352"
|
|
y="0.838989"
|
|
width="3785.16"
|
|
height="2840.26"
|
|
filterUnits="userSpaceOnUse"
|
|
colorInterpolationFilters="sRGB"
|
|
>
|
|
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
|
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
|
<feGaussianBlur stdDeviation="151" result="effect1_foregroundBlur" />
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
};
|