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

feat(marketing): refonte fonctionnalites avec contenu canonique + animations modernes subtiles

Browse Source 
7 sections (hero stats counter, sticky sub-nav, 6 fonctionnalités bento avec chips
specs, 3 sous-groupes intégrations, tableau architecture 3 tiers, conformité résumée
+ lien /conformite, CTA final). Contenu canonique extrait du site prod (WhisperX
Large-v3, pyannote-audio, Mistral 7B, RAG sentence-transformers, 8 locuteurs,
30× temps réel, 95%+ FR-CA, prix 3 450/5 750/369 $).

Animations: counter rAF easeOutCubic via Alpine + IntersectionObserver, fade-in
stagger via data-ani-fade, animated underline H2, hover lift cards, sticky sub-nav
avec active highlight, cosmic orbs flottantes, pulse glow sur card recommandée.
Toutes les animations respectent prefers-reduced-motion via media query inline.

Conserve les sections exports/specs/integrations grid pour rétro-compat tests.
13 assertions pytest fonctionnalites passent (les 2 failures conformite sont
pré-existantes sur Windows — mojibake console, non liées à cette refonte).
This commit is contained in:
Allison
2026-04-28 11:28:15 -04:00
parent 48d65c2ab9
commit 3e56736fa7
2 changed files with 764 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
static/css/marketing.css
View File

@@ -94,6 +94,7 @@
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
@@ -128,6 +129,7 @@
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-relaxed: 1.625;
--radius-md: 0.375rem;
@@ -403,6 +405,9 @@
.top-\[42px\] {
top: 42px;
}
.top-\[62px\] {
top: 62px;
}
.top-full {
top: 100%;
}
@@ -505,6 +510,12 @@
.z-\[9999\] {
z-index: 9999;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.col-span-1 {
grid-column: span 1 / span 1;
}
@@ -559,6 +570,9 @@
.-mt-6 {
margin-top: calc(var(--spacing) * -6);
}
.mt-0 {
margin-top: calc(var(--spacing) * 0);
}
.mt-0\.5 {
margin-top: calc(var(--spacing) * 0.5);
}
@@ -631,6 +645,9 @@
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.mb-5 {
margin-bottom: calc(var(--spacing) * 5);
}
.mb-6 {
margin-bottom: calc(var(--spacing) * 6);
}
@@ -643,8 +660,8 @@
.mb-12 {
margin-bottom: calc(var(--spacing) * 12);
}
.mb-16 {
margin-bottom: calc(var(--spacing) * 16);
.mb-14 {
margin-bottom: calc(var(--spacing) * 14);
}
.ml-0\.5 {
margin-left: calc(var(--spacing) * 0.5);
@@ -835,9 +852,6 @@
.min-h-\[8rem\] {
min-height: 8rem;
}
.min-h-\[60vh\] {
min-height: 60vh;
}
.min-h-\[calc\(100vh-62px\)\] {
min-height: calc(100vh - 62px);
}
@@ -964,6 +978,9 @@
.max-w-\[1060px\] {
max-width: 1060px;
}
.max-w-\[1100px\] {
max-width: 1100px;
}
.max-w-\[1200px\] {
max-width: 1200px;
}
@@ -979,6 +996,9 @@
.max-w-sm {
max-width: var(--container-sm);
}
.max-w-xl {
max-width: var(--container-xl);
}
.max-w-xs {
max-width: var(--container-xs);
}
@@ -1015,6 +1035,9 @@
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
@@ -1105,6 +1128,9 @@
.resize-y {
resize: vertical;
}
.scroll-mt-32 {
scroll-margin-top: calc(var(--spacing) * 32);
}
.list-inside {
list-style-position: inside;
}
@@ -1167,9 +1193,6 @@
.justify-start {
justify-content: flex-start;
}
.justify-items-center {
justify-items: center;
}
.gap-0\.5 {
gap: calc(var(--spacing) * 0.5);
}
@@ -1341,24 +1364,6 @@
.rounded {
border-radius: 0.75rem;
}
.rounded-\[0\.5rem\] {
border-radius: 0.5rem;
}
.rounded-\[0\.75rem\] {
border-radius: 0.75rem;
}
.rounded-\[12px\] {
border-radius: 12px;
}
.rounded-\[14px\] {
border-radius: 14px;
}
.rounded-\[18px\] {
border-radius: 18px;
}
.rounded-\[20px\] {
border-radius: 20px;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
@@ -1368,6 +1373,9 @@
.rounded-md {
border-radius: var(--radius-md);
}
.rounded-none {
border-radius: 0;
}
.rounded-xl {
border-radius: var(--radius-xl);
}
@@ -1762,6 +1770,12 @@
.bg-brand-bg {
background-color: #f7f9fc;
}
.bg-brand-bg\/50 {
background-color: color-mix(in oklab, #f7f9fc 50%, transparent);
}
.bg-brand-bg\/60 {
background-color: color-mix(in oklab, #f7f9fc 60%, transparent);
}
.bg-brand-border {
background-color: #e6ebf2;
}
@@ -1918,6 +1932,12 @@
background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
}
}
.bg-white\/95 {
background-color: color-mix(in srgb, #fff 95%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
}
}
.bg-white\/\[0\.05\] {
background-color: color-mix(in srgb, #fff 5%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1960,9 +1980,6 @@
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-brand-grad {
background-image: linear-gradient(118deg, #0062ff, #00bdd8 52%, #00c896);
}
.from-\[var\(--bg-accent\)\] {
--tw-gradient-from: var(--bg-accent);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -2183,6 +2200,9 @@
.pt-8 {
padding-top: calc(var(--spacing) * 8);
}
.pt-12 {
padding-top: calc(var(--spacing) * 12);
}
.pt-\[62px\] {
padding-top: 62px;
}
@@ -2216,12 +2236,24 @@
.pb-2 {
padding-bottom: calc(var(--spacing) * 2);
}
.pb-3 {
padding-bottom: calc(var(--spacing) * 3);
}
.pb-4 {
padding-bottom: calc(var(--spacing) * 4);
}
.pb-5 {
padding-bottom: calc(var(--spacing) * 5);
}
.pb-6 {
padding-bottom: calc(var(--spacing) * 6);
}
.pb-16 {
padding-bottom: calc(var(--spacing) * 16);
}
.pb-20 {
padding-bottom: calc(var(--spacing) * 20);
}
.pl-2 {
padding-left: calc(var(--spacing) * 2);
}
@@ -2255,6 +2287,9 @@
.align-middle {
vertical-align: middle;
}
.align-text-top {
vertical-align: text-top;
}
.align-top {
vertical-align: top;
}
@@ -2328,6 +2363,9 @@
.text-\[clamp\(2\.25rem\,4vw\,3\.5rem\)\] {
font-size: clamp(2.25rem, 4vw, 3.5rem);
}
.text-\[clamp\(2\.25rem\,4vw\,3\.75rem\)\] {
font-size: clamp(2.25rem, 4vw, 3.75rem);
}
.text-\[clamp\(2rem\,3vw\,2\.5rem\)\] {
font-size: clamp(2rem, 3vw, 2.5rem);
}
@@ -2354,6 +2392,10 @@
--tw-leading: var(--leading-snug);
line-height: var(--leading-snug);
}
.leading-tight {
--tw-leading: var(--leading-tight);
line-height: var(--leading-tight);
}
.font-black {
--tw-font-weight: var(--font-weight-black);
font-weight: var(--font-weight-black);
@@ -2374,6 +2416,10 @@
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.tracking-\[0\.2em\] {
--tw-tracking: 0.2em;
letter-spacing: 0.2em;
}
.tracking-tight {
--tw-tracking: var(--tracking-tight);
letter-spacing: var(--tracking-tight);
@@ -2501,6 +2547,9 @@
.text-brand-navy {
color: #060d1a;
}
.text-brand-navy\/40 {
color: color-mix(in oklab, #060d1a 40%, transparent);
}
.text-brand-navy\/50 {
color: color-mix(in oklab, #060d1a 50%, transparent);
}
@@ -2621,6 +2670,12 @@
color: color-mix(in oklab, var(--color-white) 50%, transparent);
}
}
.text-white\/60 {
color: color-mix(in srgb, #fff 60%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-white) 60%, transparent);
}
}
.text-white\/70 {
color: color-mix(in srgb, #fff 70%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -2633,12 +2688,6 @@
color: color-mix(in oklab, var(--color-white) 80%, transparent);
}
}
.text-white\/\[0\.04\] {
color: color-mix(in srgb, #fff 4%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-white) 4%, transparent);
}
}
.text-yellow-400 {
color: var(--color-yellow-400);
}
@@ -2698,6 +2747,9 @@
.opacity-0 {
opacity: 0%;
}
.opacity-20 {
opacity: 20%;
}
.opacity-30 {
opacity: 30%;
}
@@ -2800,6 +2852,9 @@
--tw-backdrop-blur: blur(var(--blur-xl));
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.backdrop-filter {
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2905,13 +2960,6 @@
}
}
}
.group-hover\:text-brand-navy {
&:is(:where(.group):hover *) {
@media (hover: hover) {
color: #060d1a;
}
}
}
.group-hover\:opacity-100 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
@@ -3759,6 +3807,43 @@
}
}
}
.focus\:not-sr-only {
&:focus {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;
}
}
.focus\:fixed {
&:focus {
position: fixed;
}
}
.focus\:top-2 {
&:focus {
top: calc(var(--spacing) * 2);
}
}
.focus\:left-2 {
&:focus {
left: calc(var(--spacing) * 2);
}
}
.focus\:z-\[100\] {
&:focus {
z-index: 100;
}
}
.focus\:rounded-none {
&:focus {
border-radius: 0;
}
}
.focus\:border-\[var\(--border-accent\)\] {
&:focus {
border-color: var(--border-accent);
@@ -3774,6 +3859,26 @@
border-color: transparent;
}
}
.focus\:bg-brand-navy {
&:focus {
background-color: #060d1a;
}
}
.focus\:px-4 {
&:focus {
padding-inline: calc(var(--spacing) * 4);
}
}
.focus\:py-2 {
&:focus {
padding-block: calc(var(--spacing) * 2);
}
}
.focus\:text-white {
&:focus {
color: var(--color-white);
}
}
.focus\:ring-1 {
&:focus {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -4023,11 +4128,6 @@
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.sm\:grid-cols-5 {
@media (width >= 40rem) {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.sm\:flex-row {
@media (width >= 40rem) {
flex-direction: row;
@@ -4043,6 +4143,11 @@
justify-content: center;
}
}
.sm\:justify-end {
@media (width >= 40rem) {
justify-content: flex-end;
}
}
.sm\:gap-2 {
@media (width >= 40rem) {
gap: calc(var(--spacing) * 2);
@@ -4171,6 +4276,11 @@
padding-bottom: calc(var(--spacing) * 6);
}
}
.sm\:text-right {
@media (width >= 40rem) {
text-align: right;
}
}
.sm\:text-base {
@media (width >= 40rem) {
font-size: var(--text-base);
@@ -4289,6 +4399,11 @@
gap: calc(var(--spacing) * 4);
}
}
.md\:gap-5 {
@media (width >= 48rem) {
gap: calc(var(--spacing) * 5);
}
}
.md\:p-2 {
@media (width >= 48rem) {
padding: calc(var(--spacing) * 2);
@@ -4304,6 +4419,11 @@
padding: calc(var(--spacing) * 6);
}
}
.md\:p-7 {
@media (width >= 48rem) {
padding: calc(var(--spacing) * 7);
}
}
.md\:p-8 {
@media (width >= 48rem) {
padding: calc(var(--spacing) * 8);
@@ -4329,6 +4449,11 @@
padding-block: calc(var(--spacing) * 3);
}
}
.md\:py-28 {
@media (width >= 48rem) {
padding-block: calc(var(--spacing) * 28);
}
}
.md\:py-32 {
@media (width >= 48rem) {
padding-block: calc(var(--spacing) * 32);
@@ -4351,12 +4476,24 @@
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
}
.md\:text-5xl {
@media (width >= 48rem) {
font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height));
}
}
.md\:text-base {
@media (width >= 48rem) {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
}
}
.md\:text-lg {
@media (width >= 48rem) {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
}
.md\:text-sm {
@media (width >= 48rem) {
font-size: var(--text-sm);
@@ -4393,6 +4530,11 @@
display: flex;
}
}
.lg\:grid {
@media (width >= 64rem) {
display: grid;
}
}
.lg\:hidden {
@media (width >= 64rem) {
display: none;
@@ -4439,14 +4581,19 @@
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.lg\:grid-cols-5 {
@media (width >= 64rem) {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.lg\:grid-cols-7 {
@media (width >= 64rem) {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
}
.lg\:grid-cols-9 {
.lg\:grid-cols-\[1fr_240px\] {
@media (width >= 64rem) {
grid-template-columns: repeat(9, minmax(0, 1fr));
grid-template-columns: 1fr 240px;
}
}
.lg\:flex-row {
@@ -4454,6 +4601,11 @@
flex-direction: row;
}
}
.lg\:gap-10 {
@media (width >= 64rem) {
gap: calc(var(--spacing) * 10);
}
}
.lg\:border-r {
@media (width >= 64rem) {
border-right-style: var(--tw-border-style);