feat: posters vitrine des 7 apps — logo + captures d'écran en direct
Un 2e poster par plateforme (assets/poster/<app>-app-poster.html + PDF): tuile logo (favicon réel ou monogramme de la famille), wordmark, capture desktop dans un cadre navigateur + capture mobile dans un cadre téléphone (sites capturés en direct le 2026-08-13, bandeaux de témoins cadrés hors champ), chiffres alignés sur les valeurs live des apps, bande manifeste et pied « by Groupe KA ». Images sous assets/poster/img/. Pages PDF aux dimensions exactes (860×1221). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
31 changed files +1,201 −0
added
assets/poster/auto-ka-app-poster.html
+171 −0
@@ -0,0 +1,171 @@ | ||
| 1 | +<!DOCTYPE html> | |
| 2 | +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai --> | |
| 3 | +<!-- Poster vitrine auto-ka (by Groupe KA) — logo + captures d'écran de l'app en direct. --> | |
| 4 | +<html lang="fr"> | |
| 5 | +<head> | |
| 6 | +<meta charset="UTF-8" /> | |
| 7 | +<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| 8 | +<title>Auto·Ka by Groupe KA — l'app en action (poster)</title> | |
| 9 | +<link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| 10 | +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| 11 | +<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" /> | |
| 12 | +<style> | |
| 13 | + :root { | |
| 14 | + --paper: #f4f2ec; --ink: #17181c; --ink-2: #4c4f57; --ink-3: #8b8e96; | |
| 15 | + --sec: #cc3f16; --accent: #ff5a2a; --accent-soft: #ffe8de; --on-accent: #ffffff; | |
| 16 | + --display: "Space Grotesk", system-ui, sans-serif; | |
| 17 | + --body: "Inter", system-ui, sans-serif; | |
| 18 | + --mono: "JetBrains Mono", ui-monospace, monospace; | |
| 19 | + } | |
| 20 | + * { margin: 0; padding: 0; box-sizing: border-box; } | |
| 21 | + html, body { background: #17181c; } | |
| 22 | + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; } | |
| 23 | + | |
| 24 | + .poster { | |
| 25 | + width: 860px; min-height: 1216px; | |
| 26 | + background: var(--paper); | |
| 27 | + border: 3px solid var(--ink); | |
| 28 | + box-shadow: 14px 14px 0 rgba(0,0,0,0.45); | |
| 29 | + padding: 44px 48px 36px; | |
| 30 | + display: flex; flex-direction: column; | |
| 31 | + position: relative; overflow: hidden; | |
| 32 | + } | |
| 33 | + .poster::after { | |
| 34 | + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; | |
| 35 | + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px); | |
| 36 | + background-size: 5px 5px; | |
| 37 | + } | |
| 38 | + | |
| 39 | + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; } | |
| 40 | + .brand { display: flex; align-items: center; gap: 14px; } | |
| 41 | + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); } | |
| 42 | + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; } | |
| 43 | + .kabox { display: inline-block; background: #17181c; color: #ff5a2a; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); } | |
| 44 | + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; } | |
| 45 | + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; } | |
| 46 | + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } | |
| 47 | + | |
| 48 | + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; } | |
| 49 | + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; } | |
| 50 | + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; } | |
| 51 | + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } | |
| 52 | + | |
| 53 | + /* ---------- L'app à l'écran ---------- */ | |
| 54 | + .shot { margin-top: 26px; position: relative; } | |
| 55 | + .browser { | |
| 56 | + width: 730px; | |
| 57 | + background: #fff; | |
| 58 | + border: 2.5px solid var(--ink); | |
| 59 | + border-radius: 14px; | |
| 60 | + box-shadow: 8px 8px 0 var(--ink); | |
| 61 | + overflow: hidden; | |
| 62 | + } | |
| 63 | + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); } | |
| 64 | + .bbar .dots { display: flex; gap: 5px; } | |
| 65 | + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); } | |
| 66 | + .bbar .dots span:nth-child(1) { background: var(--accent); } | |
| 67 | + .bbar .dots span:nth-child(2) { background: var(--accent-soft); } | |
| 68 | + .bbar .dots span:nth-child(3) { background: #fff; } | |
| 69 | + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; } | |
| 70 | + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; } | |
| 71 | + | |
| 72 | + .phone { | |
| 73 | + position: absolute; right: 0; bottom: -34px; | |
| 74 | + width: 196px; | |
| 75 | + background: var(--ink); | |
| 76 | + border-radius: 26px; | |
| 77 | + padding: 7px; | |
| 78 | + box-shadow: 8px 8px 0 rgba(0,0,0,0.3); | |
| 79 | + transform: rotate(2deg); | |
| 80 | + } | |
| 81 | + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; } | |
| 82 | + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; } | |
| 83 | + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } | |
| 84 | + | |
| 85 | + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; } | |
| 86 | + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; } | |
| 87 | + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; } | |
| 88 | + @keyframes pulse { 50% { opacity: 0.35; } } | |
| 89 | + | |
| 90 | + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; } | |
| 91 | + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; } | |
| 92 | + .strip .eq .acc { color: var(--accent); } | |
| 93 | + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; } | |
| 94 | + .strip .side strong { color: var(--accent); font-weight: 700; } | |
| 95 | + | |
| 96 | + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } | |
| 97 | + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; } | |
| 98 | + .foot .left strong { color: var(--ink); } | |
| 99 | + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; } | |
| 100 | + .contact .big { font-size: 13px; color: var(--ink); } | |
| 101 | + | |
| 102 | + @media print { | |
| 103 | + html, body { background: none; padding: 0; } | |
| 104 | + .poster { box-shadow: none; min-height: 1221px; } | |
| 105 | + .chip .dot { animation: none; } | |
| 106 | + @page { size: 860px 1221px; margin: 0; } | |
| 107 | + } | |
| 108 | +</style> | |
| 109 | +</head> | |
| 110 | +<body> | |
| 111 | + <div class="poster"> | |
| 112 | + <header class="head"> | |
| 113 | + <div class="brand"> | |
| 114 | + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo Auto·Ka"><rect width="64" height="64" rx="12" fill="#17181c"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#ff5a2a" text-anchor="middle">AK</text></svg> | |
| 115 | + <div> | |
| 116 | + <span class="wordmark">Auto<span class="kabox">Ka</span></span><br /> | |
| 117 | + <span class="by">by Groupe <span class="minibox">KA</span></span> | |
| 118 | + </div> | |
| 119 | + </div> | |
| 120 | + <span class="url">www.auto-ka.com</span> | |
| 121 | + </header> | |
| 122 | + | |
| 123 | + <p class="kicker">Agrégateur de voitures usagées · Québec</p> | |
| 124 | + <h1>L'occasion au complet,<br /><span class="hl">en une recherche.</span></h1> | |
| 125 | + <p class="lede">17 000+ véhicules de 125 concessionnaires, lus directement sur leurs sites — VIN, kilométrage et équipements normalisés, aubaines détectées.</p> | |
| 126 | + | |
| 127 | + <div class="shot"> | |
| 128 | + <div class="browser"> | |
| 129 | + <div class="bbar"> | |
| 130 | + <div class="dots"><span></span><span></span><span></span></div> | |
| 131 | + <span class="addr">https://www.auto-ka.com</span> | |
| 132 | + </div> | |
| 133 | + <img src="img/auto-ka-desktop.png" alt="Auto·Ka — vue bureau" /> | |
| 134 | + </div> | |
| 135 | + <div class="phone"> | |
| 136 | + <span class="notch"></span> | |
| 137 | + <img src="img/auto-ka-mobile.png" alt="Auto·Ka — vue mobile" /> | |
| 138 | + </div> | |
| 139 | + <span class="caption">L'app en direct · capturée le 13 août 2026</span> | |
| 140 | + </div> | |
| 141 | + | |
| 142 | + <div class="stats"> | |
| 143 | + <span class="chip"><span class="dot"></span>17 000+ véhicules</span> | |
| 144 | + <span class="chip">125 concessionnaires</span> | |
| 145 | + <span class="chip">18 régions</span> | |
| 146 | + <span class="chip">suivi des baisses de prix</span> | |
| 147 | + </div> | |
| 148 | + | |
| 149 | + <div class="strip"> | |
| 150 | + <p class="eq">Toutes les voitures usagées.<br /><span class="acc">Un seul endroit.</span></p> | |
| 151 | + <p class="side"> | |
| 152 | + 100 % automatisé, <strong>zéro boîte noire</strong><br /> | |
| 153 | + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe | |
| 154 | + </p> | |
| 155 | + </div> | |
| 156 | + | |
| 157 | + <footer class="foot"> | |
| 158 | + <p class="left"> | |
| 159 | + <strong>Auto·Ka</strong> est l'une des sept plateformes du Groupe KA — | |
| 160 | + des agrégateurs entièrement automatisés qui lisent les sites à la source. | |
| 161 | + « Tout ce qui finit en ·Ka agrège. » | |
| 162 | + </p> | |
| 163 | + <div class="contact"> | |
| 164 | + <span class="big">www.auto-ka.com</span><br /> | |
| 165 | + by Groupe KA · www.groupe-ka.com<br /> | |
| 166 | + © 2026 Groupe KA · Québec | |
| 167 | + </div> | |
| 168 | + </footer> | |
| 169 | + </div> | |
| 170 | +</body> | |
| 171 | +</html> | |
added
assets/poster/fabri-ka-app-poster.html
+171 −0
@@ -0,0 +1,171 @@ | ||
| 1 | +<!DOCTYPE html> | |
| 2 | +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai --> | |
| 3 | +<!-- Poster vitrine fabri-ka (by Groupe KA) — logo + captures d'écran de l'app en direct. --> | |
| 4 | +<html lang="fr"> | |
| 5 | +<head> | |
| 6 | +<meta charset="UTF-8" /> | |
| 7 | +<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| 8 | +<title>Fabri·Ka by Groupe KA — l'app en action (poster)</title> | |
| 9 | +<link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| 10 | +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| 11 | +<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Outfit:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" /> | |
| 12 | +<style> | |
| 13 | + :root { | |
| 14 | + --paper: #FAF6F0; --ink: #1E1B16; --ink-2: #6E6455; --ink-3: #9a8f7e; | |
| 15 | + --sec: #234438; --accent: #C4532E; --accent-soft: #F1E9DD; --on-accent: #FAF6F0; | |
| 16 | + --display: "Fraunces", Georgia, serif; | |
| 17 | + --body: "Outfit", system-ui, sans-serif; | |
| 18 | + --mono: "JetBrains Mono", ui-monospace, monospace; | |
| 19 | + } | |
| 20 | + * { margin: 0; padding: 0; box-sizing: border-box; } | |
| 21 | + html, body { background: #1E1B16; } | |
| 22 | + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; } | |
| 23 | + | |
| 24 | + .poster { | |
| 25 | + width: 860px; min-height: 1216px; | |
| 26 | + background: var(--paper); | |
| 27 | + border: 3px solid var(--ink); | |
| 28 | + box-shadow: 14px 14px 0 rgba(0,0,0,0.45); | |
| 29 | + padding: 44px 48px 36px; | |
| 30 | + display: flex; flex-direction: column; | |
| 31 | + position: relative; overflow: hidden; | |
| 32 | + } | |
| 33 | + .poster::after { | |
| 34 | + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; | |
| 35 | + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px); | |
| 36 | + background-size: 5px 5px; | |
| 37 | + } | |
| 38 | + | |
| 39 | + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; } | |
| 40 | + .brand { display: flex; align-items: center; gap: 14px; } | |
| 41 | + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); } | |
| 42 | + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; } | |
| 43 | + .kabox { display: inline-block; background: #1E1B16; color: #C4532E; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); } | |
| 44 | + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; } | |
| 45 | + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; } | |
| 46 | + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } | |
| 47 | + | |
| 48 | + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; } | |
| 49 | + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.015em; margin-top: 8px; } | |
| 50 | + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; } | |
| 51 | + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } | |
| 52 | + | |
| 53 | + /* ---------- L'app à l'écran ---------- */ | |
| 54 | + .shot { margin-top: 26px; position: relative; } | |
| 55 | + .browser { | |
| 56 | + width: 730px; | |
| 57 | + background: #fff; | |
| 58 | + border: 2.5px solid var(--ink); | |
| 59 | + border-radius: 14px; | |
| 60 | + box-shadow: 8px 8px 0 var(--ink); | |
| 61 | + overflow: hidden; | |
| 62 | + } | |
| 63 | + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); } | |
| 64 | + .bbar .dots { display: flex; gap: 5px; } | |
| 65 | + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); } | |
| 66 | + .bbar .dots span:nth-child(1) { background: var(--accent); } | |
| 67 | + .bbar .dots span:nth-child(2) { background: var(--accent-soft); } | |
| 68 | + .bbar .dots span:nth-child(3) { background: #fff; } | |
| 69 | + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; } | |
| 70 | + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; } | |
| 71 | + | |
| 72 | + .phone { | |
| 73 | + position: absolute; right: 0; bottom: -34px; | |
| 74 | + width: 196px; | |
| 75 | + background: var(--ink); | |
| 76 | + border-radius: 26px; | |
| 77 | + padding: 7px; | |
| 78 | + box-shadow: 8px 8px 0 rgba(0,0,0,0.3); | |
| 79 | + transform: rotate(2deg); | |
| 80 | + } | |
| 81 | + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; } | |
| 82 | + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; } | |
| 83 | + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } | |
| 84 | + | |
| 85 | + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; } | |
| 86 | + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; } | |
| 87 | + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; } | |
| 88 | + @keyframes pulse { 50% { opacity: 0.35; } } | |
| 89 | + | |
| 90 | + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; } | |
| 91 | + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; } | |
| 92 | + .strip .eq .acc { color: var(--accent); } | |
| 93 | + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; } | |
| 94 | + .strip .side strong { color: var(--accent); font-weight: 700; } | |
| 95 | + | |
| 96 | + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } | |
| 97 | + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; } | |
| 98 | + .foot .left strong { color: var(--ink); } | |
| 99 | + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; } | |
| 100 | + .contact .big { font-size: 13px; color: var(--ink); } | |
| 101 | + | |
| 102 | + @media print { | |
| 103 | + html, body { background: none; padding: 0; } | |
| 104 | + .poster { box-shadow: none; min-height: 1221px; } | |
| 105 | + .chip .dot { animation: none; } | |
| 106 | + @page { size: 860px 1221px; margin: 0; } | |
| 107 | + } | |
| 108 | +</style> | |
| 109 | +</head> | |
| 110 | +<body> | |
| 111 | + <div class="poster"> | |
| 112 | + <header class="head"> | |
| 113 | + <div class="brand"> | |
| 114 | + <img class="tile" src="img/fabri-ka-icon.svg" alt="Logo Fabri·Ka" /> | |
| 115 | + <div> | |
| 116 | + <span class="wordmark">Fabri<span class="kabox">Ka</span></span><br /> | |
| 117 | + <span class="by">by Groupe <span class="minibox">KA</span></span> | |
| 118 | + </div> | |
| 119 | + </div> | |
| 120 | + <span class="url">www.fabri-ka.com</span> | |
| 121 | + </header> | |
| 122 | + | |
| 123 | + <p class="kicker">La vitrine des fabricants d'ici · Québec</p> | |
| 124 | + <h1>Le Québec qui fabrique,<br /><span class="hl">en vitrine.</span></h1> | |
| 125 | + <p class="lede">291 000+ produits de 1 266 boutiques en ligne québécoises, indexés par région et catégorie — chaque produit renvoie à la boutique du fabricant.</p> | |
| 126 | + | |
| 127 | + <div class="shot"> | |
| 128 | + <div class="browser"> | |
| 129 | + <div class="bbar"> | |
| 130 | + <div class="dots"><span></span><span></span><span></span></div> | |
| 131 | + <span class="addr">https://www.fabri-ka.com</span> | |
| 132 | + </div> | |
| 133 | + <img src="img/fabri-ka-desktop.png" alt="Fabri·Ka — vue bureau" /> | |
| 134 | + </div> | |
| 135 | + <div class="phone"> | |
| 136 | + <span class="notch"></span> | |
| 137 | + <img src="img/fabri-ka-mobile.png" alt="Fabri·Ka — vue mobile" /> | |
| 138 | + </div> | |
| 139 | + <span class="caption">L'app en direct · capturée le 13 août 2026</span> | |
| 140 | + </div> | |
| 141 | + | |
| 142 | + <div class="stats"> | |
| 143 | + <span class="chip"><span class="dot"></span>291 000+ produits</span> | |
| 144 | + <span class="chip">1 266 boutiques</span> | |
| 145 | + <span class="chip">17 régions</span> | |
| 146 | + <span class="chip">lien direct fabricant</span> | |
| 147 | + </div> | |
| 148 | + | |
| 149 | + <div class="strip"> | |
| 150 | + <p class="eq">Tous les produits québécois.<br /><span class="acc">Un seul endroit.</span></p> | |
| 151 | + <p class="side"> | |
| 152 | + 100 % automatisé, <strong>zéro boîte noire</strong><br /> | |
| 153 | + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe | |
| 154 | + </p> | |
| 155 | + </div> | |
| 156 | + | |
| 157 | + <footer class="foot"> | |
| 158 | + <p class="left"> | |
| 159 | + <strong>Fabri·Ka</strong> est l'une des sept plateformes du Groupe KA — | |
| 160 | + des agrégateurs entièrement automatisés qui lisent les sites à la source. | |
| 161 | + « Tout ce qui finit en ·Ka agrège. » | |
| 162 | + </p> | |
| 163 | + <div class="contact"> | |
| 164 | + <span class="big">www.fabri-ka.com</span><br /> | |
| 165 | + by Groupe KA · www.groupe-ka.com<br /> | |
| 166 | + © 2026 Groupe KA · Québec | |
| 167 | + </div> | |
| 168 | + </footer> | |
| 169 | + </div> | |
| 170 | +</body> | |
| 171 | +</html> | |
added
assets/poster/food-ka-app-poster.html
+171 −0
@@ -0,0 +1,171 @@ | ||
| 1 | +<!DOCTYPE html> | |
| 2 | +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai --> | |
| 3 | +<!-- Poster vitrine food-ka (by Groupe KA) — logo + captures d'écran de l'app en direct. --> | |
| 4 | +<html lang="fr"> | |
| 5 | +<head> | |
| 6 | +<meta charset="UTF-8" /> | |
| 7 | +<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| 8 | +<title>Food·Ka by Groupe KA — l'app en action (poster)</title> | |
| 9 | +<link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| 10 | +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| 11 | +<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" /> | |
| 12 | +<style> | |
| 13 | + :root { | |
| 14 | + --paper: #faf6ee; --ink: #14231a; --ink-2: #47564c; --ink-3: #839187; | |
| 15 | + --sec: #1f7a4d; --accent: #d9f26b; --accent-soft: #eef6d4; --on-accent: #14231a; | |
| 16 | + --display: "Space Grotesk", system-ui, sans-serif; | |
| 17 | + --body: "Inter", system-ui, sans-serif; | |
| 18 | + --mono: "JetBrains Mono", ui-monospace, monospace; | |
| 19 | + } | |
| 20 | + * { margin: 0; padding: 0; box-sizing: border-box; } | |
| 21 | + html, body { background: #14231a; } | |
| 22 | + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; } | |
| 23 | + | |
| 24 | + .poster { | |
| 25 | + width: 860px; min-height: 1216px; | |
| 26 | + background: var(--paper); | |
| 27 | + border: 3px solid var(--ink); | |
| 28 | + box-shadow: 14px 14px 0 rgba(0,0,0,0.45); | |
| 29 | + padding: 44px 48px 36px; | |
| 30 | + display: flex; flex-direction: column; | |
| 31 | + position: relative; overflow: hidden; | |
| 32 | + } | |
| 33 | + .poster::after { | |
| 34 | + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; | |
| 35 | + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px); | |
| 36 | + background-size: 5px 5px; | |
| 37 | + } | |
| 38 | + | |
| 39 | + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; } | |
| 40 | + .brand { display: flex; align-items: center; gap: 14px; } | |
| 41 | + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); } | |
| 42 | + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; } | |
| 43 | + .kabox { display: inline-block; background: #14231a; color: #d9f26b; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); } | |
| 44 | + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; } | |
| 45 | + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; } | |
| 46 | + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } | |
| 47 | + | |
| 48 | + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; } | |
| 49 | + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; } | |
| 50 | + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; } | |
| 51 | + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } | |
| 52 | + | |
| 53 | + /* ---------- L'app à l'écran ---------- */ | |
| 54 | + .shot { margin-top: 26px; position: relative; } | |
| 55 | + .browser { | |
| 56 | + width: 730px; | |
| 57 | + background: #fff; | |
| 58 | + border: 2.5px solid var(--ink); | |
| 59 | + border-radius: 14px; | |
| 60 | + box-shadow: 8px 8px 0 var(--ink); | |
| 61 | + overflow: hidden; | |
| 62 | + } | |
| 63 | + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); } | |
| 64 | + .bbar .dots { display: flex; gap: 5px; } | |
| 65 | + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); } | |
| 66 | + .bbar .dots span:nth-child(1) { background: var(--accent); } | |
| 67 | + .bbar .dots span:nth-child(2) { background: var(--accent-soft); } | |
| 68 | + .bbar .dots span:nth-child(3) { background: #fff; } | |
| 69 | + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; } | |
| 70 | + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; } | |
| 71 | + | |
| 72 | + .phone { | |
| 73 | + position: absolute; right: 0; bottom: -34px; | |
| 74 | + width: 196px; | |
| 75 | + background: var(--ink); | |
| 76 | + border-radius: 26px; | |
| 77 | + padding: 7px; | |
| 78 | + box-shadow: 8px 8px 0 rgba(0,0,0,0.3); | |
| 79 | + transform: rotate(2deg); | |
| 80 | + } | |
| 81 | + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; } | |
| 82 | + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; } | |
| 83 | + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } | |
| 84 | + | |
| 85 | + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; } | |
| 86 | + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; } | |
| 87 | + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; } | |
| 88 | + @keyframes pulse { 50% { opacity: 0.35; } } | |
| 89 | + | |
| 90 | + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; } | |
| 91 | + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; } | |
| 92 | + .strip .eq .acc { color: var(--accent); } | |
| 93 | + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; } | |
| 94 | + .strip .side strong { color: var(--accent); font-weight: 700; } | |
| 95 | + | |
| 96 | + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } | |
| 97 | + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; } | |
| 98 | + .foot .left strong { color: var(--ink); } | |
| 99 | + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; } | |
| 100 | + .contact .big { font-size: 13px; color: var(--ink); } | |
| 101 | + | |
| 102 | + @media print { | |
| 103 | + html, body { background: none; padding: 0; } | |
| 104 | + .poster { box-shadow: none; min-height: 1221px; } | |
| 105 | + .chip .dot { animation: none; } | |
| 106 | + @page { size: 860px 1221px; margin: 0; } | |
| 107 | + } | |
| 108 | +</style> | |
| 109 | +</head> | |
| 110 | +<body> | |
| 111 | + <div class="poster"> | |
| 112 | + <header class="head"> | |
| 113 | + <div class="brand"> | |
| 114 | + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo Food·Ka"><rect width="64" height="64" rx="12" fill="#14523a"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#d9f26b" text-anchor="middle">FK</text></svg> | |
| 115 | + <div> | |
| 116 | + <span class="wordmark">Food<span class="kabox">Ka</span></span><br /> | |
| 117 | + <span class="by">by Groupe <span class="minibox">KA</span></span> | |
| 118 | + </div> | |
| 119 | + </div> | |
| 120 | + <span class="url">www.food-ka.com</span> | |
| 121 | + </header> | |
| 122 | + | |
| 123 | + <p class="kicker">Comparateur de prix d'épicerie · Québec</p> | |
| 124 | + <h1>Votre épicerie,<br /><span class="hl">comparée en direct.</span></h1> | |
| 125 | + <p class="lede">26 000+ produits, 24 bannières — Metro, IGA, Maxi, Super C, Provigo et plus — avec soldes et prix unitaires normalisés ($/100 g, $/L).</p> | |
| 126 | + | |
| 127 | + <div class="shot"> | |
| 128 | + <div class="browser"> | |
| 129 | + <div class="bbar"> | |
| 130 | + <div class="dots"><span></span><span></span><span></span></div> | |
| 131 | + <span class="addr">https://www.food-ka.com</span> | |
| 132 | + </div> | |
| 133 | + <img src="img/food-ka-desktop.png" alt="Food·Ka — vue bureau" /> | |
| 134 | + </div> | |
| 135 | + <div class="phone"> | |
| 136 | + <span class="notch"></span> | |
| 137 | + <img src="img/food-ka-mobile.png" alt="Food·Ka — vue mobile" /> | |
| 138 | + </div> | |
| 139 | + <span class="caption">L'app en direct · capturée le 13 août 2026</span> | |
| 140 | + </div> | |
| 141 | + | |
| 142 | + <div class="stats"> | |
| 143 | + <span class="chip"><span class="dot"></span>26 000+ produits suivis</span> | |
| 144 | + <span class="chip">24 bannières</span> | |
| 145 | + <span class="chip">2 980+ soldes actifs</span> | |
| 146 | + <span class="chip">$/100 g · $/L</span> | |
| 147 | + </div> | |
| 148 | + | |
| 149 | + <div class="strip"> | |
| 150 | + <p class="eq">Tous les prix d'épicerie.<br /><span class="acc">Un seul panier.</span></p> | |
| 151 | + <p class="side"> | |
| 152 | + 100 % automatisé, <strong>zéro boîte noire</strong><br /> | |
| 153 | + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe | |
| 154 | + </p> | |
| 155 | + </div> | |
| 156 | + | |
| 157 | + <footer class="foot"> | |
| 158 | + <p class="left"> | |
| 159 | + <strong>Food·Ka</strong> est l'une des sept plateformes du Groupe KA — | |
| 160 | + des agrégateurs entièrement automatisés qui lisent les sites à la source. | |
| 161 | + « Tout ce qui finit en ·Ka agrège. » | |
| 162 | + </p> | |
| 163 | + <div class="contact"> | |
| 164 | + <span class="big">www.food-ka.com</span><br /> | |
| 165 | + by Groupe KA · www.groupe-ka.com<br /> | |
| 166 | + © 2026 Groupe KA · Québec | |
| 167 | + </div> | |
| 168 | + </footer> | |
| 169 | + </div> | |
| 170 | +</body> | |
| 171 | +</html> | |
added
assets/poster/img/auto-ka-desktop.png
+0 −0
Binary file not shown.
added
assets/poster/img/auto-ka-mobile.png
+0 −0
Binary file not shown.
added
assets/poster/img/fabri-ka-desktop.png
+0 −0
Binary file not shown.
added
assets/poster/img/fabri-ka-icon.svg
+4 −0
@@ -0,0 +1,4 @@ | ||
| 1 | +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"> | |
| 2 | + <rect width="128" height="128" rx="28" fill="#C4532E"/> | |
| 3 | + <text x="64" y="86" font-family="Georgia, 'Times New Roman', serif" font-size="64" font-weight="900" text-anchor="middle" fill="#FAF6F0">F·K</text> | |
| 4 | +</svg> | |
added
assets/poster/img/fabri-ka-mobile.png
+0 −0
Binary file not shown.
added
assets/poster/img/food-ka-desktop.png
+0 −0
Binary file not shown.
added
assets/poster/img/food-ka-mobile.png
+0 −0
Binary file not shown.
added
assets/poster/img/immo-ka-desktop.png
+0 −0
Binary file not shown.
added
assets/poster/img/immo-ka-mobile.png
+0 −0
Binary file not shown.
added
assets/poster/img/lou-ka-desktop.png
+0 −0
Binary file not shown.
added
assets/poster/img/lou-ka-mobile.png
+0 −0
Binary file not shown.
added
assets/poster/img/valoplex-desktop.png
+0 −0
Binary file not shown.
added
assets/poster/img/valoplex-favicon.ico
+0 −0
Binary file not shown.
added
assets/poster/img/valoplex-mobile.png
+0 −0
Binary file not shown.
added
assets/poster/img/vrai-prix-desktop.png
+0 −0
Binary file not shown.
added
assets/poster/img/vrai-prix-favicon.ico
+0 −0
Binary file not shown.
added
assets/poster/img/vrai-prix-mobile.png
+0 −0
Binary file not shown.
added
assets/poster/immo-ka-app-poster.html
+171 −0
@@ -0,0 +1,171 @@ | ||
| 1 | +<!DOCTYPE html> | |
| 2 | +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai --> | |
| 3 | +<!-- Poster vitrine immo-ka (by Groupe KA) — logo + captures d'écran de l'app en direct. --> | |
| 4 | +<html lang="fr"> | |
| 5 | +<head> | |
| 6 | +<meta charset="UTF-8" /> | |
| 7 | +<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| 8 | +<title>Immo·Ka by Groupe KA — l'app en action (poster)</title> | |
| 9 | +<link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| 10 | +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| 11 | +<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" /> | |
| 12 | +<style> | |
| 13 | + :root { | |
| 14 | + --paper: #f7f1ef; --ink: #1a1214; --ink-2: #5a4d50; --ink-3: #9b8b8e; | |
| 15 | + --sec: #b3202b; --accent: #e23744; --accent-soft: #fbe0e2; --on-accent: #ffffff; | |
| 16 | + --display: "Space Grotesk", system-ui, sans-serif; | |
| 17 | + --body: "Inter", system-ui, sans-serif; | |
| 18 | + --mono: "JetBrains Mono", ui-monospace, monospace; | |
| 19 | + } | |
| 20 | + * { margin: 0; padding: 0; box-sizing: border-box; } | |
| 21 | + html, body { background: #1e1416; } | |
| 22 | + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; } | |
| 23 | + | |
| 24 | + .poster { | |
| 25 | + width: 860px; min-height: 1216px; | |
| 26 | + background: var(--paper); | |
| 27 | + border: 3px solid var(--ink); | |
| 28 | + box-shadow: 14px 14px 0 rgba(0,0,0,0.45); | |
| 29 | + padding: 44px 48px 36px; | |
| 30 | + display: flex; flex-direction: column; | |
| 31 | + position: relative; overflow: hidden; | |
| 32 | + } | |
| 33 | + .poster::after { | |
| 34 | + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; | |
| 35 | + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px); | |
| 36 | + background-size: 5px 5px; | |
| 37 | + } | |
| 38 | + | |
| 39 | + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; } | |
| 40 | + .brand { display: flex; align-items: center; gap: 14px; } | |
| 41 | + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); } | |
| 42 | + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; } | |
| 43 | + .kabox { display: inline-block; background: #1a1214; color: #e23744; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); } | |
| 44 | + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; } | |
| 45 | + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; } | |
| 46 | + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } | |
| 47 | + | |
| 48 | + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; } | |
| 49 | + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; } | |
| 50 | + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; } | |
| 51 | + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } | |
| 52 | + | |
| 53 | + /* ---------- L'app à l'écran ---------- */ | |
| 54 | + .shot { margin-top: 26px; position: relative; } | |
| 55 | + .browser { | |
| 56 | + width: 730px; | |
| 57 | + background: #fff; | |
| 58 | + border: 2.5px solid var(--ink); | |
| 59 | + border-radius: 14px; | |
| 60 | + box-shadow: 8px 8px 0 var(--ink); | |
| 61 | + overflow: hidden; | |
| 62 | + } | |
| 63 | + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); } | |
| 64 | + .bbar .dots { display: flex; gap: 5px; } | |
| 65 | + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); } | |
| 66 | + .bbar .dots span:nth-child(1) { background: var(--accent); } | |
| 67 | + .bbar .dots span:nth-child(2) { background: var(--accent-soft); } | |
| 68 | + .bbar .dots span:nth-child(3) { background: #fff; } | |
| 69 | + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; } | |
| 70 | + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; } | |
| 71 | + | |
| 72 | + .phone { | |
| 73 | + position: absolute; right: 0; bottom: -34px; | |
| 74 | + width: 196px; | |
| 75 | + background: var(--ink); | |
| 76 | + border-radius: 26px; | |
| 77 | + padding: 7px; | |
| 78 | + box-shadow: 8px 8px 0 rgba(0,0,0,0.3); | |
| 79 | + transform: rotate(2deg); | |
| 80 | + } | |
| 81 | + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; } | |
| 82 | + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; } | |
| 83 | + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } | |
| 84 | + | |
| 85 | + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; } | |
| 86 | + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; } | |
| 87 | + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; } | |
| 88 | + @keyframes pulse { 50% { opacity: 0.35; } } | |
| 89 | + | |
| 90 | + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; } | |
| 91 | + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; } | |
| 92 | + .strip .eq .acc { color: var(--accent); } | |
| 93 | + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; } | |
| 94 | + .strip .side strong { color: var(--accent); font-weight: 700; } | |
| 95 | + | |
| 96 | + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } | |
| 97 | + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; } | |
| 98 | + .foot .left strong { color: var(--ink); } | |
| 99 | + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; } | |
| 100 | + .contact .big { font-size: 13px; color: var(--ink); } | |
| 101 | + | |
| 102 | + @media print { | |
| 103 | + html, body { background: none; padding: 0; } | |
| 104 | + .poster { box-shadow: none; min-height: 1221px; } | |
| 105 | + .chip .dot { animation: none; } | |
| 106 | + @page { size: 860px 1221px; margin: 0; } | |
| 107 | + } | |
| 108 | +</style> | |
| 109 | +</head> | |
| 110 | +<body> | |
| 111 | + <div class="poster"> | |
| 112 | + <header class="head"> | |
| 113 | + <div class="brand"> | |
| 114 | + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo Immo·Ka"><rect width="64" height="64" rx="12" fill="#1a1214"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#e23744" text-anchor="middle">IK</text></svg> | |
| 115 | + <div> | |
| 116 | + <span class="wordmark">Immo<span class="kabox">Ka</span></span><br /> | |
| 117 | + <span class="by">by Groupe <span class="minibox">KA</span></span> | |
| 118 | + </div> | |
| 119 | + </div> | |
| 120 | + <span class="url">www.immo-ka.com</span> | |
| 121 | + </header> | |
| 122 | + | |
| 123 | + <p class="kicker">Agrégateur de propriétés à vendre · Québec</p> | |
| 124 | + <h1>Le marché immobilier,<br /><span class="hl">en un coup d'œil.</span></h1> | |
| 125 | + <p class="lede">63 000+ propriétés des agences de courtage — RE/MAX, Sutton, Via Capitale et plus — agrégées à la source, avec détection des ventes.</p> | |
| 126 | + | |
| 127 | + <div class="shot"> | |
| 128 | + <div class="browser"> | |
| 129 | + <div class="bbar"> | |
| 130 | + <div class="dots"><span></span><span></span><span></span></div> | |
| 131 | + <span class="addr">https://www.immo-ka.com</span> | |
| 132 | + </div> | |
| 133 | + <img src="img/immo-ka-desktop.png" alt="Immo·Ka — vue bureau" /> | |
| 134 | + </div> | |
| 135 | + <div class="phone"> | |
| 136 | + <span class="notch"></span> | |
| 137 | + <img src="img/immo-ka-mobile.png" alt="Immo·Ka — vue mobile" /> | |
| 138 | + </div> | |
| 139 | + <span class="caption">L'app en direct · capturée le 13 août 2026</span> | |
| 140 | + </div> | |
| 141 | + | |
| 142 | + <div class="stats"> | |
| 143 | + <span class="chip"><span class="dot"></span>63 000+ propriétés</span> | |
| 144 | + <span class="chip">65 connecteurs d’agences</span> | |
| 145 | + <span class="chip">2 970+ villes</span> | |
| 146 | + <span class="chip">détection vendu / retiré</span> | |
| 147 | + </div> | |
| 148 | + | |
| 149 | + <div class="strip"> | |
| 150 | + <p class="eq">Toutes les propriétés à vendre.<br /><span class="acc">Un seul endroit.</span></p> | |
| 151 | + <p class="side"> | |
| 152 | + 100 % automatisé, <strong>zéro boîte noire</strong><br /> | |
| 153 | + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe | |
| 154 | + </p> | |
| 155 | + </div> | |
| 156 | + | |
| 157 | + <footer class="foot"> | |
| 158 | + <p class="left"> | |
| 159 | + <strong>Immo·Ka</strong> est l'une des sept plateformes du Groupe KA — | |
| 160 | + des agrégateurs entièrement automatisés qui lisent les sites à la source. | |
| 161 | + « Tout ce qui finit en ·Ka agrège. » | |
| 162 | + </p> | |
| 163 | + <div class="contact"> | |
| 164 | + <span class="big">www.immo-ka.com</span><br /> | |
| 165 | + by Groupe KA · www.groupe-ka.com<br /> | |
| 166 | + © 2026 Groupe KA · Québec | |
| 167 | + </div> | |
| 168 | + </footer> | |
| 169 | + </div> | |
| 170 | +</body> | |
| 171 | +</html> | |
added
assets/poster/lou-ka-app-poster.html
+171 −0
@@ -0,0 +1,171 @@ | ||
| 1 | +<!DOCTYPE html> | |
| 2 | +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai --> | |
| 3 | +<!-- Poster vitrine lou-ka (by Groupe KA) — logo + captures d'écran de l'app en direct. --> | |
| 4 | +<html lang="fr"> | |
| 5 | +<head> | |
| 6 | +<meta charset="UTF-8" /> | |
| 7 | +<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| 8 | +<title>Lou·Ka by Groupe KA — l'app en action (poster)</title> | |
| 9 | +<link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| 10 | +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| 11 | +<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" /> | |
| 12 | +<style> | |
| 13 | + :root { | |
| 14 | + --paper: #f5f3ee; --ink: #141814; --ink-2: #4d5551; --ink-3: #8b928c; | |
| 15 | + --sec: #1c5c41; --accent: #d9f26b; --accent-soft: #f0f9d2; --on-accent: #141814; | |
| 16 | + --display: "Space Grotesk", system-ui, sans-serif; | |
| 17 | + --body: "Inter", system-ui, sans-serif; | |
| 18 | + --mono: "JetBrains Mono", ui-monospace, monospace; | |
| 19 | + } | |
| 20 | + * { margin: 0; padding: 0; box-sizing: border-box; } | |
| 21 | + html, body { background: #1a1e1a; } | |
| 22 | + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; } | |
| 23 | + | |
| 24 | + .poster { | |
| 25 | + width: 860px; min-height: 1216px; | |
| 26 | + background: var(--paper); | |
| 27 | + border: 3px solid var(--ink); | |
| 28 | + box-shadow: 14px 14px 0 rgba(0,0,0,0.45); | |
| 29 | + padding: 44px 48px 36px; | |
| 30 | + display: flex; flex-direction: column; | |
| 31 | + position: relative; overflow: hidden; | |
| 32 | + } | |
| 33 | + .poster::after { | |
| 34 | + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; | |
| 35 | + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px); | |
| 36 | + background-size: 5px 5px; | |
| 37 | + } | |
| 38 | + | |
| 39 | + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; } | |
| 40 | + .brand { display: flex; align-items: center; gap: 14px; } | |
| 41 | + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); } | |
| 42 | + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; } | |
| 43 | + .kabox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); } | |
| 44 | + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; } | |
| 45 | + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; } | |
| 46 | + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } | |
| 47 | + | |
| 48 | + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; } | |
| 49 | + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; } | |
| 50 | + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; } | |
| 51 | + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } | |
| 52 | + | |
| 53 | + /* ---------- L'app à l'écran ---------- */ | |
| 54 | + .shot { margin-top: 26px; position: relative; } | |
| 55 | + .browser { | |
| 56 | + width: 730px; | |
| 57 | + background: #fff; | |
| 58 | + border: 2.5px solid var(--ink); | |
| 59 | + border-radius: 14px; | |
| 60 | + box-shadow: 8px 8px 0 var(--ink); | |
| 61 | + overflow: hidden; | |
| 62 | + } | |
| 63 | + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); } | |
| 64 | + .bbar .dots { display: flex; gap: 5px; } | |
| 65 | + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); } | |
| 66 | + .bbar .dots span:nth-child(1) { background: var(--accent); } | |
| 67 | + .bbar .dots span:nth-child(2) { background: var(--accent-soft); } | |
| 68 | + .bbar .dots span:nth-child(3) { background: #fff; } | |
| 69 | + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; } | |
| 70 | + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; } | |
| 71 | + | |
| 72 | + .phone { | |
| 73 | + position: absolute; right: 0; bottom: -34px; | |
| 74 | + width: 196px; | |
| 75 | + background: var(--ink); | |
| 76 | + border-radius: 26px; | |
| 77 | + padding: 7px; | |
| 78 | + box-shadow: 8px 8px 0 rgba(0,0,0,0.3); | |
| 79 | + transform: rotate(2deg); | |
| 80 | + } | |
| 81 | + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; } | |
| 82 | + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; } | |
| 83 | + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } | |
| 84 | + | |
| 85 | + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; } | |
| 86 | + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; } | |
| 87 | + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; } | |
| 88 | + @keyframes pulse { 50% { opacity: 0.35; } } | |
| 89 | + | |
| 90 | + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; } | |
| 91 | + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; } | |
| 92 | + .strip .eq .acc { color: var(--accent); } | |
| 93 | + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; } | |
| 94 | + .strip .side strong { color: var(--accent); font-weight: 700; } | |
| 95 | + | |
| 96 | + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } | |
| 97 | + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; } | |
| 98 | + .foot .left strong { color: var(--ink); } | |
| 99 | + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; } | |
| 100 | + .contact .big { font-size: 13px; color: var(--ink); } | |
| 101 | + | |
| 102 | + @media print { | |
| 103 | + html, body { background: none; padding: 0; } | |
| 104 | + .poster { box-shadow: none; min-height: 1221px; } | |
| 105 | + .chip .dot { animation: none; } | |
| 106 | + @page { size: 860px 1221px; margin: 0; } | |
| 107 | + } | |
| 108 | +</style> | |
| 109 | +</head> | |
| 110 | +<body> | |
| 111 | + <div class="poster"> | |
| 112 | + <header class="head"> | |
| 113 | + <div class="brand"> | |
| 114 | + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo Lou·Ka"><rect width="64" height="64" rx="12" fill="#121712"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#d9f26b" text-anchor="middle">LK</text></svg> | |
| 115 | + <div> | |
| 116 | + <span class="wordmark">Lou<span class="kabox">Ka</span></span><br /> | |
| 117 | + <span class="by">by Groupe <span class="minibox">KA</span></span> | |
| 118 | + </div> | |
| 119 | + </div> | |
| 120 | + <span class="url">www.lou-ka.com</span> | |
| 121 | + </header> | |
| 122 | + | |
| 123 | + <p class="kicker">Agrégateur de logements locatifs · Québec</p> | |
| 124 | + <h1>Le locatif du Québec,<br /><span class="hl">sous vos yeux.</span></h1> | |
| 125 | + <p class="lede">23 000+ logements des gestionnaires immobiliers du Québec — Québec, Lévis, Grand Montréal — géolocalisés et resynchronisés à chaque heure — chaque annonce renvoie à l'originale.</p> | |
| 126 | + | |
| 127 | + <div class="shot"> | |
| 128 | + <div class="browser"> | |
| 129 | + <div class="bbar"> | |
| 130 | + <div class="dots"><span></span><span></span><span></span></div> | |
| 131 | + <span class="addr">https://www.lou-ka.com</span> | |
| 132 | + </div> | |
| 133 | + <img src="img/lou-ka-desktop.png" alt="Lou·Ka — vue bureau" /> | |
| 134 | + </div> | |
| 135 | + <div class="phone"> | |
| 136 | + <span class="notch"></span> | |
| 137 | + <img src="img/lou-ka-mobile.png" alt="Lou·Ka — vue mobile" /> | |
| 138 | + </div> | |
| 139 | + <span class="caption">L'app en direct · capturée le 13 août 2026</span> | |
| 140 | + </div> | |
| 141 | + | |
| 142 | + <div class="stats"> | |
| 143 | + <span class="chip"><span class="dot"></span>23 000+ logements actifs</span> | |
| 144 | + <span class="chip">108 connecteurs actifs</span> | |
| 145 | + <span class="chip">MàJ horaire</span> | |
| 146 | + <span class="chip">vue carte interactive</span> | |
| 147 | + </div> | |
| 148 | + | |
| 149 | + <div class="strip"> | |
| 150 | + <p class="eq">Tous les logements à louer.<br /><span class="acc">Un seul endroit.</span></p> | |
| 151 | + <p class="side"> | |
| 152 | + 100 % automatisé, <strong>zéro boîte noire</strong><br /> | |
| 153 | + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe | |
| 154 | + </p> | |
| 155 | + </div> | |
| 156 | + | |
| 157 | + <footer class="foot"> | |
| 158 | + <p class="left"> | |
| 159 | + <strong>Lou·Ka</strong> est l'une des sept plateformes du Groupe KA — | |
| 160 | + des agrégateurs entièrement automatisés qui lisent les sites à la source. | |
| 161 | + « Tout ce qui finit en ·Ka agrège. » | |
| 162 | + </p> | |
| 163 | + <div class="contact"> | |
| 164 | + <span class="big">www.lou-ka.com</span><br /> | |
| 165 | + by Groupe KA · www.groupe-ka.com<br /> | |
| 166 | + © 2026 Groupe KA · Québec | |
| 167 | + </div> | |
| 168 | + </footer> | |
| 169 | + </div> | |
| 170 | +</body> | |
| 171 | +</html> | |
added
assets/poster/pdf/auto-ka-app-poster.pdf
+0 −0
Binary file not shown.
added
assets/poster/pdf/fabri-ka-app-poster.pdf
+0 −0
Binary file not shown.
added
assets/poster/pdf/food-ka-app-poster.pdf
+0 −0
Binary file not shown.
added
assets/poster/pdf/immo-ka-app-poster.pdf
+0 −0
Binary file not shown.
added
assets/poster/pdf/lou-ka-app-poster.pdf
+0 −0
Binary file not shown.
added
assets/poster/pdf/valoplex-app-poster.pdf
+0 −0
Binary file not shown.
added
assets/poster/pdf/vrai-prix-app-poster.pdf
+0 −0
Binary file not shown.
added
assets/poster/valoplex-app-poster.html
+171 −0
@@ -0,0 +1,171 @@ | ||
| 1 | +<!DOCTYPE html> | |
| 2 | +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai --> | |
| 3 | +<!-- Poster vitrine valoplex (by Groupe KA) — logo + captures d'écran de l'app en direct. --> | |
| 4 | +<html lang="fr"> | |
| 5 | +<head> | |
| 6 | +<meta charset="UTF-8" /> | |
| 7 | +<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| 8 | +<title>ValoPlex by Groupe KA — l'app en action (poster)</title> | |
| 9 | +<link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| 10 | +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| 11 | +<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" /> | |
| 12 | +<style> | |
| 13 | + :root { | |
| 14 | + --paper: #f5f3ee; --ink: #141814; --ink-2: #4d5551; --ink-3: #8b928c; | |
| 15 | + --sec: #b25f16; --accent: #ff9f45; --accent-soft: #ffedd9; --on-accent: #141814; | |
| 16 | + --display: "Space Grotesk", system-ui, sans-serif; | |
| 17 | + --body: "Inter", system-ui, sans-serif; | |
| 18 | + --mono: "JetBrains Mono", ui-monospace, monospace; | |
| 19 | + } | |
| 20 | + * { margin: 0; padding: 0; box-sizing: border-box; } | |
| 21 | + html, body { background: #1a1e1a; } | |
| 22 | + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; } | |
| 23 | + | |
| 24 | + .poster { | |
| 25 | + width: 860px; min-height: 1216px; | |
| 26 | + background: var(--paper); | |
| 27 | + border: 3px solid var(--ink); | |
| 28 | + box-shadow: 14px 14px 0 rgba(0,0,0,0.45); | |
| 29 | + padding: 44px 48px 36px; | |
| 30 | + display: flex; flex-direction: column; | |
| 31 | + position: relative; overflow: hidden; | |
| 32 | + } | |
| 33 | + .poster::after { | |
| 34 | + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; | |
| 35 | + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px); | |
| 36 | + background-size: 5px 5px; | |
| 37 | + } | |
| 38 | + | |
| 39 | + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; } | |
| 40 | + .brand { display: flex; align-items: center; gap: 14px; } | |
| 41 | + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); } | |
| 42 | + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; } | |
| 43 | + .kabox { display: inline-block; background: #141814; color: #ff9f45; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); } | |
| 44 | + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; } | |
| 45 | + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; } | |
| 46 | + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } | |
| 47 | + | |
| 48 | + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; } | |
| 49 | + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; } | |
| 50 | + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; } | |
| 51 | + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } | |
| 52 | + | |
| 53 | + /* ---------- L'app à l'écran ---------- */ | |
| 54 | + .shot { margin-top: 26px; position: relative; } | |
| 55 | + .browser { | |
| 56 | + width: 730px; | |
| 57 | + background: #fff; | |
| 58 | + border: 2.5px solid var(--ink); | |
| 59 | + border-radius: 14px; | |
| 60 | + box-shadow: 8px 8px 0 var(--ink); | |
| 61 | + overflow: hidden; | |
| 62 | + } | |
| 63 | + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); } | |
| 64 | + .bbar .dots { display: flex; gap: 5px; } | |
| 65 | + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); } | |
| 66 | + .bbar .dots span:nth-child(1) { background: var(--accent); } | |
| 67 | + .bbar .dots span:nth-child(2) { background: var(--accent-soft); } | |
| 68 | + .bbar .dots span:nth-child(3) { background: #fff; } | |
| 69 | + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; } | |
| 70 | + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; } | |
| 71 | + | |
| 72 | + .phone { | |
| 73 | + position: absolute; right: 0; bottom: -34px; | |
| 74 | + width: 196px; | |
| 75 | + background: var(--ink); | |
| 76 | + border-radius: 26px; | |
| 77 | + padding: 7px; | |
| 78 | + box-shadow: 8px 8px 0 rgba(0,0,0,0.3); | |
| 79 | + transform: rotate(2deg); | |
| 80 | + } | |
| 81 | + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; } | |
| 82 | + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; } | |
| 83 | + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } | |
| 84 | + | |
| 85 | + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; } | |
| 86 | + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; } | |
| 87 | + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; } | |
| 88 | + @keyframes pulse { 50% { opacity: 0.35; } } | |
| 89 | + | |
| 90 | + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; } | |
| 91 | + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; } | |
| 92 | + .strip .eq .acc { color: var(--accent); } | |
| 93 | + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; } | |
| 94 | + .strip .side strong { color: var(--accent); font-weight: 700; } | |
| 95 | + | |
| 96 | + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } | |
| 97 | + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; } | |
| 98 | + .foot .left strong { color: var(--ink); } | |
| 99 | + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; } | |
| 100 | + .contact .big { font-size: 13px; color: var(--ink); } | |
| 101 | + | |
| 102 | + @media print { | |
| 103 | + html, body { background: none; padding: 0; } | |
| 104 | + .poster { box-shadow: none; min-height: 1221px; } | |
| 105 | + .chip .dot { animation: none; } | |
| 106 | + @page { size: 860px 1221px; margin: 0; } | |
| 107 | + } | |
| 108 | +</style> | |
| 109 | +</head> | |
| 110 | +<body> | |
| 111 | + <div class="poster"> | |
| 112 | + <header class="head"> | |
| 113 | + <div class="brand"> | |
| 114 | + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo ValoPlex"><rect width="64" height="64" rx="12" fill="#141814"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#ff9f45" text-anchor="middle">PX</text></svg> | |
| 115 | + <div> | |
| 116 | + <span class="wordmark">Valo<span class="kabox">Plex</span></span><br /> | |
| 117 | + <span class="by">by Groupe <span class="minibox">KA</span></span> | |
| 118 | + </div> | |
| 119 | + </div> | |
| 120 | + <span class="url">www.valoplex.com</span> | |
| 121 | + </header> | |
| 122 | + | |
| 123 | + <p class="kicker">Évaluation d'immeubles à revenus · Québec</p> | |
| 124 | + <h1>Votre plex, évalué<br /><span class="hl">porte par porte.</span></h1> | |
| 125 | + <p class="lede">393 865 plex et 1 733 744 portes couverts, un moteur entraîné sur ~91 060 ventes réelles de plex — et le calcul montré en entier.</p> | |
| 126 | + | |
| 127 | + <div class="shot"> | |
| 128 | + <div class="browser"> | |
| 129 | + <div class="bbar"> | |
| 130 | + <div class="dots"><span></span><span></span><span></span></div> | |
| 131 | + <span class="addr">https://www.valoplex.com</span> | |
| 132 | + </div> | |
| 133 | + <img src="img/valoplex-desktop.png" alt="ValoPlex — vue bureau" /> | |
| 134 | + </div> | |
| 135 | + <div class="phone"> | |
| 136 | + <span class="notch"></span> | |
| 137 | + <img src="img/valoplex-mobile.png" alt="ValoPlex — vue mobile" /> | |
| 138 | + </div> | |
| 139 | + <span class="caption">L'app en direct · capturée le 13 août 2026</span> | |
| 140 | + </div> | |
| 141 | + | |
| 142 | + <div class="stats"> | |
| 143 | + <span class="chip"><span class="dot"></span>393 865 plex</span> | |
| 144 | + <span class="chip">1 733 744 portes</span> | |
| 145 | + <span class="chip">~337 G$ de parc</span> | |
| 146 | + <span class="chip">fourchette calibrée 8/10</span> | |
| 147 | + </div> | |
| 148 | + | |
| 149 | + <div class="strip"> | |
| 150 | + <p class="eq">La vraie valeur de votre plex.<br /><span class="acc">Porte par porte.</span></p> | |
| 151 | + <p class="side"> | |
| 152 | + 100 % automatisé, <strong>zéro boîte noire</strong><br /> | |
| 153 | + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe | |
| 154 | + </p> | |
| 155 | + </div> | |
| 156 | + | |
| 157 | + <footer class="foot"> | |
| 158 | + <p class="left"> | |
| 159 | + <strong>ValoPlex</strong> est l'une des sept plateformes du Groupe KA — | |
| 160 | + des agrégateurs entièrement automatisés qui lisent les sites à la source. | |
| 161 | + « Tout ce qui finit en ·Ka agrège. » | |
| 162 | + </p> | |
| 163 | + <div class="contact"> | |
| 164 | + <span class="big">www.valoplex.com</span><br /> | |
| 165 | + by Groupe KA · www.groupe-ka.com<br /> | |
| 166 | + © 2026 Groupe KA · Québec | |
| 167 | + </div> | |
| 168 | + </footer> | |
| 169 | + </div> | |
| 170 | +</body> | |
| 171 | +</html> | |
added
assets/poster/vrai-prix-app-poster.html
+171 −0
@@ -0,0 +1,171 @@ | ||
| 1 | +<!DOCTYPE html> | |
| 2 | +<!-- Auteur : Simon-Pierre Boucher — contact@spboucher.ai --> | |
| 3 | +<!-- Poster vitrine vrai-prix (by Groupe KA) — logo + captures d'écran de l'app en direct. --> | |
| 4 | +<html lang="fr"> | |
| 5 | +<head> | |
| 6 | +<meta charset="UTF-8" /> | |
| 7 | +<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| 8 | +<title>Vrai-Prix by Groupe KA — l'app en action (poster)</title> | |
| 9 | +<link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| 10 | +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| 11 | +<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;600&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet" /> | |
| 12 | +<style> | |
| 13 | + :root { | |
| 14 | + --paper: #f5f3ee; --ink: #141814; --ink-2: #4d5551; --ink-3: #8b928c; | |
| 15 | + --sec: #9e2a25; --accent: #ff5148; --accent-soft: #ffe3e0; --on-accent: #ffffff; | |
| 16 | + --display: "Space Grotesk", system-ui, sans-serif; | |
| 17 | + --body: "Inter", system-ui, sans-serif; | |
| 18 | + --mono: "JetBrains Mono", ui-monospace, monospace; | |
| 19 | + } | |
| 20 | + * { margin: 0; padding: 0; box-sizing: border-box; } | |
| 21 | + html, body { background: #1a1e1a; } | |
| 22 | + body { font-family: var(--body); color: var(--ink); display: flex; justify-content: center; padding: 40px 16px; } | |
| 23 | + | |
| 24 | + .poster { | |
| 25 | + width: 860px; min-height: 1216px; | |
| 26 | + background: var(--paper); | |
| 27 | + border: 3px solid var(--ink); | |
| 28 | + box-shadow: 14px 14px 0 rgba(0,0,0,0.45); | |
| 29 | + padding: 44px 48px 36px; | |
| 30 | + display: flex; flex-direction: column; | |
| 31 | + position: relative; overflow: hidden; | |
| 32 | + } | |
| 33 | + .poster::after { | |
| 34 | + content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; | |
| 35 | + background-image: radial-gradient(var(--ink) 0.6px, transparent 0.6px); | |
| 36 | + background-size: 5px 5px; | |
| 37 | + } | |
| 38 | + | |
| 39 | + .head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 18px; } | |
| 40 | + .brand { display: flex; align-items: center; gap: 14px; } | |
| 41 | + .tile { width: 52px; height: 52px; border-radius: 12px; flex: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.25); } | |
| 42 | + .wordmark { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.04em; display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; } | |
| 43 | + .kabox { display: inline-block; background: #141814; color: #ff5148; border-radius: 7px; padding: 0 8px 4px; transform: rotate(-2deg); } | |
| 44 | + .by { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-top: 7px; } | |
| 45 | + .by .minibox { display: inline-block; background: #141814; color: #d9f26b; border-radius: 4px; padding: 0 5px 2px; transform: rotate(-2deg); font-family: var(--display); font-size: 12px; } | |
| 46 | + .head .url { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } | |
| 47 | + | |
| 48 | + .kicker { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sec); margin-top: 24px; } | |
| 49 | + h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.02; letter-spacing: -0.035em; text-transform: uppercase; margin-top: 8px; } | |
| 50 | + h1 .hl { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent); border-radius: 2px; } | |
| 51 | + .lede { margin-top: 12px; max-width: 640px; font-size: 14px; line-height: 1.55; color: var(--ink-2); } | |
| 52 | + | |
| 53 | + /* ---------- L'app à l'écran ---------- */ | |
| 54 | + .shot { margin-top: 26px; position: relative; } | |
| 55 | + .browser { | |
| 56 | + width: 730px; | |
| 57 | + background: #fff; | |
| 58 | + border: 2.5px solid var(--ink); | |
| 59 | + border-radius: 14px; | |
| 60 | + box-shadow: 8px 8px 0 var(--ink); | |
| 61 | + overflow: hidden; | |
| 62 | + } | |
| 63 | + .bbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 2px solid var(--ink); background: var(--paper); } | |
| 64 | + .bbar .dots { display: flex; gap: 5px; } | |
| 65 | + .bbar .dots span { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--ink); } | |
| 66 | + .bbar .dots span:nth-child(1) { background: var(--accent); } | |
| 67 | + .bbar .dots span:nth-child(2) { background: var(--accent-soft); } | |
| 68 | + .bbar .dots span:nth-child(3) { background: #fff; } | |
| 69 | + .bbar .addr { flex: 1; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-2); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 4px 12px; } | |
| 70 | + .browser img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: top; } | |
| 71 | + | |
| 72 | + .phone { | |
| 73 | + position: absolute; right: 0; bottom: -34px; | |
| 74 | + width: 196px; | |
| 75 | + background: var(--ink); | |
| 76 | + border-radius: 26px; | |
| 77 | + padding: 7px; | |
| 78 | + box-shadow: 8px 8px 0 rgba(0,0,0,0.3); | |
| 79 | + transform: rotate(2deg); | |
| 80 | + } | |
| 81 | + .phone .notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 62px; height: 9px; border-radius: 999px; background: var(--ink); z-index: 2; } | |
| 82 | + .phone img { display: block; width: 100%; height: 384px; object-fit: cover; object-position: top; border-radius: 20px; } | |
| 83 | + .shot .caption { position: absolute; left: 0; bottom: -30px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } | |
| 84 | + | |
| 85 | + .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 62px; } | |
| 86 | + .chip { font-family: var(--mono); font-weight: 700; font-size: 11.5px; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px; background: var(--accent-soft); white-space: nowrap; } | |
| 87 | + .chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--sec); margin-right: 7px; animation: pulse 1.8s ease-in-out infinite; } | |
| 88 | + @keyframes pulse { 50% { opacity: 0.35; } } | |
| 89 | + | |
| 90 | + .strip { margin-top: 22px; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 17px 26px; box-shadow: 6px 6px 0 rgba(0,0,0,0.22); display: flex; align-items: center; justify-content: space-between; gap: 24px; } | |
| 91 | + .strip .eq { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; } | |
| 92 | + .strip .eq .acc { color: var(--accent); } | |
| 93 | + .strip .side { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 2; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; } | |
| 94 | + .strip .side strong { color: var(--accent); font-weight: 700; } | |
| 95 | + | |
| 96 | + .foot { margin-top: auto; border-top: 2px dashed rgba(0,0,0,0.25); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } | |
| 97 | + .foot .left { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 500px; } | |
| 98 | + .foot .left strong { color: var(--ink); } | |
| 99 | + .contact { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1.9; color: var(--ink-2); white-space: nowrap; } | |
| 100 | + .contact .big { font-size: 13px; color: var(--ink); } | |
| 101 | + | |
| 102 | + @media print { | |
| 103 | + html, body { background: none; padding: 0; } | |
| 104 | + .poster { box-shadow: none; min-height: 1221px; } | |
| 105 | + .chip .dot { animation: none; } | |
| 106 | + @page { size: 860px 1221px; margin: 0; } | |
| 107 | + } | |
| 108 | +</style> | |
| 109 | +</head> | |
| 110 | +<body> | |
| 111 | + <div class="poster"> | |
| 112 | + <header class="head"> | |
| 113 | + <div class="brand"> | |
| 114 | + <svg class="tile" viewBox="0 0 64 64" role="img" aria-label="Logo Vrai-Prix"><rect width="64" height="64" rx="12" fill="#141814"/><text x="32" y="45" font-family="Arial Black, sans-serif" font-size="30" font-weight="900" fill="#ff5148" text-anchor="middle">VP</text></svg> | |
| 115 | + <div> | |
| 116 | + <span class="wordmark">Vrai<span class="kabox">Prix</span></span><br /> | |
| 117 | + <span class="by">by Groupe <span class="minibox">KA</span></span> | |
| 118 | + </div> | |
| 119 | + </div> | |
| 120 | + <span class="url">www.vrai-prix.com</span> | |
| 121 | + </header> | |
| 122 | + | |
| 123 | + <p class="kicker">Estimation résidentielle · tout le Québec</p> | |
| 124 | + <h1>La valeur de votre maison,<br /><span class="hl">expliquée.</span></h1> | |
| 125 | + <p class="lede">3 747 008 propriétés couvertes, 745 119 ventes réelles, fourchette P10-P90 et indice de confiance — chaque ajustement affiché en dollars.</p> | |
| 126 | + | |
| 127 | + <div class="shot"> | |
| 128 | + <div class="browser"> | |
| 129 | + <div class="bbar"> | |
| 130 | + <div class="dots"><span></span><span></span><span></span></div> | |
| 131 | + <span class="addr">https://www.vrai-prix.com</span> | |
| 132 | + </div> | |
| 133 | + <img src="img/vrai-prix-desktop.png" alt="Vrai-Prix — vue bureau" /> | |
| 134 | + </div> | |
| 135 | + <div class="phone"> | |
| 136 | + <span class="notch"></span> | |
| 137 | + <img src="img/vrai-prix-mobile.png" alt="Vrai-Prix — vue mobile" /> | |
| 138 | + </div> | |
| 139 | + <span class="caption">L'app en direct · capturée le 13 août 2026</span> | |
| 140 | + </div> | |
| 141 | + | |
| 142 | + <div class="stats"> | |
| 143 | + <span class="chip"><span class="dot"></span>3 747 008 propriétés</span> | |
| 144 | + <span class="chip">745 119 ventes réelles</span> | |
| 145 | + <span class="chip">MdAPE 11 %</span> | |
| 146 | + <span class="chip">rapports PDF bancaires</span> | |
| 147 | + </div> | |
| 148 | + | |
| 149 | + <div class="strip"> | |
| 150 | + <p class="eq">La vraie valeur.<br /><span class="acc">En toute transparence.</span></p> | |
| 151 | + <p class="side"> | |
| 152 | + 100 % automatisé, <strong>zéro boîte noire</strong><br /> | |
| 153 | + Connexion unique <strong>KA ID</strong>, valide sur tout le groupe | |
| 154 | + </p> | |
| 155 | + </div> | |
| 156 | + | |
| 157 | + <footer class="foot"> | |
| 158 | + <p class="left"> | |
| 159 | + <strong>Vrai-Prix</strong> est l'une des sept plateformes du Groupe KA — | |
| 160 | + des agrégateurs entièrement automatisés qui lisent les sites à la source. | |
| 161 | + « Tout ce qui finit en ·Ka agrège. » | |
| 162 | + </p> | |
| 163 | + <div class="contact"> | |
| 164 | + <span class="big">www.vrai-prix.com</span><br /> | |
| 165 | + by Groupe KA · www.groupe-ka.com<br /> | |
| 166 | + © 2026 Groupe KA · Québec | |
| 167 | + </div> | |
| 168 | + </footer> | |
| 169 | + </div> | |
| 170 | +</body> | |
| 171 | +</html> | |
| 172 | ||