102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface VolguLogoProps {
|
|
className?: string;
|
|
animated?: boolean;
|
|
variant?: "default" | "cyber" | "minimal";
|
|
}
|
|
|
|
export function VolguLogo({
|
|
className = "h-8 w-8",
|
|
animated = false,
|
|
variant = "cyber",
|
|
}: VolguLogoProps) {
|
|
if (variant === "minimal") {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"font-display font-bold text-[var(--color-neon-green)]",
|
|
className
|
|
)}
|
|
>
|
|
V
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const LogoSvg = (
|
|
<svg
|
|
viewBox="0 0 198 209"
|
|
className={className}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs>
|
|
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="var(--color-neon-green)" />
|
|
<stop offset="100%" stopColor="var(--color-neon-cyan)" />
|
|
</linearGradient>
|
|
<filter id="logoGlow">
|
|
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
<g
|
|
transform="translate(0,209) scale(0.1,-0.1)"
|
|
fill={variant === "cyber" ? "url(#logoGradient)" : "var(--color-neon-green)"}
|
|
stroke="none"
|
|
filter={variant === "cyber" ? "url(#logoGlow)" : undefined}
|
|
>
|
|
<path d="M1940 2084 c-8 -2 -433 -51 -945 -109 -512 -58 -945 -108 -963 -111
|
|
-26 -4 -32 -10 -32 -29 0 -22 5 -25 35 -25 55 0 140 -37 193 -85 61 -55 99
|
|
-118 245 -412 144 -288 171 -317 102 -113 -38 113 -44 182 -19 218 19 27 39
|
|
28 82 2 18 -11 37 -18 41 -15 5 2 9 42 9 87 1 90 12 130 44 166 32 33 75 29
|
|
116 -10 27 -26 36 -30 40 -18 3 8 24 35 48 60 37 39 47 45 84 45 35 0 47 -6
|
|
72 -34 31 -35 33 -52 13 -148 l-7 -33 43 0 c54 0 104 -29 113 -65 10 -38 -25
|
|
-104 -91 -175 l-54 -58 31 -7 c40 -9 64 -45 55 -83 -10 -49 -60 -85 -174 -126
|
|
-94 -33 -129 -55 -110 -67 8 -5 22 -9 31 -9 21 0 41 -35 34 -58 -8 -24 -54
|
|
-50 -105 -58 -38 -6 -40 -8 -26 -24 8 -9 15 -26 15 -37 0 -26 -54 -73 -82 -73
|
|
-15 0 -19 -5 -15 -19 2 -11 65 -164 138 -340 l134 -321 30 0 c29 0 32 4 97
|
|
158 37 86 236 551 443 1032 206 481 375 880 375 887 0 13 -10 14 -40 7z" />
|
|
</g>
|
|
</svg>
|
|
);
|
|
|
|
if (animated) {
|
|
return (
|
|
<motion.div
|
|
animate={{
|
|
filter: [
|
|
"drop-shadow(0 0 5px var(--color-neon-green))",
|
|
"drop-shadow(0 0 15px var(--color-neon-green))",
|
|
"drop-shadow(0 0 5px var(--color-neon-green))",
|
|
],
|
|
}}
|
|
transition={{ duration: 2, repeat: Infinity }}
|
|
>
|
|
{LogoSvg}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
return LogoSvg;
|
|
}
|
|
|
|
// Brand text component for the navbar
|
|
export function CyberBrandText({ className }: { className?: string }) {
|
|
return (
|
|
<span className={cn("font-mono text-xl tracking-wider", className)}>
|
|
<span className="text-[var(--color-neon-green)] text-glow-green">></span>
|
|
<span className="text-[var(--color-neon-cyan)]">VOLGU</span>
|
|
<span className="text-muted-foreground">.</span>
|
|
<span className="text-[var(--color-neon-green)]">CONTESTS</span>
|
|
</span>
|
|
);
|
|
}
|