1224 lines
46 KiB
HTML
1224 lines
46 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);
|
||
transform: rotate(0.6deg);
|
||
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);
|
||
transform: rotate(-2deg);
|
||
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 === */
|
||
.how-it-works {
|
||
background: var(--ink);
|
||
color: var(--cream);
|
||
}
|
||
.how-it-works .section-head h2 { color: var(--cream); }
|
||
.how-it-works .section-head p { color: rgba(250, 247, 242, 0.7); }
|
||
.how-it-works .eyebrow { color: var(--rubis-light); }
|
||
.how-it-works .eyebrow::before { background: var(--rubis-light); }
|
||
.steps {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr auto 1fr;
|
||
gap: 16px;
|
||
align-items: stretch;
|
||
}
|
||
@media (max-width: 880px) {
|
||
.steps { grid-template-columns: 1fr; }
|
||
.steps .arrow { display: none; }
|
||
}
|
||
.step {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 12px;
|
||
padding: 32px 24px 28px;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.step .step-num {
|
||
font-family: var(--display);
|
||
font-size: 13px;
|
||
color: var(--rubis-light);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
font-weight: 700;
|
||
margin-bottom: 16px;
|
||
}
|
||
.step h3 { color: var(--cream); margin-bottom: 8px; font-size: 20px; }
|
||
.step p { color: rgba(250, 247, 242, 0.65); font-size: 14px; line-height: 1.55; }
|
||
.step .visual {
|
||
margin: 16px 0 22px;
|
||
width: 100%;
|
||
height: 110px;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border-radius: 8px;
|
||
border: 1px dashed rgba(255, 255, 255, 0.18);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: rgba(250, 247, 242, 0.6);
|
||
}
|
||
.steps .arrow {
|
||
align-self: center;
|
||
color: rgba(250, 247, 242, 0.3);
|
||
font-size: 24px;
|
||
}
|
||
|
||
/* === 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 === */
|
||
.legal {
|
||
background: var(--cream-2);
|
||
border-top: 1px solid var(--line);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
.legal .container {
|
||
max-width: 980px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1.2fr;
|
||
gap: 56px;
|
||
align-items: center;
|
||
}
|
||
@media (max-width: 720px) { .legal .container { grid-template-columns: 1fr; gap: 32px; } }
|
||
.legal .visual {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.legal-shield {
|
||
width: 220px; height: 240px;
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
box-shadow: 0 4px 16px rgba(26, 20, 16, 0.04);
|
||
}
|
||
.legal-shield .top { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
|
||
.legal-shield .num {
|
||
font-family: var(--display);
|
||
font-size: 56px;
|
||
font-weight: 700;
|
||
color: var(--rubis);
|
||
line-height: 1;
|
||
letter-spacing: -0.03em;
|
||
}
|
||
.legal-shield .desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
|
||
.legal-shield hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
|
||
.legal h2 { margin-bottom: 16px; }
|
||
.legal p { font-size: 16px; margin-bottom: 14px; line-height: 1.65; }
|
||
.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: 12px;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
/* === PRICING === */
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
margin-top: 24px;
|
||
}
|
||
@media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 24px auto 0; } }
|
||
.price-card {
|
||
background: white;
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
padding: 32px 28px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.price-card.featured {
|
||
border-color: var(--rubis);
|
||
box-shadow: 0 12px 32px -12px rgba(159, 18, 57, 0.25);
|
||
position: relative;
|
||
}
|
||
.price-card.featured::before {
|
||
content: "Recommandé";
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--rubis);
|
||
color: white;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
padding: 4px 12px;
|
||
border-radius: 12px;
|
||
}
|
||
.price-card .name {
|
||
font-family: var(--display);
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 6px;
|
||
}
|
||
.price-card .for { font-size: 13px; color: var(--ink-3); margin-bottom: 24px; }
|
||
.price-card .price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 6px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.price-card .price .amount {
|
||
font-family: var(--display);
|
||
font-size: 48px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
letter-spacing: -0.025em;
|
||
}
|
||
.price-card .price .unit { font-size: 14px; color: var(--ink-3); }
|
||
.price-card ul {
|
||
list-style: none;
|
||
margin-bottom: 28px;
|
||
flex: 1;
|
||
font-size: 14px;
|
||
}
|
||
.price-card li {
|
||
padding: 8px 0;
|
||
color: var(--ink-2);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
line-height: 1.5;
|
||
}
|
||
.price-card li svg { flex-shrink: 0; margin-top: 4px; color: var(--rubis); }
|
||
.price-card .btn { width: 100%; }
|
||
|
||
/* === 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(--ink);
|
||
color: rgba(250, 247, 242, 0.7);
|
||
padding: 48px 0 32px;
|
||
font-size: 13px;
|
||
}
|
||
.site-footer .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
}
|
||
.site-footer .brand { color: var(--cream); }
|
||
.site-footer nav { display: flex; gap: 24px; }
|
||
.site-footer nav a:hover { color: var(--rubis-light); }
|
||
.site-footer .copy { font-size: 12px; }
|
||
@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">MVP en préparation · printemps 2026</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> Aucune carte bancaire</span>
|
||
<span class="dot"></span>
|
||
<span>14 jours offerts au lancement</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="section-head">
|
||
<div class="eyebrow">Comment ça marche</div>
|
||
<h2>3 clics. C'est tout.</h2>
|
||
<p>Vraiment. Si votre plan de relance par défaut est bien configuré, c'est même 2.</p>
|
||
</div>
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div class="step-num">Étape 1</div>
|
||
<div class="visual">
|
||
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||
<polyline points="17 8 12 3 7 8"/>
|
||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Glissez vos factures</h3>
|
||
<p>PDF, photo, scan. Notre OCR extrait client, montant et échéance en 3 secondes.</p>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="step">
|
||
<div class="step-num">Étape 2</div>
|
||
<div class="visual">
|
||
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="4" y1="21" x2="4" y2="14"/>
|
||
<line x1="4" y1="10" x2="4" y2="3"/>
|
||
<line x1="12" y1="21" x2="12" y2="12"/>
|
||
<line x1="12" y1="8" x2="12" y2="3"/>
|
||
<line x1="20" y1="21" x2="20" y2="16"/>
|
||
<line x1="20" y1="12" x2="20" y2="3"/>
|
||
<line x1="1" y1="14" x2="7" y2="14"/>
|
||
<line x1="9" y1="8" x2="15" y2="8"/>
|
||
<line x1="17" y1="16" x2="23" y2="16"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Choisissez un plan</h3>
|
||
<p>4 plans pré-fournis (J+3, J+10, J+20…) ou créez le vôtre. Le ton monte progressivement, jamais d'un coup.</p>
|
||
</div>
|
||
<div class="arrow">→</div>
|
||
<div class="step">
|
||
<div class="step-num">Étape 3</div>
|
||
<div class="visual">
|
||
<svg width="44" height="44" viewBox="0 0 200 200">
|
||
<polygon points="100,10 190,100 100,190 10,100" fill="#C9415C"/>
|
||
<line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.7)" stroke-width="4"/>
|
||
<line x1="55" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.45)" stroke-width="3"/>
|
||
<line x1="145" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.45)" stroke-width="3"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Récupérez vos rubis</h3>
|
||
<p>Rubis envoie, suit les ouvertures, relance. Vous voyez le compteur grimper. Vous, vous travaillez.</p>
|
||
</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é. Rubis 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 de la DGCCRF peuvent atteindre <b>2 millions d'euros</b>. Le Sénat a voté à l'unanimité en 2025 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="visual">
|
||
<div class="legal-shield">
|
||
<div>
|
||
<div class="top">Sanctions DGCCRF 2025</div>
|
||
<div class="num">47 M€</div>
|
||
<div class="desc">de pénalités prononcées contre les mauvais payeurs en 2025.</div>
|
||
</div>
|
||
<hr>
|
||
<div class="desc"><b style="color: var(--ink); font-family: var(--display);">Sanofi · LCL · Fnac Darty</b><br>parmi les sanctionnés notables.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== PRICING ============== -->
|
||
<section id="pricing">
|
||
<div class="container">
|
||
<div class="section-head">
|
||
<div class="eyebrow">Tarifs</div>
|
||
<h2>Moins cher qu'une heure de votre temps.</h2>
|
||
<p>Démarrez gratuitement, sans carte bancaire. Passez Pro quand vous dépassez 5 factures actives.</p>
|
||
</div>
|
||
<div class="pricing-grid">
|
||
|
||
<div class="price-card">
|
||
<div class="name">Free</div>
|
||
<div class="for">Pour démarrer ou tester</div>
|
||
<div class="price"><span class="amount">0 €</span><span class="unit">/mois</span></div>
|
||
<ul>
|
||
<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>5 factures actives en relance</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>1 utilisateur</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>4 plans de relance standards</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>OCR jusqu'à 10 factures / mois</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>App mobile et desktop</li>
|
||
</ul>
|
||
<a href="#waitlist" class="btn btn-secondary">Démarrer gratuitement</a>
|
||
</div>
|
||
|
||
<div class="price-card featured">
|
||
<div class="name">Pro</div>
|
||
<div class="for">Pour les TPE 1 — 5 salariés</div>
|
||
<div class="price"><span class="amount">19 €</span><span class="unit">/mois</span></div>
|
||
<ul>
|
||
<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><b>Factures illimitées</b></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>OCR illimité</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>Plans de relance personnalisés</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>Statistiques détaillées + export</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>Support email prioritaire</li>
|
||
</ul>
|
||
<a href="#waitlist" class="btn btn-primary">Commencer l'essai 14 j</a>
|
||
</div>
|
||
|
||
<div class="price-card">
|
||
<div class="name">Business</div>
|
||
<div class="for">Pour les PME 5 — 50 salariés</div>
|
||
<div class="price"><span class="amount">49 €</span><span class="unit">/mois</span></div>
|
||
<ul>
|
||
<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>Tout Pro</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><b>Multi-utilisateurs</b> (5 inclus)</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>Branding email personnalisé</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>SMS de relance <span style="color: var(--ink-3); font-size: 12px;">(V2)</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>Onboarding dédié</li>
|
||
</ul>
|
||
<a href="#waitlist" class="btn btn-secondary">Demander une démo</a>
|
||
</div>
|
||
</div>
|
||
<p style="text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 32px;">Tous les tarifs hors taxes. Annulation à tout moment, sans question.</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">Aucun spam. Aucune carte bancaire. Désinscription en un clic.</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="#C9415C"/>
|
||
<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>
|