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/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 %}