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>
356 lines
11 KiB
HTML
356 lines
11 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>OG default source — 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;
|
||
}
|
||
.instructions a { color: #FBE4EA; }
|
||
/*
|
||
* #og : EXACTEMENT 1200×630 (specs Open Graph).
|
||
* Pour exporter : Chrome DevTools → Inspecter cette div → clic droit
|
||
* → "Capture node screenshot". Le PNG sortira pile à 1200×630.
|
||
*/
|
||
#og {
|
||
width: 1200px;
|
||
height: 630px;
|
||
background: var(--cream);
|
||
position: relative;
|
||
overflow: hidden;
|
||
font-family: "Inter", system-ui, sans-serif;
|
||
color: var(--ink);
|
||
}
|
||
/* Halo rubis discret en haut-droite */
|
||
.halo {
|
||
position: absolute;
|
||
top: -200px;
|
||
right: -200px;
|
||
width: 600px;
|
||
height: 600px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, var(--rubis-glow) 0%, transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
/* Triangle fantôme en bas (clin d'œil au gem) */
|
||
.ghost-tri {
|
||
position: absolute;
|
||
bottom: -100px;
|
||
left: 50%;
|
||
transform: translateX(-50%) rotate(45deg);
|
||
width: 320px;
|
||
height: 320px;
|
||
background: var(--rubis);
|
||
opacity: 0.06;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.content {
|
||
position: relative;
|
||
height: 100%;
|
||
padding: 70px 80px;
|
||
display: grid;
|
||
grid-template-columns: 1.3fr 1fr;
|
||
gap: 60px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* ============ Brand lockup ============ */
|
||
.brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-family: "Bricolage Grotesque", sans-serif;
|
||
font-weight: 800;
|
||
font-size: 28px;
|
||
letter-spacing: -0.02em;
|
||
color: var(--ink);
|
||
line-height: 1;
|
||
}
|
||
.brand .gem {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
.brand .suffix {
|
||
color: var(--ink-3);
|
||
font-weight: 800;
|
||
}
|
||
|
||
/* ============ Headline ============ */
|
||
h1 {
|
||
margin-top: 32px;
|
||
font-family: "Bricolage Grotesque", sans-serif;
|
||
font-weight: 800;
|
||
font-size: 70px;
|
||
line-height: 1.02;
|
||
letter-spacing: -0.035em;
|
||
color: var(--ink);
|
||
}
|
||
h1 em {
|
||
font-style: italic;
|
||
color: var(--rubis);
|
||
font-weight: 800;
|
||
}
|
||
.sub {
|
||
margin-top: 24px;
|
||
font-size: 22px;
|
||
line-height: 1.45;
|
||
color: var(--ink-2);
|
||
max-width: 520px;
|
||
}
|
||
.sub b { color: var(--ink); font-weight: 700; }
|
||
|
||
.cta {
|
||
margin-top: 32px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 18px;
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 999px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
box-shadow: 0 4px 12px rgba(26, 20, 16, 0.06);
|
||
}
|
||
.cta .gem {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
/* ============ Mock card ============ */
|
||
.mock {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 16px;
|
||
box-shadow: 0 12px 40px rgba(26, 20, 16, 0.10);
|
||
overflow: hidden;
|
||
}
|
||
.mock-topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14px 22px;
|
||
border-bottom: 1px solid var(--line);
|
||
background: rgba(244, 239, 231, 0.4);
|
||
}
|
||
.mock-topbar .brand { font-size: 16px; }
|
||
.mock-topbar .brand .gem { width: 18px; height: 18px; }
|
||
.mock-topbar .label {
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
font-weight: 600;
|
||
color: var(--ink-3);
|
||
}
|
||
.mock-body { padding: 24px 26px; }
|
||
.mock-hero {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.mock-hero .gem-glow {
|
||
width: 56px;
|
||
height: 56px;
|
||
filter: drop-shadow(0 4px 16px rgba(159, 18, 57, 0.35));
|
||
}
|
||
.mock-count {
|
||
font-family: "Bricolage Grotesque", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 32px;
|
||
letter-spacing: -0.022em;
|
||
line-height: 1;
|
||
color: var(--ink);
|
||
}
|
||
.mock-count-sub {
|
||
margin-top: 6px;
|
||
font-size: 13px;
|
||
color: var(--ink-2);
|
||
}
|
||
.mock-count-sub b { color: var(--ink); font-weight: 700; }
|
||
.mock-kpis {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 18px;
|
||
margin-top: 16px;
|
||
}
|
||
.kpi-label {
|
||
font-size: 9.5px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
font-weight: 600;
|
||
color: var(--ink-3);
|
||
}
|
||
.kpi-value {
|
||
margin-top: 4px;
|
||
font-family: "Bricolage Grotesque", sans-serif;
|
||
font-weight: 700;
|
||
font-size: 22px;
|
||
letter-spacing: -0.015em;
|
||
color: var(--ink);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.kpi-delta {
|
||
margin-top: 3px;
|
||
font-size: 10.5px;
|
||
color: var(--rubis);
|
||
font-weight: 500;
|
||
}
|
||
.mock-activity {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
margin-top: 14px;
|
||
padding-top: 12px;
|
||
border-top: 1px dashed var(--line);
|
||
font-size: 12px;
|
||
}
|
||
.mock-activity .text { color: var(--ink-2); }
|
||
.mock-activity b { color: var(--ink); font-weight: 600; }
|
||
.mock-activity time {
|
||
color: var(--ink-3);
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 10.5px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<p class="instructions">
|
||
<strong>Comment exporter en PNG 1200×630</strong> — ouvrir Chrome DevTools (<code>⌘⌥I</code>),
|
||
sélectionner la div <code>#og</code>, clic droit dans l'arbre → <em>Capture node screenshot</em>.
|
||
Le PNG sort pile à 1200×630. Remplacer ensuite
|
||
<code>apps/landing/public/og-default.png</code>.
|
||
</p>
|
||
|
||
<div id="og">
|
||
<div class="halo"></div>
|
||
<div class="ghost-tri"></div>
|
||
|
||
<div class="content">
|
||
<div>
|
||
<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>
|
||
|
||
<h1>
|
||
Vos factures relancées <em>toutes seules</em>.
|
||
</h1>
|
||
|
||
<p class="sub">
|
||
Le SaaS de relance pour TPE-PME françaises. <b>5 heures par semaine</b> récupérées, automatiquement.
|
||
</p>
|
||
|
||
<span class="cta">
|
||
<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>
|
||
rubis.pro
|
||
</span>
|
||
</div>
|
||
|
||
<div class="mock">
|
||
<div class="mock-topbar">
|
||
<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="label">Tableau de bord</span>
|
||
</div>
|
||
<div class="mock-body">
|
||
<div class="mock-hero">
|
||
<svg class="gem-glow" 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>
|
||
<div>
|
||
<div class="mock-count">124 rubis</div>
|
||
<div class="mock-count-sub">≈ <b>24 h 48</b> libérées ce mois</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-kpis">
|
||
<div>
|
||
<div class="kpi-label">Encaissé</div>
|
||
<div class="kpi-value">14 320 €</div>
|
||
<div class="kpi-delta">+ 2 800 € vs avril</div>
|
||
</div>
|
||
<div>
|
||
<div class="kpi-label">DSO*</div>
|
||
<div class="kpi-value">38 j</div>
|
||
<div class="kpi-delta">↘ −6 j depuis Rubis</div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-activity">
|
||
<span class="text">✓ Facture <b>F-2024-035</b> encaissée</span>
|
||
<time>10:02</time>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|