dictia-public/templates/marketing/fonctionnalites.html

{% 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>
    {# NOTE: bento card content is duplicated between landing.html and fonctionnalites.html.
       When editing, sync both files. Future refactor: extract to _partials/_bento_features.html.
       Icon SVGs (heroicons-style outline) are inlined directly because the macro renders `icon | safe`. #}
    {% from 'macros/bento.html' import bento_card %}
    {%- set icon_microphone = '<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-7 h-7" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>' -%}
    {%- set icon_users = '<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-7 h-7" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>' -%}
    {%- set icon_document = '<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-7 h-7" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>' -%}
    {%- set icon_chat = '<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-7 h-7" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>' -%}
    {%- set icon_export = '<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-7 h-7" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>' -%}
    {%- set icon_plug = '<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-7 h-7" aria-hidden="true"><path d="M9 2v6"/><path d="M15 2v6"/><path d="M5 8h14v4a5 5 0 0 1-5 5h-4a5 5 0 0 1-5-5z"/><path d="M12 17v5"/></svg>' -%}
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-[1.5px] bg-brand-border rounded 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).', icon_microphone) }}
      {{ bento_card('02', 'Diarisation 8 locuteurs', 'pyannote sépare automatiquement les intervenants. Identification par embeddings vocaux.', icon_users) }}
      {{ 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.', icon_document) }}
      {{ bento_card('04', 'Q&amp;R sur enregistrement', 'Posez des questions à vos réunions. RAG local sur embeddings sentence-transformers.', icon_chat) }}
      {{ bento_card('05', 'Exports multiples', 'DOCX, PDF, SRT, VTT, TXT, JSON, MD. Formats avocat, notaire, CPA.', icon_export) }}
      {{ bento_card('06', 'Intégrations', 'Word, Outlook, Teams, Notion, Obsidian, Zapier, Make, n8n.', icon_plug) }}
    </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 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 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é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&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 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='<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="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>') }}
      {{ button('Voir les tarifs', href='/tarifs', variant='secondary', size='lg') }}
    </div>
  </div>
</section>

{% endblock %}