210 lines
13 KiB
HTML
210 lines
13 KiB
HTML
{% extends 'marketing/base.html' %}
|
||
|
||
{% block title %}Transcription IA conforme Loi 25 — DictIA pour avocats, CPA, secteur public{% endblock %}
|
||
{% block description %}DictIA transcrit vos réunions confidentielles 100% au Québec. Conforme Loi 25, Barreau, CPA, ChAD. Conçu avec 9 ordres professionnels — lancement printemps 2026.{% endblock %}
|
||
|
||
{% block content %}
|
||
{# ===== HERO ===== #}
|
||
<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">
|
||
{# Orb 1 — primary blue, top-left #}
|
||
<div class="absolute top-1/4 left-1/4 w-[600px] h-[600px] rounded-full opacity-100"
|
||
style="background: radial-gradient(circle, rgba(0,98,255,0.16) 0%, transparent 60%); filter: blur(40px);"></div>
|
||
{# Orb 2 — cyan, mid-right #}
|
||
<div class="absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full"
|
||
style="background: radial-gradient(circle, rgba(0,189,216,0.07) 0%, transparent 60%); filter: blur(40px);"></div>
|
||
{# Orb 3 — accent green, bottom-left #}
|
||
<div class="absolute bottom-1/4 left-1/3 w-[400px] h-[400px] rounded-full"
|
||
style="background: radial-gradient(circle, rgba(0,200,150,0.11) 0%, transparent 60%); filter: blur(40px);"></div>
|
||
{# Subtle grid overlay (FlexiHub signature) #}
|
||
<div class="absolute inset-0"
|
||
style="background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 40px 40px;"></div>
|
||
{# Horizontal accent line — gradient blue→cyan→transparent #}
|
||
<div class="absolute top-1/3 left-0 right-0 h-px"
|
||
style="background: linear-gradient(90deg, transparent, rgba(0,98,255,0.3), rgba(0,189,216,0.2), transparent);"></div>
|
||
</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>
|
||
|
||
{# 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>
|
||
|
||
{# 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') }}
|
||
</div>
|
||
|
||
{# Social proof microcopy — defensible: refers to pre-launch waitlist + factual ordres pros count #}
|
||
<p class="mt-8 text-sm text-white/50 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>
|
||
</div>
|
||
</section>
|
||
|
||
{# ===== TRUST BAR ===== #}
|
||
<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>
|
||
|
||
{# 4 KPI metrics — defensible numbers with footnote attribution #}
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||
{% for kpi in [
|
||
('~5 min', 'par heure d\'audio', 'Traitement local 30× temps réel sur GPU RTX'),
|
||
('95 %+', 'précision FR-CA', 'WhisperX Large-v3 — test interne 2026-Q1'),
|
||
('0 $', 'frais par utilisateur', 'Modèle par serveur, volume illimité'),
|
||
('100 %', 'local au Québec', 'OVH Beauharnois ou vos serveurs')
|
||
] %}
|
||
<div class="text-center">
|
||
<div class="text-4xl font-black grad-text mb-2">{{ kpi[0] | safe }}</div>
|
||
<div class="text-sm font-semibold text-brand-navy mb-1">{{ kpi[1] }}</div>
|
||
<div class="text-xs text-brand-navy/60">{{ kpi[2] }}</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
{# Footnote — discloses methodology for the 95% claim (LPC art. 219 hygiene) #}
|
||
<p class="text-xs text-brand-navy/70 text-center mt-8 max-w-2xl mx-auto">
|
||
Précision mesurée sur un échantillon interne d'audio professionnel québécois (juridique, médical, municipal) — méthodologie disponible sur demande à <a href="mailto:info@dictia.ca" class="hover:text-brand-navy">info@dictia.ca</a>.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{# ===== PROBLÈME (P de PAS) ===== #}
|
||
<section class="bg-brand-bg py-20" aria-labelledby="probleme-title">
|
||
<div class="max-w-[1200px] mx-auto px-6">
|
||
<div class="text-center max-w-2xl mx-auto mb-12">
|
||
<p class="eyebrow grad-text mb-4">LE PROBLÈME — TRANSCRIPTION CLOUD</p>
|
||
<h2 id="probleme-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4">
|
||
Vos réunions confidentielles dans Teams Copilot ou Otter.ai
|
||
<span class="grad-text">violent la Loi 25</span>.
|
||
</h2>
|
||
<p class="text-lg text-brand-navy/70">
|
||
Le transfert de données vocales hors-Québec sans consentement explicite expose les professionnels réglementés à des sanctions disciplinaires de leurs ordres et à des amendes CAI jusqu'à 25 M$ ou 4 % du chiffre d'affaires mondial.
|
||
</p>
|
||
</div>
|
||
|
||
{# 3 problem cards on white surface — Cloud Act, Loi 25, Sanctions #}
|
||
<div class="grid md:grid-cols-3 gap-6 mt-12">
|
||
{% for card in [
|
||
('Cloud Act', 'Loi américaine 2018', 'Microsoft, Google et OpenAI sont soumis au Cloud Act. Vos données peuvent être saisies par les autorités américaines sans votre consentement ni notification — y compris les enregistrements de vos réunions client.', '⚖️'),
|
||
('Loi 25 — biométrie', 'Sanction CAI jusqu\'à 25 M$', 'La voix est une donnée biométrique au sens de l\'article 60.1 LPRPSP. Tout traitement nécessite un consentement explicite, une déclaration CAI et un transfert vers un territoire offrant une protection équivalente — ce que les États-Unis n\'offrent pas.', '🛡️'),
|
||
('Sanctions disciplinaires', '~250 000 pros réglementés QC (CIQ)', 'Les ordres professionnels québécois — au premier rang desquels le Barreau, la Chambre des notaires et CPA Québec — exigent une obligation stricte de confidentialité. Le transfert de données client hors-juridiction sans consentement explicite peut être qualifié de manquement, jusqu\'à la radiation pour les fautes graves.', '⚠️')
|
||
] %}
|
||
<article class="bg-white p-6 rounded-[0.75rem] border border-brand-border">
|
||
<div class="text-3xl mb-4" aria-hidden="true">{{ card[3] }}</div>
|
||
<h3 class="text-lg font-bold mb-1 text-brand-navy">{{ card[0] }}</h3>
|
||
<p class="text-xs uppercase tracking-wider text-brand-navy/70 mb-3 font-semibold">{{ card[1] | safe }}</p>
|
||
<p class="text-sm text-brand-navy/70 leading-relaxed">{{ card[2] | safe }}</p>
|
||
</article>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{# ===== SOLUTION (S de PAS) ===== #}
|
||
<section class="relative bg-brand-navy text-white py-20 overflow-hidden" aria-labelledby="solution-title">
|
||
{# Single subtle orb in solution bg — less busy than hero #}
|
||
<div class="absolute top-1/2 right-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true"
|
||
style="background: radial-gradient(circle, rgba(0,200,150,0.08) 0%, transparent 60%); filter: blur(60px);"></div>
|
||
|
||
<div class="relative max-w-[1200px] mx-auto px-6">
|
||
<div class="text-center max-w-2xl mx-auto mb-12">
|
||
<p class="eyebrow grad-text mb-4">LA SOLUTION — DICTIA</p>
|
||
<h2 id="solution-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4">
|
||
Conforme <span class="grad-text">par design</span>, pas par défaut.
|
||
</h2>
|
||
<p class="text-lg text-white/70">
|
||
DictIA reproduit la précision des outils cloud — WhisperX Large-v3 + Mistral 7B — mais avec une architecture où vos données ne quittent jamais vos murs ou nos serveurs OVH Beauharnois.
|
||
</p>
|
||
</div>
|
||
|
||
{# 3 solution pillars — dark cards with grad-bg icon corners #}
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
{% for pillar in [
|
||
('100 % local', 'Vos données ne sortent jamais de vos murs. Inférence GPU sur place ou VPS Québec OVH Beauharnois — vous gardez le contrôle, l\'audit, et les clés.'),
|
||
('Conforme Loi 25', 'Audit trail intégré (qui a écouté quoi, quand). Déclaration CAI prête. Consentement explicite tracé pour chaque enregistrement. Code source AGPL v3 — transparence vérifiable.'),
|
||
('Précision FR-CA', 'WhisperX Large-v3 fine-tuné français québécois. Diarisation pyannote 8 locuteurs. Résumés Mistral 7B local — aucune connexion OpenAI/Google/Microsoft.')
|
||
] %}
|
||
<article class="bg-white/[0.05] backdrop-blur-sm p-6 rounded-[0.75rem] border border-white/[0.08]">
|
||
<div class="w-10 h-10 grad-bg rounded-[0.5rem] mb-4 flex items-center justify-center font-black text-white shadow-cta" aria-hidden="true">✓</div>
|
||
<h3 class="text-lg font-bold mb-2 text-white">{{ pillar[0] | safe }}</h3>
|
||
<p class="text-sm text-white/70 leading-relaxed">{{ pillar[1] | safe }}</p>
|
||
</article>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{# ===== BENTO FEATURES ===== #}
|
||
<section class="bg-white py-20" aria-labelledby="bento-title">
|
||
<div class="max-w-[1060px] mx-auto px-6">
|
||
<div class="text-center max-w-2xl mx-auto mb-12">
|
||
<p class="eyebrow grad-text mb-4">FONCTIONNALITÉS</p>
|
||
<h2 id="bento-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black text-brand-navy">
|
||
Tout ce dont vous avez besoin, <span class="grad-text">rien que vous n'ayez besoin</span>.
|
||
</h2>
|
||
</div>
|
||
|
||
{% from 'macros/bento.html' import bento_card %}
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-[1.5px] bg-brand-border rounded-[18px] overflow-hidden">
|
||
{{ bento_card('01', 'Transcription WhisperX', 'Large-v3 fine-tuné FR-CA. Précision 95 %+ sur réunions, dictées, audiences (méthodologie disponible sur demande).', '🎙️') }}
|
||
{{ bento_card('02', 'Diarisation 8 locuteurs', 'pyannote sépare automatiquement les intervenants. Identification par embeddings.', '👥') }}
|
||
{{ bento_card('03', 'Résumés Mistral 7B', 'IA locale génère résumés, points d\'action et procès-verbaux. Aucune connexion cloud.', '📝') }}
|
||
{{ bento_card('04', 'Q&R sur enregistrement', 'Posez des questions à vos réunions. RAG local sur embeddings sentence-transformers.', '💬') }}
|
||
{{ bento_card('05', 'Exports multiples', 'DOCX, PDF, SRT, VTT, TXT, JSON, MD. Formats avocat, notaire, CPA.', '📄') }}
|
||
{{ bento_card('06', 'Intégrations', 'Word, Outlook, Teams, Notion, Obsidian, Zapier, Make, n8n.', '🔌') }}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% endblock %}
|