// ----------------------------------------------------------------------------- // Rent-Ka — Rental listings aggregator (Canada, outside Québec) // Author: Simon-Pierre Boucher — contact@spboucher.ai // components/Logo.tsx: official Rent-Ka icon — the key that opens your next // home. Geometry (100 × 100 grid): // A. frame: vertical 60 × 90 squircle centred, rx 19, stroke only 7.5 u, // cobalt gradient #3D6BFF → #1738A8, rounded caps; // B. key: round bow (circle, negative-space keyhole) top-centre + straight // shaft going down to the threshold, two teeth pointing right, deep navy // #101A3D → #0B1330; // C. light mat: trapezoid at the threshold flaring forward, front edge // rounded touching the frame's bottom stroke, gradient #6E92FF → #2456E6. // Layer order: key → mat → frame → gloss. "Liquid glass" finish: 28 % white // highlight on the top curve + soft navy 14 % drop shadow. Flat version // (no gradients): favicon + PWA icon. // Baseline: "Apartments and homes for rent across Canada." // ----------------------------------------------------------------------------- /** Icon alone (transparent background — for light backgrounds; dark = white key). */ export function LogoIcon({ size = 30, dark = false }: { size?: number; dark?: boolean }) { // dark = version for navy backgrounds: the key turns white const keyTop = dark ? "#ffffff" : "#101a3d"; const keyBot = dark ? "#e8edf8" : "#0b1330"; const uid = dark ? "rk-dark" : "rk-light-bg"; return ( ); } /** Full horizontal logo: icon + "Rent·Ka" wordmark * (Rent navy, ·Ka cobalt; icon↔text gap ≈ 40 % of icon width). */ export default function Logo({ size = 30 }: { size?: number }) { return ( Rent·Ka ); }