feat: add i18n translations to platform marketing website

- 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>
This commit is contained in:
2025-12-27 15:34:02 +01:00
parent 95987d0c1c
commit 68a303727b
10 changed files with 905 additions and 101 deletions

View File

@@ -19,26 +19,24 @@
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
30-Day Free Trial - No Credit Card Required to Start
{{ _("platform.hero.badge", trial_days=trial_days) }}
</div>
{# Headline #}
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-gray-900 dark:text-white leading-tight mb-6">
Lightweight OMS for
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">Letzshop Sellers</span>
{{ _("platform.hero.title") }}
</h1>
{# Subheadline #}
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto mb-10">
Order management, inventory, and invoicing built for Luxembourg e-commerce.
Stop juggling spreadsheets. Start running your business.
{{ _("platform.hero.subtitle") }}
</p>
{# CTA Buttons #}
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/signup"
class="inline-flex items-center justify-center px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl shadow-lg shadow-indigo-500/30 transition-all hover:scale-105">
Start Free Trial
{{ _("platform.hero.cta_trial") }}
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
@@ -48,7 +46,7 @@
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
Find Your Letzshop Shop
{{ _("platform.hero.cta_find_shop") }}
</a>
</div>
</div>
@@ -69,15 +67,15 @@
{# Section Header #}
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Simple, Transparent Pricing
{{ _("platform.pricing.title") }}
</h2>
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
Choose the plan that fits your business. All plans include a {{ trial_days }}-day free trial.
{{ _("platform.pricing.subtitle", 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 }">Monthly</span>
<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'">
@@ -85,8 +83,8 @@
:class="annual ? 'translate-x-7' : ''"></span>
</button>
<span class="text-gray-700 dark:text-gray-300" :class="{ 'font-semibold': annual }">
Annual
<span class="text-green-600 text-sm font-medium ml-1">Save 2 months!</span>
{{ _("platform.pricing.annual") }}
<span class="text-green-600 text-sm font-medium ml-1">{{ _("platform.pricing.save_months") }}</span>
</span>
</div>
</div>
@@ -101,7 +99,7 @@
{% 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">
MOST POPULAR
{{ _("platform.pricing.most_popular") }}
</span>
</div>
{% endif %}
@@ -114,19 +112,19 @@
<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 dark:text-gray-400">/month</span>
<span class="text-gray-500 dark:text-gray-400">{{ _("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 dark:text-gray-400">/month</span>
<span class="text-gray-500 dark:text-gray-400">{{ _("platform.pricing.per_month") }}</span>
<div class="text-sm text-gray-500 dark:text-gray-400">
{{ tier.price_annual }}/year
{{ tier.price_annual }}{{ _("platform.pricing.per_year") }}
</div>
{% else %}
<span class="text-2xl font-bold text-gray-900 dark:text-white">Custom</span>
<span class="text-2xl font-bold text-gray-900 dark:text-white">{{ _("platform.pricing.custom") }}</span>
{% endif %}
</div>
</template>
@@ -139,28 +137,28 @@
<svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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 %}{{ tier.orders_per_month }} orders/month{% else %}Unlimited orders{% endif %}
{% if tier.orders_per_month %}{{ _("platform.pricing.orders_per_month", count=tier.orders_per_month) }}{% else %}{{ _("platform.pricing.unlimited_orders") }}{% endif %}
</li>
{# Products #}
<li class="flex items-center text-gray-700 dark:text-gray-300">
<svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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 %}{{ tier.products_limit }} products{% else %}Unlimited products{% endif %}
{% if tier.products_limit %}{{ _("platform.pricing.products_limit", count=tier.products_limit) }}{% else %}{{ _("platform.pricing.unlimited_products") }}{% endif %}
</li>
{# Team Members #}
<li class="flex items-center text-gray-700 dark:text-gray-300">
<svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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 %}{{ tier.team_members }} team member{% if tier.team_members > 1 %}s{% endif %}{% else %}Unlimited team{% endif %}
{% if tier.team_members %}{{ _("platform.pricing.team_members", count=tier.team_members) }}{% else %}{{ _("platform.pricing.unlimited_team") }}{% endif %}
</li>
{# Letzshop Sync #}
<li class="flex items-center text-gray-700 dark:text-gray-300">
<svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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>
Letzshop order sync
{{ _("platform.pricing.letzshop_sync") }}
</li>
{# Tier-specific features #}
{% if 'invoice_eu_vat' in tier.features %}
@@ -168,7 +166,7 @@
<svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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>
EU VAT invoicing
{{ _("platform.pricing.eu_vat_invoicing") }}
</li>
{% endif %}
{% if 'analytics_dashboard' in tier.features %}
@@ -176,7 +174,7 @@
<svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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>
Analytics dashboard
{{ _("platform.pricing.analytics_dashboard") }}
</li>
{% endif %}
{% if 'api_access' in tier.features %}
@@ -184,7 +182,7 @@
<svg class="w-5 h-5 text-green-500 mr-3 flex-shrink-0" 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>
API access
{{ _("platform.pricing.api_access") }}
</li>
{% endif %}
</ul>
@@ -193,14 +191,14 @@
{% if tier.is_enterprise %}
<a href="/contact?tier=enterprise"
class="block w-full py-3 px-4 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white font-semibold rounded-xl text-center hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
Contact Sales
{{ _("platform.pricing.contact_sales") }}
</a>
{% else %}
<a href="/signup?tier={{ tier.code }}"
:href="'/signup?tier={{ tier.code }}&annual=' + annual"
class="block w-full py-3 px-4 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 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-200 dark:hover:bg-indigo-900/50{% endif %}">
Start Free Trial
{{ _("platform.pricing.start_trial") }}
</a>
{% endif %}
</div>
@@ -217,10 +215,10 @@
{# Section Header #}
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Enhance Your Platform
{{ _("platform.addons.title") }}
</h2>
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
Add custom branding, professional email, and enhanced security.
{{ _("platform.addons.subtitle") }}
</p>
</div>
@@ -279,10 +277,10 @@
{# Section Header #}
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Find Your Letzshop Shop
{{ _("platform.find_shop.title") }}
</h2>
<p class="text-lg text-gray-600 dark:text-gray-400">
Already selling on Letzshop? Enter your shop URL to get started.
{{ _("platform.find_shop.subtitle") }}
</p>
</div>
@@ -292,7 +290,7 @@
<input
type="text"
x-model="shopUrl"
placeholder="Enter your Letzshop URL (e.g., letzshop.lu/vendors/my-shop)"
placeholder="{{ _('platform.find_shop.placeholder') }}"
class="flex-1 px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
/>
<button
@@ -305,7 +303,7 @@
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
</svg>
</template>
Find My Shop
{{ _("platform.find_shop.button") }}
</button>
</div>
@@ -321,12 +319,12 @@
<template x-if="!vendorResult.vendor.is_claimed">
<a :href="'/signup?letzshop=' + vendorResult.vendor.slug"
class="px-6 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-colors">
Claim This Shop
{{ _("platform.find_shop.claim_shop") }}
</a>
</template>
<template x-if="vendorResult.vendor.is_claimed">
<span class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-lg">
Already Claimed
{{ _("platform.find_shop.already_claimed") }}
</span>
</template>
</div>
@@ -341,7 +339,7 @@
{# Help Text #}
<p class="mt-4 text-sm text-gray-500 dark:text-gray-400 text-center">
Don't have a Letzshop account? <a href="https://letzshop.lu" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">Sign up with Letzshop first</a>, then come back to connect your shop.
{{ _("platform.find_shop.no_account") }} <a href="https://letzshop.lu" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">{{ _("platform.find_shop.signup_letzshop") }}</a>{{ _("platform.find_shop.then_connect") }}
</p>
</div>
</div>
@@ -353,15 +351,14 @@
<section class="py-16 lg:py-24 bg-gradient-to-r from-indigo-600 to-purple-600">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
Ready to Streamline Your Orders?
{{ _("platform.cta.title") }}
</h2>
<p class="text-xl text-indigo-100 mb-10">
Join Letzshop vendors who trust Wizamart for their order management.
Start your {{ trial_days }}-day free trial today.
{{ _("platform.cta.subtitle", trial_days=trial_days) }}
</p>
<a href="/signup"
class="inline-flex items-center px-10 py-4 bg-white text-indigo-600 font-bold rounded-xl shadow-lg hover:shadow-xl transition-all hover:scale-105">
Start Free Trial
{{ _("platform.cta.button") }}
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>