From e0cb0517fcf908b8abed7706f50ff7c5afb1bd36 Mon Sep 17 00:00:00 2001 From: chahinebrini Date: Sun, 7 Jun 2026 22:56:14 +0200 Subject: [PATCH] feat(marketing): cross-device pricing-hero + Header-Nav statt Tabbar (live prod) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Pricing: Device-Hero-Reihe (iPhone/Android/Mac/Windows) + Tagline 'ein Abo, alle Geräte' — heroicons (offline gebündelt) - Layout: Floating-Tabbar raus -> Header-Nav (Desktop) / Hamburger (mobil) - Locales: cross_device_tagline + Geräte-Matrix-Texte Deployed: rebreak.org (marketing-prod) via deploy-marketing.sh Co-Authored-By: Claude Opus 4.8 --- apps/marketing/app/layouts/default.vue | 90 +++++++++++++------------- apps/marketing/app/locales/de.json | 13 ++-- apps/marketing/app/locales/en.json | 13 ++-- apps/marketing/app/pages/pricing.vue | 22 +++++++ 4 files changed, 81 insertions(+), 57 deletions(-) diff --git a/apps/marketing/app/layouts/default.vue b/apps/marketing/app/layouts/default.vue index 6832c1c..b18c9fe 100644 --- a/apps/marketing/app/layouts/default.vue +++ b/apps/marketing/app/layouts/default.vue @@ -1,36 +1,61 @@ @@ -66,28 +76,18 @@ const { height: vpHeight } = useViewportHeight(); const route = useRoute(); const { t } = useI18n(); +const menuOpen = ref(false); -const tabs = computed(() => [ - { - to: "/", - icon: "i-heroicons-home", - iconActive: "i-heroicons-home-solid", - label: t('pricing.footer_home'), - }, - { - to: "/pricing", - icon: "i-heroicons-credit-card", - iconActive: "i-heroicons-credit-card-solid", - label: t('pricing.footer_pricing'), - }, - { - to: "/resources", - icon: "i-heroicons-book-open", - iconActive: "i-heroicons-book-open-solid", - label: t('pricing.footer_resources'), - }, +// Eine Nav-Quelle für Desktop-Header UND Mobile-Hamburger (keine Tabbar mehr). +const navLinks = computed(() => [ + { to: "/", icon: "i-heroicons-home", label: t('pricing.footer_home') }, + { to: "/pricing", icon: "i-heroicons-credit-card", label: t('nav.pricing') }, + { to: "/resources", icon: "i-heroicons-book-open", label: t('nav.resources') }, ]); +// Menü bei Routenwechsel schließen +watch(() => route.path, () => { menuOpen.value = false; }); + function isActive(to: string) { if (to === "/") return route.path === "/"; return route.path.startsWith(to); diff --git a/apps/marketing/app/locales/de.json b/apps/marketing/app/locales/de.json index 5bf33a9..749573f 100644 --- a/apps/marketing/app/locales/de.json +++ b/apps/marketing/app/locales/de.json @@ -146,6 +146,7 @@ "title": "Dein Weg, dein Tempo", "subtitle_start": "Jetzt starten –", "subtitle_end": "wähle deinen Plan.", + "cross_device_tagline": "Ein Abo schützt alle deine Geräte – Handy und Computer, geräteübergreifend.", "pro_meaning_title": "Was bedeutet Pro wirklich?", "pro_meaning_desc": "Mit Pro trägst du aktiv dazu bei, dass die ReBreak Blocklist für alle wächst. Du kannst Domains direkt hinzufügen und Einreichungen anderer Nutzer prüfen. Du leitest Gruppen, hast keinen KI-Gedächtnisverlust – und stehst an der Spitze für alle, die noch kämpfen.", "comparison_title": "Was ist inklusive?", @@ -172,11 +173,11 @@ "plan_pro_desc": "Voller Schutz für ein Gerät – alles, was du im Alltag brauchst.", "plan_pro_btn": "Pro starten", "plan_legend_title": "Legend", - "plan_legend_desc": "Maximaler Schutz für bis zu 3 Geräte – inkl. Selbstbindungs-Modus.", + "plan_legend_desc": "Lückenloser Schutz auf bis zu 5 Geräten – inkl. Selbstbindungs-Modus.", "plan_legend_btn": "Legend starten", "plan_loading": "Wird geladen...", "plan_recommended": "Empfohlen", - "feat_pro_devices": "1 Gerät (iOS, Android oder macOS)", + "feat_pro_devices": "2 Geräte – 1 Smartphone (iOS/Android) + 1 Computer (Mac oder Windows)", "feat_pro_domains": "5 eigene Domains (rückfüllbar)", "feat_pro_mail": "Echtzeit-Mail-Schutz (IMAP-IDLE, 2 Konten)", "feat_blocklist": "ReBreak Blocklist (208k+ Domains)", @@ -189,7 +190,7 @@ "feat_buddy": "Buddy System", "feat_urge_stats": "Urge-Statistiken & Muster", "feat_all_pro": "Alles aus Pro", - "feat_legend_devices": "Bis zu 3 Geräte (iOS, Android, macOS)", + "feat_legend_devices": "5 Geräte – 3 mobil (iOS/Android) + 2 stationär (Mac & Windows)", "feat_legend_domains": "Unbegrenzte eigene Domains", "feat_legend_mail": "Echtzeit-Mail-Schutz (IMAP-IDLE, unbegrenzte Konten)", "feat_legend_binder": "RebReakBinder – Selbstbindungs-Modus (opt-in, macOS)", @@ -213,8 +214,8 @@ "comp_add_domain": "Domains zur Blocklist hinzufügen", "comp_validate": "Community-Domains validieren", "comp_groups": "Gruppen gründen & leiten", - "comp_pro_devices": "1", - "comp_legend_devices": "bis 3", + "comp_pro_devices": "2 (1 mobil + 1 Computer)", + "comp_legend_devices": "5 (3 mobil + 2 Computer)", "comp_pro_domains": "5 (rückfüllbar)", "comp_legend_domains": "Unbegrenzt", "comp_pro_mail_val": "Echtzeit · 2 Konten", @@ -224,7 +225,7 @@ "faq1_q": "Muss ich eine E-Mail-Adresse angeben?", "faq1_a": "Ja, für die Registrierung wird eine E-Mail-Adresse benötigt. Deine Daten werden ausschließlich auf deutschen Servern gespeichert und verarbeitet – vollständig anonym, nach strengen DSGVO-Standards. Kein Name, kein Standort, kein Nutzungsverhalten wird an Dritte weitergegeben.", "faq2_q": "Was ist der Unterschied zwischen Pro und Legend?", - "faq2_a": "Pro schützt EIN Gerät mit Echtzeit-Mail-Schutz (IMAP-IDLE, 2 Konten), ReBreak Blocklist (208k+ Domains) und Lyra mit Streak/Urge-Stats. Legend deckt BIS ZU 3 Geräte ab, hat unbegrenzte Mail-Konten und Domains, schaltet den RebReakBinder-Selbstbindungs-Modus (macOS) frei und gibt dir Lyra mit Langzeit-Gedächtnis sowie Gruppen-Leitung.", + "faq2_a": "Pro schützt 2 Geräte – dein Smartphone und deinen Computer (Mac oder Windows) – mit Echtzeit-Mail-Schutz (IMAP-IDLE, 2 Konten), ReBreak Blocklist (208k+ Domains) und Lyra mit Streak/Urge-Stats. Legend deckt BIS ZU 5 Geräte ab (3 mobil + 2 stationär), hat unbegrenzte Mail-Konten und Domains, schaltet den Rebreak-Magic-Selbstbindungs-Modus frei und gibt dir Lyra mit Langzeit-Gedächtnis sowie Gruppen-Leitung.", "faq3_q": "Welche Zahlungszyklen gibt es?", "faq3_a": "Monatlich (voller Preis) oder jährlich (Spare 39%). Du kannst jederzeit wechseln.", "faq4_q": "Kann ich jederzeit kündigen?", diff --git a/apps/marketing/app/locales/en.json b/apps/marketing/app/locales/en.json index 3880cbb..dbd679c 100644 --- a/apps/marketing/app/locales/en.json +++ b/apps/marketing/app/locales/en.json @@ -146,6 +146,7 @@ "title": "Your path, your pace", "subtitle_start": "Start now –", "subtitle_end": "choose your plan.", + "cross_device_tagline": "One subscription protects all your devices – phone and computer, everywhere.", "pro_meaning_title": "What does Pro really mean?", "pro_meaning_desc": "With Pro you actively contribute to growing the ReBreak blocklist for everyone. You can add domains directly and review submissions from other users. You lead groups, have no AI memory loss – and stand at the forefront for everyone still fighting.", "comparison_title": "What's included?", @@ -172,11 +173,11 @@ "plan_pro_desc": "Full protection for one device – everything you need day to day.", "plan_pro_btn": "Start Pro", "plan_legend_title": "Legend", - "plan_legend_desc": "Maximum protection for up to 3 devices – incl. self-binding mode.", + "plan_legend_desc": "Seamless protection on up to 5 devices – incl. self-binding mode.", "plan_legend_btn": "Start Legend", "plan_loading": "Loading...", "plan_recommended": "Recommended", - "feat_pro_devices": "1 device (iOS, Android or macOS)", + "feat_pro_devices": "2 devices – 1 smartphone (iOS/Android) + 1 computer (Mac or Windows)", "feat_pro_domains": "5 custom domains (refillable)", "feat_pro_mail": "Real-time mail protection (IMAP IDLE, 2 accounts)", "feat_blocklist": "ReBreak Blocklist (208k+ domains)", @@ -189,7 +190,7 @@ "feat_buddy": "Buddy System", "feat_urge_stats": "Urge statistics & patterns", "feat_all_pro": "Everything in Pro", - "feat_legend_devices": "Up to 3 devices (iOS, Android, macOS)", + "feat_legend_devices": "5 devices – 3 mobile (iOS/Android) + 2 desktop (Mac & Windows)", "feat_legend_domains": "Unlimited custom domains", "feat_legend_mail": "Real-time mail protection (IMAP IDLE, unlimited accounts)", "feat_legend_binder": "RebReakBinder – self-binding mode (opt-in, macOS)", @@ -213,8 +214,8 @@ "comp_add_domain": "Add domains to blocklist", "comp_validate": "Validate community domains", "comp_groups": "Create & lead groups", - "comp_pro_devices": "1", - "comp_legend_devices": "up to 3", + "comp_pro_devices": "2 (1 mobile + 1 computer)", + "comp_legend_devices": "5 (3 mobile + 2 desktop)", "comp_pro_domains": "5 (refillable)", "comp_legend_domains": "Unlimited", "comp_pro_mail_val": "Real-time · 2 accounts", @@ -224,7 +225,7 @@ "faq1_q": "Do I need to provide an email address?", "faq1_a": "Yes, an email address is required for registration. Your data is stored and processed exclusively on German servers – fully anonymously, according to strict GDPR standards.", "faq2_q": "What's the difference between Pro and Legend?", - "faq2_a": "Pro protects ONE device with real-time mail protection (IMAP IDLE, 2 accounts), ReBreak Blocklist (208k+ domains) and Lyra with streak/urge stats. Legend covers UP TO 3 devices, has unlimited mail accounts and domains, unlocks the RebReakBinder self-binding mode (macOS) and gives you Lyra with long-term memory plus group leadership.", + "faq2_a": "Pro protects 2 devices – your smartphone and your computer (Mac or Windows) – with real-time mail protection (IMAP IDLE, 2 accounts), ReBreak Blocklist (208k+ domains) and Lyra with streak/urge stats. Legend covers UP TO 5 devices (3 mobile + 2 desktop), has unlimited mail accounts and domains, unlocks the Rebreak Magic self-binding mode and gives you Lyra with long-term memory plus group leadership.", "faq3_q": "What billing cycles are available?", "faq3_a": "Monthly (full price) or yearly (save 39%). You can switch at any time.", "faq4_q": "Can I cancel at any time?", diff --git a/apps/marketing/app/pages/pricing.vue b/apps/marketing/app/pages/pricing.vue index c783b75..d8dd4f2 100644 --- a/apps/marketing/app/pages/pricing.vue +++ b/apps/marketing/app/pages/pricing.vue @@ -23,6 +23,20 @@ + +
+

{{ $t('pricing.cross_device_tagline') }}

+
+
+
+ +
+ {{ d.label }} +
+
+
+