From 9a95107cc0493aac19bc7f90c412744488185fe6 Mon Sep 17 00:00:00 2001 From: ordinarthur <@arthurbarre.js@gmail.com> Date: Tue, 5 May 2026 15:53:57 +0200 Subject: [PATCH] betterm landigng --- landing.html | 730 +++++++++++++++++++++++++++++++++------------------ 1 file changed, 476 insertions(+), 254 deletions(-) diff --git a/landing.html b/landing.html index ff54da5..9844f50 100644 --- a/landing.html +++ b/landing.html @@ -257,7 +257,6 @@ 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 { @@ -341,7 +340,6 @@ 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; @@ -434,63 +432,84 @@ .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 (editorial light) === */ .how-it-works { - background: var(--ink); - color: var(--cream); + background: var(--cream-2); + border-top: 1px solid var(--line); + border-bottom: 1px solid var(--line); } - .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 { + .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: 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; + grid-template-columns: 320px 1fr; + gap: 56px; align-items: center; - position: relative; + padding: 48px 0; + border-top: 1px dashed var(--line); } - .step .step-num { + .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-size: 13px; - color: var(--rubis-light); - text-transform: uppercase; - letter-spacing: 0.1em; - font-weight: 700; - margin-bottom: 16px; + font-weight: 800; + font-size: clamp(120px, 16vw, 196px); + line-height: 0.82; + letter-spacing: -0.04em; + color: var(--rubis); + user-select: none; } - .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); + .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); } - .steps .arrow { - align-self: center; - color: rgba(250, 247, 242, 0.3); - font-size: 24px; + .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 === */ @@ -575,49 +594,26 @@ .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 (clipping de presse) === */ .legal { background: var(--cream-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .legal .container { - max-width: 980px; + max-width: 1100px; display: grid; - grid-template-columns: 1fr 1.2fr; - gap: 56px; + grid-template-columns: 1fr 1fr; + gap: 72px; 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; + @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-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 p { font-size: 16px; margin-bottom: 16px; line-height: 1.7; max-width: 480px; } .legal .law-tag { display: inline-block; background: var(--ink); @@ -625,84 +621,305 @@ padding: 4px 10px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, monospace; - font-size: 12px; - margin-right: 6px; + font-size: 12.5px; + margin-right: 4px; } - - /* === 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 { + .clipping { 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); + border-radius: 6px; + padding: 40px 44px 32px; position: relative; + box-shadow: 0 4px 20px rgba(26, 20, 16, 0.05); } - .price-card.featured::before { - content: "Recommandé"; + .clipping::before { + content: ""; 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; + top: 0; left: 0; right: 0; + height: 4px; + background: var(--ink); + border-radius: 6px 6px 0 0; } - .price-card .name { + .clipping .headline { 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 { + 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; - gap: 6px; + } + .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; } - .price-card .price .amount { + .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-size: 48px; font-weight: 700; - line-height: 1; + font-size: clamp(36px, 4.4vw, 52px); letter-spacing: -0.025em; + line-height: 1.05; + margin-bottom: 18px; + color: var(--ink); } - .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); + .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; - gap: 10px; + padding: 9px 0; + color: var(--ink-2); line-height: 1.5; } - .price-card li svg { flex-shrink: 0; margin-top: 4px; color: var(--rubis); } - .price-card .btn { width: 100%; } + .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; } @@ -782,10 +999,11 @@ /* === FOOTER === */ .site-footer { - background: var(--ink); - color: rgba(250, 247, 242, 0.7); - padding: 48px 0 32px; + 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; @@ -794,10 +1012,11 @@ flex-wrap: wrap; gap: 24px; } - .site-footer .brand { color: var(--cream); } + .site-footer .brand { color: var(--ink); } .site-footer nav { display: flex; gap: 24px; } - .site-footer nav a:hover { color: var(--rubis-light); } - .site-footer .copy { font-size: 12px; } + .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; } } @@ -846,7 +1065,7 @@
-
MVP en préparation · printemps 2026
+
Le SaaS de relance pour TPE-PME françaises

Vos factures relancées toutes seules pendant que vous travaillez.

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 5 heures par semaine.

@@ -858,9 +1077,9 @@ On vous écrit dès qu'on ouvre les premiers comptes. Merci.
- Aucune carte bancaire + 14 jours offerts au lancement - 14 jours offerts au lancement + Hébergement souverain Made in France 🇫🇷
@@ -960,56 +1179,34 @@
-
+
Comment ça marche
-

3 clics. C'est tout.

-

Vraiment. Si votre plan de relance par défaut est bien configuré, c'est même 2.

+

Trois étapes. C'est tout.

+

Vraiment. Parfois deux, si votre plan par défaut est bien réglé.

-
-
-
Étape 1
-
- - - - - -
-

Glissez vos factures

-

PDF, photo, scan. Notre OCR extrait client, montant et échéance en 3 secondes.

+ +
+
01
+
+

Vous lâchez vos factures.

+

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.

-
-
-
Étape 2
-
- - - - - - - - - - - -
-

Choisissez un plan

-

4 plans pré-fournis (J+3, J+10, J+20…) ou créez le vôtre. Le ton monte progressivement, jamais d'un coup.

+
+ +
+
02
+
+

Vous choisissez un plan de relance.

+

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.

-
-
-
Étape 3
-
- - - - - - -
-

Récupérez vos rubis

-

Rubis envoie, suit les ouvertures, relance. Vous voyez le compteur grimper. Vous, vous travaillez.

+
+ +
+
03
+
+

Et puis c'est tout.

+

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.

+
La récompense : votre compteur de rubis grimpe. Tranquillement. Comme une bonne nouvelle régulière.
@@ -1044,77 +1241,102 @@
Vous êtes dans votre droit
-

La loi est de votre côté. Rubis vous évite juste de la brandir.

-

La loi LME plafonne les délais de paiement entre entreprises à 60 jours (ou 45 jours fin de mois). Les sanctions de la DGCCRF peuvent atteindre 2 millions d'euros. Le Sénat a voté à l'unanimité en 2025 un durcissement supplémentaire des règles.

+

La loi est de votre côté. On vous évite juste de la brandir.

+

La loi LME plafonne les délais de paiement entre entreprises à 60 jours (ou 45 jours fin de mois). Les sanctions peuvent atteindre 2 millions d'euros. En 2025, le Sénat a voté à l'unanimité un durcissement supplémentaire des règles.

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 vous qui l'envoyez, sur validation manuelle.

-
-
-
+
-
+
Tarifs
-

Moins cher qu'une heure de votre temps.

-

Démarrez gratuitement, sans carte bancaire. Passez Pro quand vous dépassez 5 factures actives.

+

Moins cher qu'une heure de votre temps mensuel.

+

On va droit au but. Un plan principal qu'on recommande à 99 % d'entre vous, et deux options autour. C'est tout.

-
-
-
Free
-
Pour démarrer ou tester
-
0 €/mois
-
    -
  • 5 factures actives en relance
  • -
  • 1 utilisateur
  • -
  • 4 plans de relance standards
  • -
  • OCR jusqu'à 10 factures / mois
  • -
  • App mobile et desktop
  • -
- Démarrer gratuitement +
+
+ Le plan qu'on recommande +
Le plan Pro.
+
+ 19 € + par mois
hors taxes
+
+

Pour ce prix, vous avez Rubis dans son intégralité. Factures et OCR illimités, plans de relance personnalisés, statistiques détaillées, support prioritaire. Aucun palier caché, aucun surcoût à l'usage.

+
+ Commencer l'essai 14 jours → + Sans engagement, annulable à tout moment +
- - -

Tous les tarifs hors taxes. Annulation à tout moment, sans question.

+ +
+
— ou bien —
+
+
+ Plan Free + 0 €/mois, à vie +
+

Vous voulez tester ? Le plan Free fait tourner Rubis sur 5 factures actives en permanence. Gratuit, pour de bon. Notre façon de prouver que la promesse tient sans qu'on vous tienne par la veine.

+
+
+
+ Plan Business + 49 €/mois +
+

Vous êtes plusieurs dans la boîte ? Business ajoute le multi-utilisateurs (5 inclus), votre adresse d'envoi compta@votre-entreprise.fr, et — quand on aura sorti la V2 — le SMS de relance.

+
+
+ +

Pas de palier caché. Pas de surcoût à l'usage. Annulation en un clic, sans question posée.

@@ -1169,7 +1391,7 @@ On vous écrit dès qu'on ouvre les premiers comptes. Merci.
-

Aucun spam. Aucune carte bancaire. Désinscription en un clic.

+

On vous écrit une fois — quand on ouvre les premiers comptes. Pas avant.

@@ -1178,7 +1400,7 @@
- + Rubis Sur l'Ongle