diff --git a/landing.html b/landing.html index d8f28ae..fe79b62 100644 --- a/landing.html +++ b/landing.html @@ -783,39 +783,248 @@ .step-num-block { display: flex; flex-direction: column; - align-items: flex-start; - gap: 18px; + align-items: stretch; + gap: 14px; } .step-row.flip .step-num-block { order: 2; - align-items: flex-end; } .step-row.flip .step-prose { order: 1; } - .step-icon { - width: 64px; - height: 64px; - color: var(--rubis); - flex-shrink: 0; - display: block; - } - - .step-num-big { + .step-tag { font-family: var(--display); - font-weight: 800; - font-size: clamp(120px, 16vw, 196px); - line-height: 0.82; - letter-spacing: -0.04em; + font-weight: 700; + font-size: 12.5px; + letter-spacing: 0.16em; + text-transform: uppercase; color: var(--rubis); - user-select: none; + display: inline-flex; + align-items: center; + gap: 8px; } - .step-row.flip .step-num-big { - text-align: right; + .step-tag::before { + content: ""; + width: 8px; + height: 8px; + background: var(--rubis); + transform: rotate(45deg); + display: inline-block; + } + + .step-widget { + background: white; + border: 1px solid var(--line); + border-radius: 14px; + box-shadow: 0 12px 32px -16px rgba(26, 20, 16, 0.14), 0 2px 6px rgba(26, 20, 16, 0.04); + overflow: hidden; + position: relative; + } + + /* Widget 1 — Dropzone */ + .widget-dropzone { + background: white; + border: 2px dashed var(--rubis-light); + padding: 26px 22px 22px; + text-align: center; + } + + .widget-dropzone .dz-arrow { + font-family: var(--display); + font-size: 26px; + font-weight: 600; + color: var(--rubis); + line-height: 1; + margin-bottom: 14px; + } + + .widget-dropzone .dz-invoice { + background: white; + border: 1px solid var(--line); + border-radius: 6px; + padding: 16px 18px 14px; + box-shadow: 0 8px 22px -10px rgba(26, 20, 16, 0.18); + text-align: left; + position: relative; + margin: 0 auto 12px; + max-width: 220px; + } + + .widget-dropzone .dz-line { + height: 6px; + background: #E5DFD3; + border-radius: 2px; + margin-bottom: 7px; + } + + .widget-dropzone .dz-line.short { + width: 50%; + } + + .widget-dropzone .dz-line.med { + width: 75%; + } + + .widget-dropzone .dz-amount { + font-family: var(--display); + font-weight: 700; + font-size: 21px; + color: var(--ink); + letter-spacing: -0.018em; + margin-top: 12px; + padding-top: 10px; + border-top: 1px solid var(--line); + font-variant-numeric: tabular-nums; + } + + .widget-dropzone .dz-extracts { + position: absolute; + top: 10px; + right: 10px; + display: flex; + gap: 4px; + } + + .widget-dropzone .dz-extract-gem { + width: 7px; + height: 7px; + background: var(--rubis); + transform: rotate(45deg); + } + + .widget-dropzone .dz-extract-gem:nth-child(2) { + opacity: 0.55; + } + + .widget-dropzone .dz-extract-gem:nth-child(3) { + opacity: 0.3; + } + + .widget-dropzone .dz-filename { + font-size: 11px; + color: var(--ink-3); + font-family: ui-monospace, SFMono-Regular, monospace; + } + + /* Widget 2 — Calendar */ + .widget-calendar { + padding: 22px 22px 18px; + } + + .widget-calendar .cal-head { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 14px; + } + + .widget-calendar .cal-month { + font-family: var(--display); + font-weight: 700; + font-size: 16px; + color: var(--ink); + letter-spacing: -0.012em; + } + + .widget-calendar .cal-nav { + display: flex; + gap: 6px; + } + + .widget-calendar .cal-nav-btn { + width: 22px; + height: 22px; + border: 1px solid var(--line); + border-radius: 5px; + display: flex; + align-items: center; + justify-content: center; + font-size: 11px; + color: var(--ink-3); + } + + .widget-calendar .cal-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 3px 2px; + margin-bottom: 6px; + } + + .widget-calendar .cal-weekday { + text-align: center; + font-size: 10px; + font-weight: 700; + color: var(--ink-3); + text-transform: uppercase; + letter-spacing: 0.05em; + padding: 4px 0 6px; + } + + .widget-calendar .cal-day { + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + font-size: 12.5px; + color: var(--ink-2); + border-radius: 50%; + font-variant-numeric: tabular-nums; + font-weight: 500; + } + + .widget-calendar .cal-day.empty { + color: transparent; + } + + .widget-calendar .cal-day.is-marked { + background: var(--rubis); + color: white; + font-weight: 700; + } + + .widget-calendar .cal-foot { + border-top: 1px dashed var(--line); + padding-top: 12px; + margin-top: 8px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 11px; + color: var(--ink-3); + } + + .widget-calendar .cal-legend { + display: inline-flex; + align-items: center; + gap: 6px; + } + + .widget-calendar .cal-legend-dot { + width: 8px; + height: 8px; + background: var(--rubis); + border-radius: 50%; + } + + /* Widget 3 — Assistant (recolored undraw) */ + .widget-assistant { + padding: 12px; + background: white; + display: flex; + align-items: center; + justify-content: center; + min-height: 280px; + } + + .widget-assistant svg { + display: block; + width: 100%; + height: auto; + max-height: 280px; } .step-prose h3 { @@ -1844,7 +2053,23 @@
-
01
+
Étape 01
+
+ +
↓
+
+
+
+
+
+
1 240,00 €
+
+
facture-2024-0042.pdf
+

Vous importez vos factures.

@@ -1855,7 +2080,64 @@
-
02
+
Étape 02
+
+
+
Mai 2026
+
+ ‹ + › +
+
+
+
L
+
M
+
M
+
J
+
V
+
S
+
D
+
·
+
·
+
·
+
·
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+
+ Relances programmées + 3 étapes · plan B2B +
+

Vous choisissez un plan de relance.

@@ -1871,7 +2153,96 @@
-
03
+
Étape 03
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Et puis c'est tout.

@@ -2124,7 +2495,8 @@