feat(marketing): A-2.7a footer 4-col + comparatif table + conformité 4 pillars
- Replace placeholder _footer.html with full 4-column footer (Brand, Produit, Légal, Compte) — added aria-labelledby landmark, sr-only headings, address block, tel: link, external-link new-tab announcements, NBSP per OQLF - Add Comparatif section: DictIA vs MS Teams vs Otter.ai vs Whisper local on 6 criteria. Sourced (politiques publiques + grilles officielles 2026-04-27), trademark disclaimer, responsive table with sr-only caption + scope attrs - Add Conformité forteresse section: 4 pillars (OVH Beauharnois, mapped Loi 25 LPRPSP refs, compatible Cadre IA LGGRI, AGPL v3 verifiable Gitea link) - Soft hedges throughout: 'mappé', 'conçu avec', 'compatible' (no 'certifié', 'endossé', 'reconnu' — LPC art. 219 / Competition Act s. 52 hygiene) - 11 new tests covering footer landmarks, comparatif sourcing, conformité hedges, WCAG /70 contrast, and forbidden competitive claim regressions Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Allison
@@ -1,13 +1,61 @@
|
||||
<footer class="bg-brand-navy2 text-white py-12 mt-20">
|
||||
<div class="max-w-[1200px] mx-auto px-6 text-center">
|
||||
<p class="text-sm text-white/60">
|
||||
© 2026 DictIA Inc. · 77 ch. de la Seigneurie, Inverness QC G0S 1K0 ·
|
||||
<a href="mailto:info@dictia.ca" class="hover:text-white">info@dictia.ca</a>
|
||||
</p>
|
||||
<p class="text-xs text-white/40 mt-2">
|
||||
<a href="/legal/conditions" class="hover:text-white">Conditions</a> ·
|
||||
<a href="/legal/confidentialite" class="hover:text-white">Confidentialité (Loi 25)</a> ·
|
||||
<a href="/legal/cookies" class="hover:text-white">Cookies</a>
|
||||
</p>
|
||||
<footer class="bg-brand-navy2 text-white py-16 mt-20" aria-labelledby="footer-heading">
|
||||
<h2 id="footer-heading" class="sr-only">Navigation du pied de page</h2>
|
||||
<div class="max-w-[1200px] mx-auto px-6">
|
||||
<div class="grid md:grid-cols-4 gap-8 mb-12">
|
||||
|
||||
{# Column 1 — Brand + contact #}
|
||||
<div>
|
||||
<a href="/" class="font-black text-xl grad-text" aria-label="DictIA — page d'accueil">DictIA</a>
|
||||
<p class="text-sm text-white/70 mt-3">Transcription IA conforme Loi 25, conçue au Québec.</p>
|
||||
<address class="not-italic text-xs text-white/70 mt-4 leading-relaxed">
|
||||
77 ch. de la Seigneurie<br>
|
||||
Inverness QC G0S 1K0<br>
|
||||
<a href="tel:+15819968471" class="hover:text-white">(581) 996-8471</a><br>
|
||||
<a href="mailto:info@dictia.ca" class="hover:text-white">info@dictia.ca</a>
|
||||
</address>
|
||||
</div>
|
||||
|
||||
{# Column 2 — Produit #}
|
||||
<nav aria-label="Produit">
|
||||
<p class="eyebrow text-white/70 mb-4">Produit</p>
|
||||
<ul class="space-y-2 text-sm text-white/70">
|
||||
<li><a href="/fonctionnalites" class="hover:text-white">Fonctionnalités</a></li>
|
||||
<li><a href="/tarifs" class="hover:text-white">Tarifs</a></li>
|
||||
<li><a href="/conformite" class="hover:text-white">Conformité</a></li>
|
||||
<li><a href="/blog" class="hover:text-white">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{# Column 3 — Légal #}
|
||||
<nav aria-label="Légal">
|
||||
<p class="eyebrow text-white/70 mb-4">Légal</p>
|
||||
<ul class="space-y-2 text-sm text-white/70">
|
||||
<li><a href="/legal/conditions" class="hover:text-white">Conditions d'utilisation</a></li>
|
||||
<li><a href="/legal/confidentialite" class="hover:text-white">Confidentialité (Loi 25)</a></li>
|
||||
<li><a href="/legal/cookies" class="hover:text-white">Cookies</a></li>
|
||||
<li><a href="/legal/remboursement" class="hover:text-white">Remboursement</a></li>
|
||||
<li><a href="/legal/accessibilite" class="hover:text-white">Accessibilité</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{# Column 4 — Compte #}
|
||||
<nav aria-label="Compte">
|
||||
<p class="eyebrow text-white/70 mb-4">Compte</p>
|
||||
<ul class="space-y-2 text-sm text-white/70">
|
||||
<li><a href="/login" class="hover:text-white">Connexion</a></li>
|
||||
<li><a href="/signup" class="hover:text-white">Créer un compte</a></li>
|
||||
<li><a href="/contact" class="hover:text-white">Contact</a></li>
|
||||
<li><a href="https://gitea.innova-ai.ca/Innova-AI/dictia-public" target="_blank" rel="noopener" class="hover:text-white">Code source AGPL <span aria-hidden="true">↗</span><span class="sr-only">(s'ouvre dans un nouvel onglet)</span></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="pt-8 border-t border-white/[0.045] flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-white/70">
|
||||
<p>© 2026 DictIA Inc. · AGPL v3 · Fait au Québec</p>
|
||||
<div class="flex gap-4">
|
||||
<a href="https://www.linkedin.com/company/dictiaqc" rel="noopener" target="_blank" class="hover:text-white">LinkedIn</a>
|
||||
<a href="https://www.facebook.com/dictiaqc" rel="noopener" target="_blank" class="hover:text-white">Facebook</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -283,6 +283,153 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# ===== COMPARATIF ===== #}
|
||||
<section class="bg-white py-20" aria-labelledby="comparatif-title">
|
||||
<div class="max-w-[1200px] mx-auto px-6">
|
||||
<div class="text-center max-w-3xl mx-auto mb-12">
|
||||
<p class="eyebrow grad-text mb-4">COMPARATIF</p>
|
||||
<h2 id="comparatif-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
|
||||
DictIA face aux solutions cloud américaines.
|
||||
</h2>
|
||||
<p class="text-lg text-brand-navy/70">
|
||||
Comparaison factuelle au 2026-04-27. Sources : politiques de confidentialité publiques + grilles tarifaires officielles. Détails sur demande : <a href="mailto:info@dictia.ca" class="grad-text font-semibold hover:underline">info@dictia.ca</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto rounded-[18px] border border-brand-border">
|
||||
<table class="w-full min-w-[720px] text-sm">
|
||||
<caption class="sr-only">Comparaison DictIA, Microsoft Teams Premium, Otter.ai Business, Whisper local sur 6 critères</caption>
|
||||
<thead class="bg-brand-bg">
|
||||
<tr>
|
||||
<th scope="col" class="text-left p-4 font-bold text-brand-navy">Critère</th>
|
||||
<th scope="col" class="p-4 font-bold text-brand-navy">DictIA</th>
|
||||
<th scope="col" class="p-4 font-bold text-brand-navy/70">MS Teams Premium</th>
|
||||
<th scope="col" class="p-4 font-bold text-brand-navy/70">Otter.ai Business</th>
|
||||
<th scope="col" class="p-4 font-bold text-brand-navy/70">Whisper local (DIY)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-brand-border">
|
||||
{% for row in [
|
||||
{
|
||||
'critere': 'Conforme Loi 25 sans transfert hors-Québec',
|
||||
'dictia': '✓ Hébergement OVH Beauharnois',
|
||||
'teams': '⚠ Soumis Cloud Act (US)',
|
||||
'otter': '✗ Hébergement US',
|
||||
'whisper': '✓ Aucun transfert (local)'
|
||||
},
|
||||
{
|
||||
'critere': 'Exposé au Cloud Act US',
|
||||
'dictia': '✗ Aucune exposition',
|
||||
'teams': '✓ Microsoft = entité US',
|
||||
'otter': '✓ Otter.ai Inc. = US',
|
||||
'whisper': '✗ Local'
|
||||
},
|
||||
{
|
||||
'critere': 'WhisperX Large-v3 fine-tuné FR-CA',
|
||||
'dictia': '✓ FR-CA optimisé',
|
||||
'teams': '⚠ FR générique (FR-FR)',
|
||||
'otter': '✗ Anglais privilégié',
|
||||
'whisper': '⚠ FR générique de base'
|
||||
},
|
||||
{
|
||||
'critere': 'Diarisation 8 + locuteurs (pyannote)',
|
||||
'dictia': '✓ Jusqu\'à 8',
|
||||
'teams': '⚠ Limité ~6 (Premium)',
|
||||
'otter': '✓ Variable',
|
||||
'whisper': '✗ Non incluse'
|
||||
},
|
||||
{
|
||||
'critere': 'Coût par utilisateur/mois',
|
||||
'dictia': '0 $ (forfait fixe)',
|
||||
'teams': '~14 $ CAD (Premium)',
|
||||
'otter': '~20 $ US (Business)',
|
||||
'whisper': '0 $ (mais GPU + DevOps requis)'
|
||||
},
|
||||
{
|
||||
'critere': 'Audit trail intégré (Loi 25 art. 3.5)',
|
||||
'dictia': '✓ Inclus par défaut',
|
||||
'teams': '⚠ Via M365 Audit séparé',
|
||||
'otter': '⚠ Logs basiques seulement',
|
||||
'whisper': '✗ À développer soi-même'
|
||||
}
|
||||
] %}
|
||||
<tr class="hover:bg-brand-bg/50 transition-colors">
|
||||
<th scope="row" class="text-left p-4 font-semibold text-brand-navy/80">{{ row.critere | safe }}</th>
|
||||
<td class="p-4 text-center font-semibold text-brand-navy">
|
||||
<span class="inline-block px-2 py-1 rounded-md bg-brand-b3/10 text-brand-navy">{{ row.dictia | safe }}</span>
|
||||
</td>
|
||||
<td class="p-4 text-center text-brand-navy/70">{{ row.teams | safe }}</td>
|
||||
<td class="p-4 text-center text-brand-navy/70">{{ row.otter | safe }}</td>
|
||||
<td class="p-4 text-center text-brand-navy/70">{{ row.whisper | safe }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-brand-navy/70 mt-6 text-center max-w-3xl mx-auto">
|
||||
Comparatif établi à partir de sources publiques (politiques de confidentialité, grilles tarifaires officielles, documentation produit) au 2026-04-27. Microsoft Teams Premium et Otter.ai sont des marques déposées de leurs propriétaires respectifs. DictIA n'est pas affilié à ces produits.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# ===== CONFORMITÉ FORTERESSE ===== #}
|
||||
<section class="bg-brand-navy text-white py-20 overflow-hidden relative" aria-labelledby="conformite-title">
|
||||
{# Subtle decorative orb — green this time, like the Solution section #}
|
||||
<div class="absolute top-1/3 left-1/4 w-[500px] h-[500px] rounded-full pointer-events-none" aria-hidden="true"
|
||||
style="background: radial-gradient(circle, rgba(0,200,150,0.07) 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">CONFORMITÉ — FORTERESSE QUÉBÉCOISE</p>
|
||||
<h2 id="conformite-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4">
|
||||
Architecture <span class="grad-text">conçue avec</span> les exigences professionnelles québécoises.
|
||||
</h2>
|
||||
<p class="text-lg text-white/70">
|
||||
DictIA mappe son architecture aux cadres réglementaires applicables au secteur public et aux ordres professionnels du Québec. Détails techniques (EFVP, audit trail, déclaration CAI) disponibles sur demande : <a href="mailto:info@dictia.ca" class="grad-text font-semibold hover:underline">info@dictia.ca</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{# 4 conformity pillars — dark cards with grad-bg icon corners (matches Solution pillars style) #}
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{% for card in [
|
||||
{
|
||||
'icon': '🇨🇦',
|
||||
'title': 'Hébergement OVH Beauharnois',
|
||||
'desc': 'Centre de données SOC 2 Type II en territoire québécois. Aucune sortie de juridiction sans consentement explicite et tracé.'
|
||||
},
|
||||
{
|
||||
'icon': '⚖️',
|
||||
'title': 'Mappé Loi 25 (LPRPSP)',
|
||||
'desc': 'Audit trail art. 3.5, EFVP préparée art. 3.3, registre des consentements art. 14. Modèles de déclaration CAI fournis.'
|
||||
},
|
||||
{
|
||||
'icon': '🏛️',
|
||||
'title': 'Compatible Cadre IA secteur public',
|
||||
'desc': 'DictIA est conçu pour s\'inscrire dans le cadre de gestion des systèmes d\'IA du secteur public québécois (LGGRI). Documentation détaillée sur demande.'
|
||||
},
|
||||
{
|
||||
'icon': '🔓',
|
||||
'title': 'Code source AGPL v3 vérifiable',
|
||||
'desc': 'Architecture entièrement auditable sur <a href="https://gitea.innova-ai.ca/Innova-AI/dictia-public" target="_blank" rel="noopener" class="underline hover:text-white">Gitea public</a>. Aucune boîte noire. Vos auditeurs peuvent examiner chaque ligne.'
|
||||
}
|
||||
] %}
|
||||
<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 text-lg shadow-cta" aria-hidden="true">{{ card.icon }}</div>
|
||||
<h3 class="text-lg font-bold mb-2 text-white">{{ card.title | safe }}</h3>
|
||||
<p class="text-sm text-white/80 leading-relaxed">{{ card.desc | safe }}</p>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-10">
|
||||
<p class="text-sm text-white/70">
|
||||
Lancement prévu : <strong class="text-white">printemps 2026</strong>. Pré-inscription ouverte.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
|
||||
Reference in New Issue
Block a user