feat(marketing): A-2.8a /tarifs + /fonctionnalites standalone pages
- /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
144
templates/marketing/fonctionnalites.html
Normal file
144
templates/marketing/fonctionnalites.html
Normal 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 % québécoise, sans dépendance à un fournisseur cloud américain. Détails techniques sur demande : <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 %+ 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&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 G paramètres) fine-tuné sur audio professionnel québé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&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 v3.'},
|
||||
{'title': 'Audio supportés', 'desc': 'WAV, MP3, M4A, FLAC, OGG, WebM — jusqu\'à 8 h par fichier. Conversion ffmpeg automatique.'},
|
||||
{'title': 'Langues', 'desc': 'Optimisé français québécois. Aussi : 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> ?
|
||||
</h2>
|
||||
<p class="text-lg text-brand-navy/80 mb-8">
|
||||
Lancement printemps 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 %}
|
||||
Reference in New Issue
Block a user