47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
|
|
export const Logo = () => (
|
|
<Link to="/" className="flex items-center space-x-3 group rounded-lg focus:outline-none focus:ring-2 focus:ring-[#8EADD4]" aria-label="Go to homepage">
|
|
<div className="relative h-12 w-12 transform transition-transform group-hover:scale-105">
|
|
<svg
|
|
viewBox="0 0 100 100"
|
|
className="h-full w-full transition-transform duration-300"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
{/* Mail envelope base */}
|
|
<rect
|
|
x="10"
|
|
y="25"
|
|
width="80"
|
|
height="50"
|
|
rx="4"
|
|
className="fill-[#8EADD4] transition-colors duration-300 group-hover:fill-[#6B8CB3] rounded-lg"
|
|
/>
|
|
|
|
{/* Envelope flap */}
|
|
<path
|
|
d="M10 29L50 55L90 29"
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
className="stroke-white"
|
|
/>
|
|
|
|
{/* People silhouette */}
|
|
<path
|
|
d="M40 45C40 45 35 50 30 50C25 50 20 45 20 45C20 45 25 55 30 55C35 55 40 45 40 45Z"
|
|
className="fill-white"
|
|
/>
|
|
<circle cx="30" cy="42" r="5" className="fill-white" />
|
|
|
|
{/* Leadership star */}
|
|
<path
|
|
d="M70 42L72.5 47L78 48L74 52L75 57L70 54.5L65 57L66 52L62 48L67.5 47L70 42Z"
|
|
className="fill-white transition-transform origin-center group-hover:rotate-45 duration-500"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
</Link>
|
|
);
|