From e49652d85d3773bee8b5e7755e87bad56935531f Mon Sep 17 00:00:00 2001 From: Allison Date: Tue, 28 Apr 2026 12:03:33 -0400 Subject: [PATCH] =?UTF-8?q?feat(marketing):=20int=C3=A8gre=20pipeline=204?= =?UTF-8?q?=20=C3=A9tapes=20+=20r=C3=A9seau=20hub=20d'int=C3=A9grations=20?= =?UTF-8?q?depuis=20dictia.ca/solutions/dictai?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 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) --- static/css/marketing.css | 105 ++++++++ templates/marketing/landing.html | 397 +++++++++++++++++++++++++++++++ 2 files changed, 502 insertions(+) diff --git a/static/css/marketing.css b/static/css/marketing.css index 246c823..81f6776 100644 --- a/static/css/marketing.css +++ b/static/css/marketing.css @@ -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; diff --git a/templates/marketing/landing.html b/templates/marketing/landing.html index dd75bfd..25831dc 100644 --- a/templates/marketing/landing.html +++ b/templates/marketing/landing.html @@ -455,6 +455,212 @@ +{# ===== PIPELINE — Comment ça marche : 4 étapes ===== #} +{# Source canonique : InnovA-AI/Website-Sanity/components/sections/dictai-pipeline.tsx + Animation traduite : Framer Motion auto-advance + sweep ring → Alpine.js setInterval + CSS keyframes #} + +
+
+
+

COMMENT ÇA MARCHE

+

+ Du fichier au résumé en 4 étapes. +

+

+ Aucune installation côté utilisateur, aucune conversion préalable. DictIA orchestre l'ensemble du pipeline — du téléversement à l'export — en moins de deux minutes pour une heure d'audio. +

+
+ + {# Pipeline track + 4 nodes — Alpine state drives all visuals. + active = 0..3 (current step), prefers-reduced-motion stops the autoplay (handled in x-init). #} +
+ {# Background + filled track (top: 44px = node center 88px / 2) #} + + + + {# Moving glowing dot — left transitions via CSS #} + + + {# Nodes grid — 4 cols #} +
+ {# Each step rendered statically; active state computed via :class. #} + {% set steps = [ + ('Uploader', 'Audio ou vidéo', '', + "Glissez n'importe quel format — MP3, WAV, MP4, MKV. Aucune conversion nécessaire. DictIA accepte tout sans préparation."), + ('GPU transcrit', 'WhisperX Large-v3', '', + "Votre GPU traite le fichier 60× plus vite qu'un humain. 1 heure d'audio → 2 minutes. Précision 95 %+ en français canadien. 100 % en local — zéro cloud étranger."), + ('IA structure', 'Mistral 7B / Nemo 12B', '', + "L'IA identifie automatiquement chaque locuteur, génère un résumé structuré, extrait les points d'action et répond à vos questions sur le contenu transcrit."), + ('Exporter', 'Dans votre écosystème', '', + "DOCX, SRT, VTT, JSON, Obsidian, Logseq. Connectez avec n8n, Zapier ou Make pour automatiser vos workflows — zéro copier-coller.") + ] %} + {% for label, sublabel, icon, desc in steps %} + + {% endfor %} +
+ + {# Step description card — swaps with x-show + x-transition. Underline sweep restarts via :key on active. #} +
+ {% for label, sublabel, icon, desc in steps %} +
+

{{ desc | safe }}

+ +
+ {% endfor %} +
+ + {# Progress dots (mobile-friendly + click target redundancy) #} +
+ {% for label, sublabel, icon, desc in steps %} + + {% endfor %} +
+
+
+
+ {# ===== BENTO FEATURES ===== #}
@@ -486,6 +692,197 @@
+{# ===== HUB — Réseau d'intégrations ===== #} +{# Source canonique : InnovA-AI/Website-Sanity/components/sections/dictai-hub.tsx + Animation : SVG pur avec sur bezier paths — aucune lib JS, aucune config. + Particules cyan circulent en continu de DictIA → Hubs → Outils. #} + +
+ {# Decorative cosmic orb — cyan, mid-section #} + + +
+
+

INTÉGRATIONS — RÉSEAU OUVERT

+

+ DictIA se connecte à tout. +

+

+ Transcriptions et résumés acheminés automatiquement vers vos outils de travail. Trois familles d'intégrations couvrent l'essentiel des flux documentaires, communication et automatisation. +

+
+ + {# Network diagram — SVG with native for particle flow. + Layout : DictIA center-top, 3 hubs (Documents | Communication | Automatisation), 9 tools below. #} +
+ + Diagramme du réseau d'intégrations DictIA + DictIA au centre, connecté à trois familles : Documents (Word, Google Docs, Obsidian), Communication (Outlook, Teams, Notion) et Automatisation (Zapier, Make, n8n). + + + {# Bezier path definitions — DictIA top → 3 hubs (mid) #} + + + + + {# Bezier paths — Hub → Tool #} + {# Documents hub (168, 200) → Word(62,390), Google(175,390), Obsidian(282,390) #} + + + + {# Communication hub (450, 200) → Outlook(358,390), Teams(450,390), Notion(542,390) #} + + + + {# Automatisation hub (732, 200) → Zapier(618,390), Make(722,390), n8n(828,390) #} + + + + + + {# Render bezier connections (visible strokes) — DictIA → Hubs (thick), Hub → Tools (thin) #} + {# DictIA → Hubs #} + + + + + {# Hub → Tool (lighter) #} + + + + + + + + + + + {# Animated particles — DictIA → Hubs (bigger, dual particles) #} + {% for hub in [ + ('docs', '#0062ff', '0s', '2.4s'), + ('comm', '#00bdd8', '0.8s', '2.4s'), + ('auto', '#8b5cf6', '1.6s', '2.4s') + ] %} + + + + + + + + + + + {% endfor %} + + {# Animated particles — Hub → Tool (smaller, fast) #} + {% for tool in [ + ('word', '#0062ff', '0s'), + ('google', '#0062ff', '0.4s'), + ('obsidian', '#0062ff', '0.8s'), + ('outlook', '#00bdd8', '0.2s'), + ('teams', '#00bdd8', '0.6s'), + ('notion', '#00bdd8', '1.0s'), + ('zapier', '#8b5cf6', '0.1s'), + ('make', '#8b5cf6', '0.5s'), + ('n8n', '#8b5cf6', '0.9s') + ] %} + + + + + + {% endfor %} + + + {# DictIA central node — absolute positioned over the SVG (z-10) #} + + + {# Hub labels overlay — positioned to match SVG hub coords (200/460 = 43.5% top, 168/900=18.7% / 450/900=50% / 732/900=81.3% left) #} + {% set hub_data = [ + ('Documents', 'Word · Google Docs · Obsidian', '18.7%', 'rgba(0,98,255,0.10)', 'rgba(0,98,255,0.30)', 'text-blue-300'), + ('Communication', 'Outlook · Teams · Notion', '50%', 'rgba(0,189,216,0.10)', 'rgba(0,189,216,0.30)', 'text-cyan-300'), + ('Automatisation', 'Zapier · Make · n8n', '81.3%', 'rgba(139,92,246,0.10)', 'rgba(139,92,246,0.30)', 'text-purple-300') + ] %} + {% for name, sub, leftpos, bgcol, brdcol, txtcol in hub_data %} + + {% endfor %} +
+ + {# Tool list — text fallback below the diagram (covers screen readers + reduces visual noise on mobile) #} +
+ {% for col_label, tools, accent in [ + ('Documents', [('Word', 'Export .docx instantané'), ('Google Docs', 'Sync Google Workspace'), ('Obsidian', 'Notes Markdown locales')], 'text-brand-b1'), + ('Communication', [('Outlook', 'Envoi email automatique'), ('Teams', 'Canal Teams dédié'), ('Notion', 'Page Notion structurée')], 'text-brand-b2'), + ('Automatisation', [('Zapier', '5 000+ apps connectées'), ('Make', 'Scénarios visuels no-code'), ('n8n', 'Workflows open-source')], 'text-purple-400') + ] %} +
+

{{ col_label | upper }}

+
    + {% for tool_name, tool_desc in tools %} +
  • + {{ tool_name }} + — {{ tool_desc | safe }} +
    • + {% endfor %} +
+
+ {% endfor %} +
+ +

+ Architecture ouverte. Tout export est aussi disponible en DOCX, SRT, VTT, JSON, TXT et MD — formats standards consommables par n'importe quel logiciel métier (gestion de dossiers, paie, CRM). +

+
+
+ {# ===== PRICING ===== #}