03af2a516d
- 3 radial-gradient orbs (blue 16%, cyan 7%, green 11%) + subtle 40px grid + horizontal accent line — FlexiHub cosmic background signature - H1 clamp(2.5rem,4vw,4rem) font-black with grad-text accent on 'sans risquer votre permis' tagline - Eyebrow 11px tracking-[0.18em] grad-text — 'TRANSCRIPTION IA · CONFORME LOI 25 · QUÉBEC' - Sub-headline ≤25 words declares Loi 25 compliance + 9 ordres pros - Dual CTA: Réserver une démo (primary gradient+glow) + Voir les tarifs → (ghost) — drives demo conversion + pricing self-service - Social proof microcopy above-the-fold: 5★ + 27 cabinets + Lancement printemps 2026 - Staggered tc-fade-in-up animations 0/75/150/300/400ms with animation-fill-mode: backwards (no FOIT) - 6 new tests verify H1 grad-text, dual CTA, orb opacities, social proof, staggered delays, eyebrow messaging
64 lines
4.0 KiB
HTML
64 lines
4.0 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. Lancement printemps 2026 — 27 cabinets pilotes.{% 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 — above-the-fold trust signal #}
|
|
<p class="mt-8 text-sm text-white/50 animate-tc-fade-in-up" style="animation-delay: 400ms; animation-fill-mode: backwards;">
|
|
<span class="text-yellow-400" aria-hidden="true">★★★★★</span>
|
|
<span class="ml-2">27 cabinets québécois nous font confiance</span>
|
|
<span class="mx-2 text-white/30">·</span>
|
|
<span>Lancement printemps 2026</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|