Samir Boulahtit
68a303727b
- Add platform translation keys to all locale files (en, fr, de, lb) - Integrate language selector in platform base template header - Translate homepage-wizamart.html (hero, pricing, addons, find-shop, CTA) - Translate pricing.html, find-shop.html, signup-success.html - Add i18n context to platform routes via get_jinja2_globals() - Support variable interpolation for trial_days, count parameters 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
120 lines
7.2 KiB
HTML
120 lines
7.2 KiB
HTML
{# app/templates/platform/pricing.html #}
|
|
{# Standalone Pricing Page #}
|
|
{% extends "platform/base.html" %}
|
|
|
|
{% block title %}{{ _("platform.pricing.title") }} - Wizamart{% endblock %}
|
|
|
|
{% block content %}
|
|
<div x-data="{ annual: false }" class="py-16 lg:py-24">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{# Header #}
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
|
|
{{ _("platform.pricing.title") }}
|
|
</h1>
|
|
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
|
{{ _("platform.pricing.trial_note", trial_days=trial_days) }}
|
|
</p>
|
|
|
|
{# Billing Toggle #}
|
|
<div class="flex items-center justify-center mt-8 space-x-4">
|
|
<span class="text-gray-700 dark:text-gray-300" :class="{ 'font-semibold': !annual }">{{ _("platform.pricing.monthly") }}</span>
|
|
<button @click="annual = !annual"
|
|
class="relative w-14 h-7 rounded-full transition-colors"
|
|
:class="annual ? 'bg-indigo-600' : 'bg-gray-300 dark:bg-gray-600'">
|
|
<span class="absolute top-1 left-1 w-5 h-5 bg-white rounded-full shadow transition-transform"
|
|
:class="annual ? 'translate-x-7' : ''"></span>
|
|
</button>
|
|
<span class="text-gray-700 dark:text-gray-300" :class="{ 'font-semibold': annual }">
|
|
{{ _("platform.pricing.annual") }}
|
|
<span class="text-green-600 text-sm font-medium ml-1">{{ _("platform.pricing.save_months") }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{# Pricing Cards #}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{% for tier in tiers %}
|
|
<div class="relative bg-white dark:bg-gray-800 rounded-2xl p-6 border-2 transition-all hover:shadow-xl
|
|
{% if tier.is_popular %}border-indigo-500 shadow-lg{% else %}border-gray-200 dark:border-gray-700{% endif %}">
|
|
|
|
{% if tier.is_popular %}
|
|
<div class="absolute -top-3 left-1/2 -translate-x-1/2">
|
|
<span class="bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full">{{ _("platform.pricing.recommended") }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">{{ tier.name }}</h3>
|
|
|
|
<div class="mb-6">
|
|
<template x-if="!annual">
|
|
<div>
|
|
<span class="text-4xl font-extrabold text-gray-900 dark:text-white">{{ tier.price_monthly }}</span>
|
|
<span class="text-gray-500">{{ _("platform.pricing.per_month") }}</span>
|
|
</div>
|
|
</template>
|
|
<template x-if="annual">
|
|
<div>
|
|
{% if tier.price_annual %}
|
|
<span class="text-4xl font-extrabold text-gray-900 dark:text-white">{{ (tier.price_annual / 12)|round(0)|int }}</span>
|
|
<span class="text-gray-500">{{ _("platform.pricing.per_month") }}</span>
|
|
<div class="text-sm text-gray-500">{{ tier.price_annual }}{{ _("platform.pricing.per_year") }}</div>
|
|
{% else %}
|
|
<span class="text-2xl font-bold text-gray-900 dark:text-white">{{ _("platform.pricing.custom") }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<ul class="space-y-3 mb-8 text-sm">
|
|
<li class="flex items-center text-gray-700 dark:text-gray-300">
|
|
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{% if tier.orders_per_month %}{{ _("platform.pricing.orders_per_month", count=tier.orders_per_month) }}{% else %}{{ _("platform.pricing.unlimited_orders") }}{% endif %}
|
|
</li>
|
|
<li class="flex items-center text-gray-700 dark:text-gray-300">
|
|
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{% if tier.products_limit %}{{ _("platform.pricing.products_limit", count=tier.products_limit) }}{% else %}{{ _("platform.pricing.unlimited_products") }}{% endif %}
|
|
</li>
|
|
<li class="flex items-center text-gray-700 dark:text-gray-300">
|
|
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{% if tier.team_members %}{{ _("platform.pricing.team_members", count=tier.team_members) }}{% else %}{{ _("platform.pricing.unlimited_team") }}{% endif %}
|
|
</li>
|
|
<li class="flex items-center text-gray-700 dark:text-gray-300">
|
|
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ _("platform.pricing.letzshop_sync") }}
|
|
</li>
|
|
</ul>
|
|
|
|
{% if tier.is_enterprise %}
|
|
<a href="/contact" class="block w-full py-3 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white font-semibold rounded-xl text-center hover:bg-gray-300 transition-colors">
|
|
{{ _("platform.pricing.contact_sales") }}
|
|
</a>
|
|
{% else %}
|
|
<a :href="'/signup?tier={{ tier.code }}&annual=' + annual"
|
|
class="block w-full py-3 font-semibold rounded-xl text-center transition-colors
|
|
{% if tier.is_popular %}bg-indigo-600 hover:bg-indigo-700 text-white{% else %}bg-indigo-100 text-indigo-700 hover:bg-indigo-200{% endif %}">
|
|
{{ _("platform.pricing.start_trial") }}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{# Back to Home #}
|
|
<div class="text-center mt-12">
|
|
<a href="/" class="text-indigo-600 dark:text-indigo-400 hover:underline">
|
|
← {{ _("platform.pricing.back_home") }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|