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

feat(marketing): A-2.8a /tarifs + /fonctionnalites standalone pages

Browse Source 
- /tarifs page: extends base.html, reuses pricing_card + button macros,
  shows the 3 forfaits with NBSP-formatted CAD prices, an 8-row deep-dive
  comparison matrix (DictIA 8 vs DictIA 16 vs DictIA Cloud), 5 tarification
  FAQ items (frais cachés, migration, GPU, taxes TPS/TVQ, plans annuels)
  with Alpine accordion + focus-visible WCAG 2.2 AA, CTA section
- /fonctionnalites page: extends base.html, reuses bento_card macro,
  re-renders the 6 features with same content as landing's bento section
  for consistency, adds dedicated 7-format export grid + 8-integration
  grid (with trademark disclaimer) + 6 tech specs section (Whisper/pyannote
  /Mistral/stack/audio/langues), CTA section
- routes.py: add /tarifs and /fonctionnalites routes (passes FAQ to /tarifs
  for the tarification accordion; preserves existing landing(), TESTIMONIALS,
  FAQ data structures unchanged)
- tests/test_marketing_secondary_pages.py: NEW test file (16 tests covering
  routes 200, base.html inheritance, H1 anchors, 3 pricing cards, comparison
  matrix, tarifs FAQ accordion, OQLF typography, 6 bento + 7 exports + 8
  integrations + 6 tech specs sections, canonical meta)
- All sections respect WCAG 2.2 AA, FlexiHub design discipline, LPC art. 219
  hygiene (sourcing dates, trademark disclaimer, hedged claims, NBSP)
This commit is contained in:
Allison
2026-04-27 20:50:07 -04:00
parent 2b3eeb98e0
commit d471626183
5 changed files with 522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
templates/marketing/fonctionnalites.html Normal file
View File

@@ -0,0 +1,144 @@
{% extends 'marketing/base.html' %}
{% block title %}Fonctionnalités DictIA — Transcription IA WhisperX, diarisation, résumés Mistral 7B local{% endblock %}
{% block description %}Toutes les fonctionnalités de DictIA : WhisperX Large-v3 fine-tuné FR-CA, diarisation 8 locuteurs, Mistral 7B local, Q&R RAG, exports DOCX/PDF/SRT, intégrations Word/Outlook/Teams.{% endblock %}
{% block content %}
{# ===== HEADER ===== #}
<section class="bg-brand-navy text-white py-20" aria-labelledby="page-title">
<div class="max-w-[820px] mx-auto px-6 text-center">
<p class="eyebrow grad-text mb-4">FONCTIONNALITÉS</p>
<h1 id="page-title" class="text-[clamp(2.25rem,4vw,3.5rem)] font-black mb-4">
Tout ce qu'il faut pour transcrire <span class="grad-text">en restant chez soi</span>.
</h1>
<p class="text-lg text-white/80">
Une pile technique 100&nbsp;% québécoise, sans dépendance à un fournisseur cloud américain. Détails techniques sur demande&nbsp;: <a href="mailto:info@dictia.ca" class="grad-text font-semibold hover:underline">info@dictia.ca</a>.
</p>
</div>
</section>
{# ===== 6 BENTO FEATURES ===== #}
<section class="bg-white py-20" aria-labelledby="features-title">
<div class="max-w-[1060px] mx-auto px-6">
<h2 id="features-title" class="sr-only">Six fonctionnalités principales</h2>
{% 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&nbsp;%+ 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 vocaux.', '👥') }}
{{ 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&amp;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>
{# ===== EXPORT FORMATS DEEP-DIVE ===== #}
<section class="bg-brand-bg py-20" aria-labelledby="exports-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">FORMATS D'EXPORT</p>
<h2 id="exports-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
7 formats, prêts pour vos workflows.
</h2>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-3">
{% for fmt in [
{'ext': 'DOCX', 'use': 'Word avec timestamps cliquables'},
{'ext': 'PDF', 'use': 'Procès-verbaux signés'},
{'ext': 'SRT', 'use': 'Sous-titres vidéo'},
{'ext': 'VTT', 'use': 'Web/streaming standard'},
{'ext': 'TXT', 'use': 'Texte brut universel'},
{'ext': 'JSON', 'use': 'Pipeline développeur'},
{'ext': 'MD', 'use': 'Notion, Obsidian, GitHub'}
] %}
<div class="bg-white p-4 rounded-[12px] border border-brand-border text-center">
<p class="text-base font-black text-brand-navy">{{ fmt.ext }}</p>
<p class="text-xs text-brand-navy/70 mt-1">{{ fmt.use | safe }}</p>
</div>
{% endfor %}
</div>
</div>
</section>
{# ===== INTEGRATIONS GRID ===== #}
<section class="bg-white py-20" aria-labelledby="integrations-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">INTÉGRATIONS</p>
<h2 id="integrations-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
Branchez DictIA à votre stack existant.
</h2>
<p class="text-base text-brand-navy/70">
Webhooks REST, plugin Word natif, connecteurs Zapier/Make/n8n. API documentée — auto-hébergée avec votre déploiement.
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
{% for integ in [
{'name': 'Microsoft Word', 'desc': 'Plugin natif (.docx)'},
{'name': 'Microsoft Outlook', 'desc': 'Pièces jointes audio'},
{'name': 'Microsoft Teams', 'desc': 'Enregistrements de réunions'},
{'name': 'Notion', 'desc': 'Pages markdown auto'},
{'name': 'Obsidian', 'desc': 'Notes timestamped'},
{'name': 'Zapier', 'desc': 'Workflows no-code'},
{'name': 'Make (Integromat)', 'desc': 'Scénarios visuels'},
{'name': 'n8n', 'desc': 'Open source self-host'}
] %}
<div class="bg-brand-bg p-5 rounded-[14px] border border-brand-border text-center">
<p class="text-base font-bold text-brand-navy">{{ integ.name | safe }}</p>
<p class="text-xs text-brand-navy/70 mt-1">{{ integ.desc | safe }}</p>
</div>
{% endfor %}
</div>
<p class="text-xs text-brand-navy/70 text-center mt-6">
Microsoft, Notion, Obsidian, Zapier, Make et n8n sont des marques de leurs propriétaires respectifs. DictIA n'est pas affilié à ces produits.
</p>
</div>
</section>
{# ===== TECH SPECS ===== #}
<section class="bg-brand-navy text-white py-20" aria-labelledby="specs-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">SPÉCIFICATIONS TECHNIQUES</p>
<h2 id="specs-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4">
Sous le capot.
</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
{% for spec in [
{'title': 'Modèle ASR', 'desc': 'WhisperX Large-v3 (1,55&nbsp;G paramètres) fine-tuné sur audio professionnel qu&eacute;b&eacute;cois. Format ONNX optimisé GPU.'},
{'title': 'Diarisation', 'desc': 'pyannote 3.x — clustering hiérarchique sur embeddings ECAPA-TDNN. 1 à 8 locuteurs détectés automatiquement.'},
{'title': 'LLM (résumés / Q&amp;R)', 'desc': 'Mistral 7B Instruct quantifié 4-bit. Inférence locale sur le même GPU. Aucune sortie réseau.'},
{'title': 'Stack web', 'desc': 'Flask 2.3 (backend) + Vue 3 / Alpine.js (front). Chiffrement AES-256 au repos. AGPL&nbsp;v3.'},
{'title': 'Audio supportés', 'desc': 'WAV, MP3, M4A, FLAC, OGG, WebM — jusqu\'à 8&nbsp;h par fichier. Conversion ffmpeg automatique.'},
{'title': 'Langues', 'desc': 'Optimisé français québécois. Aussi&nbsp;: français de France, anglais (canadien et US), espagnol, allemand, mandarin, russe.'}
] %}
<article class="bg-white/[0.05] backdrop-blur-sm p-6 rounded-[0.75rem] border border-white/[0.08]">
<h3 class="text-lg font-bold mb-2 text-white">{{ spec.title | safe }}</h3>
<p class="text-sm text-white/80 leading-relaxed">{{ spec.desc | safe }}</p>
</article>
{% endfor %}
</div>
</div>
</section>
{# ===== CTA ===== #}
<section class="bg-brand-bg py-20" aria-labelledby="features-cta-title">
<div class="max-w-[820px] mx-auto px-6 text-center">
<h2 id="features-cta-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-6 text-brand-navy">
Prêt à <span class="grad-text">essayer DictIA</span>&nbsp;?
</h2>
<p class="text-lg text-brand-navy/80 mb-8">
Lancement printemps&nbsp;2026. Inscrivez-vous pour figurer sur la liste prioritaire.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
{% from 'macros/button.html' import button %}
{{ button('Pré-inscription par courriel', href='mailto:info@dictia.ca?subject=Pré-inscription%20DictIA', variant='primary', size='lg', icon='✉️') }}
{{ button('Voir les tarifs', href='/tarifs', variant='secondary', size='lg') }}
</div>
</div>
</section>
{% endblock %}

163
templates/marketing/tarifs.html Normal file
View File

@@ -0,0 +1,163 @@
{% extends 'marketing/base.html' %}
{% block title %}Tarifs DictIA — 3 forfaits transparents en CAD (369 $/mois Cloud, à partir de 173 $/mois on-premise){% endblock %}
{% block description %}Tarifs DictIA en CAD : DictIA 8 (PME), DictIA 16 (cabinets juridiques) et DictIA Cloud (organismes). Volume illimité, zéro frais par utilisateur, taxes en sus.{% endblock %}
{% block content %}
{# ===== HEADER ===== #}
<section class="bg-brand-navy text-white py-20" aria-labelledby="page-title">
<div class="max-w-[820px] mx-auto px-6 text-center">
<p class="eyebrow grad-text mb-4">TARIFS</p>
<h1 id="page-title" class="text-[clamp(2.25rem,4vw,3.5rem)] font-black mb-4">
Trois forfaits&nbsp;: <span class="grad-text">choisissez votre infrastructure</span>.
</h1>
<p class="text-lg text-white/80">
Volume illimité, zéro frais par utilisateur. Tarifs en CAD, taxes en sus (TPS&nbsp;5&nbsp;% + TVQ&nbsp;9,975&nbsp;%).
</p>
</div>
</section>
{# ===== 3 PRICING TIERS ===== #}
<section class="bg-brand-bg py-20" aria-labelledby="forfaits-title">
<div class="max-w-[1200px] mx-auto px-6">
<h2 id="forfaits-title" class="sr-only">Trois forfaits DictIA</h2>
{% from 'macros/pricing_card.html' import pricing_card %}
<div class="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto items-stretch">
{{ pricing_card(
'dictia-8',
'DictIA 8',
'3&nbsp;450&nbsp;$',
'173&nbsp;$',
'PME · RH · Manufacturiers',
['GPU 8&nbsp;Go RTX', 'Volume illimité', 'WhisperX FR-CA', 'Diarisation 8 locuteurs', 'Support inclus']
) }}
{{ pricing_card(
'dictia-16',
'DictIA 16',
'5&nbsp;750&nbsp;$',
'201&nbsp;$',
'Cabinets juridiques · CPA · Finance',
['GPU 16&nbsp;Go RTX', 'Mistral 7B local', 'Q&amp;R sur enregistrement', 'Tout DictIA 8', 'Support prioritaire'],
recommended=True
) }}
{{ pricing_card(
'dictia-cloud',
'DictIA Cloud',
'0&nbsp;$',
'369&nbsp;$',
'Organismes · Municipalités · Multi-sites',
['Hébergé OVH Beauharnois (Québec)', 'Opérationnel sous 48&nbsp;h', 'Aucun matériel à gérer', 'SLA visé 99,9&nbsp;%', 'Conforme Loi&nbsp;25']
) }}
</div>
</div>
</section>
{# ===== COMPARISON MATRIX ===== #}
<section class="bg-white py-20" aria-labelledby="matrix-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">COMPARAISON DÉTAILLÉE</p>
<h2 id="matrix-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
Détails par forfait.
</h2>
</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 détaillée des 3 forfaits DictIA sur 8 caractéristiques</caption>
<thead class="bg-brand-bg">
<tr>
<th scope="col" class="text-left p-4 font-bold text-brand-navy">Caractéristique</th>
<th scope="col" class="p-4 font-bold text-brand-navy">DictIA 8</th>
<th scope="col" class="p-4 font-bold text-brand-navy">DictIA 16</th>
<th scope="col" class="p-4 font-bold text-brand-navy">DictIA Cloud</th>
</tr>
</thead>
<tbody class="divide-y divide-brand-border">
{% for row in [
{'name': 'Hébergement', 'd8': 'Sur place (vos murs)', 'd16': 'Sur place (vos murs)', 'cloud': 'OVH Beauharnois (QC)'},
{'name': 'GPU', 'd8': '8&nbsp;Go RTX', 'd16': '16&nbsp;Go RTX', 'cloud': 'Mutualisé (géré)'},
{'name': 'Volume audio', 'd8': 'Illimité', 'd16': 'Illimité', 'cloud': 'Illimité'},
{'name': 'Utilisateurs', 'd8': 'Illimité', 'd16': 'Illimité', 'cloud': 'Illimité'},
{'name': 'Diarisation', 'd8': '8 locuteurs', 'd16': '8 locuteurs', 'cloud': '8 locuteurs'},
{'name': 'Résumés Mistral 7B local', 'd8': '—', 'd16': '✓', 'cloud': '✓ (mutualisé)'},
{'name': 'Q&amp;R sur enregistrement', 'd8': '—', 'd16': '✓', 'cloud': '✓'},
{'name': 'Délai de mise en service', 'd8': '~2 semaines', 'd16': '~2 semaines', 'cloud': '48&nbsp;h'}
] %}
<tr>
<th scope="row" class="text-left p-4 font-semibold text-brand-navy/80">{{ row.name | safe }}</th>
<td class="p-4 text-center text-brand-navy/80">{{ row.d8 | safe }}</td>
<td class="p-4 text-center text-brand-navy/80">{{ row.d16 | safe }}</td>
<td class="p-4 text-center text-brand-navy/80">{{ row.cloud | safe }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<p class="text-xs text-brand-navy/70 mt-6 text-center max-w-3xl mx-auto">
Caractéristiques au 2026-04-27. Pour un devis personnalisé ou des besoins multi-sites, écrivez à <a href="mailto:info@dictia.ca" class="grad-text font-semibold hover:underline">info@dictia.ca</a>.
</p>
</div>
</section>
{# ===== TARIFICATION FAQ ===== #}
<section class="bg-brand-bg py-20" aria-labelledby="tarifs-faq-title">
<div class="max-w-[820px] mx-auto px-6">
<div class="text-center mb-10">
<p class="eyebrow grad-text mb-4">QUESTIONS DE TARIFICATION</p>
<h2 id="tarifs-faq-title" class="text-[clamp(2rem,3vw,2.5rem)] font-black mb-4 text-brand-navy">Vos questions sur les tarifs.</h2>
</div>
<div class="divide-y divide-brand-border border-y border-brand-border">
{% for item in [
{'q': 'Y a-t-il des frais cachés?', 'a': 'Non. Les tarifs affichés couvrent l\'utilisation illimitée (volume audio, utilisateurs, exports). Les seules variables sont&nbsp;: les taxes (TPS&nbsp;5&nbsp;% + TVQ&nbsp;9,975&nbsp;%) et, pour DictIA on-premise, le matériel GPU si vous ne l\'avez pas déjà. Aucun frais par minute, par mot, par locuteur.'},
{'q': 'Puis-je passer d\'un forfait à un autre?', 'a': 'Oui, en tout temps. Les passages DictIA Cloud → on-premise et inversement sont supportés. Les données peuvent être migrées sur demande, sans frais. Détails dans nos <a href="/legal/conditions" class="grad-text underline">conditions d\'utilisation</a>.'},
{'q': 'Le tarif on-premise inclut-il le matériel GPU?', 'a': 'Le tarif setup (3&nbsp;450&nbsp;$ pour DictIA 8 ou 5&nbsp;750&nbsp;$ pour DictIA 16) inclut l\'installation logicielle complète, la configuration sécurité, la formation et 90 jours de support prioritaire. Le matériel GPU n\'est pas inclus&nbsp;; nous fournissons une liste de cartes RTX recommandées (RTX 4060 8&nbsp;Go pour DictIA 8, RTX 4080/5080 16&nbsp;Go pour DictIA 16) et pouvons faire l\'achat pour vous moyennant marge transparente.'},
{'q': 'Comment fonctionne la facturation TPS/TVQ?', 'a': 'DictIA Inc. est inscrite TPS et TVQ. Les factures détaillent les taxes selon votre province de facturation. Pour les organismes exemptés (organismes publics, etc.), envoyez votre attestation à info@dictia.ca avant l\'inscription.'},
{'q': 'Existe-t-il un tarif annuel ou pluriannuel?', 'a': 'Disponible sur demande pour les engagements 12 ou 24 mois (remise typique de 10 à 15&nbsp;%). Écrivez à <a href="mailto:info@dictia.ca" class="grad-text underline">info@dictia.ca</a> pour un devis.'}
] %}
<div x-data="{ open: false }" class="py-2">
<h3>
<button type="button"
class="w-full flex items-center justify-between gap-4 py-4 text-left hover:bg-brand-navy/[0.03] transition-colors rounded-md px-2 focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2"
@click="open = !open"
:aria-expanded="open.toString()"
aria-controls="tarifs-faq-panel-{{ loop.index }}">
<span class="font-semibold text-brand-navy text-base">{{ item.q | safe }}</span>
<span class="grad-text text-2xl flex-shrink-0 transition-transform"
:class="open ? 'rotate-45' : ''" aria-hidden="true">+</span>
</button>
</h3>
<div id="tarifs-faq-panel-{{ loop.index }}" x-show="open" x-transition.opacity.duration.200ms>
<p class="px-2 pb-4 text-sm text-brand-navy/80 leading-relaxed">{{ item.a | safe }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{# ===== CTA ===== #}
<section class="relative bg-brand-navy text-white py-20 overflow-hidden" aria-labelledby="tarifs-cta-title">
<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
<div class="absolute top-1/3 left-1/3 w-[500px] h-[500px] rounded-full"
style="background: radial-gradient(circle, rgba(0,98,255,0.12) 0%, transparent 60%); filter: blur(50px);"></div>
</div>
<div class="relative max-w-[820px] mx-auto px-6 text-center">
<h2 id="tarifs-cta-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-6">
Une question sur votre <span class="grad-text">forfait idéal</span>&nbsp;?
</h2>
<p class="text-lg text-white/80 mb-8">
Nous accompagnons chaque organisation dans le choix du forfait le mieux adapté à sa volumétrie, ses contraintes réglementaires et son infrastructure existante. Aucune pression commerciale.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
{% from 'macros/button.html' import button %}
{{ button('Discuter avec notre équipe', href='mailto:info@dictia.ca?subject=Question%20tarifs%20DictIA', variant='primary', size='lg', icon='✉️') }}
{{ button('Voir les fonctionnalités', href='/fonctionnalites', variant='ghost', size='lg') }}
</div>
</div>
</section>
{% endblock %}