feat: add toggle_switch macro and fix homepage issues

- Add reusable toggle_switch macro to inputs.html with size/color options
- Replace inline billing toggle with macro on homepage
- Add € currency signs to addon prices

🤖 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 18:25:53 +01:00
parent 97163a3af6
commit b4b524d021
2 changed files with 71 additions and 14 deletions

View File

@@ -1,6 +1,7 @@
{# app/templates/platform/homepage-wizamart.html #}
{# Wizamart Marketing Homepage - Letzshop OMS Platform #}
{% extends "platform/base.html" %}
{% from 'shared/macros/inputs.html' import toggle_switch %}
{% block title %}Wizamart - Order Management for Letzshop Sellers{% endblock %}
{% block meta_description %}Lightweight OMS for Letzshop vendors. Manage orders, inventory, and invoicing. Start your 30-day free trial today.{% endblock %}
@@ -74,18 +75,13 @@
</p>
{# Billing Toggle #}
<div class="flex items-center justify-center mt-8 gap-4">
<span class="text-gray-700 dark:text-gray-300 min-w-[70px] text-right" :class="{ 'font-semibold': !annual }">{{ _("platform.pricing.monthly") }}</span>
<button @click="annual = !annual"
class="relative w-14 h-7 rounded-full transition-colors flex-shrink-0"
: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 min-w-[150px]" :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 class="flex justify-center mt-8">
{{ toggle_switch(
model='annual',
left_label=_("platform.pricing.monthly"),
right_label=_("platform.pricing.annual"),
right_badge=_("platform.pricing.save_months")
) }}
</div>
</div>
@@ -276,7 +272,7 @@
{# Price #}
<div class="flex items-baseline">
<span class="text-2xl font-bold text-gray-900 dark:text-white">{{ addon.price }}</span>
<span class="text-2xl font-bold text-gray-900 dark:text-white">{{ addon.price }}</span>
<span class="text-gray-500 dark:text-gray-400 ml-1">/{{ addon.billing_period }}</span>
</div>
@@ -285,7 +281,7 @@
<div class="mt-4 space-y-2">
{% for opt in addon.options %}
<div class="text-sm text-gray-600 dark:text-gray-400">
{{ opt.quantity }} addresses: {{ opt.price }}/month
{{ opt.quantity }} addresses: {{ opt.price }}/month
</div>
{% endfor %}
</div>