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

static/css/marketing.css

@@ -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%;
   }