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

feat(marketing): hero 2-col avec mockup app DictIA animé interactif

Browse Source 
Refonte de la section hero: passage d'un layout centré single-col
à un grid 2 colonnes (texte gauche + mockup app à droite) sur lg+,
avec préservation du centrage actuel sur mobile/tablette.

- Mockup ~560×500px reproduit l'interface DictIA réelle:
  - Window chrome (3 dots traffic light + tab "DictIA — Enquêter")
  - Sidebar: 6 enregistrements groupés (Semaine dernière 2 + Mois
    dernier 4) avec chips colorés (En cours, Barreau Confidentiel,
    CPA Corporatif, Urgent Client) + bouton + recording rounded-none
  - Center: header card avec 4 metas (avatars/calendar/clock/file),
    audio player avec progress bar animée 50%-75% (15s loop),
    transcript 5 lignes speaker (Allison/SPEAKER_02) où la ligne
    active cycle toutes les 2.8s via Alpine x-data idx
  - Right: tabs Résumé/Notes/Discuter (Résumé actif), résumé
    exemple + 4 points clés
- Tilt subtil rotate-1 → straighten + scale au hover (lg only)
- 2 glow orbs flottants décoratifs derrière (bg-brand-b1/15 +
  bg-brand-b3/10) avec tc-float-y reverse
- role="img" + aria-label descriptif sur le mockup complet
- prefers-reduced-motion désactive toutes animations + freeze
  progress bar à 60% + retire transform tilt
- Tous les éléments interactifs ont tabindex="-1" + aria-hidden
  car purement décoratifs (pas de duplication d'app réelle)
- Aucun emoji (SVG inline stroke="currentColor" partout)
- Système border-radius respecté: rounded-none (boutons/inputs/
  tuiles), rounded (4px wrapper card), rounded-full (chips/avatar)

Tests: 6/6 hero tests pass (eyebrow, h1+grad-text, dual CTA,
cosmic orbs, social proof, animations staggered). Les 3 fails
restants (test_landing_has_main_nav, test_footer_links_complete,
test_trust_bar_has_eyebrow_factual_phrasing) sont préexistants
et sans rapport avec la refonte hero.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
2026-04-28 11:45:35 -04:00
parent 3e56736fa7
commit aad37f8566
2 changed files with 526 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
static/css/marketing.css
View File

@@ -49,6 +49,7 @@
--color-green-700: oklch(52.7% 0.154 150.069);
--color-green-800: oklch(44.8% 0.119 151.328);
--color-green-900: oklch(39.3% 0.095 152.535);
--color-emerald-300: oklch(84.5% 0.143 164.978);
--color-emerald-500: oklch(69.6% 0.17 162.48);
--color-emerald-600: oklch(59.6% 0.145 163.225);
--color-emerald-700: oklch(50.8% 0.118 165.612);
@@ -75,6 +76,7 @@
--color-violet-600: oklch(54.1% 0.281 293.009);
--color-violet-700: oklch(49.1% 0.27 292.581);
--color-violet-900: oklch(38% 0.189 293.745);
--color-purple-300: oklch(82.7% 0.119 306.383);
--color-purple-400: oklch(71.4% 0.203 305.504);
--color-purple-500: oklch(62.7% 0.265 303.9);
--color-purple-600: oklch(55.8% 0.288 302.321);
@@ -141,6 +143,7 @@
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--blur-sm: 8px;
--blur-xl: 24px;
--blur-3xl: 64px;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@@ -354,6 +357,9 @@
.sticky {
position: sticky;
}
.-inset-8 {
inset: calc(var(--spacing) * -8);
}
.inset-0 {
inset: calc(var(--spacing) * 0);
}
@@ -369,9 +375,15 @@
.end {
inset-inline-end: var(--spacing);
}
.-top-1 {
top: calc(var(--spacing) * -1);
}
.-top-3 {
top: calc(var(--spacing) * -3);
}
.-top-10 {
top: calc(var(--spacing) * -10);
}
.top-0 {
top: calc(var(--spacing) * 0);
}
@@ -411,6 +423,9 @@
.top-full {
top: 100%;
}
.-right-6 {
right: calc(var(--spacing) * -6);
}
.right-0 {
right: calc(var(--spacing) * 0);
}
@@ -438,6 +453,9 @@
.right-4 {
right: calc(var(--spacing) * 4);
}
.-bottom-10 {
bottom: calc(var(--spacing) * -10);
}
.bottom-0 {
bottom: calc(var(--spacing) * 0);
}
@@ -450,6 +468,9 @@
.bottom-full {
bottom: 100%;
}
.-left-10 {
left: calc(var(--spacing) * -10);
}
.left-0 {
left: calc(var(--spacing) * 0);
}
@@ -540,8 +561,8 @@
.-mx-4 {
margin-inline: calc(var(--spacing) * -4);
}
.mx-2 {
margin-inline: calc(var(--spacing) * 2);
.mx-1 {
margin-inline: calc(var(--spacing) * 1);
}
.mx-3 {
margin-inline: calc(var(--spacing) * 3);
@@ -627,6 +648,9 @@
.mr-4 {
margin-right: calc(var(--spacing) * 4);
}
.-mb-\[0\.5rem\] {
margin-bottom: calc(0.5rem * -1);
}
.-mb-px {
margin-bottom: -1px;
}
@@ -783,6 +807,9 @@
.h-64 {
height: calc(var(--spacing) * 64);
}
.h-72 {
height: calc(var(--spacing) * 72);
}
.h-\[62px\] {
height: 62px;
}
@@ -795,6 +822,9 @@
.h-\[450px\] {
height: 450px;
}
.h-\[460px\] {
height: 460px;
}
.h-\[500px\] {
height: 500px;
}
@@ -924,6 +954,9 @@
.w-56 {
width: calc(var(--spacing) * 56);
}
.w-64 {
width: calc(var(--spacing) * 64);
}
.w-72 {
width: calc(var(--spacing) * 72);
}
@@ -1089,6 +1122,9 @@
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.animate-plus-breathe {
animation: plus-breathe 2s ease-in-out infinite;
}
.animate-pulse {
animation: var(--animate-pulse);
}
@@ -1157,6 +1193,9 @@
.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[180px_1fr_170px\] {
grid-template-columns: 180px 1fr 170px;
}
.flex-col {
flex-direction: column;
}
@@ -1220,6 +1259,9 @@
.gap-8 {
gap: calc(var(--spacing) * 8);
}
.gap-12 {
gap: calc(var(--spacing) * 12);
}
.gap-\[1\.5px\] {
gap: 1.5px;
}
@@ -1272,6 +1314,10 @@
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
}
.gap-x-2 {
-moz-column-gap: calc(var(--spacing) * 2);
column-gap: calc(var(--spacing) * 2);
}
.gap-x-3 {
-moz-column-gap: calc(var(--spacing) * 3);
column-gap: calc(var(--spacing) * 3);
@@ -1515,6 +1561,9 @@
border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}
}
.border-brand-b1 {
border-color: #0062ff;
}
.border-brand-border {
border-color: #e6ebf2;
}
@@ -1584,6 +1633,12 @@
border-color: color-mix(in oklab, var(--color-violet-400) 50%, transparent);
}
}
.border-white\/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\/20 {
border-color: color-mix(in srgb, #fff 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1596,6 +1651,18 @@
border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
}
}
.border-white\/\[0\.05\] {
border-color: color-mix(in srgb, #fff 5%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
}
}
.border-white\/\[0\.06\] {
border-color: color-mix(in srgb, #fff 6%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-white) 6%, transparent);
}
}
.border-white\/\[0\.08\] {
border-color: color-mix(in srgb, #fff 8%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1764,6 +1831,12 @@
.bg-blue-600 {
background-color: var(--color-blue-600);
}
.bg-brand-b1\/10 {
background-color: color-mix(in oklab, #0062ff 10%, transparent);
}
.bg-brand-b1\/15 {
background-color: color-mix(in oklab, #0062ff 15%, transparent);
}
.bg-brand-b3\/10 {
background-color: color-mix(in oklab, #00c896 10%, transparent);
}
@@ -1788,6 +1861,12 @@
.bg-brand-navy2 {
background-color: #0b1525;
}
.bg-emerald-500\/20 {
background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
}
}
.bg-emerald-600 {
background-color: var(--color-emerald-600);
}
@@ -1920,6 +1999,12 @@
.bg-white {
background-color: var(--color-white);
}
.bg-white\/10 {
background-color: color-mix(in srgb, #fff 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}
}
.bg-white\/20 {
background-color: color-mix(in srgb, #fff 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1938,6 +2023,18 @@
background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
}
}
.bg-white\/\[0\.03\] {
background-color: color-mix(in srgb, #fff 3%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 3%, transparent);
}
}
.bg-white\/\[0\.04\] {
background-color: color-mix(in srgb, #fff 4%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
}
}
.bg-white\/\[0\.05\] {
background-color: color-mix(in srgb, #fff 5%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1950,6 +2047,12 @@
background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
}
}
.bg-white\/\[0\.08\] {
background-color: color-mix(in srgb, #fff 8%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
}
}
.bg-yellow-50 {
background-color: var(--color-yellow-50);
}
@@ -2233,6 +2336,9 @@
.pb-0 {
padding-bottom: calc(var(--spacing) * 0);
}
.pb-1 {
padding-bottom: calc(var(--spacing) * 1);
}
.pb-2 {
padding-bottom: calc(var(--spacing) * 2);
}
@@ -2345,6 +2451,9 @@
.text-\[11px\] {
font-size: 11px;
}
.text-\[13px\] {
font-size: 13px;
}
.text-\[15px\] {
font-size: 15px;
}
@@ -2420,6 +2529,10 @@
--tw-tracking: 0.2em;
letter-spacing: 0.2em;
}
.tracking-\[0\.12em\] {
--tw-tracking: 0.12em;
letter-spacing: 0.12em;
}
.tracking-tight {
--tw-tracking: var(--tracking-tight);
letter-spacing: var(--tracking-tight);
@@ -2520,6 +2633,9 @@
color: color-mix(in oklab, var(--color-amber-900) 90%, transparent);
}
}
.text-blue-300 {
color: var(--color-blue-300);
}
.text-blue-400 {
color: var(--color-blue-400);
}
@@ -2565,6 +2681,9 @@
.text-brand-navy\/90 {
color: color-mix(in oklab, #060d1a 90%, transparent);
}
.text-emerald-300 {
color: var(--color-emerald-300);
}
.text-emerald-500 {
color: var(--color-emerald-500);
}
@@ -2607,6 +2726,9 @@
.text-orange-600 {
color: var(--color-orange-600);
}
.text-purple-300 {
color: var(--color-purple-300);
}
.text-purple-500 {
color: var(--color-purple-500);
}
@@ -2616,6 +2738,9 @@
.text-red-100 {
color: var(--color-red-100);
}
.text-red-300 {
color: var(--color-red-300);
}
.text-red-400 {
color: var(--color-red-400);
}
@@ -2688,6 +2813,12 @@
color: color-mix(in oklab, var(--color-white) 80%, transparent);
}
}
.text-white\/90 {
color: color-mix(in srgb, #fff 90%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-white) 90%, transparent);
}
}
.text-yellow-400 {
color: var(--color-yellow-400);
}
@@ -2741,6 +2872,20 @@
color: var(--text-muted);
}
}
.placeholder-white\/40 {
&::-moz-placeholder {
color: color-mix(in srgb, #fff 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-white) 40%, transparent);
}
}
&::placeholder {
color: color-mix(in srgb, #fff 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, var(--color-white) 40%, transparent);
}
}
}
.accent-brand-b1 {
accent-color: #0062ff;
}
@@ -2810,6 +2955,12 @@
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
}
.shadow-black\/40 {
--tw-shadow-color: color-mix(in srgb, #000 40%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.ring-\[var\(--border-accent\)\] {
--tw-ring-color: var(--border-accent);
}
@@ -2837,6 +2988,10 @@
--tw-blur: blur(8px);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.blur-3xl {
--tw-blur: blur(var(--blur-3xl));
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.filter {
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
@@ -3481,6 +3636,16 @@
}
}
}
.hover\:bg-white\/\[0\.04\] {
&:hover {
@media (hover: hover) {
background-color: color-mix(in srgb, #fff 4%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
}
}
}
}
.hover\:bg-white\/\[0\.05\] {
&:hover {
@media (hover: hover) {
@@ -4520,6 +4685,11 @@
margin-inline: calc(var(--spacing) * -8);
}
}
.lg\:mx-0 {
@media (width >= 64rem) {
margin-inline: calc(var(--spacing) * 0);
}
}
.lg\:block {
@media (width >= 64rem) {
display: block;
@@ -4596,16 +4766,31 @@
grid-template-columns: 1fr 240px;
}
}
.lg\:grid-cols-\[1fr_minmax\(0\,560px\)\] {
@media (width >= 64rem) {
grid-template-columns: 1fr minmax(0,560px);
}
}
.lg\:flex-row {
@media (width >= 64rem) {
flex-direction: row;
}
}
.lg\:justify-start {
@media (width >= 64rem) {
justify-content: flex-start;
}
}
.lg\:gap-10 {
@media (width >= 64rem) {
gap: calc(var(--spacing) * 10);
}
}
.lg\:gap-16 {
@media (width >= 64rem) {
gap: calc(var(--spacing) * 16);
}
}
.lg\:border-r {
@media (width >= 64rem) {
border-right-style: var(--tw-border-style);
@@ -4637,6 +4822,11 @@
padding-bottom: calc(var(--spacing) * 8);
}
}
.lg\:text-left {
@media (width >= 64rem) {
text-align: left;
}
}
.xl\:grid-cols-4 {
@media (width >= 80rem) {
grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -5484,6 +5674,14 @@
transform: translateY(0);
}
}
@keyframes plus-breathe {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {