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

feat(marketing): section interactive 'Comment ça marche' (réacteur DictIA cyclant 6 features)

Browse Source 
Ajoute une nouvelle section interactive sous les 6 fonctionnalités
(préservées intégralement) reproduisant le composant React
dictai-narrative.tsx en CSS pur + Alpine.js — sans Framer Motion ni
autre lib JS.

- Réacteur central holographique : 3 anneaux concentriques rotatifs
  (15 s / 22 s / 30 s) + 8 particules orbitales (cyan/blue/fuchsia)
  + wordmark DictIA glow pulsant
- Auto-cycle Alpine.js entre 6 features (1.6 s) avec pause au
  hover/focus et reprise au leave/blur
- Panneau feature active avec aria-live='polite' pour annonce
  lecteur d'écran (Transcription · Diarisation · 99+ langues ·
  Exports · Utilisateurs illimités · Partage & Classement)
- Card 'IA intégrée Mistral 7B LOCAL' avec 3 bullets souveraineté
- Spec list cliquable / hover déclenchant feature dans réacteur
- Layout responsive grid 2 cols desktop, stack mobile
- prefers-reduced-motion désactive rings + orbites + auto-cycle
- Position : APRÈS '6 fonctionnalités', AVANT 'Intégrations'
- Sub-nav reste à 4 ancres (sous-partie visuelle de Fonctionnalités)
- Tests : nouveau test_fonctionnalites_how_it_works_reactor_section
  valide structure, contenu canonique, a11y et Alpine bindings

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
2026-04-29 09:09:40 -04:00
parent e06cba2123
commit 03f6e56f04
3 changed files with 295 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
static/css/marketing.css
View File

@@ -984,6 +984,9 @@
.min-h-\[110px\] {
min-height: 110px;
}
.min-h-\[480px\] {
min-height: 480px;
}
.min-h-\[calc\(100vh-62px\)\] {
min-height: calc(100vh - 62px);
}
@@ -1140,6 +1143,9 @@
.max-w-\[300px\] {
max-width: 300px;
}
.max-w-\[320px\] {
max-width: 320px;
}
.max-w-\[820px\] {
max-width: 820px;
}
@@ -1242,6 +1248,10 @@
--tw-translate-y: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-1 {
--tw-translate-y: calc(var(--spacing) * 1);
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);
@@ -1916,6 +1926,12 @@
border-color: color-mix(in oklab, var(--color-white) 8%, transparent);
}
}
.border-white\/\[0\.10\] {
border-color: color-mix(in srgb, #fff 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}
}
.border-white\/\[0\.12\] {
border-color: color-mix(in srgb, #fff 12%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -2950,6 +2966,10 @@
--tw-tracking: 0.10em;
letter-spacing: 0.10em;
}
.tracking-\[0\.14em\] {
--tw-tracking: 0.14em;
letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
--tw-tracking: 0.16em;
letter-spacing: 0.16em;
@@ -5064,6 +5084,12 @@
text-align: right;
}
}
.sm\:text-6xl {
@media (width >= 40rem) {
font-size: var(--text-6xl);
line-height: var(--tw-leading, var(--text-6xl--line-height));
}
}
.sm\:text-base {
@media (width >= 40rem) {
font-size: var(--text-base);
@@ -5457,6 +5483,11 @@
grid-template-columns: 1fr 240px;
}
}
.lg\:grid-cols-\[1fr_minmax\(0\,360px\)\] {
@media (width >= 64rem) {
grid-template-columns: 1fr minmax(0,360px);
}
}
.lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,420px\)\] {
@media (width >= 64rem) {
grid-template-columns: minmax(0,1fr) minmax(0,420px);