Files
webklar.com-v2-beta/src/components/Logo.tsx
2026-01-07 18:08:21 +01:00

73 lines
2.2 KiB
TypeScript

interface LogoProps {
className?: string;
size?: number;
}
export function Logo({ className = '', size = 40 }: LogoProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 500 500"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
aria-label="webklar Logo"
>
{/* Left V-shape (lighter green) */}
<path
d="M70 120 L70 280 L165 375 L165 320 L110 265 L110 120 Z"
fill="url(#gradient-left)"
/>
{/* Center chevron (medium green) */}
<path
d="M165 215 L250 130 L335 215 L335 270 L250 185 L165 270 Z"
fill="url(#gradient-center)"
/>
{/* Right V-shape (darker green) */}
<path
d="M430 120 L430 280 L335 375 L335 320 L390 265 L390 120 Z"
fill="url(#gradient-right)"
/>
{/* Bottom connection left */}
<path
d="M165 320 L165 375 L250 460 L250 405 Z"
fill="url(#gradient-bottom-left)"
/>
{/* Bottom connection right */}
<path
d="M335 320 L335 375 L250 460 L250 405 Z"
fill="url(#gradient-bottom-right)"
/>
<defs>
<linearGradient id="gradient-left" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#9AA67F" />
<stop offset="100%" stopColor="#0F5010" />
</linearGradient>
<linearGradient id="gradient-center" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#0F5010" />
<stop offset="100%" stopColor="#0A400C" />
</linearGradient>
<linearGradient id="gradient-right" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#0A400C" />
<stop offset="100%" stopColor="#052006" />
</linearGradient>
<linearGradient id="gradient-bottom-left" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#0F5010" />
<stop offset="100%" stopColor="#0A400C" />
</linearGradient>
<linearGradient id="gradient-bottom-right" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stopColor="#0A400C" />
<stop offset="100%" stopColor="#052006" />
</linearGradient>
</defs>
</svg>
);
}