export function Wordmark() {
  return (
    <div className="brand">
      <svg className="brand__mark" viewBox="0 0 28 28" width="30" height="30" aria-hidden="true" focusable="false">
        <defs>
          <linearGradient id="boardly-mark-gradient" x1="0" y1="0" x2="28" y2="28" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor="#1cb5c9" />
            <stop offset="1" stopColor="#0a6a7d" />
          </linearGradient>
        </defs>
        <rect x="0.75" y="0.75" width="26.5" height="26.5" rx="7.5" fill="url(#boardly-mark-gradient)" />
        <rect x="6.9" y="8.4" width="3.3" height="8.4" rx="1.65" fill="#ffffff" opacity="0.85" />
        <rect x="12.35" y="8.4" width="3.3" height="11.2" rx="1.65" fill="#ffffff" />
        <rect x="17.8" y="8.4" width="3.3" height="5.6" rx="1.65" fill="#ffffff" opacity="0.85" />
      </svg>
      <span className="brand__name">
        Board<em>ly</em>
      </span>
    </div>
  );
}