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>

app/templates/platform/homepage-wizamart.html

@@ -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">
+                <div class="flex justify-center mt-8">
-                    <span class="text-gray-700 dark:text-gray-300 min-w-[70px] text-right" :class="{ 'font-semibold': !annual }">{{ _("platform.pricing.monthly") }}</span>
+                    {{ toggle_switch(
-                    <button @click="annual = !annual"
+                        model='annual',
-                            class="relative w-14 h-7 rounded-full transition-colors flex-shrink-0"
+                        left_label=_("platform.pricing.monthly"),
-                            :class="annual ? 'bg-indigo-600' : 'bg-gray-300 dark:bg-gray-600'">
+                        right_label=_("platform.pricing.annual"),
-                        <span class="absolute top-1 left-1 w-5 h-5 bg-white rounded-full shadow transition-transform"
+                        right_badge=_("platform.pricing.save_months")
-                              :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>
             </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>

app/templates/shared/macros/inputs.html

@@ -282,3 +282,64 @@
     ></select>
 </div>
 {% endmacro %}
+
+
+{#
+  Toggle Switch
+  =============
+  A toggle switch component for binary options (on/off, monthly/annual, etc.)
+  with optional labels on both sides.
+
+  Parameters:
+    - model: Alpine.js x-model variable (required)
+    - left_label: Label for the "off" state (optional)
+    - right_label: Label for the "on" state (optional)
+    - right_badge: Small badge/extra text for right label (optional)
+    - size: 'sm' | 'md' | 'lg' (default: 'md')
+    - color: Tailwind color name for active state (default: 'indigo')
+
+  Usage:
+    {{ toggle_switch(model='annual', left_label='Monthly', right_label='Annual', right_badge='Save 2 months') }}
+    {{ toggle_switch(model='darkMode', size='sm') }}
+#}
+{% macro toggle_switch(
+    model,
+    left_label=none,
+    right_label=none,
+    right_badge=none,
+    size='md',
+    color='indigo'
+) %}
+{% set sizes = {
+    'sm': {'track': 'w-10 h-5', 'thumb': 'w-4 h-4', 'translate': 'translate-x-5', 'text': 'text-sm'},
+    'md': {'track': 'w-14 h-7', 'thumb': 'w-5 h-5', 'translate': 'translate-x-7', 'text': 'text-base'},
+    'lg': {'track': 'w-16 h-8', 'thumb': 'w-6 h-6', 'translate': 'translate-x-8', 'text': 'text-lg'}
+} %}
+{% set s = sizes[size] %}
+<div class="inline-flex items-center gap-3">
+    {% if left_label %}
+    <span class="{{ s.text }} text-gray-700 dark:text-gray-300 select-none"
+          :class="{ 'font-semibold': !{{ model }} }">{{ left_label }}</span>
+    {% endif %}
+
+    <button type="button"
+            @click="{{ model }} = !{{ model }}"
+            role="switch"
+            :aria-checked="{{ model }}"
+            class="{{ s.track }} relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-{{ color }}-500 focus:ring-offset-2"
+            :class="{{ model }} ? 'bg-{{ color }}-600' : 'bg-gray-300 dark:bg-gray-600'">
+        <span class="{{ s.thumb }} absolute left-0.5 bg-white rounded-full shadow-md transition-transform"
+              :class="{{ model }} ? '{{ s.translate }}' : 'translate-x-0'"></span>
+    </button>
+
+    {% if right_label %}
+    <span class="{{ s.text }} text-gray-700 dark:text-gray-300 select-none"
+          :class="{ 'font-semibold': {{ model }} }">
+        {{ right_label }}
+        {% if right_badge %}
+        <span class="text-green-600 dark:text-green-400 text-sm font-medium ml-1">{{ right_badge }}</span>
+        {% endif %}
+    </span>
+    {% endif %}
+</div>
+{% endmacro %}