31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
interface LogoProps {
|
|
variant?: "home" | "default";
|
|
}
|
|
|
|
const Logo: React.FC<LogoProps> = ({ variant = "default" }) => {
|
|
const gradient =
|
|
"text-transparent group-hover:mx-1 transition-all";
|
|
return (
|
|
<Link to="/" className="cursor-pointer">
|
|
<div id="logo" className={`group py-3 text-center font-bold hover:scale-110 transition-all ${variant === "home" ? "text-[12vh]" : "text-[4vh]"}`}>
|
|
<h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text">
|
|
Go on, have a...
|
|
</h6>
|
|
<div className="flex w-fit min-w-[30vw] bg-logo bg-clip-text animate-moving_text_colour bg-[length:300%_300%] justify-center leading-none transition-all">
|
|
<span className={gradient}>G</span>
|
|
<span className={gradient}>A</span>
|
|
<span className={gradient}>N</span>
|
|
<span className={gradient}>D</span>
|
|
<span className={gradient}>E</span>
|
|
<span className={gradient}>R</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default Logo;
|