spb/rent-ka

1// -----------------------------------------------------------------------------2// Rent-Ka — Rental listings aggregator (Canada, outside Québec)3// Author: Simon-Pierre Boucher — contact@spboucher.ai4// components/Logo.tsx: official Rent-Ka icon — the key that opens your next5//   home. Geometry (100 × 100 grid):6//   A. frame: vertical 60 × 90 squircle centred, rx 19, stroke only 7.5 u,7//      cobalt gradient #3D6BFF → #1738A8, rounded caps;8//   B. key: round bow (circle, negative-space keyhole) top-centre + straight9//      shaft going down to the threshold, two teeth pointing right, deep navy10//      #101A3D → #0B1330;11//   C. light mat: trapezoid at the threshold flaring forward, front edge12//      rounded touching the frame's bottom stroke, gradient #6E92FF → #2456E6.13//   Layer order: key → mat → frame → gloss. "Liquid glass" finish: 28 % white14//   highlight on the top curve + soft navy 14 % drop shadow. Flat version15//   (no gradients): favicon + PWA icon.16//   Baseline: "Apartments and homes for rent across Canada."17// -----------------------------------------------------------------------------1819/** Icon alone (transparent background — for light backgrounds; dark = white key). */20export function LogoIcon({ size = 30, dark = false }: { size?: number; dark?: boolean }) {21  // dark = version for navy backgrounds: the key turns white22  const keyTop = dark ? "#ffffff" : "#101a3d";23  const keyBot = dark ? "#e8edf8" : "#0b1330";24  const uid = dark ? "rk-dark" : "rk-light-bg";25  return (26    <svg27      className="logo-ico"28      width={size}29      height={size}30      viewBox="0 0 100 100"31      fill="none"32      aria-hidden="true"33    >34      <defs>35        {/* frame: brighter cobalt on top, deeper at the bottom */}36        <linearGradient id={`${uid}-frame`} x1="0" y1="0" x2="0" y2="1">37          <stop offset="0" stopColor="#3d6bff" />38          <stop offset="1" stopColor="#1738a8" />39        </linearGradient>40        {/* key: micro depth gradient */}41        <linearGradient id={`${uid}-key`} x1="0" y1="0" x2="0" y2="1">42          <stop offset="0" stopColor={keyTop} />43          <stop offset="1" stopColor={keyBot} />44        </linearGradient>45        {/* mat: cool light spreading forward */}46        <linearGradient id={`${uid}-light`} x1="0" y1="0" x2="0" y2="1">47          <stop offset="0" stopColor="#6e92ff" />48          <stop offset="1" stopColor="#2456e6" />49        </linearGradient>50        {/* very soft navy drop shadow — never a hard shadow */}51        <filter id={`${uid}-soft`} x="-25%" y="-25%" width="150%" height="150%">52          <feDropShadow dx="0" dy="2" stdDeviation="3" floodColor="#0b1330" floodOpacity="0.14" />53        </filter>54      </defs>55      <g filter={`url(#${uid}-soft)`}>56        {/* B — the key: bow with negative-space hole, shaft down, teeth right */}57        <path58          d="M50 1459             a 14.5 14.5 0 1 1 -0.01 0 Z60             M50 24 a 5 5 0 1 0 0.01 0 Z"61          fill={`url(#${uid}-key)`}62          fillRule="evenodd"63        />64        <path65          d="M44.5 41 L55.5 41 L55.5 60 L64 60 L64 66.5 L55.5 66.5 L55.5 70 L61 70 L61 76.5 L44.5 76.5 Z"66          fill={`url(#${uid}-key)`}67        />68        {/* C — light mat: from the threshold forward, rounded front edge69            touching the frame's lower stroke */}70        <path71          d="M37 77.4 L63 77.4 L74.8 88.5 Q76.4 92.5 71.6 92.5 L28.5 92.5 Q24.2 92.5 26 88.6 Z"72          fill={`url(#${uid}-light)`}73          opacity="0.9"74        />75        {/* A — frame: stroke only, very rounded corners (vertical squircle) */}76        <rect77          x="20" y="5" width="60" height="90" rx="19"78          stroke={`url(#${uid}-frame)`}79          strokeWidth="7.5"80          strokeLinecap="round"81          strokeLinejoin="round"82        />83        {/* "liquid glass" specular highlight on the top curve */}84        <path85          d="M31 6.8 Q50 4.4 69 6.8"86          stroke="#ffffff"87          strokeOpacity="0.28"88          strokeWidth="2.6"89          strokeLinecap="round"90        />91      </g>92    </svg>93  );94}9596/** Full horizontal logo: icon + "Rent·Ka" wordmark97 *  (Rent navy, ·Ka cobalt; icon↔text gap ≈ 40 % of icon width). */98export default function Logo({ size = 30 }: { size?: number }) {99  return (100    <span style={{ display: "inline-flex", alignItems: "center", gap: size * 0.4 * 0.6 }}>101      <LogoIcon size={size} />102      <span style={{ color: "#0b1330", fontWeight: 700, letterSpacing: "-0.005em" }}>103        Rent<span style={{ color: "#2456e6" }}>·Ka</span>104      </span>105    </span>106  );107}108