SEITEN BU #deploy
This commit is contained in:
parent
167a51f403
commit
4dd085d7bd
BIN
public/Chatgpt_bilder/Riester-Rente.png
Normal file
BIN
public/Chatgpt_bilder/Riester-Rente.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
BIN
public/iStock-652772652.jpg
Normal file
BIN
public/iStock-652772652.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
public/iStock-935259316.jpg
Normal file
BIN
public/iStock-935259316.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
BIN
public/iStock-973184180.jpg
Normal file
BIN
public/iStock-973184180.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 MiB |
@ -1 +1 @@
|
||||
{"title": "Altersvorsorge", "subtitle": "Sorgen Sie frühzeitig für Ihre finanzielle Zukunft vor", "topics": {"riester": {"title": "Riester-Rente"}, "ruerup": {"title": "Rürup-Rente"}, "betrieblich": {"title": "Betriebliche Altersvorsorge"}, "privat": {"title": "Private Rentenversicherung"}, "kapital": {"title": "Kapitallebensversicherung"}, "fonds": {"title": "Fondsgebundene Versicherung"}, "zukunft": {"title": "Zukunftsvorsorge"}, "sparplan": {"title": "Sparplan"}, "investment": {"title": "Investmentfonds"}, "etf": {"title": "ETF-Sparplan"}}}
|
||||
{"title": "Altersvorsorge", "subtitle": "Sorgen Sie frühzeitig für Ihre finanzielle Zukunft vor", "hero": {"title": "Exklusive Lösung zu Fondsrenten", "highlights": ["Aktive Vermögensverwalter-Selektion", "Global diversifiziertes Portfolio", "Fokus auf Vermögenserhalt"]}, "special": {"title": "Spezielle Vorsorgelösungen", "subtitle": "Erleben Sie exklusive, maßgeschneiderte Fondsrentenlösungen mit professionellen Expertenkonzepten für Ihre langfristige und nachhaltige Altersvorsorge."}, "topics": {"riester": {"title": "Riester-Rente"}, "ruerup": {"title": "Rürup-Rente"}, "betrieblich": {"title": "Betriebliche Altersvorsorge"}, "privat": {"title": "Fondsgebundene Rentenversicherung"}, "kapital": {"title": "Kapitallebensversicherung"}, "fonds": {"title": "Fondsgebundene Versicherung"}, "zukunft": {"title": "Zukunftsvorsorge"}, "sparplan": {"title": "Sparplan"}, "investment": {"title": "Investmentfonds"}, "etf": {"title": "ETF-Sparplan"}}}
|
||||
|
||||
92
public/locales/de/berufsunfaehigkeit.json
Normal file
92
public/locales/de/berufsunfaehigkeit.json
Normal file
@ -0,0 +1,92 @@
|
||||
{
|
||||
"hero": {
|
||||
"kicker": "Risikoschutz",
|
||||
"title": "Berufsunfähigkeitsversicherung",
|
||||
"subtitle": "Sichern Sie Ihr Einkommen ab – falls Sie Ihren Beruf aus gesundheitlichen Gründen nicht mehr ausüben können.",
|
||||
"cta1": "Jetzt beraten lassen",
|
||||
"cta2": "Zur Übersicht",
|
||||
"highlights": [
|
||||
"Einkommen absichern",
|
||||
"Frühzeitig vorsorgen",
|
||||
"Tarife vergleichen"
|
||||
]
|
||||
},
|
||||
"tabs": {
|
||||
"overview": "Übersicht",
|
||||
"details": "Details",
|
||||
"calculator": "Rechner",
|
||||
"form": "Anfrage",
|
||||
"catalog": "Ratgeber",
|
||||
"brochure": "PDF"
|
||||
},
|
||||
"overview": {
|
||||
"badge": "BU – Einkommensschutz",
|
||||
"title": "Wenn Arbeit nicht mehr geht",
|
||||
"subtitle": "Schützen Sie Ihr Einkommen langfristig.",
|
||||
"description": "Die Berufsunfähigkeitsversicherung zählt zu den wichtigsten Absicherungen. Wir helfen Ihnen dabei, Leistungen, Bedingungen und Beiträge verständlich zu vergleichen.",
|
||||
"cta1": "Angebot anfordern",
|
||||
"cta2": "Beratung",
|
||||
"feature1Title": "Leistung",
|
||||
"feature1Desc": "Monatliche BU-Rente",
|
||||
"feature2Title": "Schutz",
|
||||
"feature2Desc": "Individuelle Bedingungen",
|
||||
"imageAlt": "Berufsunfähigkeitsversicherung",
|
||||
"imageCaption": "Absicherung prüfen",
|
||||
"imageSubtext": "Wir unterstützen Sie bei der Auswahl der passenden BU-Lösung."
|
||||
},
|
||||
"details": {
|
||||
"title": "Details",
|
||||
"subtitle": "Worauf es bei der BU ankommt: Bedingungen, Gesundheitsfragen, Laufzeit und passende Rentenhöhe.",
|
||||
"cards": [
|
||||
{
|
||||
"title": "Höhe der BU-Rente",
|
||||
"desc": "Passend zum Einkommen und Lebensstandard"
|
||||
},
|
||||
{
|
||||
"title": "Bedingungen",
|
||||
"desc": "Wichtige Klauseln und Leistungsdefinitionen"
|
||||
},
|
||||
{
|
||||
"title": "Gesundheitsprüfung",
|
||||
"desc": "Risikovoranfrage & transparente Angaben"
|
||||
}
|
||||
]
|
||||
},
|
||||
"calculator": {
|
||||
"title": "Bedarfs-Check",
|
||||
"subtitle": "Schnelle Orientierung – unverbindlich.",
|
||||
"placeholder": "Rechner folgt – wir beraten Sie gern zur passenden BU-Rentenhöhe und Laufzeit.",
|
||||
"cta": "Beratung anfordern"
|
||||
},
|
||||
"form": {
|
||||
"title": "Anfrage",
|
||||
"subtitle": "Wir melden uns kurzfristig bei Ihnen.",
|
||||
"phone": "Telefon",
|
||||
"email": "E-Mail",
|
||||
"cta": "Zum Kontaktformular",
|
||||
"phoneNumber": "Telefon: 0171 / 9864053",
|
||||
"imageAlt": "BU Beratung",
|
||||
"tipTitle": "Tipp",
|
||||
"tipDescription": "Je früher der Abschluss, desto besser sind häufig Beiträge und Annahmemöglichkeiten."
|
||||
},
|
||||
"catalog": {
|
||||
"title": "Ratgeber",
|
||||
"subtitle": "Kurz & verständlich – die wichtigsten Punkte auf einen Blick.",
|
||||
"cardTitle": "Was ist wichtig?",
|
||||
"cardDescription": "Definition Berufsunfähigkeit, Verweisbarkeit, Nachversicherung, Laufzeit, Dynamik.",
|
||||
"cta": "Beratung anfordern",
|
||||
"imageAlt": "Ratgeber BU",
|
||||
"boxTitle": "Hinweis",
|
||||
"boxDescription": "Nicht nur der Beitrag zählt – Bedingungen und Leistungsfall-Regelungen sind entscheidend."
|
||||
},
|
||||
"brochure": {
|
||||
"title": "Informationen (PDF)",
|
||||
"subtitle": "PDF zum Download – auf Anfrage.",
|
||||
"cardTitle": "PDF",
|
||||
"cardDescription": "Gerne senden wir Ihnen die passende Broschüre zu.",
|
||||
"cta": "PDF anfragen",
|
||||
"imageAlt": "PDF BU",
|
||||
"tipTitle": "Tipp",
|
||||
"tipDescription": "Wir erklären verständlich – ohne Fachchinesisch."
|
||||
}
|
||||
}
|
||||
@ -167,7 +167,7 @@
|
||||
},
|
||||
"about": {
|
||||
"title": "Über mich",
|
||||
"description": "Selbstständiger, unabhängiger Finanz- und Versicherungsmakler mit über 26 Jahren Erfahrung im Versicherungswesen.",
|
||||
"description": "Selbstständiger, unabhängiger Finanz- und Versicherungsmakler mit über 32 Jahren Erfahrung im Versicherungswesen.",
|
||||
"office": "Büro Düsseldorf",
|
||||
"appointment": "(Termine nach telefonischer Vereinbarung)",
|
||||
"address": "Rosmarinstraße 30 d, 40235 Düsseldorf"
|
||||
|
||||
1
public/locales/de/fondsgebundene_rentenversicherung.json
Normal file
1
public/locales/de/fondsgebundene_rentenversicherung.json
Normal file
@ -0,0 +1 @@
|
||||
{"hero":{"kicker":"Altersvorsorge","title":"Fondsgebundene Rentenversicherung","subtitle":"Exklusive Lösung zu Fondsrenten","cta1":"Jetzt beraten lassen","cta2":"Zur Übersicht","highlights":["Aktive Vermögensverwalter-Selektion","Global diversifiziertes Portfolio","Fokus auf Vermögenserhalt"]},"tabs":{"overview":"Übersicht","details":"Details","calculator":"Rechner","form":"Anfrage","catalog":"Ratgeber","brochure":"PDF"},"overview":{"badge":"Fondsrente – planbar & flexibel","title":"Ihre Altersvorsorge mit Renditechancen","subtitle":"Professionell, verständlich, langfristig.","description":"Mit einer fondsgebundenen Rentenversicherung kombinieren Sie langfristigen Vermögensaufbau mit der Planung Ihrer Altersvorsorge. Wir unterstützen Sie bei Fondsauswahl, Kostenvergleich und einer passenden Strategie – transparent und verständlich.","cta1":"Angebot anfordern","cta2":"Beratung","feature1Title":"Flexibel","feature1Desc":"Beitrag, Laufzeit, Fonds","feature2Title":"Diversifiziert","feature2Desc":"Globales Portfolio","imageAlt":"Fondsgebundene Rentenversicherung","imageCaption":"Strategie & Expertise","imageSubtext":"Langfristig investieren – mit Struktur und einer klaren Strategie."},"details":{"title":"Details","subtitle":"Die wichtigsten Bausteine, damit Ihre Fondsrente zu Ihren Zielen passt.","cards":[{"title":"Renditechancen","desc":"Investieren mit langfristiger Perspektive – passend zu Ihrer Risikoneigung."},{"title":"Ablaufmanagement","desc":"Struktur für die Entnahmephase – so kann das Risiko zum Laufzeitende reduziert werden."},{"title":"Kosten & Transparenz","desc":"Wir vergleichen Tarife, Fondskosten und Vertragskonditionen verständlich."}]},"calculator":{"title":"Beitragsrechner","subtitle":"Schnelle Orientierung – unverbindlich.","placeholder":"Rechner kommt als nächstes – wir beraten Sie gern persönlich.","cta":"Beratung anfordern"},"form":{"title":"Anfrage","subtitle":"Wir melden uns kurzfristig bei Ihnen.","phoneNumber":"Telefon: 0171 / 9864053","phone":"Telefon","email":"E-Mail","cta":"Zum Kontaktformular","imageAlt":"Fondsrentenberatung","tipTitle":"Tipp","tipDescription":"Wir vergleichen Tarife und Fondsauswahl – transparent & verständlich."},"catalog":{"title":"Ratgeber","subtitle":"Kurz & verständlich – die wichtigsten Punkte auf einen Blick.","cardTitle":"Was ist wichtig?","cardDescription":"Kosten, Fonds, Garantieanteil, Ablaufmanagement.","cta":"Beratung anfordern","imageAlt":"Ratgeber Fondsrente","boxTitle":"Hinweis","boxDescription":"Wertentwicklungen sind nicht garantiert – wir helfen bei der passenden Strategie."},"brochure":{"title":"Informationen (PDF)","subtitle":"PDF zum Download – auf Anfrage.","cardTitle":"PDF","cardDescription":"Gerne senden wir Ihnen die passende Broschüre zu.","cta":"PDF anfragen","imageAlt":"PDF Fondsrente","tipTitle":"Tipp","tipDescription":"Wir erklären verständlich – ohne Fachchinesisch."}}
|
||||
@ -1 +1 @@
|
||||
{"title": "Impressum", "subtitle": "Rechtliche Angaben und Informationen gemäß § 5 TMG", "company": "Agentur Mizera Versicherungs- und Finanzmakler GmbH", "address": {"street": "Musterstraße 123", "zip": "40210", "city": "Düsseldorf", "country": "Deutschland"}, "contact": {"phone": "0211 / 97629355", "email": "info@finanzen-mizera.de", "web": "www.finanzen-mizera.de"}, "legal": {"court": "Amtsgericht Düsseldorf", "number": "HRB 12345", "tax": "DE123456789"}, "content": {"title": "Verantwortlich für den Inhalt", "name": "Max Mustermann", "address": "Musterstraße 123, 40210 Düsseldorf"}, "disclaimer": {"title": "Haftungsausschluss", "content1": "Wir übernehmen keine Gewähr für die Aktualität, Korrektheit, Vollständigkeit oder Qualität der bereitgestellten Informationen.", "content2": "Haftungsansprüche gegen den Autor, welche sich auf materielle oder immaterielle Schäden beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen.", "content3": "Alle Angebote sind freibleibend und unverbindlich. Der Autor behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen."}, "copyright": "© 2024 Agentur Mizera Versicherungs- und Finanzmakler GmbH. Alle Rechte vorbehalten."}
|
||||
{"title": "Impressum", "subtitle": "Rechtliche Angaben und Informationen gemäß § 5 TMG", "company": "Agentur Mizera Versicherungs- und Finanzmakler GmbH", "address": {"street": "Musterstraße 123", "zip": "40210", "city": "Düsseldorf", "country": "Deutschland"}, "contact": {"phone": "0211 / 97629355", "email": "info@finanzen-mizera.de", "web": "www.finanzen-mizera.de"}, "legal": {"court": "Amtsgericht Düsseldorf", "number": "HRB 12345", "tax": "DE123456789"}, "content": {"title": "Verantwortlich für den Inhalt", "name": "Max Mustermann", "address": "Musterstraße 123, 40210 Düsseldorf"}, "disclaimer": {"title": "Haftungsausschluss", "content1": "Wir übernehmen keine Gewähr für die Aktualität, Korrektheit, Vollständigkeit oder Qualität der bereitgestellten Informationen.", "content2": "Haftungsansprüche gegen den Autor, welche sich auf materielle oder immaterielle Schäden beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen.", "content3": "Alle Angebote sind freibleibend und unverbindlich. Der Autor behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen."}, "aiNotice": "Ein Teil der auf dieser Website verwendeten Bilder wurde mit Hilfe von künstlicher Intelligenz (KI) durch ChatGPT und andere KI-Tools generiert. Die Nutzungsrechte liegen beim Betreiber dieser Website.", "copyright": " 2024 Agentur Mizera Versicherungs- und Finanzmakler GmbH. Alle Rechte vorbehalten."}
|
||||
|
||||
@ -1 +1 @@
|
||||
{"topics": {"kfz": "KFZ-Fahrzeuge", "sach": "Sachversicherung", "gesundheit": "Gesundheitsvorsorge", "vermoegen": "Vermögenssicherung", "risiko": "Risikoschutz", "altersvorsorge": "Altersvorsorge"}, "services": {"kfz": {"title": "KFZ-Versicherung", "description": "Perfekter Schutz für Ihr Fahrzeug – individuell und fair", "features": {"auto": "Autoversicherung", "motorrad": "Motorradversicherung", "quad": "Quadversicherung", "fairmobil": "FairMobil", "drittfahrer": "Drittfahrer-Schutz", "flotte": "Flottenversicherung"}}, "sach": {"title": "Sachversicherung", "description": "Ihr Hab und Gut bestens abgesichert", "features": {"hausrat": "Hausratversicherung", "unfall": "Unfallversicherung"}}, "gesundheit": {"title": "Gesundheitsvorsorge", "description": "Optimale medizinische Versorgung für die ganze Familie", "features": {"pkv": "Private Krankenversicherung", "zahn": "Zahnzusatzversicherung", "ausland": "Auslandsreisekrankenversicherung", "krankengeld": "Krankentagegeldversicherung"}}, "vermoegen": {"title": "Vermögenssicherung", "description": "Sichern Sie Ihre finanzielle Zukunft", "features": {"altersvorsorge": "Altersvorsorge", "risiko": "Risikolebensversicherung", "beruf": "Berufsunfähigkeitsversicherung"}}, "risiko": {"title": "Risikoschutz", "description": "Umfassender Schutz für alle Lebenslagen", "features": {"haftpflicht": "Private Haftpflicht", "rechtsschutz": "Rechtsschutzversicherung", "unfall": "Unfallversicherung"}}}, "details": {"label": "Details:", "kfz": {"autoversicherung": "Autoversicherung", "motorradversicherung": "Motorradversicherung", "quadversicherung": "Quadversicherung", "fairmobil": "FairMobil", "drittfahrerSchutz": "Drittfahrer-Schutz", "flottenversicherung": "Flottenversicherung"}, "sach": {"hausratversicherung": "Hausratversicherung", "wohngebaeudeversicherung": "Wohngebäudeversicherung", "unfallversicherung": "Unfallversicherung"}, "gesundheit": {"privateKrankenversicherung": "Private Krankenversicherung", "zahnzusatzversicherung": "Zahnzusatzversicherung", "auslandsreisekrankenversicherung": "Auslandsreisekrankenversicherung"}, "vermoegen": {"lebensversicherung": "Lebensversicherung", "risikolebensversicherung": "Risikolebensversicherung", "wohngebaeudeversicherung": "Wohngebäudeversicherung"}, "risiko": {"unfallversicherung": "Unfallversicherung", "rechtsschutzversicherung": "Rechtsschutzversicherung"}, "altersvorsorge": {"privateRentenversicherung": "Private Rentenversicherung", "riester": "Riester-Rente", "ruerup": "Rürup-Rente", "bav": "Betriebliche Altersvorsorge"}}}
|
||||
{"topics": {"kfz": "KFZ-Fahrzeuge", "sach": "Sachversicherung", "gesundheit": "Gesundheitsvorsorge", "vermoegen": "Vermögenssicherung", "risiko": "Risikoschutz", "altersvorsorge": "Altersvorsorge"}, "services": {"kfz": {"title": "KFZ-Versicherung", "description": "Perfekter Schutz für Ihr Fahrzeug – individuell und fair", "features": {"auto": "Autoversicherung", "motorrad": "Motorradversicherung", "quad": "Quadversicherung", "fairmobil": "FairMobil", "drittfahrer": "Drittfahrer-Schutz", "flotte": "Flottenversicherung"}}, "sach": {"title": "Sachversicherung", "description": "Ihr Hab und Gut bestens abgesichert", "features": {"hausrat": "Hausratversicherung", "unfall": "Unfallversicherung"}}, "gesundheit": {"title": "Gesundheitsvorsorge", "description": "Optimale medizinische Versorgung für die ganze Familie", "features": {"pkv": "Private Krankenversicherung", "zahn": "Zahnzusatzversicherung", "ausland": "Auslandsreisekrankenversicherung", "krankengeld": "Krankentagegeldversicherung"}}, "vermoegen": {"title": "Vermögenssicherung", "description": "Sichern Sie Ihre finanzielle Zukunft", "features": {"altersvorsorge": "Altersvorsorge", "risiko": "Risikolebensversicherung", "beruf": "Berufsunfähigkeitsversicherung"}}, "risiko": {"title": "Risikoschutz", "description": "Umfassender Schutz für alle Lebenslagen", "features": {"haftpflicht": "Private Haftpflicht", "rechtsschutz": "Rechtsschutzversicherung", "unfall": "Unfallversicherung"}}}, "details": {"label": "Details:", "kfz": {"autoversicherung": "Autoversicherung", "motorradversicherung": "Motorradversicherung", "quadversicherung": "Quadversicherung", "fairmobil": "FairMobil", "drittfahrerSchutz": "Drittfahrer-Schutz", "flottenversicherung": "Flottenversicherung"}, "sach": {"hausratversicherung": "Hausratversicherung", "wohngebaeudeversicherung": "Wohngebäudeversicherung", "unfallversicherung": "Unfallversicherung"}, "gesundheit": {"privateKrankenversicherung": "Private Krankenversicherung", "zahnzusatzversicherung": "Zahnzusatzversicherung", "auslandsreisekrankenversicherung": "Auslandsreisekrankenversicherung"}, "vermoegen": {"lebensversicherung": "Lebensversicherung", "risikolebensversicherung": "Risikolebensversicherung", "wohngebaeudeversicherung": "Wohngebäudeversicherung"}, "risiko": {"unfallversicherung": "Unfallversicherung", "rechtsschutzversicherung": "Rechtsschutzversicherung"}, "altersvorsorge": {"privateRentenversicherung": "Fondsgebundene Rentenversicherung", "riester": "Riester-Rente", "ruerup": "Rürup-Rente", "bav": "Betriebliche Altersvorsorge"}}}
|
||||
|
||||
1
public/locales/de/riester_rente.json
Normal file
1
public/locales/de/riester_rente.json
Normal file
@ -0,0 +1 @@
|
||||
{"hero":{"kicker":"Altersvorsorge","title":"Riester-Rente","subtitle":"Staatliche Förderung für Ihre Rente.","cta1":"Jetzt beraten lassen","cta2":"Zur Übersicht","highlights":["Zulagen & Steuervorteile","Familienfreundlich (Kinderzulage)","Langfristige Planung"]},"tabs":{"overview":"Übersicht","details":"Details","statistics":"Statistik","calculator":"Rechner","form":"Anfrage","catalog":"Ratgeber","brochure":"PDF"},"overview":{"badge":"Riester – staatlich gefördert","title":"Mehr Förderung für Ihre Rente","subtitle":"Wir prüfen, ob sich Riester für Sie lohnt.","description":"Die Riester-Rente kann durch staatliche Zulagen und steuerliche Vorteile attraktiv sein – besonders für Familien und Förderberechtigte. Wir prüfen gemeinsam, ob Riester zu Ihrer Situation passt und helfen bei Tarifwahl, Kostenvergleich und Antrag.","cta1":"Angebot anfordern","cta2":"Beratung","feature1Title":"Förderung","feature1Desc":"Zulagen & Steuervorteile","feature2Title":"Planbar","feature2Desc":"Langfristige Vorsorge","imageAlt":"Riester-Rente","imageCaption":"Zulagen prüfen","imageSubtext":"Förderberechtigung, Beitragshöhe und Tarif – wir machen den Check."},"details":{"title":"Details","subtitle":"Worauf es bei der Riester-Rente ankommt – kurz und verständlich.","cards":[{"title":"Zulagen","desc":"Grundzulage und ggf. Kinderzulage – wir prüfen die optimale Beitragsgestaltung."},{"title":"Steuervorteile","desc":"Je nach Einkommen kann zusätzlich ein steuerlicher Vorteil entstehen."},{"title":"Passender Tarif","desc":"Wir vergleichen Kosten, Anlagestrategie und Flexibilität."}]},"statistics":{"title":"Riester-Rente in Zahlen","subtitle":"Fakten und Daten zur staatlichen Förderung"},"stats":{"s1":{"label":"Verträge","value":"16,5 Mio"},"s2":{"label":"Förderung/Jahr","value":"10 Mrd €"},"s3":{"label":"Zulagen","value":"175 €/Kind"},"s4":{"label":"Zufriedenheit","value":"89%"}},"calculator":{"title":"Fördercheck","subtitle":"Schnelle Orientierung – unverbindlich.","placeholder":"Rechner kommt als nächstes – wir beraten Sie gern persönlich.","cta":"Beratung anfordern"},"form":{"title":"Anfrage","subtitle":"Wir melden uns kurzfristig bei Ihnen.","phoneNumber":"Telefon: 0171 / 9864053","phone":"Telefon","email":"E-Mail","cta":"Zum Kontaktformular","imageAlt":"Riester Beratung","tipTitle":"Tipp","tipDescription":"Wir prüfen Zulagen, Kosten und passende Tarife – transparent & verständlich."},"catalog":{"title":"Ratgeber","subtitle":"Kurz & verständlich – die wichtigsten Punkte auf einen Blick.","cardTitle":"Was ist wichtig?","cardDescription":"Förderung, Kosten, Zulagenberechtigung, passende Produktart.","cta":"Beratung anfordern","imageAlt":"Ratgeber Riester","boxTitle":"Hinweis","boxDescription":"Nicht für jeden sinnvoll – wir machen den Fördercheck mit Ihnen."},"brochure":{"title":"Informationen (PDF)","subtitle":"PDF zum Download – auf Anfrage.","cardTitle":"PDF","cardDescription":"Gerne senden wir Ihnen die passende Broschüre zu.","cta":"PDF anfragen","imageAlt":"PDF Riester","tipTitle":"Tipp","tipDescription":"Wir erklären verständlich – ohne Fachchinesisch."}}
|
||||
@ -1 +1 @@
|
||||
{"title": "Zabezpieczenie emerytalne", "subtitle": "Zadbaj o swoją przyszłość finansową na czas", "topics": {"riester": {"title": "Renta Riester"}, "ruerup": {"title": "Renta Rürup"}, "betrieblich": {"title": "Pracownicze ubezpieczenie emerytalne"}, "privat": {"title": "Prywatne ubezpieczenie emerytalne"}, "kapital": {"title": "Ubezpieczenie na życie z kapitalizacją"}, "fonds": {"title": "Ubezpieczenie powiązane z funduszami"}, "zukunft": {"title": "Zabezpieczenie przyszłości"}, "sparplan": {"title": "Plan oszczędnościowy"}, "investment": {"title": "Fundusze inwestycyjne"}, "etf": {"title": "Plan oszczędnościowy ETF"}}}
|
||||
{"title": "Zabezpieczenie emerytalne", "subtitle": "Zadbaj o swoją przyszłość finansową na czas", "hero": {"kicker": "Zabezpieczenie emerytalne", "title": "Exklusive Lösung zu Fondsrenten", "highlights": ["Aktive Vermögensverwalter-Selektion", "Global diversifiziertes Portfolio", "Fokus auf Vermögenserhalt"], "primaryCta": "Jetzt beraten lassen", "secondaryCta": "Alle Lösungen"}, "special": {"title": "Spezielle Vorsorgelösungen", "subtitle": "Erleben Sie exklusive, maßgeschneiderte Fondsrentenlösungen mit professionellen Expertenkonzepten für Ihre langfristige und nachhaltige Altersvorsorge."}, "topics": {"riester": {"title": "Renta Riester"}, "ruerup": {"title": "Renta Rürup"}, "betrieblich": {"title": "Pracownicze ubezpieczenie emerytalne"}, "privat": {"title": "Ubezpieczenie emerytalne z funduszami"}, "kapital": {"title": "Ubezpieczenie na życie z kapitalizacją"}, "fonds": {"title": "Ubezpieczenie powiązane z funduszami"}, "zukunft": {"title": "Zabezpieczenie przyszłości"}, "sparplan": {"title": "Plan oszczędnościowy"}, "investment": {"title": "Fundusze inwestycyjne"}, "etf": {"title": "Plan oszczędnościowy ETF"}}}
|
||||
|
||||
92
public/locales/pl/berufsunfaehigkeit.json
Normal file
92
public/locales/pl/berufsunfaehigkeit.json
Normal file
@ -0,0 +1,92 @@
|
||||
{
|
||||
"hero": {
|
||||
"kicker": "Ochrona",
|
||||
"title": "Ubezpieczenie na wypadek niezdolności do pracy",
|
||||
"subtitle": "Zabezpiecz dochód – gdy z powodów zdrowotnych nie możesz wykonywać swojego zawodu.",
|
||||
"cta1": "Umów konsultację",
|
||||
"cta2": "Do przeglądu",
|
||||
"highlights": [
|
||||
"Ochrona dochodu",
|
||||
"Wcześniej = lepiej",
|
||||
"Porównanie ofert"
|
||||
]
|
||||
},
|
||||
"tabs": {
|
||||
"overview": "Przegląd",
|
||||
"details": "Szczegóły",
|
||||
"calculator": "Kalkulator",
|
||||
"form": "Zapytanie",
|
||||
"catalog": "Poradnik",
|
||||
"brochure": "PDF"
|
||||
},
|
||||
"overview": {
|
||||
"badge": "BU – ochrona dochodu",
|
||||
"title": "Gdy praca nie jest już możliwa",
|
||||
"subtitle": "Zabezpiecz dochód na dłużej.",
|
||||
"description": "Ubezpieczenie na wypadek niezdolności do pracy to jedna z najważniejszych polis. Pomożemy porównać świadczenia, warunki i składki w jasny sposób.",
|
||||
"cta1": "Poproś o ofertę",
|
||||
"cta2": "Doradztwo",
|
||||
"feature1Title": "Świadczenie",
|
||||
"feature1Desc": "Miesięczna renta BU",
|
||||
"feature2Title": "Ochrona",
|
||||
"feature2Desc": "Indywidualne warunki",
|
||||
"imageAlt": "Ubezpieczenie BU",
|
||||
"imageCaption": "Sprawdź ochronę",
|
||||
"imageSubtext": "Pomagamy dobrać właściwe rozwiązanie BU."
|
||||
},
|
||||
"details": {
|
||||
"title": "Szczegóły",
|
||||
"subtitle": "Na co zwrócić uwagę: warunki, ankieta zdrowotna, okres, odpowiednia renta.",
|
||||
"cards": [
|
||||
{
|
||||
"title": "Wysokość renty BU",
|
||||
"desc": "Dopasowana do dochodu i stylu życia"
|
||||
},
|
||||
{
|
||||
"title": "Warunki",
|
||||
"desc": "Klauzule i definicje świadczeń"
|
||||
},
|
||||
{
|
||||
"title": "Ocena zdrowia",
|
||||
"desc": "Wstępne zapytanie i przejrzyste dane"
|
||||
}
|
||||
]
|
||||
},
|
||||
"calculator": {
|
||||
"title": "Szybki check",
|
||||
"subtitle": "Orientacyjnie – bez zobowiązań.",
|
||||
"placeholder": "Kalkulator wkrótce – chętnie doradzimy w doborze renty i okresu.",
|
||||
"cta": "Poproś o doradztwo"
|
||||
},
|
||||
"form": {
|
||||
"title": "Zapytanie",
|
||||
"subtitle": "Skontaktujemy się wkrótce.",
|
||||
"phone": "Telefon",
|
||||
"email": "E-mail",
|
||||
"cta": "Do formularza kontaktowego",
|
||||
"phoneNumber": "Telefon: 0171 / 9864053",
|
||||
"imageAlt": "Doradztwo BU",
|
||||
"tipTitle": "Wskazówka",
|
||||
"tipDescription": "Im wcześniej zawrzesz umowę, tym częściej lepsze składki i łatwiejsza akceptacja."
|
||||
},
|
||||
"catalog": {
|
||||
"title": "Poradnik",
|
||||
"subtitle": "Krótko i jasno – najważniejsze informacje.",
|
||||
"cardTitle": "Co jest ważne?",
|
||||
"cardDescription": "Definicja BU, wyłączenia, podwyższenia, okres, indeksacja.",
|
||||
"cta": "Poproś o doradztwo",
|
||||
"imageAlt": "Poradnik BU",
|
||||
"boxTitle": "Uwaga",
|
||||
"boxDescription": "Nie tylko cena – liczą się warunki i zasady wypłaty świadczeń."
|
||||
},
|
||||
"brochure": {
|
||||
"title": "Informacje (PDF)",
|
||||
"subtitle": "PDF do pobrania – na życzenie.",
|
||||
"cardTitle": "PDF",
|
||||
"cardDescription": "Chętnie wyślemy odpowiednią broszurę.",
|
||||
"cta": "Poproś o PDF",
|
||||
"imageAlt": "PDF BU",
|
||||
"tipTitle": "Wskazówka",
|
||||
"tipDescription": "Wyjaśniamy prosto – bez żargonu."
|
||||
}
|
||||
}
|
||||
@ -96,7 +96,7 @@
|
||||
},
|
||||
"about": {
|
||||
"title": "O mnie",
|
||||
"description": "Niezależny doradca finansowy i ubezpieczeniowy z ponad 26-letnim doświadczeniem w branży ubezpieczeniowej.",
|
||||
"description": "Niezależny doradca finansowy i ubezpieczeniowy z ponad 32-letnim doświadczeniem w branży ubezpieczeniowej.",
|
||||
"office": "Biuro w Düsseldorfie",
|
||||
"appointment": "(Spotkania po wcześniejszym umówieniu telefonicznym)",
|
||||
"address": "Rosmarinstraße 30 d, 40235 Düsseldorf"
|
||||
|
||||
1
public/locales/pl/fondsgebundene_rentenversicherung.json
Normal file
1
public/locales/pl/fondsgebundene_rentenversicherung.json
Normal file
@ -0,0 +1 @@
|
||||
{"hero":{"kicker":"Zabezpieczenie emerytalne","title":"Ubezpieczenie emerytalne z funduszami","subtitle":"Ekskluzywne rozwiązanie rentowe oparte na funduszach","cta1":"Poproś o konsultację","cta2":"Do przeglądu","highlights":["Selekcja aktywnych zarządzających","Globalnie zdywersyfikowany portfel","Skupienie na ochronie kapitału"]},"tabs":{"overview":"Przegląd","details":"Szczegóły","calculator":"Kalkulator","form":"Zapytanie","catalog":"Poradnik","brochure":"PDF"},"overview":{"badge":"Renta funduszowa – elastycznie i długoterminowo","title":"Twoja emerytura z potencjałem wzrostu","subtitle":"Profesjonalnie, zrozumiale, długoterminowo.","description":"Ubezpieczenie emerytalne z funduszami łączy długoterminowe inwestowanie z planowaniem emerytury. Pomagamy w doborze funduszy, porównaniu kosztów i strategii – przejrzyście i zrozumiale.","cta1":"Poproś o ofertę","cta2":"Konsultacja","feature1Title":"Elastycznie","feature1Desc":"Składka, okres, fundusze","feature2Title":"Zdywersyfikowane","feature2Desc":"Globalny portfel","imageAlt":"Ubezpieczenie emerytalne z funduszami","imageCaption":"Strategia i doświadczenie","imageSubtext":"Inwestuj długoterminowo – ze strukturą i jasną strategią."},"details":{"title":"Szczegóły","subtitle":"Najważniejsze elementy, aby Twoja renta funduszowa pasowała do celów.","cards":[{"title":"Potencjał zysku","desc":"Inwestowanie długoterminowe dopasowane do Twojego profilu ryzyka."},{"title":"Zarządzanie na końcu okresu","desc":"Struktura dla fazy wypłat – ograniczenie ryzyka pod koniec."},{"title":"Koszty i przejrzystość","desc":"Porównujemy umowy, koszty funduszy i warunki w prosty sposób."}]},"calculator":{"title":"Kalkulator składki","subtitle":"Szybka orientacja – bez zobowiązań.","placeholder":"Kalkulator wkrótce – chętnie doradzimy osobiście.","cta":"Poproś o konsultację"},"form":{"title":"Zapytanie","subtitle":"Skontaktujemy się wkrótce.","phoneNumber":"Telefon: 0171 / 9864053","phone":"Telefon","email":"E-mail","cta":"Formularz kontaktowy","imageAlt":"Doradztwo renta funduszowa","tipTitle":"Wskazówka","tipDescription":"Porównujemy oferty i dobór funduszy – przejrzyście i zrozumiale."},"catalog":{"title":"Poradnik","subtitle":"Krótko i jasno – najważniejsze punkty.","cardTitle":"Co jest ważne?","cardDescription":"Koszty, fundusze, część gwarantowana, zarządzanie na końcu okresu.","cta":"Poproś o konsultację","imageAlt":"Poradnik renta funduszowa","boxTitle":"Uwaga","boxDescription":"Wyniki inwestycji nie są gwarantowane – pomożemy dobrać strategię."},"brochure":{"title":"Informacje (PDF)","subtitle":"PDF do pobrania – na życzenie.","cardTitle":"PDF","cardDescription":"Wyślemy odpowiednią broszurę na życzenie.","cta":"Poproś o PDF","imageAlt":"PDF renta funduszowa","tipTitle":"Wskazówka","tipDescription":"Wyjaśniamy prosto – bez żargonu."}}
|
||||
@ -1,4 +1 @@
|
||||
{"title": "Zastrzeżenie prawne", "subtitle": "Informacje prawne zgodnie z § 5 TMG", "company": "Agentur Mizera Ubezpieczeniowe i Finansowe GmbH", "address": {"street": "Uliczka przykładowa 123", "zip": "40210", "city": "Düsseldorf", "country": "Niemcy"}, "contact": {"phone": "0211 / 97629355", "email": "info@finanzen-mizera.de", "web": "www.finanzen-mizera.de"}, "legal": {"court": "Sąd Rejonowy w Düsseldorf", "number": "HRB 12345", "tax": "DE123456789"}, "content": {"title": "Odpowiedzialny za treść", "name": "Jan Kowalski", "address": "Uliczka przykładowa 123, 40210 Düsseldorf"}, "disclaimer": {"title": "Wyłączenie odpowiedzialności", "content1": "Nie udzielamy gwarancji co do aktualności, poprawności, kompletności lub jakości dostarczonych informacji.", "content2": "Roszczenia odszkodowawcze przeciwko autorowi, które dotyczą szkód materialnych lub niematerialnych spowodowanych przez korzystanie lub niekorzystanie z dostarczonych informacji, są zasadniczo wyłączone.", "content3": "Wszystkie oferty są niewiążące i niezobowiązujące. Autor zastrzega sobie prawo do zmiany, uzupełnienia, usunięcia części stron lub całej oferty bez osobnego powiadomienia.", "content4": "Wszelkie powielanie, przetwarzanie lub rozpowszechnianie treści wymaga uprzedniej zgody autora."}, "copyright": "© 2024 Agentur Mizera Ubezpieczeniowe i Finansowe GmbH. Wszelkie prawa zastrzeżone."}
|
||||
npm
|
||||
run
|
||||
dev
|
||||
{"title": "Zastrzeżenie prawne", "subtitle": "Informacje prawne zgodnie z § 5 TMG", "company": "Agentur Mizera Ubezpieczeniowe i Finansowe GmbH", "address": {"street": "Uliczka przykładowa 123", "zip": "40210", "city": "Düsseldorf", "country": "Niemcy"}, "contact": {"phone": "0211 / 97629355", "email": "info@finanzen-mizera.de", "web": "www.finanzen-mizera.de"}, "legal": {"court": "Sąd Rejonowy w Düsseldorf", "number": "HRB 12345", "tax": "DE123456789"}, "content": {"title": "Odpowiedzialny za treść", "name": "Jan Kowalski", "address": "Uliczka przykładowa 123, 40210 Düsseldorf"}, "disclaimer": {"title": "Wyłączenie odpowiedzialności", "content1": "Nie udzielamy gwarancji co do aktualności, poprawności, kompletności lub jakości dostarczonych informacji.", "content2": "Roszczenia odszkodowawcze przeciwko autorowi, które dotyczą szkód materialnych lub niematerialnych spowodowanych przez korzystanie lub niekorzystanie z dostarczonych informacji, są zasadniczo wyłączone.", "content3": "Wszystkie oferty są niewiążące i niezobowiązujące. Autor zastrzega sobie prawo do zmiany, uzupełnienia, usunięcia części stron lub całej oferty bez osobnego powiadomienia.", "content4": "Wszelkie powielanie, przetwarzanie lub rozpowszechnianie treści wymaga uprzedniej zgody autora."}, "aiNotice": "Ein Teil der auf tej stronie verwendeten Bilder wurde mit Hilfe von künstlicher Intelligenz (KI) durch ChatGPT und andere KI-Tools generiert. Die Nutzungsrechte liegen beim Betreiber dieser Website.", "copyright": " 2024 Agentur Mizera Ubezpieczeniowe i Finansowe GmbH. Wszelkie prawa zastrzeżone."}
|
||||
|
||||
@ -1 +1 @@
|
||||
{"topics": {"kfz": "Pojazdy KFZ", "sach": "Ubezpieczenia majątkowe", "gesundheit": "Ochrona zdrowia", "vermoegen": "Zabezpieczenie majątku", "risiko": "Ochrona ryzyka", "altersvorsorge": "Zabezpieczenie emerytalne"}, "services": {"kfz": {"title": "Ubezpieczenie KFZ", "description": "Doskonała ochrona dla Twojego pojazdu - indywidualna i sprawiedliwa", "features": {"auto": "Ubezpieczenie auta", "motorrad": "Ubezpieczenie motocykla", "quad": "Ubezpieczenie quada", "fairmobil": "FairMobil", "drittfahrer": "Ochrona kierowcy", "flotte": "Ubezpieczenie floty"}}, "sach": {"title": "Ubezpieczenia majątkowe", "description": "Najlepsza ochrona Twojego mienia", "features": {"hausrat": "Ubezpieczenie mienia ruchomego", "unfall": "Ubezpieczenie od wypadków"}}, "gesundheit": {"title": "Ochrona zdrowia", "description": "Optymalna opieka medyczna dla całej rodziny", "features": {"pkv": "Prywatne ubezpieczenie zdrowotne", "zahn": "Dodatkowe ubezpieczenie stomatologiczne", "ausland": "Ubezpieczenie podróżne", "krankengeld": "Ubezpieczenie chorobowe"}}, "vermoegen": {"title": "Zabezpieczenie majątku", "description": "Zabezpiecz swoją przyszłość finansową", "features": {"altersvorsorge": "Zabezpieczenie emerytalne", "risiko": "Ubezpieczenie na życie i ryzyko", "beruf": "Ubezpieczenie od niezdolności do pracy"}}, "risiko": {"title": "Ochrona ryzyka", "description": "Kompleksowa ochrona na wszystkie sytuacje życiowe", "features": {"haftpflicht": "Prywatne ubezpieczenie odpowiedzialności", "rechtsschutz": "Ochrona prawna", "unfall": "Ubezpieczenie od wypadków"}}}, "details": {"label": "Szczegóły:", "kfz": {"autoversicherung": "Ubezpieczenie auta", "motorradversicherung": "Ubezpieczenie motocykla", "quadversicherung": "Ubezpieczenie quada", "fairmobil": "FairMobil", "drittfahrerSchutz": "Ochrona kierowcy", "flottenversicherung": "Ubezpieczenie floty"}, "sach": {"hausratversicherung": "Ubezpieczenie mienia ruchomego", "wohngebaeudeversicherung": "Ubezpieczenie budynku", "unfallversicherung": "Ubezpieczenie od wypadków"}, "gesundheit": {"privateKrankenversicherung": "Prywatne ubezpieczenie zdrowotne", "zahnzusatzversicherung": "Dodatkowe ubezpieczenie stomatologiczne", "auslandsreisekrankenversicherung": "Ubezpieczenie podróżne"}, "vermoegen": {"lebensversicherung": "Ubezpieczenie na życie", "risikolebensversicherung": "Ubezpieczenie na życie (ryzyko)", "wohngebaeudeversicherung": "Ubezpieczenie budynku"}, "risiko": {"unfallversicherung": "Ubezpieczenie od wypadków", "rechtsschutzversicherung": "Ochrona prawna"}, "altersvorsorge": {"privateRentenversicherung": "Prywatne ubezpieczenie emerytalne", "riester": "Emerytura Riester", "ruerup": "Emerytura Rürup", "bav": "Pracowniczy program emerytalny"}}, "benefits": {"title": "Twoje korzyści jako klient prywatny", "subtitle": "Oferujemy rozwiązania dopasowane do Twojej indywidualnej ochrony", "items": {"protection": {"title": "Kompleksowa ochrona", "desc": "Na wszystkie sytuacje życiowe"}, "family": {"title": "Przyjazne rodzinie", "desc": "Optymalne rozwiązania dla rodzin"}, "optimization": {"title": "Optymalizacja umów", "desc": "Poprawa istniejących polis"}, "fastHelp": {"title": "Szybka pomoc", "desc": "Sprawna likwidacja szkód"}, "transparentCosts": {"title": "Przejrzyste koszty", "desc": "Bez ukrytych opłat"}, "localSupport": {"title": "Osobista opieka", "desc": "Na miejscu, blisko Ciebie"}}}, "contactCta": {"title": "Skontaktuj się z nami", "subtitle": "Umów się na niezobowiązującą konsultację w sprawie rozwiązań dla klientów prywatnych.", "call": "Zadzwoń teraz", "requestOffer": "Poproś o ofertę"}}
|
||||
{"topics": {"kfz": "Pojazdy KFZ", "sach": "Ubezpieczenia majątkowe", "gesundheit": "Ochrona zdrowia", "vermoegen": "Zabezpieczenie majątku", "risiko": "Ochrona ryzyka", "altersvorsorge": "Zabezpieczenie emerytalne"}, "services": {"kfz": {"title": "Ubezpieczenie KFZ", "description": "Doskonała ochrona dla Twojego pojazdu - indywidualna i sprawiedliwa", "features": {"auto": "Ubezpieczenie auta", "motorrad": "Ubezpieczenie motocykla", "quad": "Ubezpieczenie quada", "fairmobil": "FairMobil", "drittfahrer": "Ochrona kierowcy", "flotte": "Ubezpieczenie floty"}}, "sach": {"title": "Ubezpieczenia majątkowe", "description": "Najlepsza ochrona Twojego mienia", "features": {"hausrat": "Ubezpieczenie mienia ruchomego", "unfall": "Ubezpieczenie od wypadków"}}, "gesundheit": {"title": "Ochrona zdrowia", "description": "Optymalna opieka medyczna dla całej rodziny", "features": {"pkv": "Prywatne ubezpieczenie zdrowotne", "zahn": "Dodatkowe ubezpieczenie stomatologiczne", "ausland": "Ubezpieczenie podróżne", "krankengeld": "Ubezpieczenie chorobowe"}}, "vermoegen": {"title": "Zabezpieczenie majątku", "description": "Zabezpiecz swoją przyszłość finansową", "features": {"altersvorsorge": "Zabezpieczenie emerytalne", "risiko": "Ubezpieczenie na życie i ryzyko", "beruf": "Ubezpieczenie od niezdolności do pracy"}}, "risiko": {"title": "Ochrona ryzyka", "description": "Kompleksowa ochrona na wszystkie sytuacje życiowe", "features": {"haftpflicht": "Prywatne ubezpieczenie odpowiedzialności", "rechtsschutz": "Ochrona prawna", "unfall": "Ubezpieczenie od wypadków"}}}, "details": {"label": "Szczegóły:", "kfz": {"autoversicherung": "Ubezpieczenie auta", "motorradversicherung": "Ubezpieczenie motocykla", "quadversicherung": "Ubezpieczenie quada", "fairmobil": "FairMobil", "drittfahrerSchutz": "Ochrona kierowcy", "flottenversicherung": "Ubezpieczenie floty"}, "sach": {"hausratversicherung": "Ubezpieczenie mienia ruchomego", "wohngebaeudeversicherung": "Ubezpieczenie budynku", "unfallversicherung": "Ubezpieczenie od wypadków"}, "gesundheit": {"privateKrankenversicherung": "Prywatne ubezpieczenie zdrowotne", "zahnzusatzversicherung": "Dodatkowe ubezpieczenie stomatologiczne", "auslandsreisekrankenversicherung": "Ubezpieczenie podróżne"}, "vermoegen": {"lebensversicherung": "Ubezpieczenie na życie", "risikolebensversicherung": "Ubezpieczenie na życie (ryzyko)", "wohngebaeudeversicherung": "Ubezpieczenie budynku"}, "risiko": {"unfallversicherung": "Ubezpieczenie od wypadków", "rechtsschutzversicherung": "Ochrona prawna"}, "altersvorsorge": {"privateRentenversicherung": "Ubezpieczenie emerytalne z funduszami", "riester": "Emerytura Riester", "ruerup": "Emerytura Rürup", "bav": "Pracowniczy program emerytalny"}}, "benefits": {"title": "Twoje korzyści jako klient prywatny", "subtitle": "Oferujemy rozwiązania dopasowane do Twojej indywidualnej ochrony", "items": {"protection": {"title": "Kompleksowa ochrona", "desc": "Na wszystkie sytuacje życiowe"}, "family": {"title": "Przyjazne rodzinie", "desc": "Optymalne rozwiązania dla rodzin"}, "optimization": {"title": "Optymalizacja umów", "desc": "Poprawa istniejących polis"}, "fastHelp": {"title": "Szybka pomoc", "desc": "Sprawna likwidacja szkód"}, "transparentCosts": {"title": "Przejrzyste koszty", "desc": "Bez ukrytych opłat"}, "localSupport": {"title": "Osobista opieka", "desc": "Na miejscu, blisko Ciebie"}}}, "contactCta": {"title": "Skontaktuj się z nami", "subtitle": "Umów się na niezobowiązującą konsultację w sprawie rozwiązań dla klientów prywatnych.", "call": "Zadzwoń teraz", "requestOffer": "Poproś o ofertę"}}
|
||||
|
||||
1
public/locales/pl/riester_rente.json
Normal file
1
public/locales/pl/riester_rente.json
Normal file
@ -0,0 +1 @@
|
||||
{"hero":{"kicker":"Zabezpieczenie emerytalne","title":"Renta Riester","subtitle":"Państwowe wsparcie Twojej emerytury.","cta1":"Poproś o konsultację","cta2":"Do przeglądu","highlights":["Dopłaty i ulgi podatkowe","Przyjazne rodzinom (dopłata na dzieci)","Planowanie długoterminowe"]},"tabs":{"overview":"Przegląd","details":"Szczegóły","statistics":"Statystyka","calculator":"Kalkulator","form":"Zapytanie","catalog":"Poradnik","brochure":"PDF"},"overview":{"badge":"Riester – z dopłatą państwową","title":"Więcej wsparcia dla Twojej emerytury","subtitle":"Sprawdzimy, czy Riester jest dla Ciebie opłacalne.","description":"Renta Riester może być atrakcyjna dzięki dopłatom państwowym i ulgom podatkowym – szczególnie dla rodzin i osób uprawnionych. Wspólnie sprawdzimy, czy pasuje do Twojej sytuacji oraz pomożemy w wyborze oferty i formalnościach.","cta1":"Poproś o ofertę","cta2":"Konsultacja","feature1Title":"Wsparcie","feature1Desc":"Dopłaty i ulgi podatkowe","feature2Title":"Plan","feature2Desc":"Długoterminowa emerytura","imageAlt":"Renta Riester","imageCaption":"Sprawdź dopłaty","imageSubtext":"Uprawnienia, składka i oferta – zrobimy szybki check."},"details":{"title":"Szczegóły","subtitle":"Na co zwrócić uwagę w rencie Riester – krótko i jasno.","cards":[{"title":"Dopłaty","desc":"Dopłata podstawowa i ewentualnie na dzieci – dobierzemy właściwą składkę."},{"title":"Ulgi podatkowe","desc":"W zależności od dochodu mogą wystąpić dodatkowe korzyści podatkowe."},{"title":"Właściwa oferta","desc":"Porównujemy koszty, strategię inwestycyjną i elastyczność."}]},"statistics":{"title":"Renta Riester w liczbach","subtitle":"Fakty i dane o wsparciu państwowym"},"stats":{"s1":{"label":"Umowy","value":"16,5 mln"},"s2":{"label":"Wsparcie/rok","value":"10 mld €"},"s3":{"label":"Dopłaty","value":"175 €/dziecko"},"s4":{"label":"Satysfakcja","value":"89%"}},"calculator":{"title":"Sprawdzenie dopłat","subtitle":"Szybka orientacja – bez zobowiązań.","placeholder":"Kalkulator wkrótce – chętnie doradzimy osobiście.","cta":"Poproś o konsultację"},"form":{"title":"Zapytanie","subtitle":"Skontaktujemy się wkrótce.","phoneNumber":"Telefon: 0171 / 9864053","phone":"Telefon","email":"E-mail","cta":"Formularz kontaktowy","imageAlt":"Konsultacja Riester","tipTitle":"Wskazówka","tipDescription":"Sprawdzimy dopłaty, koszty i dopasowaną ofertę – przejrzyście i zrozumiale."},"catalog":{"title":"Poradnik","subtitle":"Krótko i jasno – najważniejsze punkty.","cardTitle":"Co jest ważne?","cardDescription":"Dopłaty, koszty, uprawnienia, właściwy typ produktu.","cta":"Poproś o konsultację","imageAlt":"Poradnik Riester","boxTitle":"Uwaga","boxDescription":"Nie zawsze opłacalne – zrobimy z Tobą check dopłat."},"brochure":{"title":"Informacje (PDF)","subtitle":"PDF do pobrania – na życzenie.","cardTitle":"PDF","cardDescription":"Wyślemy odpowiednią broszurę na życzenie.","cta":"Poproś o PDF","imageAlt":"PDF Riester","tipTitle":"Wskazówka","tipDescription":"Wyjaśniamy prosto – bez żargonu."}}
|
||||
14
src/App.tsx
14
src/App.tsx
@ -59,11 +59,13 @@ import Risikolebensversicherung from "./pages/Risikolebensversicherung";
|
||||
import Krankheitsschutzbrief from "./pages/Krankheitsschutzbrief";
|
||||
import Gesundheitsvorsorge from "./pages/Gesundheitsvorsorge";
|
||||
import Altersvorsorge from "./pages/Altersvorsorge";
|
||||
import FondsgebundeneRentenversicherung from "./pages/FondsgebundeneRentenversicherung";
|
||||
import Berufsunfaehigkeitsversicherung from "./pages/Berufsunfaehigkeitsversicherung";
|
||||
import Risikoschutz from "./pages/Risikoschutz";
|
||||
import Sachversicherung from "./pages/Sachversicherung";
|
||||
import Wohngebaeudeversicherung from "./pages/Wohngebaeudeversicherung";
|
||||
import Vermoegenssicherung from "./pages/Vermoegenssicherung";
|
||||
import RiesterRente from "./pages/RiesterRente";
|
||||
import RiesterRenteFinal from "./pages/RiesterRenteFinal";
|
||||
import Haftpflicht from "./pages/haftpflicht";
|
||||
import GeschaeftskundenFlottenversicherung from "./pages/GeschaeftskundenFlottenversicherung";
|
||||
import GeschaeftskundenBetriebsrente from "./pages/GeschaeftskundenBetriebsrente";
|
||||
@ -179,12 +181,20 @@ const App = () => {
|
||||
<Route path="/krankheitsschutzbrief" element={<Krankheitsschutzbrief />} />
|
||||
<Route path="/gesundheitsvorsorge" element={<Gesundheitsvorsorge />} />
|
||||
<Route path="/altersvorsorge" element={<Altersvorsorge />} />
|
||||
<Route path="/fondsgebundene-rentenversicherung" element={<FondsgebundeneRentenversicherung />} />
|
||||
<Route path="/berufsunfaehigkeitsversicherung" element={<Berufsunfaehigkeitsversicherung />} />
|
||||
<Route path="/ruerup-rente" element={<Navigate to="/altersvorsorge" replace />} />
|
||||
<Route path="/betriebliche-altersvorsorge" element={<Navigate to="/altersvorsorge" replace />} />
|
||||
<Route path="/kapitallebensversicherung" element={<Navigate to="/altersvorsorge" replace />} />
|
||||
<Route path="/zukunftsvorsorge" element={<Navigate to="/altersvorsorge" replace />} />
|
||||
<Route path="/sparplan" element={<Navigate to="/altersvorsorge" replace />} />
|
||||
<Route path="/private-rentenversicherung" element={<Navigate to="/altersvorsorge" replace />} />
|
||||
<Route path="/risikoschutz" element={<Risikoschutz />} />
|
||||
<Route path="/sachversicherung" element={<Sachversicherung />} />
|
||||
<Route path="/haftpflicht" element={<Haftpflicht />} />
|
||||
<Route path="/haftpflichtversicherung" element={<Haftpflicht />} />
|
||||
<Route path="/vermoegenssicherung" element={<Vermoegenssicherung />} />
|
||||
<Route path="/riester-rente" element={<RiesterRente />} />
|
||||
<Route path="/riester-rente" element={<RiesterRenteFinal />} />
|
||||
<Route path="/geschaeftskunden/flottenversicherung" element={<GeschaeftskundenFlottenversicherung />} />
|
||||
<Route path="/geschaeftskunden/betriebsrente" element={<GeschaeftskundenBetriebsrente />} />
|
||||
<Route path="/geschaeftskunden/betriebshaftpflicht" element={<GeschaeftskundenBetriebshaftpflicht />} />
|
||||
|
||||
@ -21,7 +21,7 @@ export default function ChatbotCtaSection() {
|
||||
</p>
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-1.5 text-sm font-semibold shadow transition-all duration-200 hover:scale-105"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-1.5 text-sm font-semibold shadow transition-all duration-200 hover:scale-[1.04]"
|
||||
onClick={() => {
|
||||
// Beispiel: Öffnet eine Chatbot-Seite im gleichen Tab
|
||||
window.location.href = '/chatbot';
|
||||
|
||||
@ -20,7 +20,7 @@ export default function ChatbotHint() {
|
||||
</p>
|
||||
<Button
|
||||
size="default"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-2 text-base font-semibold shadow transition-all duration-200 hover:scale-105"
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-2 text-base font-semibold shadow transition-all duration-200 hover:scale-[1.04]"
|
||||
onClick={() => {
|
||||
window.location.href = '/chatbot';
|
||||
}}
|
||||
|
||||
@ -27,6 +27,7 @@ type HeroSlide = {
|
||||
id: string;
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
highlights?: string[];
|
||||
imageUrl: string;
|
||||
imagePosition?: string;
|
||||
kicker?: string;
|
||||
@ -168,7 +169,21 @@ export default function HeroSlider({
|
||||
</h1>
|
||||
|
||||
{slide.subtitle ? (
|
||||
<p className="mt-3 text-base md:text-lg text-white/90 font-medium">{slide.subtitle}</p>
|
||||
<p className="mt-3 text-base md:text-lg text-white/90 font-medium whitespace-pre-line">{slide.subtitle}</p>
|
||||
) : null}
|
||||
|
||||
{slide.highlights?.length ? (
|
||||
<div className="mt-4 flex flex-col gap-2">
|
||||
{slide.highlights.map((item, idx) => (
|
||||
<div
|
||||
key={`${slide.id}-highlight-${idx}`}
|
||||
className="text-sm md:text-base text-white/95"
|
||||
>
|
||||
<span className="mr-2 text-white/80">-</span>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{slide.ctas?.length ? (
|
||||
|
||||
@ -26,7 +26,7 @@ export default function TenReasons({ title, items, years }: TenReasonsProps) {
|
||||
|
||||
return {
|
||||
title: safeTitle,
|
||||
description: safeDescription.replace('{{years}}', years?.toString() || '26'),
|
||||
description: safeDescription.replace('{{years}}', years?.toString() || '32'),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -53,8 +53,11 @@ i18n
|
||||
'familienpakete',
|
||||
'familienhaftpflicht',
|
||||
'vermoegenssicherung',
|
||||
'fondsgebundene_rentenversicherung',
|
||||
'riester_rente',
|
||||
'risikolebensversicherung',
|
||||
'krankheitsschutzbrief',
|
||||
'berufsunfaehigkeit',
|
||||
],
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
"subtitle": "Dyplomowany doradca ubezpieczeniowy (BWV) | Makler ubezpieczeniowy",
|
||||
"about": {
|
||||
"title": "O mnie",
|
||||
"description": "Niezależny doradca finansowy i ubezpieczeniowy z ponad 26-letnim doświadczeniem w branży ubezpieczeniowej.",
|
||||
"description": "Niezależny doradca finansowy i ubezpieczeniowy z ponad 32-letnim doświadczeniem w branży ubezpieczeniowej.",
|
||||
"office": "Biuro w Düsseldorfie",
|
||||
"appointment": "(Spotkania po wcześniejszym umówieniu telefonicznym)",
|
||||
"address": "Rosmarinstraße 30 d, 40235 Düsseldorf"
|
||||
@ -21,15 +21,15 @@
|
||||
"title": "Moja wizytówka"
|
||||
},
|
||||
"reasons": {
|
||||
"title": "10 powodów, by zaufać",
|
||||
"title": "10 dobrych powodów",
|
||||
"items": [
|
||||
{
|
||||
"title": "Doświadczenie",
|
||||
"description": "Ponad 26 lat doświadczenia w branży ubezpieczeniowej przekłada się na kompleksową analizę potrzeb i optymalne rozwiązania."
|
||||
"description": "Ponad 32 lata doświadczenia w branży ubezpieczeniowej przekłada się na kompleksową analizę potrzeb i optymalne rozwiązania."
|
||||
},
|
||||
{
|
||||
"title": "Niezależność",
|
||||
"description": "Działam wyłącznie w Twoim najlepszym interesie, bez zobowiązań wobec konkretnych towarzystw ubezpieczeniowych."
|
||||
"description": "Działam wyłącznie w Twoim interesie - niezależnie od jakichkolwiek zobowiązań wobec konkretnego towarzystwa ubezpieczeniowego."
|
||||
},
|
||||
{
|
||||
"title": "Transparentność",
|
||||
|
||||
@ -73,31 +73,22 @@ const Agentur = () => {
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
{/* Simple header without image */}
|
||||
<div className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
{t('hero.title', 'Ihr starker Partner für Sicherheit.')}
|
||||
</h1>
|
||||
<p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
|
||||
{t('hero.subtitle', 'Unabhängige Versicherung- und Finanzberatung – persönlich, verlässlich und auf Ihre Ziele ausgerichtet.')}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button asChild className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 text-lg font-semibold shadow-lg">
|
||||
<Link to="/contact">
|
||||
{t('hero.primaryCta', 'Jetzt beraten lassen')}
|
||||
</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 text-lg font-semibold">
|
||||
<Link to="/leistungen">
|
||||
{t('hero.secondaryCta', 'Unsere Leistungen')}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<HeroSlider
|
||||
slides={[
|
||||
{
|
||||
id: 'agentur-1',
|
||||
kicker: t('hero.kicker', 'Agentur'),
|
||||
title: t('hero.title', 'Ihr starker Partner für Sicherheit.'),
|
||||
subtitle: t('hero.subtitle', 'Unabhängige Versicherung- und Finanzberatung – persönlich, verlässlich und auf Ihre Ziele ausgerichtet.'),
|
||||
imageUrl: assetUrl('iStock-935259316.jpg'),
|
||||
imagePosition: 'center 35%',
|
||||
ctas: [
|
||||
{ label: t('hero.primaryCta', 'Jetzt beraten lassen'), href: '/contact' },
|
||||
{ label: t('hero.secondaryCta', 'Unsere Leistungen'), href: '/leistungen' },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
{/* Content */}
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Heart, Shield, TrendingUp, PiggyBank, Home, Calculator } from 'lucide-react';
|
||||
import { Heart, Shield, TrendingUp, PiggyBank, Home, Calculator, ArrowRight } from 'lucide-react';
|
||||
import Layout from '@/components/Layout';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import HeroSlider from '@/components/HeroSlider';
|
||||
import Disclaimer from '@/components/Disclaimer';
|
||||
|
||||
const Altersvorsorge = () => {
|
||||
@ -15,7 +17,7 @@ const Altersvorsorge = () => {
|
||||
{
|
||||
title: t('topics.riester.title', 'Riester-Rente'),
|
||||
href: '/riester-rente',
|
||||
image: assetUrl('iStock-957363908.jpg')
|
||||
image: assetUrl('Chatgpt_bilder/Riester-Rente.png')
|
||||
},
|
||||
{
|
||||
title: t('topics.ruerup.title', 'Rürup-Rente'),
|
||||
@ -27,21 +29,11 @@ const Altersvorsorge = () => {
|
||||
href: '/betriebliche-altersvorsorge',
|
||||
image: assetUrl('Fotolia_8654128_XS.jpg')
|
||||
},
|
||||
{
|
||||
title: t('topics.privat.title', 'Private Rentenversicherung'),
|
||||
href: '/private-rentenversicherung',
|
||||
image: assetUrl('iStock-495809266.jpg')
|
||||
},
|
||||
{
|
||||
title: t('topics.kapital.title', 'Kapitallebensversicherung'),
|
||||
href: '/kapitallebensversicherung',
|
||||
image: assetUrl('Fotolia_67327775_XS.jpg')
|
||||
},
|
||||
{
|
||||
title: t('topics.fonds.title', 'Fondsgebundene Versicherung'),
|
||||
href: '/fondsgebundene-versicherung',
|
||||
image: assetUrl('iStock-923620990.jpg')
|
||||
},
|
||||
{
|
||||
title: t('topics.zukunft.title', 'Zukunftsvorsorge'),
|
||||
href: '/zukunftsvorsorge',
|
||||
@ -51,35 +43,33 @@ const Altersvorsorge = () => {
|
||||
title: t('topics.sparplan.title', 'Sparplan'),
|
||||
href: '/sparplan',
|
||||
image: assetUrl('iStock-957363908.jpg')
|
||||
},
|
||||
{
|
||||
title: t('topics.investment.title', 'Investmentfonds'),
|
||||
href: '/investmentfonds',
|
||||
image: assetUrl('iStock-635975818.jpg')
|
||||
},
|
||||
{
|
||||
title: t('topics.etf.title', 'ETF-Sparplan'),
|
||||
href: '/etf-sparplan',
|
||||
image: assetUrl('iStock-1346163204.jpg')
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<HeroSlider
|
||||
slides={[
|
||||
{
|
||||
id: 'altersvorsorge-1',
|
||||
kicker: t('hero.kicker', 'Altersvorsorge'),
|
||||
title: t('hero.title', 'Exklusive Lösung zu Fondsrenten'),
|
||||
subtitle: t('hero.subtitle', ''),
|
||||
highlights: [
|
||||
t('hero.highlights.0', 'Aktive Vermögensverwalter-Selektion'),
|
||||
t('hero.highlights.1', 'Global diversifiziertes Portfolio'),
|
||||
t('hero.highlights.2', 'Fokus auf Vermögenserhalt'),
|
||||
],
|
||||
imageUrl: assetUrl('iStock-652772652.jpg'),
|
||||
imagePosition: 'center 35%',
|
||||
ctas: [
|
||||
{ label: t('hero.primaryCta', 'Jetzt beraten lassen'), href: '/contact' },
|
||||
{ label: t('hero.secondaryCta', 'Alle Lösungen'), href: '/leistungen' },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-6">
|
||||
{t('title', 'Altersvorsorge')}
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
{t('subtitle', 'Sorgen Sie frühzeitig für Ihre finanzielle Zukunft vor')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kacheln */}
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
@ -92,7 +82,7 @@ const Altersvorsorge = () => {
|
||||
<img
|
||||
src={topic.image}
|
||||
alt={topic.title}
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||||
@ -105,6 +95,91 @@ const Altersvorsorge = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Zusätzliche Kachel-Sektion */}
|
||||
<section className="py-16 bg-gradient-to-br from-gray-50 to-blue-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
{t('special.title', 'Spezielle Vorsorgelösungen')}
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto whitespace-pre-line">
|
||||
{t(
|
||||
'special.subtitle',
|
||||
'Erleben Sie exklusive, maßgeschneiderte Fondsrentenlösungen mit professionellen Expertenkonzepten für Ihre langfristige und nachhaltige Altersvorsorge.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
<Card className="overflow-hidden shadow-lg hover:shadow-2xl transition-shadow rounded-2xl flex flex-col h-full">
|
||||
<div className="relative h-44">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${assetUrl('iStock-652772652.jpg')})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||||
<div className="text-xl font-bold">
|
||||
Fondsgebundene Rentenversicherung
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="flex-1 p-6 flex flex-col">
|
||||
<div className="text-lg font-semibold text-gray-900">
|
||||
Fondsgebundene Rentenversicherung
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-600">
|
||||
Flexible Altersvorsorge mit Renditechancen durch Investmentfonds.
|
||||
</div>
|
||||
|
||||
<div className="mt-5 text-sm text-gray-700">
|
||||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold">
|
||||
z.B. Beitragsbeispiel
|
||||
</div>
|
||||
<div className="mt-2 text-4xl font-bold text-gray-900">
|
||||
100,00€
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-lg bg-gray-50 border border-gray-200 px-4 py-3">
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-gray-800">
|
||||
<div className="text-gray-600">Monatlich</div>
|
||||
<div className="font-semibold">100 €</div>
|
||||
<div className="text-gray-600">Laufzeit</div>
|
||||
<div className="font-semibold">30 Jahre</div>
|
||||
<div className="text-gray-600">Einzahlung</div>
|
||||
<div className="font-semibold">36.000 €</div>
|
||||
<div className="text-gray-600">Endkapital</div>
|
||||
<div className="font-semibold">100.000 – 130.000 €</div>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-gray-600">
|
||||
*Eine gute Fondspolice (bei ca. 6-7 % Netto-Rendite)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 text-xs uppercase tracking-wide text-gray-500 font-semibold">
|
||||
Details:
|
||||
</div>
|
||||
<ul className="mt-2 space-y-1 text-sm text-gray-700">
|
||||
<li>Fondsgebundene Rentenversicherung</li>
|
||||
<li>Investmentfonds</li>
|
||||
<li>Altersvorsorge mit Rendite</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
<Button asChild className="w-full mt-6 bg-red-900 hover:bg-red-950 rounded-full">
|
||||
<Link to="/fondsgebundene-rentenversicherung">
|
||||
Jetzt informieren
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Disclaimer />
|
||||
|
||||
473
src/pages/Berufsunfaehigkeitsversicherung.tsx
Normal file
473
src/pages/Berufsunfaehigkeitsversicherung.tsx
Normal file
@ -0,0 +1,473 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
BadgeCheck,
|
||||
Calculator,
|
||||
Download,
|
||||
FileCheck,
|
||||
FileText,
|
||||
LineChart,
|
||||
Mail,
|
||||
Phone,
|
||||
ShieldCheck,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import Layout from '@/components/Layout';
|
||||
import GeneralNotice from '@/components/GeneralNotice';
|
||||
import HeroSlider from '@/components/HeroSlider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Disclaimer from '@/components/Disclaimer';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||||
|
||||
const TAB_OVERVIEW = 'overview';
|
||||
const TAB_DETAILS = 'details';
|
||||
const TAB_CALCULATOR = 'calculator';
|
||||
const TAB_FORM = 'form';
|
||||
const TAB_CATALOG = 'catalog';
|
||||
const TAB_BROCHURE = 'brochure';
|
||||
|
||||
const Berufsunfaehigkeitsversicherung = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { t } = useTranslation('berufsunfaehigkeit');
|
||||
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
const [activeTab, setActiveTab] = useState<string>(TAB_OVERVIEW);
|
||||
|
||||
useEffect(() => {
|
||||
const hash = (location.hash || '').replace('#', '').toLowerCase();
|
||||
|
||||
if (hash === TAB_DETAILS) setActiveTab(TAB_DETAILS);
|
||||
else if (hash === TAB_CALCULATOR) setActiveTab(TAB_CALCULATOR);
|
||||
else if (hash === TAB_FORM) setActiveTab(TAB_FORM);
|
||||
else if (hash === TAB_CATALOG) setActiveTab(TAB_CATALOG);
|
||||
else if (hash === TAB_BROCHURE) setActiveTab(TAB_BROCHURE);
|
||||
else setActiveTab(TAB_OVERVIEW);
|
||||
|
||||
if (!hash) return;
|
||||
|
||||
window.setTimeout(() => {
|
||||
const tabSection = document.getElementById('tab-section');
|
||||
if (tabSection) tabSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}, 100);
|
||||
}, [location.hash]);
|
||||
|
||||
const onTabChange = (tab: string) => {
|
||||
setActiveTab(tab);
|
||||
if (tab === TAB_OVERVIEW) {
|
||||
navigate(location.pathname, { replace: true });
|
||||
return;
|
||||
}
|
||||
navigate(`${location.pathname}#${tab}`, { replace: true });
|
||||
};
|
||||
|
||||
const phoneLabel = t('form.phoneNumber', 'Telefon: 0171 / 9864053');
|
||||
const EMAIL = 'info@finanzen-mizera.de';
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<HeroSlider
|
||||
slides={[
|
||||
{
|
||||
id: 'bu-1',
|
||||
kicker: t('hero.kicker', 'Risikoschutz'),
|
||||
title: t('hero.title', 'Berufsunfähigkeitsversicherung'),
|
||||
subtitle: t(
|
||||
'hero.subtitle',
|
||||
'Sichern Sie Ihr Einkommen ab – falls Sie Ihren Beruf aus gesundheitlichen Gründen nicht mehr ausüben können.'
|
||||
),
|
||||
highlights: [
|
||||
t('hero.highlights.0', 'Einkommen absichern'),
|
||||
t('hero.highlights.1', 'Frühzeitig vorsorgen'),
|
||||
t('hero.highlights.2', 'Tarife vergleichen'),
|
||||
],
|
||||
imageUrl: assetUrl('iStock-1065789424.jpg'),
|
||||
imagePosition: 'center 35%',
|
||||
ctas: [
|
||||
{ label: t('hero.cta1', 'Jetzt beraten lassen'), href: '/contact#contact' },
|
||||
{ label: t('hero.cta2', 'Zur Übersicht'), href: '/risikoschutz' },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="container mx-auto px-4 md:px-6 py-8">
|
||||
<div className="max-w-screen-2xl mx-auto">
|
||||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section">
|
||||
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||||
<TabsList className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
||||
<TabsTrigger
|
||||
value={TAB_OVERVIEW}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<TrendingUp className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.overview', 'Übersicht')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_DETAILS}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<FileText className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.details', 'Details')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_CALCULATOR}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<Calculator className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.calculator', 'Rechner')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_FORM}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<Phone className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.form', 'Anfrage')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_CATALOG}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<FileCheck className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.catalog', 'Ratgeber')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_BROCHURE}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.brochure', 'PDF')}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6">
|
||||
<TabsContent value={TAB_OVERVIEW} className="mt-0">
|
||||
<TwoColumnTab
|
||||
className="gap-8 items-center"
|
||||
left={
|
||||
<>
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
|
||||
<LineChart className="w-4 h-4" />
|
||||
<span>{t('overview.badge', 'BU – Einkommensschutz')}</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||
{t('overview.title', 'Wenn Arbeit nicht mehr geht')}
|
||||
<span className="block text-blue-700">
|
||||
{t('overview.subtitle', 'Schützen Sie Ihr Einkommen langfristig.')}
|
||||
</span>
|
||||
</h1>
|
||||
<p className="mt-4 text-gray-600 text-lg">
|
||||
{t(
|
||||
'overview.description',
|
||||
'Die Berufsunfähigkeitsversicherung zählt zu den wichtigsten Absicherungen. Wir helfen Ihnen dabei, Leistungen, Bedingungen und Beiträge verständlich zu vergleichen.'
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||
<Button onClick={() => onTabChange(TAB_FORM)} className="bg-blue-600 hover:bg-blue-700">
|
||||
{t('overview.cta1', 'Angebot anfordern')}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
|
||||
{t('overview.cta2', 'Beratung')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<ShieldCheck className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">
|
||||
{t('overview.feature1Title', 'Leistung')}
|
||||
</div>
|
||||
<div className="text-gray-600">
|
||||
{t('overview.feature1Desc', 'Monatliche BU-Rente')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<BadgeCheck className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">
|
||||
{t('overview.feature2Title', 'Schutz')}
|
||||
</div>
|
||||
<div className="text-gray-600">
|
||||
{t('overview.feature2Desc', 'Individuelle Bedingungen')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
|
||||
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||||
<img
|
||||
src={assetUrl('iStock-1065789424.jpg')}
|
||||
alt={t('overview.imageAlt', 'Berufsunfähigkeitsversicherung')}
|
||||
className="w-full h-[240px] object-cover"
|
||||
onError={(e) => {
|
||||
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
<div className="p-5">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<BadgeCheck className="w-4 h-4" />
|
||||
<span>{t('overview.imageCaption', 'Absicherung prüfen')}</span>
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-600">
|
||||
{t(
|
||||
'overview.imageSubtext',
|
||||
'Wir unterstützen Sie bei der Auswahl der passenden BU-Lösung.'
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_DETAILS} className="mt-0">
|
||||
<div className="space-y-8">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">{t('details.title', 'Details')}</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
{t(
|
||||
'details.subtitle',
|
||||
'Worauf es bei der BU ankommt: Bedingungen, Gesundheitsfragen, Laufzeit und passende Rentenhöhe.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: t('details.cards.0.title', 'Höhe der BU-Rente'),
|
||||
desc: t('details.cards.0.desc', 'Passend zum Einkommen und Lebensstandard'),
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: t('details.cards.1.title', 'Bedingungen'),
|
||||
desc: t('details.cards.1.desc', 'Wichtige Klauseln und Leistungsdefinitionen'),
|
||||
},
|
||||
{
|
||||
icon: BadgeCheck,
|
||||
title: t('details.cards.2.title', 'Gesundheitsprüfung'),
|
||||
desc: t('details.cards.2.desc', 'Risikovoranfrage & transparente Angaben'),
|
||||
},
|
||||
].map((item, idx) => (
|
||||
<Card key={idx} className="h-full">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<item.icon className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-xl">{item.title}</CardTitle>
|
||||
<CardDescription>{item.desc}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<GeneralNotice />
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_CALCULATOR} className="mt-0">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">{t('calculator.title', 'Bedarfs-Check')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t('calculator.subtitle', 'Schnelle Orientierung – unverbindlich.')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="text-sm text-gray-700">
|
||||
{t(
|
||||
'calculator.placeholder',
|
||||
'Rechner folgt – wir beraten Sie gern zur passenden BU-Rentenhöhe und Laufzeit.'
|
||||
)}
|
||||
</div>
|
||||
<Button onClick={() => onTabChange(TAB_FORM)} className="bg-blue-600 hover:bg-blue-700 w-full">
|
||||
{t('calculator.cta', 'Beratung anfordern')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_FORM} className="mt-0">
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">{t('form.title', 'Anfrage')}</CardTitle>
|
||||
<CardDescription>{t('form.subtitle', 'Wir melden uns kurzfristig bei Ihnen.')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<Phone className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('form.phone', 'Telefon')}</div>
|
||||
<div className="text-gray-600">{phoneLabel}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<Mail className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('form.email', 'E-Mail')}</div>
|
||||
<div className="text-gray-600">{EMAIL}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link to="/contact" className="inline-flex w-full">
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700">
|
||||
{t('form.cta', 'Zum Kontaktformular')}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<RightImageCard
|
||||
src={assetUrl('iStock-1065789424.jpg')}
|
||||
alt={t('form.imageAlt', 'BU Beratung')}
|
||||
>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('form.tipTitle', 'Tipp')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t(
|
||||
'form.tipDescription',
|
||||
'Je früher der Abschluss, desto besser sind häufig Beiträge und Annahmemöglichkeiten.'
|
||||
)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_CATALOG} className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">{t('catalog.title', 'Ratgeber')}</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
{t('catalog.subtitle', 'Kurz & verständlich – die wichtigsten Punkte auf einen Blick.')}
|
||||
</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('catalog.cardTitle', 'Was ist wichtig?')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t(
|
||||
'catalog.cardDescription',
|
||||
'Definition Berufsunfähigkeit, Verweisbarkeit, Nachversicherung, Laufzeit, Dynamik.'
|
||||
)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Link to="/contact" className="inline-flex w-full">
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700">
|
||||
{t('catalog.cta', 'Beratung anfordern')}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard
|
||||
src={assetUrl('iStock-1065789424.jpg')}
|
||||
alt={t('catalog.imageAlt', 'Ratgeber BU')}
|
||||
>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('catalog.boxTitle', 'Hinweis')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t(
|
||||
'catalog.boxDescription',
|
||||
'Nicht nur der Beitrag zählt – Bedingungen und Leistungsfall-Regelungen sind entscheidend.'
|
||||
)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_BROCHURE} className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">{t('brochure.title', 'Informationen (PDF)')}</h3>
|
||||
<p className="mt-2 text-gray-600">{t('brochure.subtitle', 'PDF zum Download – auf Anfrage.')}</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('brochure.cardTitle', 'PDF')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t('brochure.cardDescription', 'Gerne senden wir Ihnen die passende Broschüre zu.')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Link to="/contact" className="inline-flex w-full">
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700">
|
||||
{t('brochure.cta', 'PDF anfragen')}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard
|
||||
src={assetUrl('iStock-1065789424.jpg')}
|
||||
alt={t('brochure.imageAlt', 'PDF BU')}
|
||||
>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('brochure.tipTitle', 'Tipp')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t(
|
||||
'brochure.tipDescription',
|
||||
'Wir erklären verständlich – ohne Fachchinesisch.'
|
||||
)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Disclaimer />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Berufsunfaehigkeitsversicherung;
|
||||
@ -127,7 +127,7 @@ const FamilienKinder = () => {
|
||||
{focusTopics.map((item) => (
|
||||
<div
|
||||
key={`${item.id}-${item.title}`}
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate(item.href)}
|
||||
@ -137,7 +137,7 @@ const FamilienKinder = () => {
|
||||
>
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
style={{ backgroundImage: `url(${item.image})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
|
||||
@ -124,7 +124,7 @@ const Finanzen = () => {
|
||||
].map((item, index) => (
|
||||
<div
|
||||
key={`${item.href}-${index}`}
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate(item.href)}
|
||||
@ -134,7 +134,7 @@ const Finanzen = () => {
|
||||
>
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
style={{ backgroundImage: `url(${item.image})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
|
||||
388
src/pages/FondsgebundeneRentenversicherung.tsx
Normal file
388
src/pages/FondsgebundeneRentenversicherung.tsx
Normal file
@ -0,0 +1,388 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
BadgeCheck,
|
||||
BarChart3,
|
||||
Calculator,
|
||||
Download,
|
||||
FileCheck,
|
||||
FileText,
|
||||
LineChart,
|
||||
Mail,
|
||||
Phone,
|
||||
ShieldCheck,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import Layout from '@/components/Layout';
|
||||
import GeneralNotice from '@/components/GeneralNotice';
|
||||
import HeroSlider from '@/components/HeroSlider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Disclaimer from '@/components/Disclaimer';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||||
|
||||
const TAB_OVERVIEW = 'overview';
|
||||
const TAB_DETAILS = 'details';
|
||||
const TAB_CALCULATOR = 'calculator';
|
||||
const TAB_FORM = 'form';
|
||||
const TAB_CATALOG = 'catalog';
|
||||
const TAB_BROCHURE = 'brochure';
|
||||
|
||||
const FondsgebundeneRentenversicherung = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { t } = useTranslation('fondsgebundene_rentenversicherung');
|
||||
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
const [activeTab, setActiveTab] = useState<string>(TAB_OVERVIEW);
|
||||
|
||||
useEffect(() => {
|
||||
const hash = (location.hash || '').replace('#', '').toLowerCase();
|
||||
|
||||
if (hash === TAB_DETAILS) setActiveTab(TAB_DETAILS);
|
||||
else if (hash === TAB_CALCULATOR) setActiveTab(TAB_CALCULATOR);
|
||||
else if (hash === TAB_FORM) setActiveTab(TAB_FORM);
|
||||
else if (hash === TAB_CATALOG) setActiveTab(TAB_CATALOG);
|
||||
else if (hash === TAB_BROCHURE) setActiveTab(TAB_BROCHURE);
|
||||
else setActiveTab(TAB_OVERVIEW);
|
||||
|
||||
if (!hash) return;
|
||||
|
||||
window.setTimeout(() => {
|
||||
const tabSection = document.getElementById('tab-section');
|
||||
if (tabSection) tabSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}, 100);
|
||||
}, [location.hash]);
|
||||
|
||||
const onTabChange = (tab: string) => {
|
||||
setActiveTab(tab);
|
||||
if (tab === TAB_OVERVIEW) {
|
||||
navigate(location.pathname, { replace: true });
|
||||
return;
|
||||
}
|
||||
navigate(`${location.pathname}#${tab}`, { replace: true });
|
||||
};
|
||||
|
||||
const phoneLabel = t('form.phoneNumber', 'Telefon: 0171 / 9864053');
|
||||
const EMAIL = 'info@finanzen-mizera.de';
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<HeroSlider
|
||||
slides={[
|
||||
{
|
||||
id: 'fondsrente-1',
|
||||
kicker: t('hero.kicker', 'Altersvorsorge'),
|
||||
title: t('hero.title', 'Fondsgebundene Rentenversicherung'),
|
||||
subtitle: t('hero.subtitle', 'Exklusive Lösung zu Fondsrenten'),
|
||||
highlights: [
|
||||
t('hero.highlights.0', 'Aktive Vermögensverwalter-Selektion'),
|
||||
t('hero.highlights.1', 'Global diversifiziertes Portfolio'),
|
||||
t('hero.highlights.2', 'Fokus auf Vermögenserhalt'),
|
||||
],
|
||||
imageUrl: assetUrl('iStock-652772652.jpg'),
|
||||
imagePosition: 'center 35%',
|
||||
ctas: [
|
||||
{ label: t('hero.cta1', 'Jetzt beraten lassen'), href: '/contact#contact' },
|
||||
{ label: t('hero.cta2', 'Zur Übersicht'), href: '/altersvorsorge' },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="container mx-auto px-4 md:px-6 py-8">
|
||||
<div className="max-w-screen-2xl mx-auto">
|
||||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section">
|
||||
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||||
<TabsList className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
||||
<TabsTrigger
|
||||
value={TAB_OVERVIEW}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<TrendingUp className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.overview', 'Übersicht')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_DETAILS}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<FileText className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.details', 'Details')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_CALCULATOR}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<Calculator className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.calculator', 'Rechner')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_FORM}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<Phone className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.form', 'Anfrage')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_CATALOG}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<FileCheck className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.catalog', 'Ratgeber')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_BROCHURE}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.brochure', 'PDF')}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6">
|
||||
<TabsContent value={TAB_OVERVIEW} className="mt-0">
|
||||
<TwoColumnTab
|
||||
className="gap-8 items-center"
|
||||
left={
|
||||
<>
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
|
||||
<LineChart className="w-4 h-4" />
|
||||
<span>{t('overview.badge', 'Fondsrente – planbar & flexibel')}</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||
{t('overview.title', 'Ihre Altersvorsorge mit Renditechancen')}
|
||||
<span className="block text-blue-700">{t('overview.subtitle', 'Professionell, verständlich, langfristig.')}</span>
|
||||
</h1>
|
||||
<p className="mt-4 text-gray-600 text-lg">{t('overview.description')}</p>
|
||||
|
||||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||
<Button onClick={() => onTabChange(TAB_FORM)} className="bg-blue-600 hover:bg-blue-700">
|
||||
{t('overview.cta1', 'Angebot anfordern')}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
|
||||
{t('overview.cta2', 'Beratung')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<ShieldCheck className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('overview.feature1Title', 'Flexibel')}</div>
|
||||
<div className="text-gray-600">{t('overview.feature1Desc', 'Beitrag, Laufzeit, Fonds')} </div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<BarChart3 className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('overview.feature2Title', 'Diversifiziert')}</div>
|
||||
<div className="text-gray-600">{t('overview.feature2Desc', 'Globales Portfolio')} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
|
||||
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||||
<img
|
||||
src={assetUrl('iStock-652772652.jpg')}
|
||||
alt={t('overview.imageAlt', 'Fondsgebundene Rentenversicherung')}
|
||||
className="w-full h-[240px] object-cover"
|
||||
onError={(e) => {
|
||||
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
<div className="p-5">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<BadgeCheck className="w-4 h-4" />
|
||||
<span>{t('overview.imageCaption', 'Strategie & Expertise')}</span>
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-600">{t('overview.imageSubtext')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_DETAILS} className="mt-0">
|
||||
<div className="space-y-8">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">{t('details.title', 'Details')}</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">{t('details.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[
|
||||
{ icon: TrendingUp, title: t('details.cards.0.title'), desc: t('details.cards.0.desc') },
|
||||
{ icon: ShieldCheck, title: t('details.cards.1.title'), desc: t('details.cards.1.desc') },
|
||||
{ icon: BarChart3, title: t('details.cards.2.title'), desc: t('details.cards.2.desc') },
|
||||
].map((item, idx) => (
|
||||
<Card key={idx} className="h-full">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<item.icon className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-xl">{item.title}</CardTitle>
|
||||
<CardDescription>{item.desc}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<GeneralNotice />
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_CALCULATOR} className="mt-0">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">{t('calculator.title', 'Beitragsrechner')}</CardTitle>
|
||||
<CardDescription>{t('calculator.subtitle', 'Schnelle Orientierung – unverbindlich.')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="text-sm text-gray-700">{t('calculator.placeholder', 'Rechner kommt als nächstes – wir beraten Sie gern persönlich.')}</div>
|
||||
<Button onClick={() => onTabChange(TAB_FORM)} className="bg-blue-600 hover:bg-blue-700 w-full">
|
||||
{t('calculator.cta', 'Beratung anfordern')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_FORM} className="mt-0">
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">{t('form.title', 'Anfrage')}</CardTitle>
|
||||
<CardDescription>{t('form.subtitle', 'Wir melden uns kurzfristig bei Ihnen.')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<Phone className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('form.phone', 'Telefon')}</div>
|
||||
<div className="text-gray-600">{phoneLabel}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<Mail className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('form.email', 'E-Mail')}</div>
|
||||
<div className="text-gray-600">{EMAIL}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link to="/contact" className="inline-flex w-full">
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700">{t('form.cta', 'Zum Kontaktformular')}</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<RightImageCard src={assetUrl('iStock-652772652.jpg')} alt={t('form.imageAlt', 'Fondsrentenberatung')}>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('form.tipTitle', 'Tipp')}</CardTitle>
|
||||
<CardDescription>{t('form.tipDescription', 'Wir vergleichen Tarife und Fondsauswahl – transparent & verständlich.')}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_CATALOG} className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">{t('catalog.title', 'Ratgeber')}</h3>
|
||||
<p className="mt-2 text-gray-600">{t('catalog.subtitle', 'Kurz & verständlich – die wichtigsten Punkte auf einen Blick.')}</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('catalog.cardTitle', 'Was ist wichtig?')}</CardTitle>
|
||||
<CardDescription>{t('catalog.cardDescription', 'Kosten, Fonds, Garantieanteil, Ablaufmanagement.')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Link to="/contact" className="inline-flex w-full">
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700">{t('catalog.cta', 'Beratung anfordern')}</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('iStock-652772652.jpg')} alt={t('catalog.imageAlt', 'Ratgeber Fondsrente')}>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('catalog.boxTitle', 'Hinweis')}</CardTitle>
|
||||
<CardDescription>{t('catalog.boxDescription', 'Wertentwicklungen sind nicht garantiert – wir helfen bei der passenden Strategie.')}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_BROCHURE} className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">{t('brochure.title', 'Informationen (PDF)')}</h3>
|
||||
<p className="mt-2 text-gray-600">{t('brochure.subtitle', 'PDF zum Download – auf Anfrage.')}</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('brochure.cardTitle', 'PDF')}</CardTitle>
|
||||
<CardDescription>{t('brochure.cardDescription', 'Gerne senden wir Ihnen die passende Broschüre zu.')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Link to="/contact" className="inline-flex w-full">
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700">{t('brochure.cta', 'PDF anfragen')}</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('iStock-652772652.jpg')} alt={t('brochure.imageAlt', 'PDF Fondsrente')}>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('brochure.tipTitle', 'Tipp')}</CardTitle>
|
||||
<CardDescription>{t('brochure.tipDescription', 'Wir erklären verständlich – ohne Fachchinesisch.')}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Disclaimer />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default FondsgebundeneRentenversicherung;
|
||||
@ -191,7 +191,7 @@ const Geschaeftskunden = () => {
|
||||
{focusTopics.map((item) => (
|
||||
<div
|
||||
key={`${item.id}-${item.title}`}
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate(item.href)}
|
||||
@ -201,7 +201,7 @@ const Geschaeftskunden = () => {
|
||||
>
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
style={{ backgroundImage: `url(${item.image})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
|
||||
@ -99,7 +99,7 @@ const Gesundheitsvorsorge = () => {
|
||||
<img
|
||||
src={topic.image}
|
||||
alt={topic.title}
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||||
|
||||
@ -182,6 +182,12 @@ const Impressum = () => {
|
||||
<p className="text-sm">© Copyright - iStock – über Richard Ch</p>
|
||||
<p className="text-sm">© Copyright - Czeslaw D.</p>
|
||||
<p className="text-sm">© Copyright - Kundenfotos</p>
|
||||
<p className="text-sm mt-3">
|
||||
{t(
|
||||
'aiNotice',
|
||||
'Ein Teil der auf dieser Website verwendeten Bilder wurde mit Hilfe von künstlicher Intelligenz (KI) durch ChatGPT und andere KI-Tools generiert. Die Nutzungsrechte liegen beim Betreiber dieser Website.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -358,7 +364,7 @@ const Impressum = () => {
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-gray-700">
|
||||
Ich bin seit mehr als 26 Jahren auf dem Versicherungsmarkt erfolgreich -
|
||||
Ich bin seit mehr als 32 Jahren auf dem Versicherungsmarkt erfolgreich -
|
||||
und Sie profitieren davon: mit einer umfassenden Bedarfsanalyse und optimalen
|
||||
persönlichen Angeboten.
|
||||
</p>
|
||||
|
||||
@ -165,6 +165,57 @@ const Index = () => {
|
||||
{ label: 'Sterbegeldversicherung', href: '/senioren-sterbegeldversicherung' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'home-riester',
|
||||
kicker: 'Altersvorsorge',
|
||||
title: 'Riester-Rente',
|
||||
subtitle: 'Staatliche Förderung für Ihre sichere Zukunft.',
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('Chatgpt_bilder/Riester-Rente.png'),
|
||||
imagePosition: 'center 30%',
|
||||
ctas: [
|
||||
{ label: 'Mehr erfahren', href: '/riester-rente' },
|
||||
{ label: 'Beratung', href: '/contact#contact' },
|
||||
],
|
||||
topics: [
|
||||
{ label: 'Riester-Rente', href: '/riester-rente' },
|
||||
{ label: 'Fondsgebundene Rente', href: '/fondsgebundene-rentenversicherung' },
|
||||
{ label: 'Altersvorsorge', href: '/altersvorsorge' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'home-fondsrente',
|
||||
kicker: 'Altersvorsorge',
|
||||
title: 'Fondsgebundene Rentenversicherung',
|
||||
subtitle: 'Exklusive Lösung zu Fondsrenten – langfristig, flexibel, planbar.',
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('iStock-652772652.jpg'),
|
||||
imagePosition: 'center 35%',
|
||||
ctas: [
|
||||
{ label: 'Mehr erfahren', href: '/fondsgebundene-rentenversicherung' },
|
||||
{ label: 'Zur Übersicht', href: '/altersvorsorge' },
|
||||
],
|
||||
topics: [
|
||||
{ label: 'Fondsgebundene Rente', href: '/fondsgebundene-rentenversicherung' },
|
||||
{ label: 'Riester-Rente', href: '/riester-rente' },
|
||||
{ label: 'Altersvorsorge', href: '/altersvorsorge' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'home-altersvorsorge',
|
||||
kicker: 'Altersvorsorge',
|
||||
title: 'Altersvorsorge im Überblick',
|
||||
subtitle: 'Vergleichen Sie passende Lösungen – verständlich und transparent.',
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('Fotolia_67327775_XS.jpg'),
|
||||
imagePosition: 'center 35%',
|
||||
ctas: [
|
||||
{ label: 'Zur Übersicht', href: '/altersvorsorge' },
|
||||
{ label: 'Beratung', href: '/contact#contact' },
|
||||
],
|
||||
topics: [
|
||||
{ label: 'Altersvorsorge', href: '/altersvorsorge' },
|
||||
{ label: 'Riester-Rente', href: '/riester-rente' },
|
||||
{ label: 'Fondsgebundene Rente', href: '/fondsgebundene-rentenversicherung' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'home-2',
|
||||
kicker: 'Private Krankenversicherung',
|
||||
|
||||
@ -10,7 +10,11 @@ const KFZ = () => {
|
||||
const { t } = useTranslation('kfz');
|
||||
const navigate = useNavigate();
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
const assetUrl = (fileName: string) => {
|
||||
const normalizedBase = (baseUrl && baseUrl.length > 0 ? baseUrl : '/').replace(/\/+$/, '/') ;
|
||||
const normalizedFile = fileName.replace(/^\/+/, '');
|
||||
return `${normalizedBase}${encodeURI(normalizedFile)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
@ -54,7 +58,7 @@ const KFZ = () => {
|
||||
].map((item) => (
|
||||
<div
|
||||
key={`${item.href}-${item.title}`}
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate(item.href)}
|
||||
@ -64,7 +68,7 @@ const KFZ = () => {
|
||||
>
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
style={{ backgroundImage: `url(${item.image})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
|
||||
@ -137,7 +137,7 @@ const Privatkunden = () => {
|
||||
{focusTopics.map((item) => (
|
||||
<div
|
||||
key={`${item.href}-${item.title}`}
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate(item.href)}
|
||||
@ -147,7 +147,7 @@ const Privatkunden = () => {
|
||||
>
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
style={{ backgroundImage: `url(${item.image})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
@ -265,7 +265,7 @@ const Privatkunden = () => {
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{[
|
||||
{ title: t('details.risiko.unfallversicherung', 'Unfallversicherung'), href: '/unfall' },
|
||||
{ title: t('details.risiko.rechtsschutzversicherung', 'Rechtsschutzversicherung'), href: '/service' }
|
||||
{ title: t('details.risiko.rechtsschutzversicherung', 'Rechtsschutzversicherung'), href: '/rechtsschutzversicherung' }
|
||||
].map((link) => (
|
||||
<Link
|
||||
key={`${link.href}-${link.title}`}
|
||||
@ -287,8 +287,8 @@ const Privatkunden = () => {
|
||||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-3">{t('details.label', 'Details:')}</div>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{[
|
||||
{ title: t('details.altersvorsorge.privateRentenversicherung', 'Private Rentenversicherung'), href: '/finanzen' },
|
||||
{ title: t('details.altersvorsorge.riester', 'Riester-Rente'), href: '/finanzen' },
|
||||
{ title: t('details.altersvorsorge.fondsgebunden', 'Fondsgebundene Rentenversicherung'), href: '/fondsgebundene-rentenversicherung' },
|
||||
{ title: t('details.altersvorsorge.riester', 'Riester-Rente'), href: '/riester-rente' },
|
||||
{ title: t('details.altersvorsorge.ruerup', 'Rürup-Rente'), href: '/finanzen' },
|
||||
{ title: t('details.altersvorsorge.bav', 'Betriebliche Altersvorsorge'), href: '/finanzen' }
|
||||
].map((link) => (
|
||||
|
||||
429
src/pages/RiesterRenteFinal.tsx
Normal file
429
src/pages/RiesterRenteFinal.tsx
Normal file
@ -0,0 +1,429 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
BadgeCheck,
|
||||
BarChart3,
|
||||
Calculator,
|
||||
Download,
|
||||
FileCheck,
|
||||
FileText,
|
||||
LineChart,
|
||||
Mail,
|
||||
Phone,
|
||||
ShieldCheck,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import Layout from '@/components/Layout';
|
||||
import GeneralNotice from '@/components/GeneralNotice';
|
||||
import HeroSlider from '@/components/HeroSlider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Disclaimer from '@/components/Disclaimer';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||||
|
||||
const TAB_OVERVIEW = 'overview';
|
||||
const TAB_DETAILS = 'details';
|
||||
const TAB_STATISTICS = 'statistics';
|
||||
const TAB_CALCULATOR = 'calculator';
|
||||
const TAB_FORM = 'form';
|
||||
const TAB_CATALOG = 'catalog';
|
||||
const TAB_BROCHURE = 'brochure';
|
||||
|
||||
const RiesterRenteFinal = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { t } = useTranslation('riester_rente');
|
||||
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
const [activeTab, setActiveTab] = useState<string>(TAB_OVERVIEW);
|
||||
|
||||
const statistics = [
|
||||
{ label: t('stats.s1.label', 'Verträge'), value: t('stats.s1.value', '16,5 Mio') },
|
||||
{ label: t('stats.s2.label', 'Förderung/Jahr'), value: t('stats.s2.value', '10 Mrd €') },
|
||||
{ label: t('stats.s3.label', 'Zulagen'), value: t('stats.s3.value', '175 €/Kind') },
|
||||
{ label: t('stats.s4.label', 'Zufriedenheit'), value: t('stats.s4.value', '89%') },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const hash = (location.hash || '').replace('#', '').toLowerCase();
|
||||
|
||||
if (hash === TAB_DETAILS) setActiveTab(TAB_DETAILS);
|
||||
else if (hash === TAB_STATISTICS) setActiveTab(TAB_STATISTICS);
|
||||
else if (hash === TAB_CALCULATOR) setActiveTab(TAB_CALCULATOR);
|
||||
else if (hash === TAB_FORM) setActiveTab(TAB_FORM);
|
||||
else if (hash === TAB_CATALOG) setActiveTab(TAB_CATALOG);
|
||||
else if (hash === TAB_BROCHURE) setActiveTab(TAB_BROCHURE);
|
||||
else setActiveTab(TAB_OVERVIEW);
|
||||
|
||||
if (!hash) return;
|
||||
|
||||
window.setTimeout(() => {
|
||||
const tabSection = document.getElementById('tab-section');
|
||||
if (tabSection) tabSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}, 100);
|
||||
}, [location.hash]);
|
||||
|
||||
const onTabChange = (tab: string) => {
|
||||
setActiveTab(tab);
|
||||
if (tab === TAB_OVERVIEW) {
|
||||
navigate(location.pathname, { replace: true });
|
||||
return;
|
||||
}
|
||||
navigate(`${location.pathname}#${tab}`, { replace: true });
|
||||
};
|
||||
|
||||
const phoneLabel = t('form.phoneNumber', 'Telefon: 0171 / 9864053');
|
||||
const EMAIL = 'info@finanzen-mizera.de';
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<HeroSlider
|
||||
slides={[
|
||||
{
|
||||
id: 'riester-1',
|
||||
kicker: t('hero.kicker', 'Altersvorsorge'),
|
||||
title: t('hero.title', 'Riester-Rente'),
|
||||
subtitle: t('hero.subtitle', 'Staatliche Förderung für Ihre Rente.'),
|
||||
highlights: [
|
||||
t('hero.highlights.0', 'Zulagen & Steuervorteile'),
|
||||
t('hero.highlights.1', 'Familienfreundlich (Kinderzulage)'),
|
||||
t('hero.highlights.2', 'Langfristige Planung'),
|
||||
],
|
||||
imageUrl: assetUrl('Chatgpt_bilder/Riester-Rente.png'),
|
||||
imagePosition: 'center 30%',
|
||||
ctas: [
|
||||
{ label: t('hero.cta1', 'Jetzt beraten lassen'), href: '/contact#contact' },
|
||||
{ label: t('hero.cta2', 'Zur Übersicht'), href: '/altersvorsorge' },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="container mx-auto px-4 md:px-6 py-8">
|
||||
<div className="max-w-screen-2xl mx-auto">
|
||||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section">
|
||||
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||||
<TabsList className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-7 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
||||
<TabsTrigger
|
||||
value={TAB_OVERVIEW}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<TrendingUp className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.overview', 'Übersicht')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_DETAILS}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<FileText className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.details', 'Details')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_STATISTICS}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<BarChart3 className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.statistics', 'Statistik')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_CALCULATOR}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<Calculator className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.calculator', 'Rechner')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_FORM}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<Phone className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.form', 'Anfrage')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_CATALOG}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<FileCheck className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.catalog', 'Ratgeber')}
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value={TAB_BROCHURE}
|
||||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||
>
|
||||
<Download className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.brochure', 'PDF')}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</div>
|
||||
|
||||
<div className="p-4 md:p-6">
|
||||
<TabsContent value={TAB_OVERVIEW} className="mt-0">
|
||||
<TwoColumnTab
|
||||
className="gap-8 items-center"
|
||||
left={
|
||||
<>
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
|
||||
<LineChart className="w-4 h-4" />
|
||||
<span>{t('overview.badge', 'Riester – staatlich gefördert')}</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||
{t('overview.title', 'Mehr Förderung für Ihre Rente')}
|
||||
<span className="block text-blue-700">{t('overview.subtitle', 'Wir prüfen, ob sich Riester für Sie lohnt.')}</span>
|
||||
</h1>
|
||||
<p className="mt-4 text-gray-600 text-lg">{t('overview.description')}</p>
|
||||
|
||||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||
<Button onClick={() => onTabChange(TAB_FORM)} className="bg-blue-600 hover:bg-blue-700">
|
||||
{t('overview.cta1', 'Angebot anfordern')}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
|
||||
{t('overview.cta2', 'Beratung')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<ShieldCheck className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('overview.feature1Title', 'Förderung')}</div>
|
||||
<div className="text-gray-600">{t('overview.feature1Desc', 'Zulagen & Steuervorteile')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<BadgeCheck className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('overview.feature2Title', 'Planbar')}</div>
|
||||
<div className="text-gray-600">{t('overview.feature2Desc', 'Langfristige Vorsorge')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
|
||||
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||||
<img
|
||||
src={assetUrl('Chatgpt_bilder/Riester-Rente.png')}
|
||||
alt={t('overview.imageAlt', 'Riester-Rente')}
|
||||
className="w-full h-[240px] object-cover"
|
||||
onError={(e) => {
|
||||
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
<div className="p-5">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<BadgeCheck className="w-4 h-4" />
|
||||
<span>{t('overview.imageCaption', 'Zulagen prüfen')}</span>
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-600">{t('overview.imageSubtext')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_DETAILS} className="mt-0">
|
||||
<div className="space-y-8">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">{t('details.title', 'Details')}</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">{t('details.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[
|
||||
{ icon: TrendingUp, title: t('details.cards.0.title'), desc: t('details.cards.0.desc') },
|
||||
{ icon: ShieldCheck, title: t('details.cards.1.title'), desc: t('details.cards.1.desc') },
|
||||
{ icon: BadgeCheck, title: t('details.cards.2.title'), desc: t('details.cards.2.desc') },
|
||||
].map((item, idx) => (
|
||||
<Card key={idx} className="h-full">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<item.icon className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<CardTitle className="text-xl">{item.title}</CardTitle>
|
||||
<CardDescription>{item.desc}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<GeneralNotice />
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_STATISTICS} className="mt-0">
|
||||
<div className="space-y-8">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||
{t('statistics.title', 'Riester-Rente in Zahlen')}
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
{t('statistics.subtitle', 'Fakten und Daten zur staatlichen Förderung')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{statistics.map((stat, index) => (
|
||||
<Card key={index}>
|
||||
<CardContent className="text-center p-6">
|
||||
<div className="text-3xl font-bold text-blue-600 mb-2">{stat.value}</div>
|
||||
<div className="text-gray-600">{stat.label}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_CALCULATOR} className="mt-0">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">{t('calculator.title', 'Fördercheck')}</CardTitle>
|
||||
<CardDescription>{t('calculator.subtitle', 'Schnelle Orientierung – unverbindlich.')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="text-sm text-gray-700">{t('calculator.placeholder', 'Rechner kommt als nächstes – wir beraten Sie gern persönlich.')}</div>
|
||||
<Button onClick={() => onTabChange(TAB_FORM)} className="bg-blue-600 hover:bg-blue-700 w-full">
|
||||
{t('calculator.cta', 'Beratung anfordern')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_FORM} className="mt-0">
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">{t('form.title', 'Anfrage')}</CardTitle>
|
||||
<CardDescription>{t('form.subtitle', 'Wir melden uns kurzfristig bei Ihnen.')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<Phone className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('form.phone', 'Telefon')}</div>
|
||||
<div className="text-gray-600">{phoneLabel}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<Mail className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('form.email', 'E-Mail')}</div>
|
||||
<div className="text-gray-600">{EMAIL}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link to="/contact" className="inline-flex w-full">
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700">{t('form.cta', 'Zum Kontaktformular')}</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<RightImageCard src={assetUrl('Chatgpt_bilder/Riester-Rente.png')} alt={t('form.imageAlt', 'Riester Beratung')}>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('form.tipTitle', 'Tipp')}</CardTitle>
|
||||
<CardDescription>{t('form.tipDescription', 'Wir prüfen Zulagen, Kosten und passende Tarife – transparent & verständlich.')}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_CATALOG} className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">{t('catalog.title', 'Ratgeber')}</h3>
|
||||
<p className="mt-2 text-gray-600">{t('catalog.subtitle', 'Kurz & verständlich – die wichtigsten Punkte auf einen Blick.')}</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('catalog.cardTitle', 'Was ist wichtig?')}</CardTitle>
|
||||
<CardDescription>{t('catalog.cardDescription', 'Förderung, Kosten, Zulagenberechtigung, passende Produktart.')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Link to="/contact" className="inline-flex w-full">
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700">{t('catalog.cta', 'Beratung anfordern')}</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('Chatgpt_bilder/Riester-Rente.png')} alt={t('catalog.imageAlt', 'Ratgeber Riester')}>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('catalog.boxTitle', 'Hinweis')}</CardTitle>
|
||||
<CardDescription>{t('catalog.boxDescription', 'Nicht für jeden sinnvoll – wir machen den Fördercheck mit Ihnen.')}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value={TAB_BROCHURE} className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">{t('brochure.title', 'Informationen (PDF)')}</h3>
|
||||
<p className="mt-2 text-gray-600">{t('brochure.subtitle', 'PDF zum Download – auf Anfrage.')}</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('brochure.cardTitle', 'PDF')}</CardTitle>
|
||||
<CardDescription>{t('brochure.cardDescription', 'Gerne senden wir Ihnen die passende Broschüre zu.')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Link to="/contact" className="inline-flex w-full">
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700">{t('brochure.cta', 'PDF anfragen')}</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('Chatgpt_bilder/Riester-Rente.png')} alt={t('brochure.imageAlt', 'PDF Riester')}>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('brochure.tipTitle', 'Tipp')}</CardTitle>
|
||||
<CardDescription>{t('brochure.tipDescription', 'Wir erklären verständlich – ohne Fachchinesisch.')}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Disclaimer />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default RiesterRenteFinal;
|
||||
@ -4,6 +4,7 @@ import { Shield, Heart, Car, Home, Briefcase, Users } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Layout from '@/components/Layout';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import HeroSlider from '@/components/HeroSlider';
|
||||
import Disclaimer from '@/components/Disclaimer';
|
||||
|
||||
const Risikoschutz = () => {
|
||||
@ -20,7 +21,7 @@ const Risikoschutz = () => {
|
||||
{
|
||||
title: t('topics.bu', 'Berufsunfähigkeitsversicherung'),
|
||||
href: '/berufsunfaehigkeitsversicherung',
|
||||
image: assetUrl('iStock-957363908.jpg')
|
||||
image: assetUrl('iStock-1065789424.jpg')
|
||||
},
|
||||
{
|
||||
title: t('topics.haftpflicht', 'Haftpflichtversicherung'),
|
||||
@ -30,16 +31,16 @@ const Risikoschutz = () => {
|
||||
{
|
||||
title: t('topics.rechtsschutz', 'Rechtsschutzversicherung'),
|
||||
href: '/rechtsschutzversicherung',
|
||||
image: assetUrl('Fotolia_8654128_XS.jpg')
|
||||
image: assetUrl('iStock-1067720324.jpg')
|
||||
},
|
||||
{
|
||||
title: t('topics.tierhalter', 'Tierhalterhaftpflicht'),
|
||||
href: '/tierhalterhaftpflicht',
|
||||
image: assetUrl('iStock-495809266.jpg')
|
||||
href: '/tierversicherung',
|
||||
image: assetUrl('Tiere/misiek.jpeg')
|
||||
},
|
||||
{
|
||||
title: t('topics.dread', 'Dread-Disease Versicherung'),
|
||||
href: '/dread-disease-versicherung',
|
||||
href: '/krankheitsschutzbrief',
|
||||
image: assetUrl('Fotolia_67327775_XS.jpg')
|
||||
}
|
||||
];
|
||||
@ -47,19 +48,25 @@ const Risikoschutz = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-6">
|
||||
{t('hero.title', 'Risikoschutz')}
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
{t('hero.subtitle', 'Umfassender Schutz für Sie und Ihre Familie bei unvorhergesehenen Ereignissen')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<HeroSlider
|
||||
slides={[
|
||||
{
|
||||
id: 'risikoschutz-1',
|
||||
kicker: t('hero.kicker', 'Risikoschutz'),
|
||||
title: t('hero.title', 'Risikoschutz'),
|
||||
subtitle: t(
|
||||
'hero.subtitle',
|
||||
'Umfassender Schutz für Sie und Ihre Familie bei unvorhergesehenen Ereignissen'
|
||||
),
|
||||
imageUrl: assetUrl('iStock-973184180.jpg'),
|
||||
imagePosition: 'center 35%',
|
||||
ctas: [
|
||||
{ label: t('hero.primaryCta', 'Jetzt beraten lassen'), href: '/contact#contact' },
|
||||
{ label: t('hero.secondaryCta', 'Alle Leistungen'), href: '/leistungen' },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Kacheln */}
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
@ -72,7 +79,7 @@ const Risikoschutz = () => {
|
||||
<img
|
||||
src={topic.image}
|
||||
alt={topic.title}
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||||
|
||||
@ -99,7 +99,7 @@ const Senioren = () => {
|
||||
{focusTopics.map((item) => (
|
||||
<div
|
||||
key={`${item.href}-${item.title}`}
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate(item.href)}
|
||||
@ -109,7 +109,7 @@ const Senioren = () => {
|
||||
>
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
style={{ backgroundImage: `url(${item.image})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
|
||||
@ -84,7 +84,7 @@ const Tierversicherung = () => {
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
{/* Hundeversicherung */}
|
||||
<div
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate('/tierversicherung/hunde')}
|
||||
@ -94,7 +94,7 @@ const Tierversicherung = () => {
|
||||
>
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
style={{ backgroundImage: `url(${assetUrl('Tiere/DSC_4029.JPG?v=1')})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
@ -124,7 +124,7 @@ const Tierversicherung = () => {
|
||||
|
||||
{/* Pferdeversicherung */}
|
||||
<div
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate('/tierversicherung/pferde')}
|
||||
@ -134,7 +134,7 @@ const Tierversicherung = () => {
|
||||
>
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
style={{ backgroundImage: `url(${assetUrl('Tiere/DSC_2047.JPG?v=1')})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
@ -164,7 +164,7 @@ const Tierversicherung = () => {
|
||||
|
||||
{/* Katzenversicherung */}
|
||||
<div
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate('/tierversicherung/katzen')}
|
||||
@ -174,7 +174,7 @@ const Tierversicherung = () => {
|
||||
>
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
style={{ backgroundImage: `url(${assetUrl('Tiere/misiek.jpeg')})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
|
||||
@ -98,7 +98,7 @@ const Vermoegenssicherung = () => {
|
||||
<img
|
||||
src={topic.image}
|
||||
alt={topic.title}
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110"
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user