642747d762
Trois templates HTML autonomes pour générer les assets visuels sans quitter le repo : - `docs/logo-export.html` — outil interactif d'export du wordmark Rubis.pro en PNG (Bricolage Grotesque). 3 layouts (horizontal, vertical, texte seul), 5 fonds, 5 couleurs, taille 120 → 4096 px, format carré. Preset 120 px pour le logo de consent screen Google OAuth. Le canvas attend `document.fonts.ready` avant rendu pour éviter le fallback sans-serif. - `docs/og-default-source.html` — recréation HTML pixel-perfect du `og-default.png` (1200×630) avec le nouveau wordmark `Rubis.pro` et `DSO*`. Export via Chrome DevTools "Capture node screenshot" pour remplacer `apps/landing/public/og-default.png`. - `docs/linkedin-launch-source.html` — image carrée 1200×1200 pour un post de lancement LinkedIn. Format optimal pour le feed mobile (LinkedIn n'crop pas les carrés). Headline + stat-héros + brand. Tous les gems sont des SVG inline (4 facettes + contour) — identité visuelle 1:1 avec `<Gem/>` du SPA et `favicon.svg`. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
306 lines
8.3 KiB
HTML
306 lines
8.3 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>LinkedIn launch image — Rubis.pro</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--rubis: #9F1239;
|
||
--rubis-deep: #771328;
|
||
--rubis-light: #C9415C;
|
||
--rubis-glow: #FBE4EA;
|
||
--cream: #FAF7F2;
|
||
--cream-2: #F4EFE7;
|
||
--ink: #1A1410;
|
||
--ink-2: #4A3F36;
|
||
--ink-3: #8B7E73;
|
||
--line: #E8E0D6;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
background: #2a2520;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 40px 20px;
|
||
gap: 20px;
|
||
font-family: "Inter", system-ui, sans-serif;
|
||
}
|
||
.instructions {
|
||
max-width: 900px;
|
||
color: #ddd;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
background: #1a1410;
|
||
padding: 16px 20px;
|
||
border-radius: 8px;
|
||
}
|
||
.instructions code {
|
||
background: #3a3530;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-family: ui-monospace, Menlo, monospace;
|
||
font-size: 13px;
|
||
}
|
||
/*
|
||
* #li : carré 1200×1200 — format optimal pour le feed LinkedIn mobile
|
||
* (LinkedIn affiche les images carrées sans crop, ce qui maximise la
|
||
* vertical real estate quand le user scrolle). Pour exporter : Chrome
|
||
* DevTools → Elements → sélectionner #li → clic droit → "Capture node
|
||
* screenshot".
|
||
*/
|
||
#li {
|
||
width: 1200px;
|
||
height: 1200px;
|
||
background: var(--cream);
|
||
position: relative;
|
||
overflow: hidden;
|
||
font-family: "Inter", system-ui, sans-serif;
|
||
color: var(--ink);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 90px 90px 80px;
|
||
}
|
||
|
||
/* Halo rubis en haut-droite — brand color signal sans dominer */
|
||
.halo {
|
||
position: absolute;
|
||
top: -300px;
|
||
right: -300px;
|
||
width: 800px;
|
||
height: 800px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, var(--rubis-glow) 0%, transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Gem géant en filigrane derrière le headline — signature visuelle */
|
||
.gem-bg {
|
||
position: absolute;
|
||
bottom: -140px;
|
||
left: -140px;
|
||
width: 720px;
|
||
height: 720px;
|
||
opacity: 0.08;
|
||
transform: rotate(0deg);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ============ Header (brand lockup) ============ */
|
||
.top {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
font-family: "Bricolage Grotesque", sans-serif;
|
||
font-weight: 800;
|
||
font-size: 36px;
|
||
letter-spacing: -0.02em;
|
||
color: var(--ink);
|
||
line-height: 1;
|
||
}
|
||
.brand .gem {
|
||
width: 42px;
|
||
height: 42px;
|
||
}
|
||
.brand .suffix {
|
||
color: var(--ink-3);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 16px;
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 999px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--ink-2);
|
||
}
|
||
.badge .dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: #2d8a4e;
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 0 3px rgba(45, 138, 78, 0.18);
|
||
}
|
||
|
||
/* ============ Centre — headline + sub ============ */
|
||
.center {
|
||
position: relative;
|
||
z-index: 2;
|
||
max-width: 920px;
|
||
}
|
||
h1 {
|
||
font-family: "Bricolage Grotesque", sans-serif;
|
||
font-weight: 800;
|
||
font-size: 110px;
|
||
line-height: 0.98;
|
||
letter-spacing: -0.04em;
|
||
color: var(--ink);
|
||
}
|
||
h1 em {
|
||
font-style: italic;
|
||
color: var(--rubis);
|
||
font-weight: 800;
|
||
}
|
||
.sub {
|
||
margin-top: 32px;
|
||
font-size: 28px;
|
||
line-height: 1.4;
|
||
color: var(--ink-2);
|
||
font-weight: 400;
|
||
max-width: 760px;
|
||
}
|
||
.sub b { color: var(--ink); font-weight: 700; }
|
||
|
||
/* ============ Stat chip ============ */
|
||
.stat-row {
|
||
margin-top: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.stat {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 10px;
|
||
padding: 14px 22px;
|
||
background: var(--rubis);
|
||
color: var(--cream);
|
||
border-radius: 14px;
|
||
box-shadow: 0 8px 24px rgba(159, 18, 57, 0.25);
|
||
}
|
||
.stat .num {
|
||
font-family: "Bricolage Grotesque", sans-serif;
|
||
font-weight: 800;
|
||
font-size: 36px;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1;
|
||
}
|
||
.stat .label {
|
||
font-size: 17px;
|
||
font-weight: 500;
|
||
opacity: 0.9;
|
||
}
|
||
.stat-sep {
|
||
font-size: 22px;
|
||
color: var(--ink-3);
|
||
}
|
||
.stat-soft {
|
||
font-size: 20px;
|
||
color: var(--ink-2);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ============ Footer ============ */
|
||
.bottom {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 20px;
|
||
}
|
||
.domain {
|
||
font-family: "Bricolage Grotesque", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 32px;
|
||
letter-spacing: -0.02em;
|
||
color: var(--ink);
|
||
}
|
||
.domain .arrow {
|
||
color: var(--rubis);
|
||
margin-right: 8px;
|
||
}
|
||
.tag {
|
||
font-size: 17px;
|
||
color: var(--ink-3);
|
||
font-weight: 500;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<p class="instructions">
|
||
<strong>Comment exporter en PNG 1200×1200</strong> — ouvrir Chrome DevTools (<code>⌘⌥I</code>),
|
||
sélectionner la div <code>#li</code> dans l'arbre Elements, clic droit →
|
||
<em>Capture node screenshot</em>. Format optimal pour un post LinkedIn dans le feed mobile.
|
||
</p>
|
||
|
||
<div id="li">
|
||
<div class="halo"></div>
|
||
|
||
<!-- Gem fantôme en arrière-plan -->
|
||
<svg class="gem-bg" viewBox="0 0 100 100" fill="none">
|
||
<polygon points="50,6 6,50 50,50" fill="#9F1239" fill-opacity="1"/>
|
||
<polygon points="50,6 94,50 50,50" fill="#9F1239" fill-opacity="0.8"/>
|
||
<polygon points="6,50 50,50 50,94" fill="#9F1239" fill-opacity="0.65"/>
|
||
<polygon points="50,50 94,50 50,94" fill="#9F1239" fill-opacity="0.48"/>
|
||
<polygon points="50,6 94,50 50,94 6,50" fill="none" stroke="#9F1239" stroke-width="1.6" stroke-linejoin="round"/>
|
||
</svg>
|
||
|
||
<!-- Top : brand + statut -->
|
||
<div class="top">
|
||
<div class="brand">
|
||
<svg class="gem" viewBox="0 0 100 100" fill="none">
|
||
<polygon points="50,6 6,50 50,50" fill="#9F1239" fill-opacity="1"/>
|
||
<polygon points="50,6 94,50 50,50" fill="#9F1239" fill-opacity="0.8"/>
|
||
<polygon points="6,50 50,50 50,94" fill="#9F1239" fill-opacity="0.65"/>
|
||
<polygon points="50,50 94,50 50,94" fill="#9F1239" fill-opacity="0.48"/>
|
||
<polygon points="50,6 94,50 50,94 6,50" fill="none" stroke="#9F1239" stroke-width="1.6" stroke-linejoin="round"/>
|
||
</svg>
|
||
<span>Rubis<span class="suffix">.pro</span></span>
|
||
</div>
|
||
<span class="badge">
|
||
<span class="dot"></span>
|
||
En ligne
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Centre : headline -->
|
||
<div class="center">
|
||
<h1>
|
||
Vos factures<br />
|
||
relancées<br />
|
||
<em>toutes seules</em>.
|
||
</h1>
|
||
<p class="sub">
|
||
Le SaaS de relance pour TPE-PME françaises. Drag-and-drop, OCR,
|
||
plans de relance automatiques.
|
||
</p>
|
||
<div class="stat-row">
|
||
<span class="stat">
|
||
<span class="num">5 h</span>
|
||
<span class="label">par semaine récupérées</span>
|
||
</span>
|
||
<span class="stat-sep">·</span>
|
||
<span class="stat-soft">8 h → moins de 3</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom : domaine + tag -->
|
||
<div class="bottom">
|
||
<span class="domain">
|
||
<span class="arrow">→</span>rubis.pro
|
||
</span>
|
||
<span class="tag">30 jours gratuits · sans carte bancaire</span>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|