feat(marketing): pricing 3 forfaits + ROI calculator Alpine.js

This commit is contained in:
Allison
2026-04-27 18:50:33 -04:00
parent b87f35ea4a
commit 0ae4053faa
5 changed files with 270 additions and 0 deletions

View File

@@ -97,6 +97,7 @@
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
@@ -365,6 +366,9 @@
.end {
inset-inline-end: var(--spacing);
}
.-top-3 {
top: calc(var(--spacing) * -3);
}
.top-0 {
top: calc(var(--spacing) * 0);
}
@@ -575,6 +579,9 @@
.mt-12 {
margin-top: calc(var(--spacing) * 12);
}
.mt-16 {
margin-top: calc(var(--spacing) * 16);
}
.mt-20 {
margin-top: calc(var(--spacing) * 20);
}
@@ -905,6 +912,9 @@
.max-w-4xl {
max-width: var(--container-4xl);
}
.max-w-5xl {
max-width: var(--container-5xl);
}
.max-w-6xl {
max-width: var(--container-6xl);
}
@@ -1105,6 +1115,9 @@
.items-start {
align-items: flex-start;
}
.items-stretch {
align-items: stretch;
}
.justify-between {
justify-content: space-between;
}
@@ -1295,6 +1308,9 @@
.rounded-\[18px\] {
border-radius: 18px;
}
.rounded-\[20px\] {
border-radius: 20px;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
@@ -2008,6 +2024,9 @@
.p-12 {
padding: calc(var(--spacing) * 12);
}
.p-\[1\.5px\] {
padding: 1.5px;
}
.px-0\.5 {
padding-inline: calc(var(--spacing) * 0.5);
}
@@ -2397,6 +2416,9 @@
.text-brand-navy\/70 {
color: color-mix(in oklab, #060d1a 70%, transparent);
}
.text-brand-navy\/80 {
color: color-mix(in oklab, #060d1a 80%, transparent);
}
.text-emerald-500 {
color: var(--color-emerald-500);
}
@@ -2570,6 +2592,9 @@
color: var(--text-muted);
}
}
.accent-brand-b1 {
accent-color: #0062ff;
}
.opacity-0 {
opacity: 0%;
}

View File

@@ -0,0 +1,22 @@
// ROI calculator for DictIA pricing section.
// Hypotheses transparentes (cf. footnote dans landing.html) :
// - 80% du temps de transcription manuelle est économisé
// - 220 jours ouvrables/an
// - Coût annuel comparé = DictIA 16 = 5 750 $ + (201 $ × 12) = 8 162 $
function roiCalculator() {
return {
users: 5,
hours: 2,
rate: 200,
get savings() {
const hoursSaved = this.users * this.hours * 0.8 * 220;
return Math.round(hoursSaved * this.rate);
},
get payback() {
const annualCost = 5750 + (201 * 12);
if (this.savings <= 0) return 999;
return Math.max(1, Math.round((annualCost / this.savings) * 12));
}
};
}
window.roiCalculator = roiCalculator;