Innova-AI/dictia-public
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(marketing): intègre pipeline 4 étapes + réseau hub d'intégrations depuis dictia.ca/solutions/dictai

Browse Source 
- Pipeline (entre Solution & Bento) : Upload → GPU WhisperX → IA Mistral → Export
  Auto-advance Alpine 2400ms, sweep ring SVG CSS, dot glow, prefers-reduced-motion
- Hub (entre Bento & Pricing) : DictIA → 3 hubs → 9 outils
  SVG natif <animateMotion> sur bezier paths, zéro lib JS, fallback liste 3-col WCAG
- Texte 100% canonique extrait de Website-Sanity dictai-pipeline.tsx + dictai-hub.tsx
- OQLF NBSP : "1 heure d'audio → 2 minutes", "5 000+ apps", "100 % en local"
- WCAG : aria-labelledby sections, role=tab/list, focus-visible, prefers-reduced-motion
- +397 lignes, npm run build:css exécuté pour utilities cyan/purple/opacity

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
2026-04-28 12:03:33 -04:00
parent aad37f8566
commit e49652d85d
2 changed files with 502 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
static/css/marketing.css
View File

@@ -56,6 +56,7 @@
--color-teal-400: oklch(77.7% 0.152 181.912);
--color-teal-500: oklch(70.4% 0.14 182.503);
--color-teal-600: oklch(60% 0.118 184.704);
--color-cyan-300: oklch(86.5% 0.127 207.078);
--color-blue-50: oklch(97% 0.014 254.604);
--color-blue-100: oklch(93.2% 0.032 255.585);
--color-blue-200: oklch(88.2% 0.059 254.128);
@@ -137,6 +138,7 @@
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--animate-spin: spin 1s linear infinite;
@@ -378,6 +380,9 @@
.-top-1 {
top: calc(var(--spacing) * -1);
}
.-top-1\.5 {
top: calc(var(--spacing) * -1.5);
}
.-top-3 {
top: calc(var(--spacing) * -3);
}
@@ -423,6 +428,9 @@
.top-full {
top: 100%;
}
.-right-1\.5 {
right: calc(var(--spacing) * -1.5);
}
.-right-6 {
right: calc(var(--spacing) * -6);
}
@@ -654,6 +662,9 @@
.-mb-px {
margin-bottom: -1px;
}
.mb-0\.5 {
margin-bottom: calc(var(--spacing) * 0.5);
}
.mb-1 {
margin-bottom: calc(var(--spacing) * 1);
}
@@ -810,9 +821,18 @@
.h-72 {
height: calc(var(--spacing) * 72);
}
.h-\[2px\] {
height: 2px;
}
.h-\[62px\] {
height: 62px;
}
.h-\[68px\] {
height: 68px;
}
.h-\[88px\] {
height: 88px;
}
.h-\[95vh\] {
height: 95vh;
}
@@ -831,6 +851,12 @@
.h-\[600px\] {
height: 600px;
}
.h-\[700px\] {
height: 700px;
}
.h-auto {
height: auto;
}
.h-full {
height: 100%;
}
@@ -882,6 +908,9 @@
.min-h-\[8rem\] {
min-height: 8rem;
}
.min-h-\[110px\] {
min-height: 110px;
}
.min-h-\[calc\(100vh-62px\)\] {
min-height: calc(100vh - 62px);
}
@@ -963,6 +992,12 @@
.w-80 {
width: calc(var(--spacing) * 80);
}
.w-\[68px\] {
width: 68px;
}
.w-\[88px\] {
width: 88px;
}
.w-\[400px\] {
width: 400px;
}
@@ -975,6 +1010,9 @@
.w-\[600px\] {
width: 600px;
}
.w-\[700px\] {
width: 700px;
}
.w-full {
width: 100%;
}
@@ -1097,6 +1135,14 @@
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-0 {
--tw-translate-y: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-2 {
--tw-translate-y: calc(var(--spacing) * 2);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-full {
--tw-translate-y: 100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1113,6 +1159,15 @@
--tw-scale-z: 100%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-105 {
--tw-scale-x: 105%;
--tw-scale-y: 105%;
--tw-scale-z: 105%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.-rotate-90 {
rotate: calc(90deg * -1);
}
.rotate-45 {
rotate: 45deg;
}
@@ -1190,6 +1245,9 @@
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
@@ -1564,6 +1622,12 @@
.border-brand-b1 {
border-color: #0062ff;
}
.border-brand-b2\/40 {
border-color: color-mix(in oklab, #00bdd8 40%, transparent);
}
.border-brand-b3\/60 {
border-color: color-mix(in oklab, #00c896 60%, transparent);
}
.border-brand-border {
border-color: #e6ebf2;
}
@@ -1831,6 +1895,9 @@
.bg-blue-600 {
background-color: var(--color-blue-600);
}
.bg-brand-b1 {
background-color: #0062ff;
}
.bg-brand-b1\/10 {
background-color: color-mix(in oklab, #0062ff 10%, transparent);
}
@@ -1840,6 +1907,9 @@
.bg-brand-b3\/10 {
background-color: color-mix(in oklab, #00c896 10%, transparent);
}
.bg-brand-b3\/60 {
background-color: color-mix(in oklab, #00c896 60%, transparent);
}
.bg-brand-bg {
background-color: #f7f9fc;
}
@@ -2231,6 +2301,9 @@
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.px-7 {
padding-inline: calc(var(--spacing) * 7);
}
.px-8 {
padding-inline: calc(var(--spacing) * 8);
}
@@ -2657,12 +2730,18 @@
.text-brand-b1 {
color: #0062ff;
}
.text-brand-b2 {
color: #00bdd8;
}
.text-brand-b3 {
color: #00c896;
}
.text-brand-navy {
color: #060d1a;
}
.text-brand-navy\/30 {
color: color-mix(in oklab, #060d1a 30%, transparent);
}
.text-brand-navy\/40 {
color: color-mix(in oklab, #060d1a 40%, transparent);
}
@@ -2681,6 +2760,9 @@
.text-brand-navy\/90 {
color: color-mix(in oklab, #060d1a 90%, transparent);
}
.text-cyan-300 {
color: var(--color-cyan-300);
}
.text-emerald-300 {
color: var(--color-emerald-300);
}
@@ -2729,6 +2811,9 @@
.text-purple-300 {
color: var(--color-purple-300);
}
.text-purple-400 {
color: var(--color-purple-400);
}
.text-purple-500 {
color: var(--color-purple-500);
}
@@ -2913,6 +2998,9 @@
.opacity-75 {
opacity: 75%;
}
.opacity-80 {
opacity: 80%;
}
.opacity-90 {
opacity: 90%;
}
@@ -2927,6 +3015,10 @@
--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_0_28px_rgba\(0\,98\,255\,0\.35\)\] {
--tw-shadow: 0 0 28px var(--tw-shadow-color, rgba(0,98,255,0.35));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-cta {
--tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(0, 98, 255, 0.28));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2947,6 +3039,10 @@
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-1 {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3060,6 +3156,10 @@
--tw-duration: 500ms;
transition-duration: 500ms;
}
.ease-in {
--tw-ease: var(--ease-in);
transition-timing-function: var(--ease-in);
}
.ease-in-out {
--tw-ease: var(--ease-in-out);
transition-timing-function: var(--ease-in-out);
@@ -4110,6 +4210,11 @@
outline-offset: 2px;
}
}
.focus-visible\:outline-offset-4 {
&:focus-visible {
outline-offset: 4px;
}
}
.focus-visible\:outline-brand-b1 {
&:focus-visible {
outline-color: #0062ff;