1446 lines
50 KiB
HTML
1446 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Rubis Sur l'Ongle — Vos factures relancées toutes seules pendant que vous travaillez</title>
|
||
<meta name="description" content="Le SaaS de relance de factures impayées pour TPE-PME françaises. Glissez vos factures, choisissez un plan, récupérez 5 heures par semaine.">
|
||
<meta property="og:title" content="Rubis Sur l'Ongle — Vos factures relancées toutes seules">
|
||
<meta property="og:description" content="L'app de relance de factures pensée pour les TPE-PME françaises. 3 clics, OCR, plans de relance automatiques.">
|
||
<meta property="og:type" content="website">
|
||
<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,400;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;
|
||
--ink: #1A1410;
|
||
--ink-2: #4F4640;
|
||
--ink-3: #8A7F76;
|
||
--line: #E8E0D6;
|
||
--cream: #FAF7F2;
|
||
--cream-2: #F5EFE7;
|
||
--display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
||
--max: 1180px;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
background: var(--cream);
|
||
color: var(--ink);
|
||
font-family: var(--body);
|
||
font-size: 16px;
|
||
line-height: 1.55;
|
||
font-feature-settings: "ss01", "cv11";
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
::selection { background: var(--rubis); color: white; }
|
||
a { color: inherit; text-decoration: none; }
|
||
button { font-family: inherit; cursor: pointer; border: none; background: none; }
|
||
input, select { font-family: inherit; font-size: inherit; color: inherit; }
|
||
|
||
/* === LAYOUT PRIMITIVES === */
|
||
.container { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
|
||
@media (max-width: 720px) { .container { padding: 0 20px; } }
|
||
|
||
.eyebrow {
|
||
font-family: var(--body);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.14em;
|
||
color: var(--rubis);
|
||
text-transform: uppercase;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.eyebrow::before {
|
||
content: "";
|
||
width: 8px; height: 8px;
|
||
background: var(--rubis);
|
||
transform: rotate(45deg);
|
||
display: inline-block;
|
||
}
|
||
|
||
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.018em; }
|
||
h1 { font-weight: 700; line-height: 1.05; letter-spacing: -0.028em; }
|
||
h2 { font-weight: 600; line-height: 1.1; letter-spacing: -0.022em; font-size: 40px; }
|
||
h3 { font-weight: 600; line-height: 1.2; font-size: 22px; }
|
||
h4 { font-weight: 600; line-height: 1.3; font-size: 17px; }
|
||
p { color: var(--ink-2); line-height: 1.6; }
|
||
em { font-style: italic; color: var(--rubis); }
|
||
|
||
@media (max-width: 720px) {
|
||
h2 { font-size: 30px; }
|
||
h3 { font-size: 19px; }
|
||
}
|
||
|
||
/* === BUTTONS === */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 13px 22px;
|
||
border-radius: 6px;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
transition: transform 0.1s, box-shadow 0.2s;
|
||
white-space: nowrap;
|
||
}
|
||
.btn-primary {
|
||
background: var(--rubis);
|
||
color: white;
|
||
box-shadow: 0 2px 8px rgba(159, 18, 57, 0.25);
|
||
}
|
||
.btn-primary:hover {
|
||
background: var(--rubis-deep);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 6px 16px rgba(159, 18, 57, 0.35);
|
||
}
|
||
.btn-secondary {
|
||
background: transparent;
|
||
color: var(--ink);
|
||
border: 1px solid var(--ink);
|
||
}
|
||
.btn-secondary:hover { background: var(--ink); color: white; }
|
||
|
||
/* === BRAND MARK === */
|
||
.brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-family: var(--display);
|
||
font-weight: 800;
|
||
font-size: 19px;
|
||
letter-spacing: -0.02em;
|
||
color: var(--ink);
|
||
}
|
||
.brand .gem-svg { width: 22px; height: 22px; }
|
||
|
||
/* === HEADER === */
|
||
.site-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: rgba(250, 247, 242, 0.92);
|
||
backdrop-filter: saturate(140%) blur(8px);
|
||
-webkit-backdrop-filter: saturate(140%) blur(8px);
|
||
border-bottom: 1px solid transparent;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.site-header.scrolled { border-bottom-color: var(--line); }
|
||
.site-header .container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 18px;
|
||
padding-bottom: 18px;
|
||
}
|
||
.nav { display: flex; gap: 28px; align-items: center; font-size: 14px; }
|
||
.nav a { color: var(--ink-2); font-weight: 500; }
|
||
.nav a:hover { color: var(--rubis); }
|
||
.nav .nav-cta {
|
||
background: var(--ink);
|
||
color: white;
|
||
padding: 9px 18px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
}
|
||
.nav .nav-cta:hover { background: var(--rubis); color: white; }
|
||
@media (max-width: 720px) {
|
||
.nav .nav-link { display: none; }
|
||
}
|
||
|
||
/* === HERO === */
|
||
.hero {
|
||
padding: 80px 0 96px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.hero::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: -150px; right: -200px;
|
||
width: 600px; height: 600px;
|
||
background: radial-gradient(circle, rgba(251, 228, 234, 0.6), transparent 60%);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
.hero .container {
|
||
display: grid;
|
||
grid-template-columns: 1.15fr 1fr;
|
||
gap: 64px;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
@media (max-width: 920px) {
|
||
.hero { padding: 56px 0 72px; }
|
||
.hero .container { grid-template-columns: 1fr; gap: 48px; }
|
||
}
|
||
.hero h1 {
|
||
font-size: clamp(40px, 5.5vw, 64px);
|
||
margin: 18px 0 24px;
|
||
max-width: 620px;
|
||
}
|
||
.hero .lede {
|
||
font-size: 18px;
|
||
color: var(--ink-2);
|
||
line-height: 1.55;
|
||
margin-bottom: 32px;
|
||
max-width: 540px;
|
||
}
|
||
.hero .trust {
|
||
margin-top: 16px;
|
||
font-size: 12.5px;
|
||
color: var(--ink-3);
|
||
display: flex;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.hero .trust span { display: inline-flex; align-items: center; gap: 6px; }
|
||
.hero .trust .dot { width: 4px; height: 4px; background: var(--ink-3); border-radius: 50%; }
|
||
|
||
/* === WAITLIST FORM === */
|
||
.waitlist-form {
|
||
display: flex;
|
||
gap: 8px;
|
||
max-width: 480px;
|
||
background: white;
|
||
padding: 8px;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--line);
|
||
box-shadow: 0 4px 16px rgba(26, 20, 16, 0.04);
|
||
}
|
||
.waitlist-form input[type="email"] {
|
||
flex: 1;
|
||
border: none;
|
||
outline: none;
|
||
padding: 12px 14px;
|
||
font-size: 15px;
|
||
background: transparent;
|
||
color: var(--ink);
|
||
min-width: 0;
|
||
}
|
||
.waitlist-form input[type="email"]::placeholder { color: var(--ink-3); }
|
||
.waitlist-form button {
|
||
background: var(--rubis);
|
||
color: white;
|
||
padding: 12px 20px;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
transition: background 0.2s;
|
||
}
|
||
.waitlist-form button:hover { background: var(--rubis-deep); }
|
||
@media (max-width: 480px) {
|
||
.waitlist-form { flex-direction: column; }
|
||
.waitlist-form button { width: 100%; }
|
||
}
|
||
|
||
/* === HERO VISUAL (dashboard preview) === */
|
||
.hero-visual {
|
||
position: relative;
|
||
perspective: 1400px;
|
||
}
|
||
.preview-card {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
padding: 28px;
|
||
box-shadow:
|
||
0 16px 40px -16px rgba(26, 20, 16, 0.18),
|
||
0 4px 8px -2px rgba(26, 20, 16, 0.06);
|
||
position: relative;
|
||
}
|
||
.preview-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 14px; right: 14px;
|
||
width: 64px; height: 4px;
|
||
background: var(--rubis-glow);
|
||
border-radius: 2px;
|
||
}
|
||
.preview-rubis {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18px;
|
||
padding-bottom: 18px;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.preview-rubis .gem-big { filter: drop-shadow(0 4px 8px rgba(159, 18, 57, 0.3)); }
|
||
.preview-rubis .num {
|
||
font-family: var(--display);
|
||
font-size: 38px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
letter-spacing: -0.025em;
|
||
}
|
||
.preview-rubis .sub {
|
||
font-size: 13px;
|
||
color: var(--ink-2);
|
||
margin-top: 4px;
|
||
}
|
||
.preview-kpis {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 18px;
|
||
margin-top: 18px;
|
||
}
|
||
.preview-kpi { font-size: 12px; }
|
||
.preview-kpi .label { color: var(--ink-3); font-size: 11px; }
|
||
.preview-kpi .value {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 20px;
|
||
margin-top: 2px;
|
||
letter-spacing: -0.015em;
|
||
}
|
||
.preview-kpi .delta { color: var(--rubis); font-size: 11.5px; font-weight: 500; margin-top: 2px; }
|
||
|
||
.preview-card .activity {
|
||
margin-top: 18px;
|
||
padding-top: 18px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.preview-card .activity .head {
|
||
font-size: 11px;
|
||
color: var(--ink-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 10px;
|
||
font-weight: 600;
|
||
}
|
||
.preview-card .activity ul { list-style: none; font-size: 12.5px; }
|
||
.preview-card .activity li {
|
||
padding: 6px 0;
|
||
color: var(--ink-2);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
}
|
||
.preview-card .activity li b { color: var(--ink); font-weight: 600; }
|
||
.preview-card .activity li time { color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
|
||
|
||
.floating-badge {
|
||
position: absolute;
|
||
bottom: -22px;
|
||
left: -22px;
|
||
background: var(--ink);
|
||
color: white;
|
||
padding: 12px 16px;
|
||
border-radius: 8px;
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
box-shadow: 0 8px 24px rgba(26, 20, 16, 0.25);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.floating-badge svg { width: 18px; height: 18px; color: var(--rubis-light); }
|
||
@media (max-width: 920px) {
|
||
.floating-badge { left: 8px; bottom: -16px; }
|
||
}
|
||
|
||
/* === SECTION COMMON === */
|
||
section { padding: 96px 0; position: relative; }
|
||
@media (max-width: 720px) { section { padding: 64px 0; } }
|
||
.section-head { text-align: center; max-width: 700px; margin: 0 auto 56px; }
|
||
.section-head h2 { margin: 14px 0 14px; }
|
||
.section-head p { font-size: 17px; color: var(--ink-2); }
|
||
|
||
/* === STATS === */
|
||
.stats {
|
||
background: var(--cream-2);
|
||
border-top: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
@media (max-width: 720px) { .stats-grid { grid-template-columns: 1fr; gap: 16px; } }
|
||
.stat-card {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
padding: 32px 28px;
|
||
text-align: left;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26, 20, 16, 0.06); }
|
||
.stat-card .num {
|
||
font-family: var(--display);
|
||
font-size: 56px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
color: var(--rubis);
|
||
letter-spacing: -0.03em;
|
||
margin-bottom: 10px;
|
||
}
|
||
.stat-card .desc { font-size: 15px; color: var(--ink); line-height: 1.4; margin-bottom: 14px; font-weight: 500; }
|
||
.stat-card .source { font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 10px; }
|
||
|
||
/* === PROMISE === */
|
||
.promise .container { max-width: 920px; }
|
||
.promise blockquote {
|
||
font-family: var(--display);
|
||
font-size: clamp(32px, 4.5vw, 52px);
|
||
font-weight: 600;
|
||
line-height: 1.15;
|
||
letter-spacing: -0.025em;
|
||
color: var(--ink);
|
||
border-left: 4px solid var(--rubis);
|
||
padding: 12px 0 12px 32px;
|
||
margin: 0 0 32px;
|
||
}
|
||
.promise blockquote em { font-style: italic; }
|
||
.promise .body {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
margin-top: 32px;
|
||
}
|
||
@media (max-width: 720px) { .promise .body { grid-template-columns: 1fr; gap: 32px; } }
|
||
.promise .body p { font-size: 16px; line-height: 1.65; }
|
||
.promise .calc {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
padding: 28px;
|
||
}
|
||
.promise .calc h4 { font-size: 13px; color: var(--rubis); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--body); margin-bottom: 14px; font-weight: 600; }
|
||
.promise .calc .row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
padding: 10px 0;
|
||
border-bottom: 1px dashed var(--line);
|
||
font-size: 14px;
|
||
}
|
||
.promise .calc .row:last-child { border-bottom: none; padding-bottom: 0; }
|
||
.promise .calc .row .label { color: var(--ink-2); }
|
||
.promise .calc .row .val { font-family: var(--display); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
|
||
.promise .calc .row.total .label { color: var(--ink); font-weight: 600; }
|
||
.promise .calc .row.total .val { color: var(--rubis); font-size: 22px; }
|
||
|
||
/* === HOW IT WORKS (editorial light) === */
|
||
.how-it-works {
|
||
background: var(--cream-2);
|
||
border-top: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.how-it-works .head-block {
|
||
margin-bottom: 32px;
|
||
max-width: 640px;
|
||
}
|
||
.how-it-works .head-block h2 { margin: 14px 0 12px; font-size: clamp(34px, 4.2vw, 48px); }
|
||
.how-it-works .head-block p { font-size: 17px; }
|
||
.step-row {
|
||
display: grid;
|
||
grid-template-columns: 320px 1fr;
|
||
gap: 56px;
|
||
align-items: center;
|
||
padding: 48px 0;
|
||
border-top: 1px dashed var(--line);
|
||
}
|
||
.step-row.flip {
|
||
grid-template-columns: 1fr 320px;
|
||
}
|
||
.step-row.flip .step-num-big {
|
||
order: 2;
|
||
text-align: right;
|
||
}
|
||
.step-row.flip .step-prose {
|
||
order: 1;
|
||
}
|
||
.step-num-big {
|
||
font-family: var(--display);
|
||
font-weight: 800;
|
||
font-size: clamp(120px, 16vw, 196px);
|
||
line-height: 0.82;
|
||
letter-spacing: -0.04em;
|
||
color: var(--rubis);
|
||
user-select: none;
|
||
}
|
||
.step-prose h3 {
|
||
font-family: var(--display);
|
||
font-size: clamp(24px, 2.6vw, 30px);
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
letter-spacing: -0.018em;
|
||
margin-bottom: 14px;
|
||
color: var(--ink);
|
||
}
|
||
.step-prose p {
|
||
font-size: 17px;
|
||
line-height: 1.65;
|
||
color: var(--ink-2);
|
||
max-width: 560px;
|
||
}
|
||
.step-prose .reward {
|
||
margin-top: 18px;
|
||
padding: 14px 18px;
|
||
background: white;
|
||
border-left: 3px solid var(--rubis);
|
||
font-style: italic;
|
||
color: var(--ink);
|
||
font-size: 15.5px;
|
||
border-radius: 0 6px 6px 0;
|
||
}
|
||
@media (max-width: 760px) {
|
||
.step-row, .step-row.flip {
|
||
grid-template-columns: 1fr;
|
||
gap: 14px;
|
||
padding: 36px 0;
|
||
}
|
||
.step-row.flip .step-num-big {
|
||
order: 0;
|
||
text-align: left;
|
||
}
|
||
.step-row.flip .step-prose {
|
||
order: 1;
|
||
}
|
||
.step-num-big { font-size: 96px; }
|
||
}
|
||
|
||
/* === GAMIFICATION === */
|
||
.game .container { max-width: 1080px; }
|
||
.game-card {
|
||
background: linear-gradient(135deg, var(--rubis-glow) 0%, white 100%);
|
||
border-radius: 20px;
|
||
padding: 64px 56px;
|
||
border: 1px solid var(--line);
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.game-card::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: -100px; right: -100px;
|
||
width: 360px; height: 360px;
|
||
background: radial-gradient(circle, rgba(159, 18, 57, 0.08) 0%, transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
.game-card .gem-huge {
|
||
width: 80px; height: 80px;
|
||
margin: 0 auto 20px;
|
||
filter: drop-shadow(0 8px 16px rgba(159, 18, 57, 0.35));
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.game-card h2 {
|
||
font-size: clamp(34px, 4vw, 50px);
|
||
margin-bottom: 16px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.game-card .lead {
|
||
font-size: 18px;
|
||
color: var(--ink-2);
|
||
max-width: 640px;
|
||
margin: 0 auto 32px;
|
||
line-height: 1.6;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.game-counter {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 12px;
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
padding: 18px 32px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 4px 16px rgba(26, 20, 16, 0.06);
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.game-counter .big {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 56px;
|
||
line-height: 1;
|
||
letter-spacing: -0.03em;
|
||
color: var(--rubis);
|
||
}
|
||
.game-counter .unit {
|
||
font-family: var(--display);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
}
|
||
.game-counter .equals {
|
||
font-size: 14px;
|
||
color: var(--ink-2);
|
||
margin-left: 8px;
|
||
border-left: 1px solid var(--line);
|
||
padding-left: 16px;
|
||
}
|
||
.game-counter .equals b { font-family: var(--display); color: var(--ink); }
|
||
@media (max-width: 600px) {
|
||
.game-card { padding: 48px 24px; }
|
||
.game-counter { flex-direction: column; gap: 4px; padding: 18px 22px; }
|
||
.game-counter .equals { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 8px; margin-left: 0; margin-top: 8px; }
|
||
}
|
||
|
||
/* === LEGAL (clipping de presse) === */
|
||
.legal {
|
||
background: var(--cream-2);
|
||
border-top: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.legal .container {
|
||
max-width: 1100px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 72px;
|
||
align-items: center;
|
||
}
|
||
@media (max-width: 880px) { .legal .container { grid-template-columns: 1fr; gap: 40px; } }
|
||
.legal h2 {
|
||
font-size: clamp(30px, 3.6vw, 42px);
|
||
margin: 14px 0 20px;
|
||
line-height: 1.1;
|
||
}
|
||
.legal p { font-size: 16px; margin-bottom: 16px; line-height: 1.7; max-width: 480px; }
|
||
.legal .law-tag {
|
||
display: inline-block;
|
||
background: var(--ink);
|
||
color: var(--cream);
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||
font-size: 12.5px;
|
||
margin-right: 4px;
|
||
}
|
||
.clipping {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 6px;
|
||
padding: 40px 44px 32px;
|
||
position: relative;
|
||
box-shadow: 0 4px 20px rgba(26, 20, 16, 0.05);
|
||
}
|
||
.clipping::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0;
|
||
height: 4px;
|
||
background: var(--ink);
|
||
border-radius: 6px 6px 0 0;
|
||
}
|
||
.clipping .headline {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
color: var(--ink-3);
|
||
border-bottom: 1px solid var(--line);
|
||
padding-bottom: 14px;
|
||
margin-bottom: 28px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.clipping .big-number {
|
||
font-family: var(--display);
|
||
font-weight: 800;
|
||
font-size: clamp(80px, 11vw, 132px);
|
||
line-height: 0.88;
|
||
letter-spacing: -0.045em;
|
||
color: var(--rubis);
|
||
margin-bottom: 12px;
|
||
}
|
||
.clipping .lead {
|
||
font-family: var(--display);
|
||
font-size: 19px;
|
||
font-weight: 500;
|
||
color: var(--ink);
|
||
line-height: 1.35;
|
||
margin-bottom: 28px;
|
||
letter-spacing: -0.012em;
|
||
}
|
||
.clipping .names-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding-top: 18px;
|
||
border-top: 1px dashed var(--line);
|
||
}
|
||
.clipping .names-list li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
padding: 7px 0;
|
||
color: var(--ink-2);
|
||
align-items: baseline;
|
||
}
|
||
.clipping .names-list li b {
|
||
color: var(--ink);
|
||
font-weight: 600;
|
||
font-family: var(--display);
|
||
font-size: 15px;
|
||
}
|
||
.clipping .names-list li .amount {
|
||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||
font-size: 13px;
|
||
color: var(--ink-2);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.clipping .source-line {
|
||
margin-top: 20px;
|
||
padding-top: 14px;
|
||
border-top: 1px solid var(--line);
|
||
font-size: 12px;
|
||
color: var(--ink-3);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* === PRICING (anchor on Pro, asides conversationnels) === */
|
||
.pricing .head-block { margin-bottom: 48px; max-width: 700px; }
|
||
.pricing .head-block h2 { margin: 14px 0 12px; font-size: clamp(34px, 4.2vw, 48px); }
|
||
.pricing .head-block p { font-size: 17px; }
|
||
|
||
.pricing-anchor {
|
||
display: grid;
|
||
grid-template-columns: 1.25fr 1fr;
|
||
gap: 0;
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
box-shadow: 0 12px 36px -16px rgba(159, 18, 57, 0.18);
|
||
}
|
||
.pricing-anchor::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -100px; right: -100px;
|
||
width: 360px; height: 360px;
|
||
background: radial-gradient(circle, rgba(251, 228, 234, 0.6), transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
.pricing-anchor .left {
|
||
padding: 48px 48px 44px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.pricing-anchor .plan-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: var(--body);
|
||
font-weight: 600;
|
||
font-size: 12.5px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--rubis);
|
||
background: var(--rubis-glow);
|
||
padding: 6px 12px;
|
||
border-radius: 4px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.pricing-anchor .plan-tag::before {
|
||
content: "";
|
||
width: 8px; height: 8px;
|
||
background: var(--rubis);
|
||
transform: rotate(45deg);
|
||
}
|
||
.pricing-anchor .plan-name {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: clamp(36px, 4.4vw, 52px);
|
||
letter-spacing: -0.025em;
|
||
line-height: 1.05;
|
||
margin-bottom: 18px;
|
||
color: var(--ink);
|
||
}
|
||
.pricing-anchor .plan-name em { font-style: italic; color: var(--rubis); }
|
||
.pricing-anchor .price-mega {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 12px;
|
||
margin-bottom: 28px;
|
||
}
|
||
.pricing-anchor .price-mega .num {
|
||
font-family: var(--display);
|
||
font-weight: 800;
|
||
font-size: clamp(64px, 8vw, 96px);
|
||
line-height: 0.88;
|
||
letter-spacing: -0.035em;
|
||
color: var(--ink);
|
||
}
|
||
.pricing-anchor .price-mega .per {
|
||
font-family: var(--body);
|
||
font-size: 16px;
|
||
color: var(--ink-3);
|
||
line-height: 1.4;
|
||
}
|
||
.pricing-anchor .pitch {
|
||
font-size: 17px;
|
||
line-height: 1.65;
|
||
color: var(--ink-2);
|
||
margin-bottom: 24px;
|
||
max-width: 520px;
|
||
}
|
||
.pricing-anchor .pitch b { color: var(--ink); font-weight: 600; }
|
||
.pricing-anchor .cta-row {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.pricing-anchor .cta-row .meta { font-size: 13px; color: var(--ink-3); }
|
||
.pricing-anchor .right {
|
||
background: var(--cream);
|
||
border-left: 1px solid var(--line);
|
||
padding: 48px 44px 44px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.pricing-anchor .features-title {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
color: var(--ink-3);
|
||
font-weight: 700;
|
||
margin-bottom: 22px;
|
||
font-family: var(--body);
|
||
}
|
||
.pricing-anchor .features {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: 14.5px;
|
||
}
|
||
.pricing-anchor .features li {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
padding: 9px 0;
|
||
color: var(--ink-2);
|
||
line-height: 1.5;
|
||
}
|
||
.pricing-anchor .features svg {
|
||
flex-shrink: 0;
|
||
margin-top: 3px;
|
||
color: var(--rubis);
|
||
}
|
||
.pricing-anchor .features li b { color: var(--ink); font-weight: 600; }
|
||
|
||
.pricing-asides {
|
||
margin-top: 32px;
|
||
display: grid;
|
||
grid-template-columns: auto 1fr 1fr;
|
||
gap: 28px;
|
||
align-items: start;
|
||
}
|
||
.pricing-asides .or-divider {
|
||
font-family: var(--display);
|
||
font-style: italic;
|
||
font-size: 22px;
|
||
font-weight: 500;
|
||
color: var(--ink-3);
|
||
padding-top: 24px;
|
||
white-space: nowrap;
|
||
}
|
||
.pricing-aside {
|
||
padding: 26px 28px;
|
||
border: 1px dashed var(--line);
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
}
|
||
.pricing-aside .name-line {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.pricing-aside .name {
|
||
font-family: var(--display);
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
color: var(--ink);
|
||
}
|
||
.pricing-aside .price-small {
|
||
font-family: var(--display);
|
||
font-weight: 700;
|
||
font-size: 22px;
|
||
color: var(--rubis);
|
||
letter-spacing: -0.015em;
|
||
}
|
||
.pricing-aside .price-small .per {
|
||
font-family: var(--body);
|
||
font-size: 12.5px;
|
||
color: var(--ink-3);
|
||
font-weight: 400;
|
||
margin-left: 2px;
|
||
}
|
||
.pricing-aside p {
|
||
font-size: 14.5px;
|
||
line-height: 1.6;
|
||
color: var(--ink-2);
|
||
margin: 0;
|
||
}
|
||
.pricing-aside p b { color: var(--ink); font-weight: 600; }
|
||
.pricing-aside code {
|
||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||
font-size: 12px;
|
||
background: var(--cream-2);
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
@media (max-width: 880px) {
|
||
.pricing-anchor { grid-template-columns: 1fr; }
|
||
.pricing-anchor .left { padding: 36px 32px 32px; }
|
||
.pricing-anchor .right {
|
||
border-left: none;
|
||
border-top: 1px solid var(--line);
|
||
padding: 32px;
|
||
}
|
||
.pricing-asides { grid-template-columns: 1fr; gap: 16px; }
|
||
.pricing-asides .or-divider { padding: 8px 0 0; text-align: center; }
|
||
}
|
||
|
||
.pricing-footnote {
|
||
margin-top: 32px;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
color: var(--ink-3);
|
||
}
|
||
|
||
/* === FAQ === */
|
||
.faq .container { max-width: 760px; }
|
||
.faq-item {
|
||
border-bottom: 1px solid var(--line);
|
||
padding: 20px 0;
|
||
}
|
||
.faq-item summary {
|
||
font-family: var(--display);
|
||
font-weight: 600;
|
||
font-size: 17px;
|
||
color: var(--ink);
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
list-style: none;
|
||
padding: 4px 0;
|
||
}
|
||
.faq-item summary::-webkit-details-marker { display: none; }
|
||
.faq-item summary::after {
|
||
content: "+";
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
color: var(--rubis);
|
||
transition: transform 0.2s;
|
||
margin-left: 16px;
|
||
}
|
||
.faq-item[open] summary::after { transform: rotate(45deg); }
|
||
.faq-item .answer {
|
||
padding-top: 12px;
|
||
font-size: 15px;
|
||
color: var(--ink-2);
|
||
line-height: 1.65;
|
||
}
|
||
|
||
/* === FINAL CTA === */
|
||
.final-cta {
|
||
background: var(--rubis);
|
||
color: white;
|
||
padding: 96px 0;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.final-cta::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -200px; right: -200px;
|
||
width: 500px; height: 500px;
|
||
opacity: 0.08;
|
||
background: radial-gradient(circle, white, transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
.final-cta .container { position: relative; z-index: 1; max-width: 720px; }
|
||
.final-cta h2 {
|
||
color: white;
|
||
font-size: clamp(34px, 4.5vw, 52px);
|
||
margin-bottom: 16px;
|
||
}
|
||
.final-cta p {
|
||
color: rgba(255, 255, 255, 0.85);
|
||
font-size: 17px;
|
||
margin-bottom: 32px;
|
||
}
|
||
.final-cta .waitlist-form {
|
||
margin: 0 auto;
|
||
background: white;
|
||
}
|
||
.final-cta .waitlist-form button { background: var(--ink); }
|
||
.final-cta .waitlist-form button:hover { background: var(--rubis-deep); }
|
||
.final-cta .micro {
|
||
margin-top: 16px;
|
||
font-size: 13px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
/* === FOOTER === */
|
||
.site-footer {
|
||
background: var(--cream-2);
|
||
color: var(--ink-2);
|
||
padding: 56px 0 40px;
|
||
font-size: 13px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
.site-footer .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
}
|
||
.site-footer .brand { color: var(--ink); }
|
||
.site-footer nav { display: flex; gap: 24px; }
|
||
.site-footer nav a { color: var(--ink-2); }
|
||
.site-footer nav a:hover { color: var(--rubis); }
|
||
.site-footer .copy { font-size: 12px; color: var(--ink-3); }
|
||
@media (max-width: 600px) {
|
||
.site-footer .container { flex-direction: column; align-items: flex-start; }
|
||
}
|
||
|
||
/* === FORM SUCCESS STATE (after submit) === */
|
||
.form-success {
|
||
background: white;
|
||
border: 1px solid var(--rubis);
|
||
color: var(--rubis-deep);
|
||
padding: 16px 18px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
display: none;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.form-success.visible { display: flex; }
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============== HEADER ============== -->
|
||
<header class="site-header" id="siteHeader">
|
||
<div class="container">
|
||
<a href="#" class="brand">
|
||
<svg class="gem-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||
<polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/>
|
||
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.55)" stroke-width="3"/>
|
||
<line x1="55" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
|
||
<line x1="145" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
|
||
</svg>
|
||
Rubis
|
||
</a>
|
||
<nav class="nav">
|
||
<a href="#how" class="nav-link">Comment ça marche</a>
|
||
<a href="#pricing" class="nav-link">Tarifs</a>
|
||
<a href="#faq" class="nav-link">FAQ</a>
|
||
<a href="#waitlist" class="nav-cta">Rejoindre la waitlist</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============== HERO ============== -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div>
|
||
<div class="eyebrow">Le SaaS de relance pour TPE-PME françaises</div>
|
||
<h1>Vos factures relancées <em>toutes seules</em> pendant que vous travaillez.</h1>
|
||
<p class="lede">L'app de relance de factures impayées pensée pour les TPE-PME françaises. Glissez-déposez vos PDF, choisissez un plan de relance, oubliez-les. Rubis envoie, suit, relance — et vous récupérez en moyenne <b>5 heures par semaine</b>.</p>
|
||
<form class="waitlist-form" id="heroForm" action="#" method="post" novalidate>
|
||
<input type="email" name="email" placeholder="votre@entreprise.fr" required aria-label="Votre adresse email">
|
||
<button type="submit">Rejoindre la waitlist →</button>
|
||
</form>
|
||
<div class="form-success" id="heroSuccess">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
On vous écrit dès qu'on ouvre les premiers comptes. Merci.
|
||
</div>
|
||
<div class="trust">
|
||
<span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 14 jours offerts au lancement</span>
|
||
<span class="dot"></span>
|
||
<span>Hébergement souverain</span>
|
||
<span class="dot"></span>
|
||
<span>Made in France 🇫🇷</span>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="preview-card">
|
||
<div class="preview-rubis">
|
||
<svg class="gem-big" width="56" height="56" viewBox="0 0 200 200">
|
||
<polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/>
|
||
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.6)" stroke-width="3"/>
|
||
<line x1="55" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
|
||
<line x1="145" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
|
||
</svg>
|
||
<div>
|
||
<div class="num">124 rubis</div>
|
||
<div class="sub">≈ 24 h 48 que vous n'avez pas passées à relancer.</div>
|
||
</div>
|
||
</div>
|
||
<div class="preview-kpis">
|
||
<div class="preview-kpi">
|
||
<div class="label">Encaissé</div>
|
||
<div class="value">14 320 €</div>
|
||
<div class="delta">+ 2 800 € vs avril</div>
|
||
</div>
|
||
<div class="preview-kpi">
|
||
<div class="label">DSO</div>
|
||
<div class="value">38 j</div>
|
||
<div class="delta">↘ −6 j depuis Rubis</div>
|
||
</div>
|
||
</div>
|
||
<div class="activity">
|
||
<div class="head">Aujourd'hui</div>
|
||
<ul>
|
||
<li><span>📤 Relance envoyée à <b>Atelier Durand</b></span><time>11:14</time></li>
|
||
<li><span>✓ Facture <b>F-2024-0035</b> encaissée</span><time>10:02</time></li>
|
||
<li><span>📥 3 factures importées et OCRisées</span><time>09:48</time></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="floating-badge">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
~3 minutes le matin
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== STATS ============== -->
|
||
<section class="stats">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow">L'état des paiements en France</div>
|
||
<h2>Trois chiffres qui devraient vous fâcher.</h2>
|
||
<p>Si vous lisez ça, vous avez probablement une facture impayée à l'heure où on parle. Vous n'êtes pas un cas isolé.</p>
|
||
</div>
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="num">44 j</div>
|
||
<div class="desc">Le retard moyen de paiement pour une facture émise par une TPE en France.</div>
|
||
<div class="source">Source : Altares · Observatoire des délais de paiement, 2024</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="num">15 Md€</div>
|
||
<div class="desc">De trésorerie bloquée chez les PME françaises à cause des retards de paiement.</div>
|
||
<div class="source">Source : Banque de France · Rapport annuel 2024</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="num">−26 %</div>
|
||
<div class="desc">De chances d'être payé si vous attendez plus de 30 jours pour relancer.</div>
|
||
<div class="source">Source : AFDCC · Étude crédit management</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== PROMISE ============== -->
|
||
<section class="promise">
|
||
<div class="container">
|
||
<div class="eyebrow">Notre conviction</div>
|
||
<blockquote>Votre temps vaut <em>plus que ça</em>.</blockquote>
|
||
<div class="body">
|
||
<div>
|
||
<p>Vous n'avez pas créé votre boîte pour passer vos lundis soirs à rédiger des relances polies. Pendant que vous écrivez "je me permets un petit rappel concernant…", vous ne facturez pas, vous ne vendez pas, vous ne créez pas.</p>
|
||
<p>Les PME qui automatisent leurs relances passent de <b>8 heures par semaine</b> à <b>moins de 3</b>. Soit 5 heures de votre vie récupérées. Toutes les semaines. Pour toujours.</p>
|
||
</div>
|
||
<div class="calc">
|
||
<h4>Votre temps en chiffres</h4>
|
||
<div class="row"><span class="label">Heures perdues / semaine</span><span class="val">5 h</span></div>
|
||
<div class="row"><span class="label">Sur un mois</span><span class="val">~ 21 h</span></div>
|
||
<div class="row"><span class="label">À 50 €/h facturés</span><span class="val">1 050 €</span></div>
|
||
<div class="row total"><span class="label">Coût annuel d'une relance manuelle</span><span class="val">12 600 €</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== HOW IT WORKS ============== -->
|
||
<section class="how-it-works" id="how">
|
||
<div class="container">
|
||
<div class="head-block">
|
||
<div class="eyebrow">Comment ça marche</div>
|
||
<h2>Trois étapes. C'est tout.</h2>
|
||
<p>Vraiment. Parfois deux, si votre plan par défaut est bien réglé.</p>
|
||
</div>
|
||
|
||
<div class="step-row">
|
||
<div class="step-num-big">01</div>
|
||
<div class="step-prose">
|
||
<h3>Vous lâchez vos factures.</h3>
|
||
<p>PDF, photo prise depuis votre téléphone à la caisse, scan reçu par mail — peu importe. L'OCR lit, extrait montant, client, échéance, RIB. Votre seul boulot : vérifier que la machine n'a pas halluciné. Trente secondes par facture, montre en main.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-row flip">
|
||
<div class="step-num-big">02</div>
|
||
<div class="step-prose">
|
||
<h3>Vous choisissez un plan de relance.</h3>
|
||
<p>On vous en a préparé quatre — un standard B2B (J+3, J+10, J+20), un doux pour vos bons clients, un ferme quand le cash est tendu, et un quatrième que vous pouvez bricoler à votre sauce. Un clic, et la facture est associée.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-row">
|
||
<div class="step-num-big">03</div>
|
||
<div class="step-prose">
|
||
<h3>Et puis c'est tout.</h3>
|
||
<p>Sérieusement. Pendant que vous travaillez, Rubis envoie les emails au moment prévu, suit qui a ouvert, qui n'a pas répondu, et avant chaque relance vous demande discrètement par email : « ça, c'est encore d'actualité ? ». Vous répondez en deux secondes. La machine fait le reste.</p>
|
||
<div class="reward">La récompense : votre compteur de rubis grimpe. Tranquillement. Comme une bonne nouvelle régulière.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== GAMIFICATION ============== -->
|
||
<section class="game">
|
||
<div class="container">
|
||
<div class="game-card">
|
||
<svg class="gem-huge" viewBox="0 0 200 200">
|
||
<polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/>
|
||
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.6)" stroke-width="3"/>
|
||
<line x1="55" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
|
||
<line x1="145" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
|
||
<line x1="55" y1="145" x2="100" y2="100" stroke="rgba(0,0,0,0.18)" stroke-width="2"/>
|
||
<line x1="145" y1="145" x2="100" y2="100" stroke="rgba(0,0,0,0.18)" stroke-width="2"/>
|
||
</svg>
|
||
<div class="eyebrow">La devise du temps gagné</div>
|
||
<h2>1 rubis = 10 minutes de votre vie.</h2>
|
||
<p class="lead">À chaque relance que Rubis envoie à votre place, vous gagnez un rubis. À la fin du mois, vous voyez exactement combien d'heures vous avez récupérées. Pas un graphique de DSO. Pas un PDF abscons. Du temps. Concret.</p>
|
||
<div class="game-counter">
|
||
<span class="big">124</span><span class="unit">rubis</span>
|
||
<span class="equals">≈ <b>24 h 48</b> de votre mois</span>
|
||
</div>
|
||
<p style="font-size: 14px; color: var(--ink-3); max-width: 460px; margin: 0 auto;">Et oui, on garde un classement amical. Les meilleurs utilisateurs libèrent <b>30 heures par mois</b>. Plus de quoi prendre un long week-end. Toutes les 4 semaines.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== LEGAL ============== -->
|
||
<section class="legal">
|
||
<div class="container">
|
||
<div>
|
||
<div class="eyebrow">Vous êtes dans votre droit</div>
|
||
<h2>La loi est de votre côté. On vous évite juste de la brandir.</h2>
|
||
<p>La <span class="law-tag">loi LME</span> plafonne les délais de paiement entre entreprises à <b>60 jours</b> (ou 45 jours fin de mois). Les sanctions peuvent atteindre <b>2 millions d'euros</b>. En 2025, le Sénat a voté à l'unanimité un durcissement supplémentaire des règles.</p>
|
||
<p>Mais vous n'avez pas envie d'envoyer un huissier à votre meilleur client. Rubis fait le boulot intermédiaire — relances pro, courtoises, espacées dans le temps. Le ton monte progressivement, jamais d'un coup. Et vous gardez le contrôle total : la mise en demeure, c'est <b>vous</b> qui l'envoyez, sur validation manuelle.</p>
|
||
</div>
|
||
<div class="clipping">
|
||
<div class="headline">
|
||
<span>Sanctions DGCCRF</span>
|
||
<span>2025</span>
|
||
</div>
|
||
<div class="big-number">47 M€</div>
|
||
<div class="lead">de pénalités prononcées contre les mauvais payeurs français l'an dernier.</div>
|
||
<ul class="names-list">
|
||
<li><b>Fnac Darty</b><span class="amount">3,9 M€</span></li>
|
||
<li><b>Cdiscount</b><span class="amount">2,1 M€</span></li>
|
||
<li><b>Sanofi</b><span class="amount">1,65 M€</span></li>
|
||
<li><b>LCL</b><span class="amount">1,5 M€</span></li>
|
||
<li style="color: var(--ink-3); font-style: italic; font-size: 13px;">… et 405 autres entreprises contrôlées</li>
|
||
</ul>
|
||
<div class="source-line">Source · DGCCRF, bilan annuel 2025 · economie.gouv.fr</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== PRICING ============== -->
|
||
<section class="pricing" id="pricing">
|
||
<div class="container">
|
||
<div class="head-block">
|
||
<div class="eyebrow">Tarifs</div>
|
||
<h2>Moins cher qu'une heure de votre temps mensuel.</h2>
|
||
<p>On va droit au but. Un plan principal qu'on recommande à 99 % d'entre vous, et deux options autour. C'est tout.</p>
|
||
</div>
|
||
|
||
<div class="pricing-anchor">
|
||
<div class="left">
|
||
<span class="plan-tag">Le plan qu'on recommande</span>
|
||
<div class="plan-name">Le plan <em>Pro</em>.</div>
|
||
<div class="price-mega">
|
||
<span class="num">19 €</span>
|
||
<span class="per">par mois<br>hors taxes</span>
|
||
</div>
|
||
<p class="pitch">Pour ce prix, vous avez Rubis dans son <b>intégralité</b>. Factures et OCR illimités, plans de relance personnalisés, statistiques détaillées, support prioritaire. Aucun palier caché, aucun surcoût à l'usage.</p>
|
||
<div class="cta-row">
|
||
<a href="#waitlist" class="btn btn-primary">Commencer l'essai 14 jours →</a>
|
||
<span class="meta">Sans engagement, annulable à tout moment</span>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="features-title">Ce qui est inclus</div>
|
||
<ul class="features">
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
<span><b>Factures illimitées.</b> Que vous en émettiez 10 ou 500 par mois, c'est le même prix.</span>
|
||
</li>
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
<span><b>OCR illimité.</b> Drag & drop, photo mobile, batch de 20 d'un coup.</span>
|
||
</li>
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
<span><b>Plans personnalisables</b> avec variables et tonalités sur-mesure.</span>
|
||
</li>
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
<span><b>Stats détaillées</b> + export CSV pour vos comptables.</span>
|
||
</li>
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
<span><b>Support prioritaire.</b> Réponse sous 4 h ouvrées, par un humain en France.</span>
|
||
</li>
|
||
<li>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
<span>App mobile et desktop, hébergement français.</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pricing-asides">
|
||
<div class="or-divider">— ou bien —</div>
|
||
<div class="pricing-aside">
|
||
<div class="name-line">
|
||
<span class="name">Plan Free</span>
|
||
<span class="price-small">0 €<span class="per">/mois, à vie</span></span>
|
||
</div>
|
||
<p>Vous voulez tester ? Le plan Free fait tourner Rubis sur <b>5 factures actives</b> en permanence. Gratuit, pour de bon. Notre façon de prouver que la promesse tient sans qu'on vous tienne par la veine.</p>
|
||
</div>
|
||
<div class="pricing-aside">
|
||
<div class="name-line">
|
||
<span class="name">Plan Business</span>
|
||
<span class="price-small">49 €<span class="per">/mois</span></span>
|
||
</div>
|
||
<p>Vous êtes plusieurs dans la boîte ? Business ajoute le <b>multi-utilisateurs</b> (5 inclus), votre adresse d'envoi <code>compta@votre-entreprise.fr</code>, et — quand on aura sorti la V2 — le <b>SMS de relance</b>.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="pricing-footnote">Pas de palier caché. Pas de surcoût à l'usage. Annulation en un clic, sans question posée.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== FAQ ============== -->
|
||
<section class="faq" id="faq">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow">Questions fréquentes</div>
|
||
<h2>Vous vous demandez sûrement…</h2>
|
||
</div>
|
||
<details class="faq-item">
|
||
<summary>Et si mon client paie hors plateforme — comment Rubis le sait ?</summary>
|
||
<div class="answer">Avant chaque relance, Rubis vous envoie un email rapide : <i>« Avez-vous été payé pour la facture F-2024-0042 ? »</i> avec deux boutons. Vous cliquez "Oui" en 3 secondes, le plan s'arrête. Vous cliquez "Non" (ou ne répondez pas), la relance part comme prévu. Vous configurez la cadence et le timing de ces vérifications dans vos plans.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Mes factures et données restent-elles privées ?</summary>
|
||
<div class="answer">Évidemment. Hébergement français, conforme RGPD. Vos PDF sont stockés chiffrés. Aucune donnée n'est partagée avec des tiers. Vous pouvez exporter ou supprimer vos données à tout moment.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Puis-je personnaliser les emails de relance ?</summary>
|
||
<div class="answer">Oui, dès le plan Pro. Tous les emails sont des templates avec variables (<code>{{prenom_client}}</code>, <code>{{numero}}</code>, <code>{{montant}}</code>…). Vous pouvez réécrire chaque étape, ajuster le ton, ajouter votre signature email, votre logo. En plan Business, votre adresse d'envoi peut même être <code>compta@votre-entreprise.fr</code> au lieu de Rubis.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Et si je veux relancer manuellement, sans plan ?</summary>
|
||
<div class="answer">Toujours possible. Sur n'importe quelle facture, vous avez un bouton "Relancer maintenant" qui envoie un email immédiat. Pratique quand vous venez d'avoir le client au téléphone et qu'il vous a demandé un récapitulatif.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Et la mise en demeure, elle part toute seule ?</summary>
|
||
<div class="answer">Non. Jamais. C'est une décision produit forte : la mise en demeure a des conséquences légales et relationnelles importantes. Rubis prépare le brouillon à l'étape prévue de votre plan, vous notifie, et c'est <b>vous</b> qui cliquez "Envoyer" sur une modale de confirmation. Vous gardez la main sur le moment où le ton change vraiment.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Combien de temps pour démarrer ?</summary>
|
||
<div class="answer">Inscription en 30 secondes. Configuration de votre signature email et de votre première facture en 5 minutes. La première relance peut partir dans la foulée. Si vous avez un plan par défaut bien configuré, créer une nouvelle facture en relance prend <b>2 clics</b>.</div>
|
||
</details>
|
||
<details class="faq-item">
|
||
<summary>Pourquoi cette histoire de "rubis" ?</summary>
|
||
<div class="answer">Parce que les chiffres comptables (DSO, taux de recouvrement, AR aging) ne réveillent personne le matin. Le temps gagné, oui. <b>1 rubis = 10 minutes libérées</b> = 1 relance que vous n'avez pas eu à écrire. À la fin du mois, vous voyez "124 rubis ≈ 24 h 48". C'est concret. Et c'est plus fun que de regarder un graphique de courbes.</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== FINAL CTA ============== -->
|
||
<section class="final-cta" id="waitlist">
|
||
<div class="container">
|
||
<h2>Récupérez vos premières heures dès le lancement.</h2>
|
||
<p>On lance les premiers comptes au printemps 2026. Inscrivez-vous, vous serez prévenu en priorité.</p>
|
||
<form class="waitlist-form" id="footerForm" action="#" method="post" novalidate>
|
||
<input type="email" name="email" placeholder="votre@entreprise.fr" required aria-label="Votre adresse email">
|
||
<button type="submit">Rejoindre la waitlist</button>
|
||
</form>
|
||
<div class="form-success" id="footerSuccess" style="margin: 16px auto 0; max-width: 480px;">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
On vous écrit dès qu'on ouvre les premiers comptes. Merci.
|
||
</div>
|
||
<p class="micro">On vous écrit une fois — quand on ouvre les premiers comptes. Pas avant.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== FOOTER ============== -->
|
||
<footer class="site-footer">
|
||
<div class="container">
|
||
<a href="#" class="brand">
|
||
<svg class="gem-svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
||
<polygon points="100,10 190,100 100,190 10,100" fill="#9F1239"/>
|
||
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.55)" stroke-width="3"/>
|
||
</svg>
|
||
Rubis Sur l'Ongle
|
||
</a>
|
||
<nav>
|
||
<a href="#how">Comment ça marche</a>
|
||
<a href="#pricing">Tarifs</a>
|
||
<a href="#faq">FAQ</a>
|
||
<a href="#">Mentions légales</a>
|
||
<a href="#">RGPD</a>
|
||
</nav>
|
||
<div class="copy">© 2026 · Made in France 🇫🇷</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// Sticky header shadow on scroll
|
||
const header = document.getElementById('siteHeader');
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 8) header.classList.add('scrolled');
|
||
else header.classList.remove('scrolled');
|
||
});
|
||
|
||
// Form handling — replace action with real endpoint (Resend, Formspree, Tally, etc.)
|
||
function bindForm(formId, successId) {
|
||
const form = document.getElementById(formId);
|
||
const success = document.getElementById(successId);
|
||
if (!form) return;
|
||
form.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
// TODO: POST to /api/waitlist or chosen provider
|
||
// For now: just show success state
|
||
form.style.display = 'none';
|
||
success.classList.add('visible');
|
||
});
|
||
}
|
||
bindForm('heroForm', 'heroSuccess');
|
||
bindForm('footerForm', 'footerSuccess');
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|