sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): complete post-launch i18n phases 5-8
Some checks failed
CI / dependency-scanning (push) Successful in 28s
Details
CI / docs (push) Has been skipped
Details
CI / deploy (push) Has been skipped
Details
CI / ruff (push) Successful in 12s
Details
CI / pytest (push) Failing after 47m21s
Details
CI / validate (push) Successful in 25s
Details

Browse Source 
- Phase 5: Translate homepage-modern.html (~90 new locale keys, all
  hardcoded strings replaced with _() calls for dashboard mock,
  features, pricing tiers, testimonial sections)
- Phase 6: Translate homepage-minimal.html (17 new locale keys for
  fallback content, features, and CTA sections)
- Phase 7: Add multi-language page.title/content support with
  title_translations and content_translations JSON columns, Alembic
  migration cms_002, translated title/content resolution in templates,
  and seed script updates with tt() helper
- Phase 8: Complete lb.json audit — fill 6 missing keys (messages,
  confirmations), also backfill same keys in fr.json and de.json

All 4 locale files now have 340 keys with full parity.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-03-03 05:50:06 +01:00
parent 05c53e1865
commit b8aa484653
16 changed files with 965 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/modules/cms/templates/cms/platform/content-page.html
View File

@@ -2,13 +2,17 @@
{# Generic template for platform content pages (About, FAQ, Terms, Contact, etc.) #}
{% extends "platform/base.html" %}
{% block title %}{{ page.title }} - Marketplace{% endblock %}
{% set _lang = current_language|default('fr') %}
{% set _page_title = page.get_translated_title(_lang) %}
{% set _page_content = page.get_translated_content(_lang) %}
{% block title %}{{ _page_title }} - Marketplace{% endblock %}
{% block meta_description %}
{% if page.meta_description %}
{{ page.meta_description }}
{% else %}
{{ page.title }} - Multi-Store Marketplace Platform
{{ _page_title }} - Multi-Store Marketplace Platform
{% endif %}
{% endblock %}
@@ -16,7 +20,7 @@
{% if page.meta_keywords %}
{{ page.meta_keywords }}
{% else %}
{{ page.title }}, marketplace, platform
{{ _page_title }}, marketplace, platform
{% endif %}
{% endblock %}
@@ -31,7 +35,7 @@
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
</svg>
Home
{{ _("cms.platform.content_page.home") }}
</a>
</li>
<li>
@@ -39,7 +43,7 @@
<svg class="w-4 h-4 text-gray-400 mx-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="text-gray-700 dark:text-gray-300 font-medium">{{ page.title }}</span>
<span class="text-gray-700 dark:text-gray-300 font-medium">{{ _page_title }}</span>
</div>
</li>
</ol>
@@ -48,7 +52,7 @@
{# Page Header #}
<div class="mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
{{ page.title }}
{{ _page_title }}
</h1>
{# Published date (if available) #}
@@ -57,7 +61,7 @@
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<span>Published {{ page.published_at.strftime('%B %d, %Y') }}</span>
<span>{{ _("cms.platform.content_page.published") }} {{ page.published_at.strftime('%B %d, %Y') }}</span>
</div>
{% endif %}
</div>
@@ -68,11 +72,11 @@
{% if page.content_format == 'markdown' %}
{# Future enhancement: Render with markdown library #}
<div class="markdown-content">
{{ page.content | safe }}{# sanitized: CMS content #}
{{ _page_content | safe }}{# sanitized: CMS content #}
</div>
{% else %}
{# HTML content (default) #}
{{ page.content | safe }}{# sanitized: CMS content #}
{{ _page_content | safe }}{# sanitized: CMS content #}
{% endif %}
</div>
</div>
@@ -81,7 +85,7 @@
{% if page.updated_at %}
<div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 text-center">
<p class="text-sm text-gray-500 dark:text-gray-400">
Last updated: {{ page.updated_at.strftime('%B %d, %Y') }}
{{ _("cms.platform.content_page.last_updated") }} {{ page.updated_at.strftime('%B %d, %Y') }}
</p>
</div>
{% endif %}
@@ -91,23 +95,23 @@
<div class="mt-12 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-2xl p-8 text-center">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
{% if page.slug == 'about' %}
Ready to Get Started?
{{ _("cms.platform.content_page.cta_about_title") }}
{% elif page.slug == 'contact' %}
Have Questions?
{{ _("cms.platform.content_page.cta_contact_title") }}
{% endif %}
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-6">
{% if page.slug == 'about' %}
Join thousands of stores already selling on our platform
{{ _("cms.platform.content_page.cta_about_subtitle") }}
{% elif page.slug == 'contact' %}
Our team is here to help you succeed
{{ _("cms.platform.content_page.cta_contact_subtitle") }}
{% endif %}
</p>
<a href="/contact" class="inline-block bg-gray-900 dark:bg-white text-white dark:text-gray-900 px-8 py-3 rounded-lg font-semibold hover:opacity-90 transition">
{% if page.slug == 'about' %}
Contact Sales
{{ _("cms.platform.content_page.cta_about_button") }}
{% elif page.slug == 'contact' %}
Send Us a Message
{{ _("cms.platform.content_page.cta_contact_button") }}
{% endif %}
</a>
</div>

28
app/modules/cms/templates/cms/platform/homepage-minimal.html
View File

@@ -3,7 +3,7 @@
{% extends "platform/base.html" %}
{% block title %}
{% if page %}{{ page.title }}{% else %}Home{% endif %} - Marketplace
{% if page %}{{ page.title }}{% else %}{{ _("cms.platform.minimal.page_title_fallback") }}{% endif %} - {{ _("cms.platform.minimal.marketplace_suffix") }}
{% endblock %}
{% block content %}
@@ -21,16 +21,16 @@
</div>
{% else %}
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-8 leading-tight">
Multi-Store<br>Marketplace
{{ _("cms.platform.minimal.fallback_title_1") }}<br>{{ _("cms.platform.minimal.fallback_title_2") }}
</h1>
<p class="text-xl text-gray-600 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
The simplest way to launch your online store and connect with customers worldwide.
{{ _("cms.platform.minimal.fallback_subtitle") }}
</p>
{% endif %}
<a href="/contact"
class="inline-block bg-gray-900 dark:bg-white text-white dark:text-gray-900 px-8 py-4 rounded-lg font-semibold hover:opacity-90 transition text-lg">
Get Started
{{ _("cms.platform.minimal.get_started") }}
</a>
</div>
</section>
@@ -44,30 +44,30 @@
<div class="text-center">
<div class="text-4xl mb-4">⚡</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
Fast
{{ _("cms.platform.minimal.feat_fast") }}
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">
Lightning-fast performance optimized for conversions
{{ _("cms.platform.minimal.feat_fast_desc") }}
</p>
</div>
<div class="text-center">
<div class="text-4xl mb-4">🔒</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
Secure
{{ _("cms.platform.minimal.feat_secure") }}
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">
Enterprise-grade security for your peace of mind
{{ _("cms.platform.minimal.feat_secure_desc") }}
</p>
</div>
<div class="text-center">
<div class="text-4xl mb-4">🎨</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
Custom
{{ _("cms.platform.minimal.feat_custom") }}
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">
Fully customizable to match your brand identity
{{ _("cms.platform.minimal.feat_custom_desc") }}
</p>
</div>
</div>
@@ -80,19 +80,19 @@
<section class="py-24 bg-white dark:bg-gray-800">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">
Ready to launch?
{{ _("cms.platform.minimal.cta_title") }}
</h2>
<p class="text-gray-600 dark:text-gray-400 mb-8">
Join our marketplace today
{{ _("cms.platform.minimal.cta_subtitle") }}
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/contact"
class="inline-block bg-gray-900 dark:bg-white text-white dark:text-gray-900 px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition">
Contact Us
{{ _("cms.platform.minimal.cta_contact") }}
</a>
<a href="/about"
class="inline-block border-2 border-gray-900 dark:border-white text-gray-900 dark:text-white px-6 py-3 rounded-lg font-semibold hover:bg-gray-50 dark:hover:bg-gray-700 transition">
Learn More
{{ _("cms.platform.minimal.cta_learn_more") }}
</a>
</div>
</div>

258
app/modules/cms/templates/cms/platform/homepage-modern.html
View File

@@ -3,7 +3,7 @@
{% extends "platform/base.html" %}
{% block title %}
Orion - The Back-Office for Letzshop Sellers
{{ _("cms.platform.modern.page_title") }}
{% endblock %}
{% block extra_head %}
@@ -43,36 +43,36 @@
{# Left column - Content #}
<div>
<div class="inline-flex items-center px-4 py-2 bg-blue-500/20 backdrop-blur-sm rounded-full text-sm font-medium mb-6 border border-blue-400/30">
<span class="mr-2">🇱🇺</span> Built for Luxembourg E-Commerce
<span class="mr-2">🇱🇺</span> {{ _("cms.platform.modern.hero_title_1") }}
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
The Back-Office<br>
{{ _("cms.platform.modern.hero_title_2").split("Letzshop")[0] }}<br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">
Letzshop Doesn't Give You
Letzshop {{ _("cms.platform.modern.hero_title_2").split("Letzshop")[-1] }}
</span>
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-8 leading-relaxed">
Sync orders, manage inventory, generate invoices with correct VAT, and own your customer data. All in one place.
{{ _("cms.platform.modern.hero_subtitle") }}
</p>
<div class="flex flex-col sm:flex-row gap-4 mb-8">
<a href="/contact"
class="inline-flex items-center justify-center bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-xl font-bold transition-all duration-200 shadow-lg hover:shadow-xl">
<span>Start 14-Day Free Trial</span>
<span>{{ _("cms.platform.modern.cta_trial", trial_days=trial_days|default(14)) }}</span>
<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"></path>
</svg>
</a>
<a href="#how-it-works"
class="inline-flex items-center justify-center border-2 border-gray-600 text-white px-8 py-4 rounded-xl font-bold hover:bg-white/10 transition-all duration-200">
See How It Works
{{ _("cms.platform.modern.cta_how") }}
</a>
</div>
<p class="text-sm text-gray-400">
No credit card required. Setup in 5 minutes. Cancel anytime.
{{ _("cms.platform.modern.hero_note") }}
</p>
</div>
@@ -85,41 +85,41 @@
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="ml-4 text-gray-400 text-sm">Orion Dashboard</span>
<span class="ml-4 text-gray-400 text-sm">{{ _("cms.platform.modern.dashboard_title") }}</span>
</div>
{# Mock dashboard content #}
<div class="p-6 space-y-4">
<div class="grid grid-cols-3 gap-4">
<div class="bg-gray-700/50 rounded-lg p-4">
<div class="text-gray-400 text-xs mb-1">Today's Orders</div>
<div class="text-gray-400 text-xs mb-1">{{ _("cms.platform.modern.todays_orders") }}</div>
<div class="text-2xl font-bold text-white">24</div>
<div class="text-green-400 text-xs">+12% vs yesterday</div>
<div class="text-green-400 text-xs">+12%</div>
</div>
<div class="bg-gray-700/50 rounded-lg p-4">
<div class="text-gray-400 text-xs mb-1">Revenue</div>
<div class="text-gray-400 text-xs mb-1">{{ _("cms.platform.modern.revenue") }}</div>
<div class="text-2xl font-bold text-white">EUR 1,847</div>
<div class="text-green-400 text-xs">+8% vs yesterday</div>
<div class="text-green-400 text-xs">+8%</div>
</div>
<div class="bg-gray-700/50 rounded-lg p-4">
<div class="text-gray-400 text-xs mb-1">Low Stock</div>
<div class="text-gray-400 text-xs mb-1">{{ _("cms.platform.modern.low_stock") }}</div>
<div class="text-2xl font-bold text-yellow-400">3</div>
<div class="text-gray-400 text-xs">items need restock</div>
<div class="text-gray-400 text-xs">{{ _("cms.platform.modern.items_need_restock") }}</div>
</div>
</div>
<div class="bg-gray-700/50 rounded-lg p-4">
<div class="text-gray-400 text-xs mb-3">Recent Orders from Letzshop</div>
<div class="text-gray-400 text-xs mb-3">{{ _("cms.platform.modern.recent_orders") }}</div>
<div class="space-y-2">
<div class="flex justify-between items-center text-sm">
<span class="text-white">#LS-4521</span>
<span class="text-gray-400">Marie D.</span>
<span class="text-green-400">EUR 89.00</span>
<span class="bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded text-xs">Confirmed</span>
<span class="bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded text-xs">{{ _("cms.platform.modern.confirmed") }}</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-white">#LS-4520</span>
<span class="text-gray-400">Jean M.</span>
<span class="text-green-400">EUR 156.50</span>
<span class="bg-purple-500/20 text-purple-400 px-2 py-0.5 rounded text-xs">Shipped</span>
<span class="bg-purple-500/20 text-purple-400 px-2 py-0.5 rounded text-xs">{{ _("cms.platform.modern.shipped") }}</span>
</div>
</div>
</div>
@@ -137,12 +137,12 @@
<section class="py-8 bg-gray-50 dark:bg-gray-800 border-y border-gray-200 dark:border-gray-700">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row items-center justify-center gap-6 md:gap-12">
<span class="text-gray-500 dark:text-gray-400 font-medium">Official Integration</span>
<span class="text-gray-500 dark:text-gray-400 font-medium">{{ _("cms.platform.modern.badge_integration") }}</span>
<div class="flex items-center gap-3 bg-white dark:bg-gray-700 px-6 py-3 rounded-xl shadow-sm">
<span class="text-2xl">🛒</span>
<span class="font-bold text-gray-900 dark:text-white">Letzshop.lu</span>
</div>
<span class="text-gray-500 dark:text-gray-400 text-sm">Connect in 2 minutes</span>
<span class="text-gray-500 dark:text-gray-400 text-sm">{{ _("cms.platform.modern.badge_connect") }}</span>
</div>
</div>
</section>
@@ -154,36 +154,36 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Sound Familiar?
{{ _("cms.platform.modern.pain_title") }}
</h2>
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
These are the daily frustrations of Letzshop sellers
{{ _("cms.platform.modern.pain_subtitle") }}
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-6">
<div class="text-3xl mb-4">📋</div>
<h3 class="font-bold text-gray-900 dark:text-white mb-2">Manual Order Entry</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Copy-pasting orders from Letzshop to spreadsheets. Every. Single. Day.</p>
<h3 class="font-bold text-gray-900 dark:text-white mb-2">{{ _("cms.platform.modern.pain_manual") }}</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">{{ _("cms.platform.modern.pain_manual_desc") }}</p>
</div>
<div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-6">
<div class="text-3xl mb-4">📦</div>
<h3 class="font-bold text-gray-900 dark:text-white mb-2">Inventory Chaos</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Stock in Letzshop doesn't match reality. Overselling happens.</p>
<h3 class="font-bold text-gray-900 dark:text-white mb-2">{{ _("cms.platform.modern.pain_inventory") }}</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">{{ _("cms.platform.modern.pain_inventory_desc") }}</p>
</div>
<div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-6">
<div class="text-3xl mb-4">🧾</div>
<h3 class="font-bold text-gray-900 dark:text-white mb-2">Wrong VAT Invoices</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">EU customers need correct VAT. Your accountant keeps complaining.</p>
<h3 class="font-bold text-gray-900 dark:text-white mb-2">{{ _("cms.platform.modern.pain_vat") }}</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">{{ _("cms.platform.modern.pain_vat_desc") }}</p>
</div>
<div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-6">
<div class="text-3xl mb-4">👥</div>
<h3 class="font-bold text-gray-900 dark:text-white mb-2">Lost Customers</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">Letzshop owns your customer data. You can't retarget or build loyalty.</p>
<h3 class="font-bold text-gray-900 dark:text-white mb-2">{{ _("cms.platform.modern.pain_customers") }}</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm">{{ _("cms.platform.modern.pain_customers_desc") }}</p>
</div>
</div>
</div>
@@ -196,10 +196,10 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<div class="inline-block px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full text-sm font-semibold mb-4">
How It Works
{{ _("cms.platform.modern.how_title") }}
</div>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
From Chaos to Control in 4 Steps
{{ _("cms.platform.modern.how_subtitle") }}
</h2>
</div>
@@ -208,8 +208,8 @@
<div class="relative">
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg h-full">
<div class="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold text-xl mb-6">1</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Connect Letzshop</h3>
<p class="text-gray-600 dark:text-gray-400">Enter your Letzshop API credentials. Done in 2 minutes, no technical skills needed.</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ _("cms.platform.modern.how_step1") }}</h3>
<p class="text-gray-600 dark:text-gray-400">{{ _("cms.platform.modern.how_step1_desc") }}</p>
</div>
<div class="hidden lg:block absolute top-1/2 -right-4 w-8 h-0.5 bg-blue-300"></div>
</div>
@@ -218,8 +218,8 @@
<div class="relative">
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg h-full">
<div class="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold text-xl mb-6">2</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Orders Flow In</h3>
<p class="text-gray-600 dark:text-gray-400">Orders sync automatically. Confirm and add tracking directly from Orion.</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ _("cms.platform.modern.how_step2") }}</h3>
<p class="text-gray-600 dark:text-gray-400">{{ _("cms.platform.modern.how_step2_desc") }}</p>
</div>
<div class="hidden lg:block absolute top-1/2 -right-4 w-8 h-0.5 bg-blue-300"></div>
</div>
@@ -228,8 +228,8 @@
<div class="relative">
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg h-full">
<div class="w-12 h-12 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold text-xl mb-6">3</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Generate Invoices</h3>
<p class="text-gray-600 dark:text-gray-400">One click to create compliant PDF invoices with correct VAT for any EU country.</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ _("cms.platform.modern.how_step3") }}</h3>
<p class="text-gray-600 dark:text-gray-400">{{ _("cms.platform.modern.how_step3_desc") }}</p>
</div>
<div class="hidden lg:block absolute top-1/2 -right-4 w-8 h-0.5 bg-blue-300"></div>
</div>
@@ -238,8 +238,8 @@
<div class="relative">
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg h-full">
<div class="w-12 h-12 rounded-full bg-green-500 text-white flex items-center justify-center font-bold text-xl mb-6">4</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Grow Your Business</h3>
<p class="text-gray-600 dark:text-gray-400">Export customers for marketing. Track inventory. Focus on selling, not spreadsheets.</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ _("cms.platform.modern.how_step4") }}</h3>
<p class="text-gray-600 dark:text-gray-400">{{ _("cms.platform.modern.how_step4_desc") }}</p>
</div>
</div>
</div>
@@ -253,13 +253,13 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<div class="inline-block px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full text-sm font-semibold mb-4">
Features
{{ _("cms.platform.modern.features_badge") }}
</div>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Everything a Letzshop Seller Needs
{{ _("cms.platform.modern.features_title") }}
</h2>
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
The operational tools Letzshop doesn't provide
{{ _("cms.platform.modern.features_subtitle") }}
</p>
</div>
@@ -271,12 +271,12 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Automatic Order Sync</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">Orders from Letzshop appear instantly. Confirm orders and sync tracking numbers back automatically.</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ _("cms.platform.modern.feat_order_sync") }}</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">{{ _("cms.platform.modern.feat_order_sync_desc") }}</p>
<ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>Real-time sync</li>
<li>One-click confirmation</li>
<li>Tracking number sync</li>
<li>{{ _("cms.platform.modern.feat_order_sync_1") }}</li>
<li>{{ _("cms.platform.modern.feat_order_sync_2") }}</li>
<li>{{ _("cms.platform.modern.feat_order_sync_3") }}</li>
</ul>
</div>
@@ -287,12 +287,12 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Real Inventory Management</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">One source of truth for all stock. Locations, reservations, and incoming stock tracking.</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ _("cms.platform.modern.feat_inventory") }}</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">{{ _("cms.platform.modern.feat_inventory_desc") }}</p>
<ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>Product locations (bins)</li>
<li>Stock reservations</li>
<li>Low stock alerts</li>
<li>{{ _("cms.platform.modern.feat_inventory_1") }}</li>
<li>{{ _("cms.platform.modern.feat_inventory_2") }}</li>
<li>{{ _("cms.platform.modern.feat_inventory_3") }}</li>
</ul>
</div>
@@ -303,12 +303,12 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Smart VAT Invoicing</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">Generate PDF invoices with correct VAT rates. Luxembourg, EU countries, B2B reverse charge.</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ _("cms.platform.modern.feat_invoicing") }}</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">{{ _("cms.platform.modern.feat_invoicing_desc") }}</p>
<ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>Luxembourg 17% VAT</li>
<li>EU destination VAT (OSS)</li>
<li>B2B reverse charge</li>
<li>{{ _("cms.platform.modern.feat_invoicing_1") }}</li>
<li>{{ _("cms.platform.modern.feat_invoicing_2") }}</li>
<li>{{ _("cms.platform.modern.feat_invoicing_3") }}</li>
</ul>
</div>
@@ -319,12 +319,12 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Own Your Customers</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">All customer data in your database. Export to Mailchimp for marketing campaigns.</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ _("cms.platform.modern.feat_customers") }}</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">{{ _("cms.platform.modern.feat_customers_desc") }}</p>
<ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>Order history per customer</li>
<li>Lifetime value tracking</li>
<li>CSV export for marketing</li>
<li>{{ _("cms.platform.modern.feat_customers_1") }}</li>
<li>{{ _("cms.platform.modern.feat_customers_2") }}</li>
<li>{{ _("cms.platform.modern.feat_customers_3") }}</li>
</ul>
</div>
@@ -335,12 +335,12 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Team Management</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">Invite team members with role-based permissions. Everyone works from one dashboard.</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ _("cms.platform.modern.feat_team") }}</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">{{ _("cms.platform.modern.feat_team_desc") }}</p>
<ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>Multiple users</li>
<li>Role-based access</li>
<li>Activity logging</li>
<li>{{ _("cms.platform.modern.feat_team_1") }}</li>
<li>{{ _("cms.platform.modern.feat_team_2") }}</li>
<li>{{ _("cms.platform.modern.feat_team_3") }}</li>
</ul>
</div>
@@ -351,12 +351,12 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Purchase Orders</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">Track incoming stock from suppliers. Know what's on order and when it arrives.</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">{{ _("cms.platform.modern.feat_purchase_orders") }}</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">{{ _("cms.platform.modern.feat_purchase_orders_desc") }}</p>
<ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li>Track supplier orders</li>
<li>Expected arrival dates</li>
<li>Receive and update stock</li>
<li>{{ _("cms.platform.modern.feat_purchase_orders_1") }}</li>
<li>{{ _("cms.platform.modern.feat_purchase_orders_2") }}</li>
<li>{{ _("cms.platform.modern.feat_purchase_orders_3") }}</li>
</ul>
</div>
</div>
@@ -370,175 +370,175 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<div class="inline-block px-4 py-2 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full text-sm font-semibold mb-4">
Pricing
{{ _("cms.platform.modern.pricing_badge") }}
</div>
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
Simple, Transparent Pricing
{{ _("cms.platform.modern.pricing_title") }}
</h2>
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
No per-order fees. No hidden costs. Flat monthly rate.
{{ _("cms.platform.modern.pricing_subtitle") }}
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{# Essential #}
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">Essential</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-4">For solo stores getting started</p>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">{{ _("cms.platform.modern.tier_essential") }}</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-4">{{ _("cms.platform.modern.tier_essential_desc") }}</p>
<div class="mb-6">
<span class="text-4xl font-bold text-gray-900 dark:text-white">EUR 49</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
<span class="text-4xl font-bold text-gray-900 dark:text-white">{{ _("cms.platform.modern.tier_essential_price") }}</span>
<span class="text-gray-500 dark:text-gray-400">{{ _("cms.platform.modern.pricing_per_month") }}</span>
</div>
<ul class="space-y-3 mb-8 text-sm">
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
100 orders/month
{{ _("cms.platform.modern.tier_essential_feat_1") }}
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
200 products
{{ _("cms.platform.modern.tier_essential_feat_2") }}
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Luxembourg VAT invoices
{{ _("cms.platform.modern.tier_essential_feat_3") }}
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
1 team member
{{ _("cms.platform.modern.tier_essential_feat_4") }}
</li>
</ul>
<a href="/contact" class="block w-full text-center bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white px-6 py-3 rounded-xl font-semibold hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
Start Free Trial
{{ _("cms.platform.modern.tier_essential_cta") }}
</a>
</div>
{# Professional - Highlighted #}
<div class="bg-blue-600 rounded-2xl p-8 shadow-xl relative transform lg:scale-105">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full">
MOST POPULAR
{{ _("cms.platform.modern.tier_professional_badge") }}
</div>
<h3 class="text-lg font-bold text-white mb-2">Professional</h3>
<p class="text-blue-200 text-sm mb-4">For growing multi-channel sellers</p>
<h3 class="text-lg font-bold text-white mb-2">{{ _("cms.platform.modern.tier_professional") }}</h3>
<p class="text-blue-200 text-sm mb-4">{{ _("cms.platform.modern.tier_professional_desc") }}</p>
<div class="mb-6">
<span class="text-4xl font-bold text-white">EUR 99</span>
<span class="text-blue-200">/month</span>
<span class="text-4xl font-bold text-white">{{ _("cms.platform.modern.tier_professional_price") }}</span>
<span class="text-blue-200">{{ _("cms.platform.modern.pricing_per_month") }}</span>
</div>
<ul class="space-y-3 mb-8 text-sm">
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
500 orders/month
{{ _("cms.platform.modern.tier_professional_feat_1") }}
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Unlimited products
{{ _("cms.platform.modern.tier_professional_feat_2") }}
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<strong>EU VAT invoices</strong>
<strong>{{ _("cms.platform.modern.tier_professional_feat_3") }}</strong>
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Product locations
{{ _("cms.platform.modern.tier_professional_feat_4") }}
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Purchase orders
{{ _("cms.platform.modern.tier_professional_feat_5") }}
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Customer export
{{ _("cms.platform.modern.tier_professional_feat_6") }}
</li>
<li class="flex items-center text-blue-100">
<svg class="w-5 h-5 text-green-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
3 team members
{{ _("cms.platform.modern.tier_professional_feat_7") }}
</li>
</ul>
<a href="/contact" class="block w-full text-center bg-white text-blue-600 px-6 py-3 rounded-xl font-bold hover:bg-blue-50 transition-colors">
Start Free Trial
{{ _("cms.platform.modern.tier_professional_cta") }}
</a>
</div>
{# Business #}
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">Business</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-4">For high-volume operations</p>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">{{ _("cms.platform.modern.tier_business") }}</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-4">{{ _("cms.platform.modern.tier_business_desc") }}</p>
<div class="mb-6">
<span class="text-4xl font-bold text-gray-900 dark:text-white">EUR 199</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
<span class="text-4xl font-bold text-gray-900 dark:text-white">{{ _("cms.platform.modern.tier_business_price") }}</span>
<span class="text-gray-500 dark:text-gray-400">{{ _("cms.platform.modern.pricing_per_month") }}</span>
</div>
<ul class="space-y-3 mb-8 text-sm">
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
2,000 orders/month
{{ _("cms.platform.modern.tier_business_feat_1") }}
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Everything in Professional
{{ _("cms.platform.modern.tier_business_feat_2") }}
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<strong>Analytics dashboard</strong>
<strong>{{ _("cms.platform.modern.tier_business_feat_3") }}</strong>
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<strong>API access</strong>
<strong>{{ _("cms.platform.modern.tier_business_feat_4") }}</strong>
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Accounting export
{{ _("cms.platform.modern.tier_business_feat_5") }}
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
10 team members
{{ _("cms.platform.modern.tier_business_feat_6") }}
</li>
</ul>
<a href="/contact" class="block w-full text-center bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white px-6 py-3 rounded-xl font-semibold hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
Start Free Trial
{{ _("cms.platform.modern.tier_business_cta") }}
</a>
</div>
{# Enterprise #}
<div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">Enterprise</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-4">For large operations & agencies</p>
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">{{ _("cms.platform.modern.tier_enterprise") }}</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm mb-4">{{ _("cms.platform.modern.tier_enterprise_desc") }}</p>
<div class="mb-6">
<span class="text-4xl font-bold text-gray-900 dark:text-white">EUR 399+</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
<span class="text-4xl font-bold text-gray-900 dark:text-white">{{ _("cms.platform.modern.tier_enterprise_price") }}</span>
<span class="text-gray-500 dark:text-gray-400">{{ _("cms.platform.modern.pricing_per_month") }}</span>
</div>
<ul class="space-y-3 mb-8 text-sm">
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Unlimited orders
{{ _("cms.platform.modern.tier_enterprise_feat_1") }}
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Everything in Business
{{ _("cms.platform.modern.tier_enterprise_feat_2") }}
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<strong>White-label option</strong>
<strong>{{ _("cms.platform.modern.tier_enterprise_feat_3") }}</strong>
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Custom integrations
{{ _("cms.platform.modern.tier_enterprise_feat_4") }}
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
99.9% SLA
{{ _("cms.platform.modern.tier_enterprise_feat_5") }}
</li>
<li class="flex items-center text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Dedicated support
{{ _("cms.platform.modern.tier_enterprise_feat_6") }}
</li>
</ul>
<a href="/contact" class="block w-full text-center bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white px-6 py-3 rounded-xl font-semibold hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
Contact Sales
{{ _("cms.platform.modern.tier_enterprise_cta") }}
</a>
</div>
</div>
<p class="text-center text-gray-500 dark:text-gray-400 mt-8">
All plans include a 14-day free trial. No credit card required.
{{ _("cms.platform.modern.pricing_trial_note") }}
</p>
</div>
</section>
@@ -549,11 +549,11 @@
<section class="py-20 bg-white dark:bg-gray-900">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="inline-block px-4 py-2 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 rounded-full text-sm font-semibold mb-8">
Built for Luxembourg
{{ _("cms.platform.modern.testimonial_badge") }}
</div>
<blockquote class="text-2xl md:text-3xl font-medium text-gray-900 dark:text-white mb-8 leading-relaxed">
"Finally, a tool that understands what Letzshop sellers actually need. No more spreadsheets, no more VAT headaches."
"{{ _("cms.platform.modern.testimonial_quote") }}"
</blockquote>
<div class="flex items-center justify-center gap-4">
@@ -561,8 +561,8 @@
👩
</div>
<div class="text-left">
<div class="font-semibold text-gray-900 dark:text-white">Marie L.</div>
<div class="text-gray-500 dark:text-gray-400 text-sm">Letzshop Store, Luxembourg City</div>
<div class="font-semibold text-gray-900 dark:text-white">{{ _("cms.platform.modern.testimonial_name") }}</div>
<div class="text-gray-500 dark:text-gray-400 text-sm">{{ _("cms.platform.modern.testimonial_location") }}</div>
</div>
</div>
</div>
@@ -574,16 +574,16 @@
<section class="py-20 bg-gray-900 text-white">
<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 mb-6">
Ready to Take Control of Your Letzshop Business?
{{ _("cms.platform.modern.cta_final_title") }}
</h2>
<p class="text-xl text-gray-300 mb-10">
Join Luxembourg stores who've stopped fighting spreadsheets and started growing their business.
{{ _("cms.platform.modern.cta_final_subtitle") }}
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/contact"
class="inline-flex items-center justify-center bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-xl font-bold transition-all duration-200 shadow-lg">
<span>Start Your 14-Day Free Trial</span>
<span>{{ _("cms.platform.modern.cta_final_trial") }}</span>
<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"></path>
</svg>
@@ -591,7 +591,7 @@
</div>
<p class="mt-8 text-sm text-gray-400">
No credit card required. Setup in 5 minutes. Full Professional features during trial.
{{ _("cms.platform.modern.cta_final_note") }}
</p>
</div>
</section>

46
app/modules/cms/templates/cms/platform/sections/_pricing.html
View File

@@ -8,23 +8,28 @@
- tiers: List of subscription tiers from DB (passed via context)
#}
{# Helper macro: resolve a TranslatableText field with fallback #}
{% macro _t(field, fallback='') %}
{%- if field and field.translations -%}
{{ field.translations.get(lang) or field.translations.get(default_lang) or fallback }}
{%- else -%}
{{ fallback }}
{%- endif -%}
{% endmacro %}
{% macro render_pricing(pricing, lang, default_lang, tiers) %}
{% if pricing and pricing.enabled %}
<section id="pricing" class="py-16 lg:py-24 bg-gray-50 dark:bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{# Section header - tries CMS content first, falls back to locale files #}
{# Section header #}
<div class="text-center mb-12">
{% set title = (pricing.title.translations.get(lang) if pricing.title and pricing.title.translations else none)
or (pricing.title.translations.get(default_lang) if pricing.title and pricing.title.translations else none)
or _('cms.platform.pricing.title') or 'Simple, Transparent Pricing' %}
{% set title = _t(pricing.title, 'Simple, Transparent Pricing') %}
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
{{ title }}
</h2>
{% set subtitle = (pricing.subtitle.translations.get(lang) if pricing.subtitle and pricing.subtitle.translations else none)
or (pricing.subtitle.translations.get(default_lang) if pricing.subtitle and pricing.subtitle.translations else none)
or _('cms.platform.pricing.subtitle') or '' %}
{% if subtitle %}
{% set subtitle = _t(pricing.subtitle) %}
{% if subtitle|trim %}
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
{{ subtitle }}
</p>
@@ -33,11 +38,19 @@
{# Pricing toggle (monthly/annual) #}
{% if pricing.use_subscription_tiers and tiers %}
{% set monthly_label = _t(pricing.monthly_label, 'Monthly') %}
{% set annual_label = _t(pricing.annual_label, 'Annual') %}
{% set save_text = _t(pricing.save_text, 'Save 2 months!') %}
{% set popular_badge = _t(pricing.popular_badge, 'Most Popular') %}
{% set cta_text = _t(pricing.cta_text, 'Start Free Trial') %}
{% set per_month = _t(pricing.per_month_label, '/month') %}
{% set per_year = _t(pricing.per_year_label, '/year') %}
<div x-data="{ annual: false }" class="space-y-8">
{# Billing toggle #}
<div class="flex justify-center items-center space-x-4">
<span :class="annual ? 'text-gray-400' : 'text-gray-900 dark:text-white font-semibold'">
{{ _('cms.platform.pricing.monthly') or 'Monthly' }}
{{ monthly_label }}
</span>
<button @click="annual = !annual"
class="relative w-14 h-7 bg-gray-200 dark:bg-gray-700 rounded-full transition-colors"
@@ -46,8 +59,8 @@
:class="annual && 'translate-x-7'"></span>
</button>
<span :class="!annual ? 'text-gray-400' : 'text-gray-900 dark:text-white font-semibold'">
{{ _('cms.platform.pricing.annual') or 'Annual' }}
<span class="text-green-500 text-sm ml-1">{{ _('cms.platform.pricing.save_months') or 'Save 2 months!' }}</span>
{{ annual_label }}
<span class="text-green-500 text-sm ml-1">{{ save_text }}</span>
</span>
</div>
@@ -58,7 +71,7 @@
{% if tier.is_popular %}
<div class="absolute -top-4 left-1/2 -translate-x-1/2">
<span class="bg-indigo-500 text-white text-sm font-semibold px-4 py-1 rounded-full">
{{ _('cms.platform.pricing.most_popular') or 'Most Popular' }}
{{ popular_badge }}
</span>
</div>
{% endif %}
@@ -77,15 +90,15 @@
€<span x-text="annual ? '{{ tier.price_annual or (tier.price_monthly * 10)|int }}' : '{{ tier.price_monthly }}'">{{ tier.price_monthly }}</span>
</span>
<span class="text-gray-500 dark:text-gray-400"
x-text="annual ? '{{ _('cms.platform.pricing.per_year') or '/year' }}' : '{{ _('cms.platform.pricing.per_month') or '/month' }}'">
{{ _('cms.platform.pricing.per_month') or '/month' }}
x-text="annual ? '{{ per_year }}' : '{{ per_month }}'">
{{ per_month }}
</span>
</div>
{# CTA button #}
<a href="/signup?tier={{ tier.code }}"
class="block w-full py-3 px-6 rounded-xl font-semibold transition {% if tier.is_popular %}bg-indigo-600 text-white hover:bg-indigo-700{% else %}bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600{% endif %}">
{{ _('cms.platform.pricing.start_trial') or 'Start Free Trial' }}
{{ cta_text }}
</a>
</div>
@@ -108,8 +121,9 @@
</div>
{% else %}
{# Placeholder when no tiers available #}
{% set coming_soon = _t(pricing.coming_soon_text, 'Pricing plans coming soon') %}
<div class="text-center text-gray-500 dark:text-gray-400 py-8">
{{ _('cms.platform.pricing.coming_soon') or 'Pricing plans coming soon' }}
{{ coming_soon }}
</div>
{% endif %}
</div>

6
app/modules/cms/templates/cms/platform/sections/_products.html
View File

@@ -72,10 +72,12 @@
{# CTA Link #}
{% if product.url %}
{% set link_label = (product.link_text.translations.get(lang) if product.link_text and product.link_text.translations else none)
or (product.link_text.translations.get(default_lang) if product.link_text and product.link_text.translations else none)
or 'Learn More' %}
<a href="{{ product.url }}"
class="inline-flex items-center text-indigo-600 dark:text-indigo-400 font-semibold hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors group-hover:translate-x-1 transform transition-transform">
{% set link_text = product_title or 'Learn More' %}
Learn More
{{ link_label }}
<svg class="w-4 h-4 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>