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 {

384
templates/marketing/landing.html
View File

@@ -5,6 +5,33 @@
{% block content %}
{# ===== HERO ===== #}
{# Local keyframes scoped to the hero — audio progress bar loops 50%→75%→50% over 15s #}
<style>
@keyframes audio-progress {
0%, 100% { width: 50%; }
50% { width: 75%; }
}
.hero-audio-progress { animation: audio-progress 15s ease-in-out infinite; }
.hero-audio-thumb { animation: audio-progress 15s ease-in-out infinite; }
/* Mockup tilt + interactive hover — straightens on hover */
@media (min-width: 1024px) {
.hero-mockup-tilt { transform: rotate(1deg); transition: transform 500ms ease-out; }
.hero-mockup-tilt:hover { transform: rotate(0deg) scale(1.01); }
}
/* Glow orbs decorative float — uses tc-float-y from tailwind.config */
.hero-mockup-glow-a { animation: tc-float-y 6s ease-in-out infinite; }
.hero-mockup-glow-b { animation: tc-float-y 8s ease-in-out infinite reverse; }
/* Reduced-motion: freeze all hero mockup animations on first frame */
@media (prefers-reduced-motion: reduce) {
.hero-audio-progress, .hero-audio-thumb,
.hero-mockup-glow-a, .hero-mockup-glow-b {
animation: none !important;
}
.hero-audio-progress { width: 60% !important; }
.hero-audio-thumb { left: 60% !important; }
.hero-mockup-tilt { transform: none !important; transition: none !important; }
}
</style>
<section class="relative overflow-hidden bg-brand-navy text-white py-24 md:py-32" aria-labelledby="hero-title">
{# Cosmic orbs background — 3 radial gradients (blue 16%, cyan 7%, green 11%) + subtle grid + horizontal accent line #}
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
@@ -26,76 +53,317 @@
</div>
<div class="relative max-w-[1200px] mx-auto px-6">
<div class="max-w-3xl mx-auto text-center">
{# Eyebrow with gradient text and 0.18em tracking #}
<p class="eyebrow grad-text mb-6 animate-tc-fade-in-up" style="animation-delay: 0ms; animation-fill-mode: backwards;">
TRANSCRIPTION IA · CONFORME LOI 25 · QUÉBEC
</p>
{# 2-col grid on lg+: text left, app mockup right. On <lg, mockup hidden, text centered as before. #}
<div class="grid lg:grid-cols-[1fr_minmax(0,560px)] gap-12 lg:gap-16 items-center">
{# ---------- COLUMN LEFT: hero copy ---------- #}
<div class="text-center lg:text-left max-w-3xl mx-auto lg:mx-0">
{# Eyebrow with gradient text and 0.18em tracking #}
<p class="eyebrow grad-text mb-6 animate-tc-fade-in-up" style="animation-delay: 0ms; animation-fill-mode: backwards;">
TRANSCRIPTION IA · CONFORME LOI 25 · QUÉBEC
</p>
{# H1 — clamp typography + grad-text accent on key phrase #}
<h1 id="hero-title" class="text-[clamp(2.5rem,4vw,4rem)] font-black leading-[1.05] mb-6 animate-tc-fade-in-up" style="animation-delay: 75ms; animation-fill-mode: backwards;">
Transcrivez vos réunions
<span class="grad-text">sans risquer votre permis</span>.
</h1>
{# H1 — clamp typography + grad-text accent on key phrase #}
<h1 id="hero-title" class="text-[clamp(2.5rem,4vw,4rem)] font-black leading-[1.05] mb-6 animate-tc-fade-in-up" style="animation-delay: 75ms; animation-fill-mode: backwards;">
Transcrivez vos réunions
<span class="grad-text">sans risquer votre permis</span>.
</h1>
{# Sub-headline — ≤25 words, value prop #}
<p class="text-lg text-white/70 max-w-2xl mx-auto mb-10 animate-tc-fade-in-up" style="animation-delay: 150ms; animation-fill-mode: backwards;">
DictIA convertit vos audio en texte, résumé et points d'action — 100% au Québec, conforme Barreau, CPA Québec, ChAD et 6 autres ordres professionnels.
</p>
{# Sub-headline — ≤25 words, value prop #}
<p class="text-lg text-white/70 max-w-xl mx-auto lg:mx-0 mb-10 animate-tc-fade-in-up" style="animation-delay: 150ms; animation-fill-mode: backwards;">
DictIA convertit vos audio en texte, résumé et points d'action — 100% au Québec, conforme Barreau, CPA Québec, ChAD et 6 autres ordres professionnels.
</p>
{# Dual CTA — primary (demo) + secondary ghost (pricing) #}
<div class="flex flex-col sm:flex-row gap-3 justify-center animate-tc-fade-in-up" style="animation-delay: 300ms; animation-fill-mode: backwards;">
{% from 'macros/button.html' import button %}
{{ button('Réserver une démo', href='/contact', variant='primary', size='lg') }}
{{ button('Voir les tarifs', href='/tarifs', variant='ghost', size='lg', icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>') }}
{# Dual CTA — primary (demo) + secondary ghost (pricing) #}
<div class="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start animate-tc-fade-in-up" style="animation-delay: 300ms; animation-fill-mode: backwards;">
{% from 'macros/button.html' import button %}
{{ button('Réserver une démo', href='/contact', variant='primary', size='lg') }}
{{ button('Voir les tarifs', href='/tarifs', variant='ghost', size='lg', icon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>') }}
</div>
{# Social proof microcopy — defensible: refers to pre-launch waitlist + factual ordres pros count #}
<p class="mt-8 text-sm text-white/70 flex flex-wrap items-center justify-center lg:justify-start gap-x-2 gap-y-1 animate-tc-fade-in-up" style="animation-delay: 400ms; animation-fill-mode: backwards;">
<span class="inline-flex items-center gap-1.5">
<svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" class="text-brand-b3" aria-hidden="true">
<path d="M10 2L3 5v5.5c0 4.04 2.84 7.85 7 8.5 4.16-.65 7-4.46 7-8.5V5l-7-3z"/>
</svg>
<span>Conçu avec 9 ordres professionnels québécois</span>
</span>
<span class="text-white/30">·</span>
<span>Pré-inscription ouverte</span>
<span class="text-white/30">·</span>
<span>Lancement printemps 2026</span>
</p>
</div>
{# Social proof microcopy — defensible: refers to pre-launch waitlist + factual ordres pros count #}
<p class="mt-8 text-sm text-white/70 animate-tc-fade-in-up" style="animation-delay: 400ms; animation-fill-mode: backwards;">
<span class="inline-flex items-center gap-1.5">
<svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" class="text-brand-b3" aria-hidden="true">
<path d="M10 2L3 5v5.5c0 4.04 2.84 7.85 7 8.5 4.16-.65 7-4.46 7-8.5V5l-7-3z"/>
</svg>
<span>Conçu avec 9 ordres professionnels québécois</span>
</span>
<span class="mx-2 text-white/30">·</span>
<span>Pré-inscription ouverte</span>
<span class="mx-2 text-white/30">·</span>
<span>Lancement printemps 2026</span>
</p>
</div>
{# ---------- COLUMN RIGHT: app mockup (lg+ only) ---------- #}
<div class="hidden lg:block relative animate-tc-fade-in-up" style="animation-delay: 250ms; animation-fill-mode: backwards;">
{# Decorative glow orbs floating behind the mockup #}
<div class="absolute -inset-8 pointer-events-none" aria-hidden="true">
<div class="hero-mockup-glow-a absolute -top-10 -left-10 w-72 h-72 rounded-full bg-brand-b1/15 blur-3xl"></div>
<div class="hero-mockup-glow-b absolute -bottom-10 -right-6 w-64 h-64 rounded-full bg-brand-b3/10 blur-3xl"></div>
</div>
{# The mockup itself — role=img with descriptive label for screen readers #}
<div role="img"
aria-label="Aperçu de l'interface DictIA — liste d'enregistrements à gauche, transcription au centre, résumé IA à droite"
class="hero-mockup-tilt relative bg-brand-navy2 border border-white/[0.08] shadow-2xl shadow-black/40 rounded overflow-hidden">
{# A) Browser chrome / window header (h-8) #}
<div class="flex items-center px-3 h-8 border-b border-white/[0.06] bg-white/[0.03]" aria-hidden="true">
{# Traffic light dots #}
<div class="flex items-center gap-1.5">
<span class="block w-3 h-3 rounded-full" style="background:#ff5f57"></span>
<span class="block w-3 h-3 rounded-full" style="background:#febc2e"></span>
<span class="block w-3 h-3 rounded-full" style="background:#28c840"></span>
</div>
{# Centered tab label #}
<div class="flex-1 text-center text-[11px] font-medium text-white/60 tracking-tight">DictIA — Enquêter</div>
{# Expand icon #}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5 text-white/40">
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
</svg>
</div>
{# B) Main app area — 3 sub-columns (sidebar / center / summary), h-[460px] #}
<div class="grid grid-cols-[180px_1fr_170px] h-[460px]"
x-data="{ idx: 0 }"
x-init="$el.__hero_int = setInterval(() => { idx = (idx + 1) % 5 }, 2800)">
{# B1 — SIDEBAR (left) #}
<aside class="border-r border-white/[0.06] flex flex-col overflow-hidden">
{# Sidebar header — DictIA monogram + JD avatar #}
<div class="flex items-center justify-between px-3 py-2.5 border-b border-white/[0.05]">
<span class="grad-text font-black text-[13px] tracking-tight">DictIA</span>
<span class="grad-bg rounded-full w-6 h-6 flex items-center justify-center text-[10px] font-bold text-white">JD</span>
</div>
{# New recording button — rounded-none brutalist #}
<div class="px-2 pt-2">
<button type="button" class="grad-bg w-full inline-flex items-center justify-center gap-1.5 py-2 text-[11px] font-semibold rounded-none" tabindex="-1" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="M12 5v14M5 12h14"/></svg>
<span>Nouvel Enregistrement</span>
</button>
</div>
{# Search input #}
<div class="px-2 pt-2">
<div class="relative">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-white/40"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
<div class="bg-white/[0.05] border border-white/[0.06] py-1.5 pl-7 pr-2 text-[10px] text-white/40 rounded-none">Rechercher…</div>
</div>
</div>
{# Sidebar list — scrollable area #}
<div class="flex-1 overflow-hidden mt-3 px-1">
{# Group: Semaine dernière #}
<p class="px-2 text-[9px] uppercase tracking-[0.12em] text-white/40 font-bold mb-1.5">Semaine dernière</p>
{# Item 1 — ACTIVE #}
<div class="px-2 py-2 mb-1 bg-white/[0.08] border-l-2 border-brand-b1">
<p class="text-[11px] text-white font-semibold truncate">Dossier Beaumont — clauses 7 et 9</p>
<p class="text-[9px] text-white/50 truncate mt-0.5">Jeu · Me Roy, Jean T., Marie C.</p>
<span class="inline-block mt-1 rounded-full bg-blue-500/20 text-blue-300 text-[9px] px-2 py-0.5 font-medium">En cours</span>
</div>
{# Item 2 #}
<div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
<p class="text-[11px] text-white/90 truncate">Succession Gagnon — répartition…</p>
<p class="text-[9px] text-white/50 truncate mt-0.5">26 févr. · Me Gagnon, Client</p>
</div>
{# Group: Mois dernier #}
<p class="px-2 mt-3 text-[9px] uppercase tracking-[0.12em] text-white/40 font-bold mb-1.5">Mois dernier</p>
{# Item 3 #}
<div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
<p class="text-[11px] text-white/90 truncate">Consultation Tremblay — litige loc…</p>
<p class="text-[9px] text-white/50 truncate mt-0.5">19 févr. · Me Roy, Sophie T.</p>
</div>
{# Item 4 — Barreau Confidentiel #}
<div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
<p class="text-[11px] text-white/90 truncate">Réunion constitutive INC Bédard…</p>
<p class="text-[9px] text-white/50 truncate mt-0.5">10 févr. · Sophie B., Jean R.</p>
<span class="inline-block mt-1 rounded-full bg-purple-500/20 text-purple-300 text-[9px] px-2 py-0.5 font-medium">Barreau Confidentiel</span>
</div>
{# Item 5 — CPA Corporatif #}
<div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
<p class="text-[11px] text-white/90 truncate">Entretien RQAP et structure salariale</p>
<p class="text-[9px] text-white/50 truncate mt-0.5">10 févr. · Me Roy, Allison, Robert</p>
<span class="inline-block mt-1 rounded-full bg-emerald-500/20 text-emerald-300 text-[9px] px-2 py-0.5 font-medium">CPA Corporatif</span>
</div>
{# Item 6 — Urgent Client #}
<div class="px-2 py-2 mb-1 hover:bg-white/[0.04]">
<p class="text-[11px] text-white/90 truncate">Révision contrat Côté &amp; Associés</p>
<p class="text-[9px] text-white/50 truncate mt-0.5">5 févr. · Me Roy, Marie C.</p>
<span class="inline-block mt-1 rounded-full bg-red-500/20 text-red-300 text-[9px] px-2 py-0.5 font-medium">Urgent Client</span>
</div>
</div>
</aside>
{# B2 — CENTER (audio + transcript) #}
<section class="flex flex-col p-3 overflow-hidden">
{# Header card #}
<div class="mb-3">
<h3 class="text-[13px] font-bold text-white">Dossier Beaumont — clauses 7 et 9</h3>
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-[10px] text-white/50">
<span class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span>Me Roy, Jean T., Marie C.</span>
</span>
<span class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
<span>27 févr. 2026</span>
</span>
<span class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
<span>38:47</span>
</span>
<span class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
<span>28.3 MB</span>
</span>
</div>
</div>
{# Audio player block #}
<div class="bg-white/[0.04] p-3 rounded-none">
{# Progress bar #}
<div class="relative h-1 bg-white/10">
<div class="hero-audio-progress h-full grad-bg" style="width:60%"></div>
<div class="hero-audio-thumb absolute -top-1 grad-bg w-3 h-3 rounded-full" style="left:60%; transform: translateX(-50%);"></div>
</div>
{# Time + speed + play row #}
<div class="flex items-center justify-between mt-2">
<div class="text-[10px] font-mono text-white/60">
<span class="text-white/80">28:17</span>
<span class="text-white/30 mx-1">/</span>
<span>46:23</span>
</div>
<div class="flex items-center gap-2">
<span class="text-[9px] text-white/60 px-1.5 py-0.5 bg-white/[0.06] rounded-full font-mono">1x</span>
<button type="button" class="grad-bg w-8 h-8 rounded-full flex items-center justify-center animate-plus-breathe" tabindex="-1" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" class="w-3 h-3"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
</div>
</div>
{# Transcript area — 5 lines, active line cycles via Alpine idx #}
<div class="flex-1 mt-3 overflow-hidden space-y-1.5">
<div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 0 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
<p class="text-[10px]">
<span class="text-brand-b1 font-bold">Allison</span>
<span class="text-white/80 ml-1.5">Tu l'as su? Comment ça va, vous deux?</span>
</p>
</div>
<div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 1 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
<p class="text-[10px]">
<span class="text-brand-b3 font-bold">SPEAKER_02</span>
<span class="text-white/80 ml-1.5">Super bien, super vite, mais très bien.</span>
</p>
</div>
<div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 2 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
<p class="text-[10px]">
<span class="text-brand-b1 font-bold">Allison</span>
<span class="text-white/80 ml-1.5">Oui, oui. Je suis contente d'entendre ça.</span>
</p>
</div>
<div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 3 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
<p class="text-[10px]">
<span class="text-brand-b3 font-bold">SPEAKER_02</span>
<span class="text-white/80 ml-1.5">Moi, je l'ai vu quand vous l'avez payé.</span>
</p>
</div>
<div class="px-2 py-1.5 transition-colors duration-300" :class="idx === 4 ? 'bg-brand-b1/10 border-l-2 border-brand-b1' : 'border-l-2 border-transparent'">
<p class="text-[10px]">
<span class="text-brand-b1 font-bold">Allison</span>
<span class="text-white/80 ml-1.5">J'étais comme, « Hein? »</span>
</p>
</div>
</div>
{# Question input (disabled — visual only) #}
<div class="mt-3">
<input type="text" disabled tabindex="-1" aria-hidden="true"
placeholder="Posez une question sur cette transcription…"
class="w-full bg-white/[0.05] border border-white/10 px-3 py-2 text-[11px] text-white/40 placeholder-white/40 rounded-none">
</div>
</section>
{# B3 — RIGHT pane (summary) #}
<aside class="border-l border-white/[0.06] p-3 overflow-hidden">
{# Tabs #}
<div class="flex items-center gap-3 border-b border-white/[0.06] pb-2 mb-3">
<span class="text-[10px] uppercase tracking-[0.12em] text-brand-b1 font-bold border-b-2 border-brand-b1 pb-1 -mb-[0.5rem]">Résumé</span>
<span class="text-[10px] uppercase tracking-[0.12em] text-white/40 font-medium">Notes</span>
<span class="text-[10px] uppercase tracking-[0.12em] text-white/40 font-medium">Discuter</span>
</div>
{# Summary text #}
<p class="text-[10px] text-white/80 leading-relaxed">
Cette réunion aborde les complexités fiscales et juridiques liées à la création d'un nouveau produit nommé Dictéa…
</p>
{# Key points #}
<p class="mt-3 text-[9px] uppercase tracking-[0.12em] text-white/50 font-bold mb-1.5">Points clés</p>
<ul class="space-y-1 text-[10px] text-white/70 leading-snug">
<li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>Structure de propriété : SNC + INC</span></li>
<li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>RQAP et Salaire : Allison ne peut pas se verser</span></li>
<li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>Subventions : 4 ans à conserver</span></li>
<li class="flex gap-1.5"><span class="text-brand-b1">•</span><span>Exonération des gains personnels</span></li>
</ul>
</aside>
</div>{# /Main app area #}
</div>{# /mockup container #}
</div>{# /column right #}
</div>{# /grid #}
</div>
</section>
{# ===== TRUST BAR ===== #}
{# ===== TRUST BAR — 9 ordres pros ===== #}
<section class="bg-white py-16 border-y border-brand-border" aria-labelledby="trust-bar-title">
<div class="max-w-[1200px] mx-auto px-6">
<p id="trust-bar-title" class="eyebrow text-center text-brand-navy/60 mb-8">
MAPPÉ AUX 9 ORDRES PROFESSIONNELS QUÉBÉCOIS
</p>
{# 9 monogram placeholders — stylized, not official logos (licensing) #}
<div class="grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-9 gap-6 items-center justify-items-center mb-16">
{% for ordre in [
('Barreau du Québec', 'BAR'),
('Chambre des notaires du Québec', 'CNQ'),
('CPA Québec', 'CPA'),
('ChAD — Chambre de l\'assurance de dommages', 'ChAD'),
('OACIQ — Courtage immobilier', 'OACIQ'),
('CMQ — Médecins', 'CMQ'),
('OIIQ — Infirmières', 'OIIQ'),
('OPQ — Pharmaciens', 'OPQ'),
('OEQ — Ergothérapeutes', 'OEQ')
] %}
<div class="flex flex-col items-center group" title="{{ ordre[0] }}">
<div class="w-12 h-12 rounded-full bg-brand-grad flex items-center justify-center font-black text-white text-sm shadow-cta opacity-50 group-hover:opacity-100 transition-opacity duration-300">
{{ ordre[1] }}
</div>
<p class="text-xs mt-2 text-brand-navy/70 group-hover:text-brand-navy transition-colors duration-300">{{ ordre[0] }}</p>
</div>
{% endfor %}
<div class="text-center max-w-xl mx-auto mb-10">
<p id="trust-bar-title" class="eyebrow text-brand-navy/70 mb-3">
Mappé aux 9&nbsp;ordres professionnels québécois
</p>
<p class="text-sm text-brand-navy/70">
L'architecture DictIA est conçue pour répondre aux exigences de confidentialité et d'audit des principaux ordres professionnels du Québec.
</p>
</div>
{# 9 ordres — uniform card grid, official names, profession labels (no repeated acronyms) #}
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mb-14" role="list">
{% for ordre in [
{'acronym': 'Barreau', 'name': 'Barreau du Québec', 'profession': 'Avocats'},
{'acronym': 'CNQ', 'name': 'Chambre des notaires du Québec', 'profession': 'Notaires'},
{'acronym': 'CPA', 'name': 'Ordre des CPA du Québec', 'profession': 'Comptables'},
{'acronym': 'ChAD', 'name': "Chambre de l'assurance de dommages", 'profession': 'Assurance'},
{'acronym': 'OACIQ', 'name': "Organisme d'autoréglementation du courtage immobilier du Québec", 'profession': 'Courtage immobilier'},
{'acronym': 'CMQ', 'name': 'Collège des médecins du Québec', 'profession': 'Médecins'},
{'acronym': 'OIIQ', 'name': 'Ordre des infirmières et infirmiers du Québec', 'profession': 'Infirmières'},
{'acronym': 'OPQ', 'name': 'Ordre des pharmaciens du Québec', 'profession': 'Pharmaciens'},
{'acronym': 'OEQ', 'name': 'Ordre des ergothérapeutes du Québec', 'profession': 'Ergothérapeutes'}
] %}
<li class="flex items-center gap-4 p-4 bg-white border border-brand-border rounded hover:border-brand-b1 transition-colors">
<span class="flex-shrink-0 w-14 h-14 flex items-center justify-center bg-brand-bg border border-brand-border" aria-hidden="true">
<span class="grad-text font-black text-sm tracking-tight">{{ ordre.acronym }}</span>
</span>
<span class="min-w-0 flex-1">
<span class="block text-sm font-semibold text-brand-navy leading-snug">{{ ordre.name | safe }}</span>
<span class="block text-xs uppercase tracking-wider text-brand-navy/60 mt-1">{{ ordre.profession }}</span>
</span>
</li>
{% endfor %}
</ul>
{# 4 KPI metrics — defensible numbers with footnote attribution #}
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
{% for kpi in [