feat(marketing): pricing 3 forfaits + ROI calculator Alpine.js
This commit is contained in:
Allison
41
templates/macros/pricing_card.html
Normal file
41
templates/macros/pricing_card.html
Normal file
@@ -0,0 +1,41 @@
|
||||
{# Reusable pricing card macro. FlexiHub style — recommended tier gets a grad-bg outer border (1.5px gradient frame).
|
||||
|
||||
Args:
|
||||
slug : URL-safe identifier (goes into href, NOT piped through | safe — autoescape protects URL)
|
||||
name : Display name (piped through | safe — may contain entities; current names like "DictIA 8" are entity-free)
|
||||
price_setup : Setup price string with NBSP (e.g. '3 450 $') — piped through | safe
|
||||
price_monthly : Monthly price string with NBSP (e.g. '173 $') — piped through | safe
|
||||
target : Target audience tagline — piped through | safe (may contain entities)
|
||||
features : List of feature strings, each piped through | safe (will contain entities)
|
||||
recommended : If True, wraps the card in grad-bg gradient frame + RECOMMANDÉ badge
|
||||
cta_url : Base URL for the CTA — slug appended (NOT piped through | safe — URL injection guard)
|
||||
|
||||
Note: CTA label is "Réserver [name]" not "Choisir" because product is in pre-launch
|
||||
(cf. trust bar "Pré-inscription ouverte") — LPC art. 219 hygiene.
|
||||
The button macro autoescapes its `text` arg, so `name` MUST NOT contain HTML entities
|
||||
(verified: "DictIA 8", "DictIA 16", "DictIA Cloud" are all entity-free). #}
|
||||
{%- macro pricing_card(slug, name, price_setup, price_monthly, target, features, recommended=False, cta_url='/checkout') -%}
|
||||
<div class="relative {% if recommended %}grad-bg p-[1.5px] rounded-[20px]{% endif %}">
|
||||
{% if recommended %}<span class="absolute -top-3 left-1/2 -translate-x-1/2 grad-bg text-white text-xs font-bold px-3 py-1 rounded-full shadow-cta">★ RECOMMANDÉ</span>{% endif %}
|
||||
<div class="bg-white p-8 rounded-[18px] border border-brand-border h-full flex flex-col">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-black mb-1 text-brand-navy">{{ name | safe }}</h3>
|
||||
<p class="text-sm text-brand-navy/70">{{ target | safe }}</p>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<div class="text-4xl font-black grad-text">{{ price_setup | safe }}</div>
|
||||
<div class="text-sm text-brand-navy/70">+ {{ price_monthly | safe }} / mois</div>
|
||||
</div>
|
||||
<ul class="space-y-3 mb-8 flex-grow">
|
||||
{% for f in features %}
|
||||
<li class="flex items-start gap-2 text-sm text-brand-navy/80">
|
||||
<span class="grad-text font-black flex-shrink-0" aria-hidden="true">✓</span>
|
||||
<span>{{ f | safe }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% from 'macros/button.html' import button %}
|
||||
{{ button('Réserver ' + name, href=cta_url + '/' + slug, variant='primary' if recommended else 'secondary', size='lg') }}
|
||||
</div>
|
||||
</div>
|
||||
{%- endmacro -%}
|
||||
@@ -206,4 +206,83 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# ===== PRICING ===== #}
|
||||
<section class="bg-brand-bg py-20" id="tarifs" aria-labelledby="pricing-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">TARIFS</p>
|
||||
<h2 id="pricing-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black mb-4 text-brand-navy">
|
||||
Choisissez votre formule.
|
||||
</h2>
|
||||
<p class="text-lg text-brand-navy/70">
|
||||
Tous les forfaits incluent WhisperX Large-v3, volume illimité et zéro frais par utilisateur. Prix en CAD, taxes en sus (TPS 5 % + TVQ 9,975 %).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% 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 450 $',
|
||||
'173 $',
|
||||
'PME · RH · Manufacturiers',
|
||||
['GPU 8 Go RTX', 'Volume illimité', 'WhisperX FR-CA', 'Diarisation 8 locuteurs', 'Support inclus']
|
||||
) }}
|
||||
{{ pricing_card(
|
||||
'dictia-16',
|
||||
'DictIA 16',
|
||||
'5 750 $',
|
||||
'201 $',
|
||||
'Cabinets juridiques · CPA · Finance',
|
||||
['GPU 16 Go RTX', 'Mistral 7B local', 'Q&R sur enregistrement', 'Tout DictIA 8', 'Support prioritaire'],
|
||||
recommended=True
|
||||
) }}
|
||||
{{ pricing_card(
|
||||
'dictia-cloud',
|
||||
'DictIA Cloud',
|
||||
'0 $',
|
||||
'369 $',
|
||||
'Organismes · Municipalités · Multi-sites',
|
||||
['Hébergé OVH Beauharnois (Québec)', 'Opérationnel sous 48 h', 'Aucun matériel à gérer', 'SLA visé 99,9 %', 'Conforme Loi 25']
|
||||
) }}
|
||||
</div>
|
||||
|
||||
{# ROI CALCULATOR — Alpine.js, hypotheses transparentes pour LPC art. 219 hygiene #}
|
||||
<div x-data="roiCalculator()" class="mt-16 max-w-3xl mx-auto bg-white p-8 rounded-[18px] border border-brand-border" aria-labelledby="roi-title">
|
||||
<p class="eyebrow text-center grad-text mb-2">CALCULATEUR ROI</p>
|
||||
<h3 id="roi-title" class="text-2xl font-black text-center mb-6 text-brand-navy">Combien DictIA peut vous faire économiser ?</h3>
|
||||
<div class="grid sm:grid-cols-3 gap-4 mb-6">
|
||||
<label class="flex flex-col">
|
||||
<span class="text-xs font-semibold mb-1 text-brand-navy">Utilisateurs</span>
|
||||
<input type="range" x-model.number="users" min="1" max="50" step="1" class="accent-brand-b1" aria-label="Nombre d'utilisateurs">
|
||||
<span class="text-sm text-brand-navy/70" x-text="users + ' utilisateur' + (users > 1 ? 's' : '')"></span>
|
||||
</label>
|
||||
<label class="flex flex-col">
|
||||
<span class="text-xs font-semibold mb-1 text-brand-navy">Heures audio / jour</span>
|
||||
<input type="range" x-model.number="hours" min="0.5" max="8" step="0.5" class="accent-brand-b1" aria-label="Heures d'audio par jour">
|
||||
<span class="text-sm text-brand-navy/70" x-text="hours + ' h/jour'"></span>
|
||||
</label>
|
||||
<label class="flex flex-col">
|
||||
<span class="text-xs font-semibold mb-1 text-brand-navy">Tarif horaire ($)</span>
|
||||
<input type="range" x-model.number="rate" min="50" max="500" step="25" class="accent-brand-b1" aria-label="Tarif horaire en dollars">
|
||||
<span class="text-sm text-brand-navy/70" x-text="rate + ' $/h'"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="text-center pt-6 border-t border-brand-border">
|
||||
<p class="text-sm text-brand-navy/70 mb-2">Économies estimées par an</p>
|
||||
<p class="text-5xl font-black grad-text" x-text="savings.toLocaleString('fr-CA') + ' $'"></p>
|
||||
<p class="text-sm text-brand-navy/70 mt-2" x-text="'Payback : ' + payback + ' mois'"></p>
|
||||
</div>
|
||||
<p class="text-xs text-brand-navy/70 mt-6 text-center">
|
||||
Hypothèses : 80 % du temps de transcription manuelle économisé, 220 jours ouvrables/an, comparé à DictIA 16 (5 750 $ + 201 $/mois). Estimation à titre indicatif.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="/static/js/roi_calculator.js" defer></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user