diverse, senioren #deploy
This commit is contained in:
parent
357e984077
commit
167a51f403
0
.windsurf/workflows/chatbot.md
Normal file
0
.windsurf/workflows/chatbot.md
Normal file
BIN
public/Kunden Fotos/Facebook- i_jasinski.png
Normal file
BIN
public/Kunden Fotos/Facebook- i_jasinski.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
public/PDF/102.0031.91.pdf
Normal file
BIN
public/PDF/102.0031.91.pdf
Normal file
Binary file not shown.
BIN
public/iStock-1065789424.jpg
Normal file
BIN
public/iStock-1065789424.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 MiB |
BIN
public/iStock-897545934.jpg
Normal file
BIN
public/iStock-897545934.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 MiB |
@ -36,8 +36,35 @@
|
|||||||
"readMore": "Mehr lesen",
|
"readMore": "Mehr lesen",
|
||||||
"contactUs": "Kontaktieren Sie uns"
|
"contactUs": "Kontaktieren Sie uns"
|
||||||
},
|
},
|
||||||
|
"benefitsCta": {
|
||||||
|
"benefits": {
|
||||||
|
"title": "Ihre Vorteile als Privatkunde",
|
||||||
|
"subtitle": "Wir bieten Ihnen maßgeschneiderte Lösungen für Ihre persönliche Absicherung",
|
||||||
|
"items": {
|
||||||
|
"protection": { "title": "Umfassender Schutz", "text": "Für alle Lebensbereiche" },
|
||||||
|
"family": { "title": "Familienfreundlich", "text": "Optimale Lösungen für Familien" },
|
||||||
|
"optimization": { "title": "Vertragsoptimierung", "text": "Bestehende Verträge verbessern" },
|
||||||
|
"fasthelp": { "title": "Schnelle Hilfe", "text": "Rasche Schadenabwicklung" },
|
||||||
|
"costs": { "title": "Transparente Kosten", "text": "Keine versteckten Gebühren" },
|
||||||
|
"local": { "title": "Persönliche Betreuung", "text": "Vor Ort in Ihrer Nähe" }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"cta": {
|
||||||
|
"title": "Kontaktieren Sie uns",
|
||||||
|
"subtitle": "Lassen Sie sich unverbindlich zu Ihren Versicherungsmöglichkeiten beraten.",
|
||||||
|
"primary": "Jetzt anrufen",
|
||||||
|
"secondary": "Termin vereinbaren"
|
||||||
|
},
|
||||||
|
"chatbot": {
|
||||||
|
"title": "Haben Sie noch Fragen?",
|
||||||
|
"subtitle": "Unser KI-Chatbot hilft Ihnen rund um die Uhr – schnell, kostenlos und unverbindlich.",
|
||||||
|
"cta": "Chatbot starten",
|
||||||
|
"ctaShort": "Chatbot",
|
||||||
|
"contact": "Kontakt"
|
||||||
|
}
|
||||||
|
},
|
||||||
"footer": {
|
"footer": {
|
||||||
"copyright": "© {year} Alle Rechte vorbehalten",
|
"copyright": " Alle Rechte vorbehalten",
|
||||||
"imprint": "Impressum",
|
"imprint": "Impressum",
|
||||||
"terms": "AGB",
|
"terms": "AGB",
|
||||||
"privacyPolicy": "Datenschutzerklärung"
|
"privacyPolicy": "Datenschutzerklärung"
|
||||||
|
|||||||
@ -15,5 +15,207 @@
|
|||||||
"form": "Anfrageformular",
|
"form": "Anfrageformular",
|
||||||
"claims": "Schadenmeldung!",
|
"claims": "Schadenmeldung!",
|
||||||
"catalog": "Infothek"
|
"catalog": "Infothek"
|
||||||
|
},
|
||||||
|
"benefits": {
|
||||||
|
"items": {
|
||||||
|
"personal": {
|
||||||
|
"title": "Personenschutz",
|
||||||
|
"description": "Schutz vor Schadenersatzforderungen"
|
||||||
|
},
|
||||||
|
"family": {
|
||||||
|
"title": "Familienschutz",
|
||||||
|
"description": "Kinder und Partner mitversichert"
|
||||||
|
},
|
||||||
|
"worldwide": {
|
||||||
|
"title": "Weltweiter Schutz",
|
||||||
|
"description": "Gilt weltweit für private Risiken"
|
||||||
|
},
|
||||||
|
"premium": {
|
||||||
|
"title": "Günstige Prämien",
|
||||||
|
"description": "Wettbewerbsfähige Beiträge durch Tarifvergleich"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"services": {
|
||||||
|
"items": {
|
||||||
|
"private": "Private Haftpflichtversicherung",
|
||||||
|
"family": "Familien-Haftpflichtversicherung",
|
||||||
|
"business": "Betriebshaftpflichtversicherung",
|
||||||
|
"landlord": "Vermieterhaftpflichtversicherung",
|
||||||
|
"petOwner": "Tierhalterhaftpflichtversicherung",
|
||||||
|
"professional": "Berufshaftpflichtversicherung"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"overview": {
|
||||||
|
"badge": "Essentieller Schutz für jeden",
|
||||||
|
"title": "Haftpflichtversicherung",
|
||||||
|
"titleHighlight": "Sicherheit vor Schadenersatzforderungen",
|
||||||
|
"description": "Schutz vor finanziellen Folgen bei Personen-, Sach- und Vermögensschäden. Wir vergleichen Tarife und finden den passenden Schutz für Sie und Ihre Familie.",
|
||||||
|
"ctaPrimary": "Angebot anfordern",
|
||||||
|
"ctaSecondary": "Beratung",
|
||||||
|
"features": {
|
||||||
|
"cover": {
|
||||||
|
"title": "Millionenschutz",
|
||||||
|
"text": "bis 100 Mio. € Deckung"
|
||||||
|
},
|
||||||
|
"family": {
|
||||||
|
"title": "Familienschutz",
|
||||||
|
"text": "Partner & Kinder inklusive"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"imageAlt": "Haftpflichtversicherung",
|
||||||
|
"sideMeta": "Einzel-, Familien-, Gewerbe",
|
||||||
|
"sideText": "Tarifcheck – schnell, fair und passend zu deinem Bedarf.",
|
||||||
|
"quick": {
|
||||||
|
"title": "Kurz & klar",
|
||||||
|
"cards": {
|
||||||
|
"essential": {
|
||||||
|
"title": "Unverzichtbar",
|
||||||
|
"text": "Für jeden Menschen wichtig."
|
||||||
|
},
|
||||||
|
"affordable": {
|
||||||
|
"title": "Günstig",
|
||||||
|
"text": "Bereits ab wenigen Euro pro Monat."
|
||||||
|
},
|
||||||
|
"help": {
|
||||||
|
"title": "Hilfe im Schadenfall",
|
||||||
|
"text": "Klare Schritte & Kontaktmöglichkeiten."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"details": {
|
||||||
|
"title": "Details & Vorteile",
|
||||||
|
"intro": "Die Haftpflichtversicherung schützt Sie vor finanziellen Folgen, wenn Sie anderen Personen, Sachschäden oder Vermögensschäden zufügen. Wir helfen Ihnen, die richtige Deckungssumme und Tarif zu finden.",
|
||||||
|
"servicesTitle": "Leistungen (Auszug)",
|
||||||
|
"tip": {
|
||||||
|
"title": "Tipp",
|
||||||
|
"subtitle": "Deckungssumme prüfen.",
|
||||||
|
"text": "Mindestens 10 Mio. € für Personen- und Sachschäden, besser 50-100 Mio. € für optimalen Schutz."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"statistics": {
|
||||||
|
"title": "Schadensstatistik",
|
||||||
|
"intro": "Haftpflichtschäden können jeden treffen. Stolpern, umgefallene Gegenstände oder Unfälle im Alltag sind häufige Ursachen.",
|
||||||
|
"cards": {
|
||||||
|
"common": {
|
||||||
|
"title": "Häufige Schadensarten",
|
||||||
|
"text": "Stolpern, Wasserschäden, Unfälle im Sport."
|
||||||
|
},
|
||||||
|
"stats": {
|
||||||
|
"title": "Statistik",
|
||||||
|
"text": "4 Mio. Schäden/Jahr, 4.000 Mio. € Schadenssumme."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tip": {
|
||||||
|
"title": "Tipp",
|
||||||
|
"subtitle": "Vorsorge ist besser als Nachsorge.",
|
||||||
|
"text": "Sorgfalt im Alltag kann viele Schäden vermeiden. Eine gute Versicherung schützt vor den Rest."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"calculator": {
|
||||||
|
"title": "Haftpflicht-Rechner",
|
||||||
|
"intro": "Richtwert zur Orientierung. Für ein exaktes Angebot brauchen wir u. a. Familienstand, Beruf und gewünschte Deckungssumme.",
|
||||||
|
"card": {
|
||||||
|
"title": "Grobe Beitragsschätzung",
|
||||||
|
"subtitle": "Unverbindlich – wir kalkulieren danach exakt."
|
||||||
|
},
|
||||||
|
"estimate": {
|
||||||
|
"title": "Richtwert (Beispiel)",
|
||||||
|
"valuePrefix": "Ab",
|
||||||
|
"value": "ca. 4 €",
|
||||||
|
"per": "Monat",
|
||||||
|
"note": "Abhängig von Familienstand, Beruf, Deckungssumme."
|
||||||
|
},
|
||||||
|
"cta": "Jetzt konkretes Angebot anfordern",
|
||||||
|
"need": {
|
||||||
|
"title": "Was wir fürs Angebot brauchen",
|
||||||
|
"subtitle": "Je genauer, desto besser.",
|
||||||
|
"items": {
|
||||||
|
"family": "Familiensituation (Kinder, Partner)",
|
||||||
|
"job": "Berufliche Tätigkeit",
|
||||||
|
"cover": "Gewünschte Deckungssumme?"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Anfrageformular",
|
||||||
|
"intro": "Sende uns deine Eckdaten – wir melden uns mit einem passenden Angebot.",
|
||||||
|
"submit": "Anfrage senden",
|
||||||
|
"submitAlert": "Vielen Dank! Wir melden uns kurzfristig bei dir.",
|
||||||
|
"labels": {
|
||||||
|
"name": "Name",
|
||||||
|
"phone": "Telefon",
|
||||||
|
"email": "E-Mail",
|
||||||
|
"familyStatus": "Familienstand",
|
||||||
|
"occupation": "Beruf",
|
||||||
|
"coverage": "Deckungssumme",
|
||||||
|
"currentInsurer": "Aktueller Versicherer (optional)",
|
||||||
|
"message": "Nachricht"
|
||||||
|
},
|
||||||
|
"options": {
|
||||||
|
"select": "Bitte wählen",
|
||||||
|
"single": "Single",
|
||||||
|
"family": "Familie",
|
||||||
|
"couple": "Paar ohne Kinder",
|
||||||
|
"employee": "Angestellt",
|
||||||
|
"selfEmployed": "Selbstständig",
|
||||||
|
"civilServant": "Beamter",
|
||||||
|
"student": "Student"
|
||||||
|
},
|
||||||
|
"placeholders": {
|
||||||
|
"coverage": "z. B. 50 Mio. €",
|
||||||
|
"message": "Welche Leistungen sind dir wichtig? (Personenschutz, Sachschutz, etc.)"
|
||||||
|
},
|
||||||
|
"direct": {
|
||||||
|
"title": "Direktkontakt",
|
||||||
|
"subtitle": "Wenn es schnell gehen soll.",
|
||||||
|
"phone": "Telefon: 0171 / 9864053",
|
||||||
|
"email": "E-Mail: info@finanzen-mizera.de",
|
||||||
|
"contactCta": "Kontaktseite"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"claims": {
|
||||||
|
"title": "Schadenmeldung",
|
||||||
|
"intro": "Im Schadenfall zählt eine klare Reihenfolge. Hier ist die Kurz-Checkliste.",
|
||||||
|
"steps": {
|
||||||
|
"firstAid": {
|
||||||
|
"title": "Erste Hilfe leisten",
|
||||||
|
"text": "Verletzten versorgen, Gefahren beseitigen."
|
||||||
|
},
|
||||||
|
"documentation": {
|
||||||
|
"title": "Dokumentation",
|
||||||
|
"text": "Fotos, Zeugenaussagen, Schadensbeschreibung."
|
||||||
|
},
|
||||||
|
"report": {
|
||||||
|
"title": "Melden",
|
||||||
|
"text": "So schnell wie möglich melden – wir unterstützen dich."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ctaHelp": "Hilfe anfordern",
|
||||||
|
"ctaContact": "Kontakt",
|
||||||
|
"emergency": {
|
||||||
|
"title": "Notfall-Info",
|
||||||
|
"subtitle": "Bei Verletzungen immer 112 wählen.",
|
||||||
|
"rescue": "Rettung: 112",
|
||||||
|
"police": "Polizei: 110"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"catalog": {
|
||||||
|
"title": "Infothek",
|
||||||
|
"intro": "Nützliche Informationen rund um die Haftpflichtversicherung.",
|
||||||
|
"downloadChecklist": "Checkliste herunterladen",
|
||||||
|
"print": "Seite drucken",
|
||||||
|
"pdf": {
|
||||||
|
"title": "Dokument (PDF)",
|
||||||
|
"page1": "Seite 1",
|
||||||
|
"page2": "Seite 2",
|
||||||
|
"iframeTitle": "Haftpflicht Dokument PDF",
|
||||||
|
"hint": "Falls die PDF hier nicht angezeigt wird, öffnen Sie sie bitte über den Download-Button."
|
||||||
|
},
|
||||||
|
"note": {
|
||||||
|
"title": "Hinweis",
|
||||||
|
"text": "Informationen können sich ändern – bitte aktuelle Quellen prüfen."
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,5 +15,43 @@
|
|||||||
"form": "Anfrageformular",
|
"form": "Anfrageformular",
|
||||||
"claims": "Schadenmeldung!",
|
"claims": "Schadenmeldung!",
|
||||||
"catalog": "Infothek"
|
"catalog": "Infothek"
|
||||||
|
},
|
||||||
|
"overview": {
|
||||||
|
"badge": "Ihr Zuhause bestens geschützt",
|
||||||
|
"title": "Hausratversicherung",
|
||||||
|
"titleHighlight": "Sicherheit für Ihre Einrichtung",
|
||||||
|
"description": "Schutz vor Einbruch, Feuer, Wasser und Sturm. Wir vergleichen Tarife und finden den passenden Schutz für Ihr Hab und Gut.",
|
||||||
|
"ctaPrimary": "Angebot anfordern",
|
||||||
|
"ctaSecondary": "Beratung",
|
||||||
|
"features": {
|
||||||
|
"cover": {
|
||||||
|
"title": "Vollschutz",
|
||||||
|
"text": "alle Risiken abgedeckt"
|
||||||
|
},
|
||||||
|
"household": {
|
||||||
|
"title": "Möbel & Co.",
|
||||||
|
"text": "bis zur Neuwertsumme"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"imageMeta": "Wohnung, Haus, Mieter",
|
||||||
|
"imageText": "Tarifcheck – schnell, fair und passend zu deinem Bedarf.",
|
||||||
|
"quick": {
|
||||||
|
"title": "Kurz & klar",
|
||||||
|
"c1": {
|
||||||
|
"title": "Empfehlenswert",
|
||||||
|
"text": "Für jeden Haushalt wichtig."
|
||||||
|
},
|
||||||
|
"c2": {
|
||||||
|
"title": "Vergleich lohnt sich",
|
||||||
|
"text": "Beiträge & Leistungen variieren stark."
|
||||||
|
},
|
||||||
|
"c3": {
|
||||||
|
"title": "Hilfe im Schadenfall",
|
||||||
|
"text": "Klare Schritte & Kontaktmöglichkeiten."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"details": {
|
||||||
|
"title": "Details & Vorteile"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,6 +3,10 @@
|
|||||||
"title": "Sachversicherung",
|
"title": "Sachversicherung",
|
||||||
"subtitle": "Schutz für Ihr Hab und Gut - von Hausrat bis Immobilie"
|
"subtitle": "Schutz für Ihr Hab und Gut - von Hausrat bis Immobilie"
|
||||||
},
|
},
|
||||||
|
"tiles": {
|
||||||
|
"title": "Unsere Sachversicherungen",
|
||||||
|
"subtitle": "Wählen Sie den passenden Schutz für Haus, Wohnung und Alltag."
|
||||||
|
},
|
||||||
"topics": {
|
"topics": {
|
||||||
"hausrat": "Hausratversicherung",
|
"hausrat": "Hausratversicherung",
|
||||||
"wohngebaeude": "Wohngebäudeversicherung",
|
"wohngebaeude": "Wohngebäudeversicherung",
|
||||||
@ -10,5 +14,23 @@
|
|||||||
"tiere": "Tierversicherung",
|
"tiere": "Tierversicherung",
|
||||||
"rechtsschutz": "Rechtsschutzversicherung",
|
"rechtsschutz": "Rechtsschutzversicherung",
|
||||||
"elektro": "Elektrogeräteversicherung"
|
"elektro": "Elektrogeräteversicherung"
|
||||||
|
},
|
||||||
|
"benefits": {
|
||||||
|
"title": "Ihre Vorteile als Privatkunde",
|
||||||
|
"subtitle": "Wir bieten Ihnen maßgeschneiderte Lösungen für Ihre persönliche Absicherung",
|
||||||
|
"items": {
|
||||||
|
"protection": { "title": "Umfassender Schutz", "text": "Für alle Lebensbereiche" },
|
||||||
|
"family": { "title": "Familienfreundlich", "text": "Optimale Lösungen für Familien" },
|
||||||
|
"optimization": { "title": "Vertragsoptimierung", "text": "Bestehende Verträge verbessern" },
|
||||||
|
"fasthelp": { "title": "Schnelle Hilfe", "text": "Rasche Schadenabwicklung" },
|
||||||
|
"costs": { "title": "Transparente Kosten", "text": "Keine versteckten Gebühren" },
|
||||||
|
"local": { "title": "Persönliche Betreuung", "text": "Vor Ort in Ihrer Nähe" }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"cta": {
|
||||||
|
"title": "Kontaktieren Sie uns",
|
||||||
|
"subtitle": "Lassen Sie sich unverbindlich zu Ihren Privatkunden-Lösungen beraten.",
|
||||||
|
"call": "Jetzt anrufen",
|
||||||
|
"contact": "Kontaktformular"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -59,5 +59,36 @@
|
|||||||
"subtitle": "Lassen Sie sich unverbindlich zu Ihren Versicherungsmöglichkeiten beraten.",
|
"subtitle": "Lassen Sie sich unverbindlich zu Ihren Versicherungsmöglichkeiten beraten.",
|
||||||
"primaryCta": "Jetzt anrufen",
|
"primaryCta": "Jetzt anrufen",
|
||||||
"secondaryCta": "Termin vereinbaren"
|
"secondaryCta": "Termin vereinbaren"
|
||||||
|
},
|
||||||
|
"tiles": {
|
||||||
|
"sterbegeld": {
|
||||||
|
"title": "Sterbegeldversicherung",
|
||||||
|
"subtitle": "Für Ihre Liebsten vorsorgen: finanzielle Sicherheit im Todesfall.",
|
||||||
|
"exampleLabel": "z.B. Beitragsbeispiel",
|
||||||
|
"examplePrice": "40,75€",
|
||||||
|
"exampleDetails": "pro Monat für 12.500 € Versicherungssumme",
|
||||||
|
"bullet1": "Männer/Frauen: ab 53 Jahre",
|
||||||
|
"detailsLabel": "Details:",
|
||||||
|
"detailsItems": [
|
||||||
|
"Sterbegeldversicherung",
|
||||||
|
"Bestattungsvorsorge",
|
||||||
|
"Risikolebensversicherung"
|
||||||
|
],
|
||||||
|
"cta": "Jetzt informieren"
|
||||||
|
},
|
||||||
|
"privathaftpflicht": {
|
||||||
|
"title": "Privathaftpflicht",
|
||||||
|
"subtitle": "Schutz vor hohen Forderungen im Alltag – für ein sicheres Gefühl.",
|
||||||
|
"exampleLabel": "z.B. Beitragsbeispiel",
|
||||||
|
"examplePrice": "5,57€",
|
||||||
|
"exampleDetails": "pro Monat – Beispieltarif",
|
||||||
|
"detailsLabel": "Details:",
|
||||||
|
"detailsItems": [
|
||||||
|
"Auslandsaufenthalt innerhalb Europas ohne zeitliche Begrenzung",
|
||||||
|
"nicht ehelicher Lebenspartner in häuslicher Gemeinschaft",
|
||||||
|
"Schadenersatz-Rechtsschutz bei Forderungsausfall"
|
||||||
|
],
|
||||||
|
"cta": "Jetzt informieren"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
145
public/locales/de/wohngebaeudeversicherung.json
Normal file
145
public/locales/de/wohngebaeudeversicherung.json
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
{
|
||||||
|
"pageTitle": "Wohngebäudeversicherung",
|
||||||
|
"hero": {
|
||||||
|
"kicker": "Haus & Wohnung",
|
||||||
|
"title": "Wohngebäudeversicherung",
|
||||||
|
"subtitle": "Schutz für Ihre Immobilie – für Eigentümer, Vermieter und Selbstnutzer.",
|
||||||
|
"primaryCta": "Angebot anfordern",
|
||||||
|
"secondaryCta": "Beratung"
|
||||||
|
},
|
||||||
|
"tabs": {
|
||||||
|
"overview": "Übersicht",
|
||||||
|
"details": "Details",
|
||||||
|
"calculator": "Rechner",
|
||||||
|
"form": "Anfrage",
|
||||||
|
"claims": "Schaden",
|
||||||
|
"catalog": "Infothek"
|
||||||
|
},
|
||||||
|
"highlights": {
|
||||||
|
"h1": {
|
||||||
|
"title": "Schutz für Ihr Gebäude",
|
||||||
|
"text": "Absicherung bei Feuer, Leitungswasser, Sturm und Hagel."
|
||||||
|
},
|
||||||
|
"h2": {
|
||||||
|
"title": "Individuelle Beratung",
|
||||||
|
"text": "Wir vergleichen Tarife und finden den passenden Schutz für Ihr Zuhause."
|
||||||
|
},
|
||||||
|
"h3": {
|
||||||
|
"title": "Schnell & zuverlässig",
|
||||||
|
"text": "Kurze Wege, klare Empfehlungen, persönliche Betreuung."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"benefits": {
|
||||||
|
"fire": {
|
||||||
|
"title": "Feuerschutz",
|
||||||
|
"description": "Absicherung bei Brandschäden und Überspannung"
|
||||||
|
},
|
||||||
|
"water": {
|
||||||
|
"title": "Wasserschutz",
|
||||||
|
"description": "Schutz vor Leitungswasserschäden"
|
||||||
|
},
|
||||||
|
"storm": {
|
||||||
|
"title": "Sturm & Hagel",
|
||||||
|
"description": "Abdeckung von wetterbedingten Schäden"
|
||||||
|
},
|
||||||
|
"premium": {
|
||||||
|
"title": "Günstige Prämien",
|
||||||
|
"description": "Wettbewerbsfähige Beiträge durch Tarifvergleich"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"services": {
|
||||||
|
"items": {
|
||||||
|
"wohngebaeudeversicherung": "Wohngebäudeversicherung",
|
||||||
|
"feuer": "Feuerversicherung",
|
||||||
|
"leitungswasser": "Leitungswasserversicherung",
|
||||||
|
"sturm": "Sturmversicherung",
|
||||||
|
"elementar": "Elementarschadenversicherung",
|
||||||
|
"gebaeudehaftpflicht": "Gebäudehaftpflichtversicherung"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"overview": {
|
||||||
|
"badge": "Schutz für Ihr Gebäude",
|
||||||
|
"title": "Wohngebäudeversicherung",
|
||||||
|
"titleHighlight": "Sicherheit für Ihre Immobilie",
|
||||||
|
"description": "Schutz vor Feuer, Leitungswasser, Sturm und Hagel. Wir vergleichen Tarife und finden den passenden Schutz für Ihr Zuhause.",
|
||||||
|
"ctaPrimary": "Angebot anfordern",
|
||||||
|
"ctaSecondary": "Beratung",
|
||||||
|
"features": {
|
||||||
|
"cover": {
|
||||||
|
"title": "Vollschutz",
|
||||||
|
"text": "alle Risiken abgedeckt"
|
||||||
|
},
|
||||||
|
"building": {
|
||||||
|
"title": "Gebäude & Co.",
|
||||||
|
"text": "bis zur Neuwertsumme"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"imageMeta": "Eigentümer, Vermieter, Selbstnutzer",
|
||||||
|
"imageText": "Tarifcheck – schnell, fair und passend zu deinem Bedarf.",
|
||||||
|
"quick": {
|
||||||
|
"title": "Kurz & klar",
|
||||||
|
"c1": {
|
||||||
|
"title": "Empfehlenswert",
|
||||||
|
"text": "Für jeden Eigentümer wichtig."
|
||||||
|
},
|
||||||
|
"c2": {
|
||||||
|
"title": "Vergleich lohnt sich",
|
||||||
|
"text": "Beiträge & Leistungen variieren stark."
|
||||||
|
},
|
||||||
|
"c3": {
|
||||||
|
"title": "Hilfe im Schadenfall",
|
||||||
|
"text": "Klare Schritte & Kontaktmöglichkeiten."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"details": {
|
||||||
|
"title": "Details & Vorteile",
|
||||||
|
"description": "Die Wohngebäudeversicherung schützt Ihr Gebäude vor Feuer, Wasser, Sturm und Hagel. Wir helfen Ihnen, den richtigen Schutzsumme und Tarif zu finden.",
|
||||||
|
"servicesTitle": "Leistungen (Auszug)",
|
||||||
|
"tipTitle": "Tipp",
|
||||||
|
"tipDescription": "Deckungssumme prüfen.",
|
||||||
|
"tipContent": "Achte auf ausreichende Versicherungssumme (ca. 650-750 €/m²) und optionalen Übergangsschutz bei Umzug."
|
||||||
|
},
|
||||||
|
"calculator": {
|
||||||
|
"title": "Wohngebäude-Rechner",
|
||||||
|
"description": "Schätzen Sie Ihre Prämie – unverbindlich und schnell.",
|
||||||
|
"sizeLabel": "Gebäudegröße (m²)",
|
||||||
|
"sizePlaceholder": "z.B. 120",
|
||||||
|
"yearLabel": "Baujahr",
|
||||||
|
"yearPlaceholder": "z.B. 2000",
|
||||||
|
"button": "Jetzt berechnen"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Anfrage",
|
||||||
|
"description": "Senden Sie uns Ihre Details – wir erstellen ein passendes Angebot.",
|
||||||
|
"nameLabel": "Name",
|
||||||
|
"phoneLabel": "Telefon",
|
||||||
|
"emailLabel": "E-Mail",
|
||||||
|
"messageLabel": "Nachricht",
|
||||||
|
"button": "Anfrage senden",
|
||||||
|
"submitAlert": "Vielen Dank! Wir melden uns kurzfristig bei dir."
|
||||||
|
},
|
||||||
|
"claims": {
|
||||||
|
"title": "Schadenmeldung",
|
||||||
|
"description": "Schnelle Hilfe im Schadenfall – melden Sie uns den Vorfall.",
|
||||||
|
"hotline": "Hotline",
|
||||||
|
"hotlineHours": "Mo–Fr 8–18 Uhr",
|
||||||
|
"email": "E-Mail",
|
||||||
|
"emailAddress": "schaden@mizera.de",
|
||||||
|
"button": "Schaden melden"
|
||||||
|
},
|
||||||
|
"catalog": {
|
||||||
|
"title": "Infothek",
|
||||||
|
"description": "Wissenswertes zur Wohngebäudeversicherung.",
|
||||||
|
"guideTitle": "Leitfaden",
|
||||||
|
"guideDescription": "Worauf achten?",
|
||||||
|
"guideContent": "Deckungssumme, Selbstbeteiligung, Risikoausschlüsse.",
|
||||||
|
"checklistTitle": "Checkliste",
|
||||||
|
"checklistDescription": "Vergleichskriterien",
|
||||||
|
"checklistContent": "Preis, Leistungen, Service, Schadenabwicklung."
|
||||||
|
},
|
||||||
|
"cta": {
|
||||||
|
"primary": "Jetzt beraten lassen",
|
||||||
|
"secondary": "Zur Übersicht Sachversicherung"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -36,8 +36,35 @@
|
|||||||
"readMore": "Czytaj więcej",
|
"readMore": "Czytaj więcej",
|
||||||
"contactUs": "Skontaktuj się z nami"
|
"contactUs": "Skontaktuj się z nami"
|
||||||
},
|
},
|
||||||
|
"benefitsCta": {
|
||||||
|
"benefits": {
|
||||||
|
"title": "Twoje korzyści jako klient prywatny",
|
||||||
|
"subtitle": "Oferujemy dopasowane rozwiązania dla Twojej osobistej ochrony",
|
||||||
|
"items": {
|
||||||
|
"protection": { "title": "Kompleksowa ochrona", "text": "Dla wszystkich obszarów życia" },
|
||||||
|
"family": { "title": "Przyjazne rodzinie", "text": "Optymalne rozwiązania dla rodzin" },
|
||||||
|
"optimization": { "title": "Optymalizacja umów", "text": "Ulepszanie istniejących umów" },
|
||||||
|
"fasthelp": { "title": "Szybka pomoc", "text": "Sprawna likwidacja szkód" },
|
||||||
|
"costs": { "title": "Przejrzyste koszty", "text": "Bez ukrytych opłat" },
|
||||||
|
"local": { "title": "Osobista opieka", "text": "Lokalnie, blisko Ciebie" }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"cta": {
|
||||||
|
"title": "Skontaktuj się z nami",
|
||||||
|
"subtitle": "Nieodpłatnie doradzimy w sprawach ubezpieczeń.",
|
||||||
|
"primary": "Zadzwoń teraz",
|
||||||
|
"secondary": "Umów spotkanie"
|
||||||
|
},
|
||||||
|
"chatbot": {
|
||||||
|
"title": "Masz jeszcze pytania?",
|
||||||
|
"subtitle": "Nasz chatbot AI pomaga przez całą dobę – szybko, bezpłatnie i niezobowiązująco.",
|
||||||
|
"cta": "Uruchom chatbota",
|
||||||
|
"ctaShort": "Chatbot",
|
||||||
|
"contact": "Kontakt"
|
||||||
|
}
|
||||||
|
},
|
||||||
"footer": {
|
"footer": {
|
||||||
"copyright": "© {year} Wszelkie prawa zastrzeżone",
|
"copyright": " Wszelkie prawa zastrzeżone",
|
||||||
"imprint": "Imprint",
|
"imprint": "Imprint",
|
||||||
"terms": "Warunki korzystania",
|
"terms": "Warunki korzystania",
|
||||||
"privacyPolicy": "Polityka prywatności"
|
"privacyPolicy": "Polityka prywatności"
|
||||||
|
|||||||
@ -15,5 +15,207 @@
|
|||||||
"form": "Formularz",
|
"form": "Formularz",
|
||||||
"claims": "Zgłoszenie szkody!",
|
"claims": "Zgłoszenie szkody!",
|
||||||
"catalog": "Poradnik"
|
"catalog": "Poradnik"
|
||||||
|
},
|
||||||
|
"benefits": {
|
||||||
|
"items": {
|
||||||
|
"personal": {
|
||||||
|
"title": "Ochrona osobista",
|
||||||
|
"description": "Ochrona przed roszczeniami odszkodowawczymi"
|
||||||
|
},
|
||||||
|
"family": {
|
||||||
|
"title": "Ochrona rodziny",
|
||||||
|
"description": "Dzieci i partner w cenie"
|
||||||
|
},
|
||||||
|
"worldwide": {
|
||||||
|
"title": "Ochrona na całym świecie",
|
||||||
|
"description": "Obowiązuje na całym świecie dla ryzyk prywatnych"
|
||||||
|
},
|
||||||
|
"premium": {
|
||||||
|
"title": "Korzystne składki",
|
||||||
|
"description": "Konkurencyjne stawki dzięki porównaniu ofert"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"services": {
|
||||||
|
"items": {
|
||||||
|
"private": "Prywatne ubezpieczenie OC",
|
||||||
|
"family": "Rodzinne ubezpieczenie OC",
|
||||||
|
"business": "OC działalności (OC firmy)",
|
||||||
|
"landlord": "OC wynajmującego",
|
||||||
|
"petOwner": "OC posiadacza zwierzęcia",
|
||||||
|
"professional": "OC zawodowe"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"overview": {
|
||||||
|
"badge": "Podstawowa ochrona dla każdego",
|
||||||
|
"title": "Ubezpieczenie OC",
|
||||||
|
"titleHighlight": "Ochrona przed roszczeniami",
|
||||||
|
"description": "Zabezpieczenie finansowe przy szkodach osobowych, rzeczowych i majątkowych. Porównujemy oferty i dobieramy ochronę dopasowaną do Ciebie i Twojej rodziny.",
|
||||||
|
"ctaPrimary": "Poproś o ofertę",
|
||||||
|
"ctaSecondary": "Konsultacja",
|
||||||
|
"features": {
|
||||||
|
"cover": {
|
||||||
|
"title": "Ochrona do milionów",
|
||||||
|
"text": "do 100 mln € sumy gwarancyjnej"
|
||||||
|
},
|
||||||
|
"family": {
|
||||||
|
"title": "Ochrona rodziny",
|
||||||
|
"text": "partner i dzieci w cenie"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"imageAlt": "Ubezpieczenie OC",
|
||||||
|
"sideMeta": "indywidualne, rodzinne, firmowe",
|
||||||
|
"sideText": "Szybkie porównanie – uczciwie i pod Twoje potrzeby.",
|
||||||
|
"quick": {
|
||||||
|
"title": "Krótko i jasno",
|
||||||
|
"cards": {
|
||||||
|
"essential": {
|
||||||
|
"title": "Niezbędne",
|
||||||
|
"text": "Ważne dla każdego."
|
||||||
|
},
|
||||||
|
"affordable": {
|
||||||
|
"title": "Tanie",
|
||||||
|
"text": "Już od kilku euro miesięcznie."
|
||||||
|
},
|
||||||
|
"help": {
|
||||||
|
"title": "Pomoc w razie szkody",
|
||||||
|
"text": "Jasne kroki i możliwości kontaktu."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"details": {
|
||||||
|
"title": "Szczegóły i korzyści",
|
||||||
|
"intro": "Ubezpieczenie OC chroni Cię przed finansowymi skutkami szkód wyrządzonych osobom trzecim (na osobie, mieniu lub w majątku). Pomagamy dobrać odpowiednią sumę gwarancyjną i najlepszy wariant.",
|
||||||
|
"servicesTitle": "Zakres (wyciąg)",
|
||||||
|
"tip": {
|
||||||
|
"title": "Wskazówka",
|
||||||
|
"subtitle": "Sprawdź sumę gwarancyjną.",
|
||||||
|
"text": "Minimum 10 mln € dla szkód osobowych i rzeczowych, lepiej 50–100 mln € dla optymalnej ochrony."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"statistics": {
|
||||||
|
"title": "Statystyki szkód",
|
||||||
|
"intro": "Szkody OC mogą przydarzyć się każdemu. Potknięcia, przewrócone przedmioty czy wypadki na co dzień to częste przyczyny.",
|
||||||
|
"cards": {
|
||||||
|
"common": {
|
||||||
|
"title": "Najczęstsze szkody",
|
||||||
|
"text": "Potknięcia, szkody wodne, wypadki sportowe."
|
||||||
|
},
|
||||||
|
"stats": {
|
||||||
|
"title": "Statystyka",
|
||||||
|
"text": "4 mln szkód/rok, 4 000 mln € wartości szkód."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tip": {
|
||||||
|
"title": "Wskazówka",
|
||||||
|
"subtitle": "Lepiej zapobiegać niż leczyć.",
|
||||||
|
"text": "Ostrożność w codziennym życiu pozwala uniknąć wielu szkód. Dobra polisa chroni w pozostałych przypadkach."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"calculator": {
|
||||||
|
"title": "Kalkulator OC",
|
||||||
|
"intro": "Wartość orientacyjna. Aby przygotować dokładną ofertę, potrzebujemy m.in. stanu cywilnego/rodzinnego, zawodu i oczekiwanej sumy gwarancyjnej.",
|
||||||
|
"card": {
|
||||||
|
"title": "Szacunkowa składka",
|
||||||
|
"subtitle": "Niewiążąco – potem wyliczymy dokładnie."
|
||||||
|
},
|
||||||
|
"estimate": {
|
||||||
|
"title": "Orientacyjnie (przykład)",
|
||||||
|
"valuePrefix": "Od",
|
||||||
|
"value": "ok. 4 €",
|
||||||
|
"per": "miesiąc",
|
||||||
|
"note": "Zależy od sytuacji rodzinnej, zawodu i sumy gwarancyjnej."
|
||||||
|
},
|
||||||
|
"cta": "Poproś o konkretną ofertę",
|
||||||
|
"need": {
|
||||||
|
"title": "Co jest potrzebne do oferty",
|
||||||
|
"subtitle": "Im dokładniej, tym lepiej.",
|
||||||
|
"items": {
|
||||||
|
"family": "Sytuacja rodzinna (dzieci, partner)",
|
||||||
|
"job": "Rodzaj pracy / zawód",
|
||||||
|
"cover": "Jaka suma gwarancyjna?"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Formularz",
|
||||||
|
"intro": "Wyślij podstawowe informacje – odezwiemy się z dopasowaną ofertą.",
|
||||||
|
"submit": "Wyślij",
|
||||||
|
"submitAlert": "Dziękujemy! Skontaktujemy się wkrótce.",
|
||||||
|
"labels": {
|
||||||
|
"name": "Imię i nazwisko",
|
||||||
|
"phone": "Telefon",
|
||||||
|
"email": "E-mail",
|
||||||
|
"familyStatus": "Sytuacja rodzinna",
|
||||||
|
"occupation": "Zawód",
|
||||||
|
"coverage": "Suma gwarancyjna",
|
||||||
|
"currentInsurer": "Aktualny ubezpieczyciel (opcjonalnie)",
|
||||||
|
"message": "Wiadomość"
|
||||||
|
},
|
||||||
|
"options": {
|
||||||
|
"select": "Wybierz",
|
||||||
|
"single": "Singiel",
|
||||||
|
"family": "Rodzina",
|
||||||
|
"couple": "Para bez dzieci",
|
||||||
|
"employee": "Pracownik",
|
||||||
|
"selfEmployed": "Samozatrudniony",
|
||||||
|
"civilServant": "Urzędnik",
|
||||||
|
"student": "Student"
|
||||||
|
},
|
||||||
|
"placeholders": {
|
||||||
|
"coverage": "np. 50 mln €",
|
||||||
|
"message": "Jakie świadczenia są dla Ciebie ważne? (ochrona osobista, majątkowa itd.)"
|
||||||
|
},
|
||||||
|
"direct": {
|
||||||
|
"title": "Kontakt bezpośredni",
|
||||||
|
"subtitle": "Gdy zależy Ci na czasie.",
|
||||||
|
"phone": "Telefon: 0171 / 9864053",
|
||||||
|
"email": "E-mail: info@finanzen-mizera.de",
|
||||||
|
"contactCta": "Strona kontaktu"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"claims": {
|
||||||
|
"title": "Zgłoszenie szkody",
|
||||||
|
"intro": "W razie szkody liczy się jasna kolejność działań. Oto krótka checklista.",
|
||||||
|
"steps": {
|
||||||
|
"firstAid": {
|
||||||
|
"title": "Udziel pierwszej pomocy",
|
||||||
|
"text": "Zadbaj o poszkodowanych i usuń zagrożenia."
|
||||||
|
},
|
||||||
|
"documentation": {
|
||||||
|
"title": "Dokumentacja",
|
||||||
|
"text": "Zdjęcia, świadkowie, opis szkody."
|
||||||
|
},
|
||||||
|
"report": {
|
||||||
|
"title": "Zgłoś",
|
||||||
|
"text": "Zgłoś jak najszybciej – pomożemy Ci."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ctaHelp": "Poproś o pomoc",
|
||||||
|
"ctaContact": "Kontakt",
|
||||||
|
"emergency": {
|
||||||
|
"title": "Informacja awaryjna",
|
||||||
|
"subtitle": "W razie obrażeń zawsze dzwoń na 112.",
|
||||||
|
"rescue": "Pogotowie: 112",
|
||||||
|
"police": "Policja: 110"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"catalog": {
|
||||||
|
"title": "Poradnik",
|
||||||
|
"intro": "Przydatne informacje dotyczące ubezpieczenia OC.",
|
||||||
|
"downloadChecklist": "Pobierz checklistę",
|
||||||
|
"print": "Drukuj stronę",
|
||||||
|
"pdf": {
|
||||||
|
"title": "Dokument (PDF)",
|
||||||
|
"page1": "Strona 1",
|
||||||
|
"page2": "Strona 2",
|
||||||
|
"iframeTitle": "Dokument OC PDF",
|
||||||
|
"hint": "Jeśli PDF nie wyświetla się tutaj, otwórz go proszę przez przycisk pobierania."
|
||||||
|
},
|
||||||
|
"note": {
|
||||||
|
"title": "Uwaga",
|
||||||
|
"text": "Informacje mogą się zmieniać – sprawdzaj aktualne źródła."
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,5 +15,43 @@
|
|||||||
"form": "Formularz",
|
"form": "Formularz",
|
||||||
"claims": "Zgłoszenie szkody!",
|
"claims": "Zgłoszenie szkody!",
|
||||||
"catalog": "Poradnik"
|
"catalog": "Poradnik"
|
||||||
|
},
|
||||||
|
"overview": {
|
||||||
|
"badge": "Twój dom dobrze chroniony",
|
||||||
|
"title": "Ubezpieczenie mienia domowego",
|
||||||
|
"titleHighlight": "Bezpieczeństwo wyposażenia",
|
||||||
|
"description": "Ochrona przed włamaniem, pożarem, wodą i burzą. Porównujemy oferty i dobieramy ochronę dopasowaną do Twoich potrzeb.",
|
||||||
|
"ctaPrimary": "Poproś o ofertę",
|
||||||
|
"ctaSecondary": "Konsultacja",
|
||||||
|
"features": {
|
||||||
|
"cover": {
|
||||||
|
"title": "Pełna ochrona",
|
||||||
|
"text": "obejmuje kluczowe ryzyka"
|
||||||
|
},
|
||||||
|
"household": {
|
||||||
|
"title": "Meble i sprzęt",
|
||||||
|
"text": "do wartości odtworzeniowej"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"imageMeta": "Mieszkanie, dom, najemca",
|
||||||
|
"imageText": "Porównanie ofert – szybko, uczciwie i pod Twoje potrzeby.",
|
||||||
|
"quick": {
|
||||||
|
"title": "Krótko i jasno",
|
||||||
|
"c1": {
|
||||||
|
"title": "Warto mieć",
|
||||||
|
"text": "Ważne dla każdego gospodarstwa domowego."
|
||||||
|
},
|
||||||
|
"c2": {
|
||||||
|
"title": "Porównanie się opłaca",
|
||||||
|
"text": "Składki i zakres ochrony różnią się znacznie."
|
||||||
|
},
|
||||||
|
"c3": {
|
||||||
|
"title": "Pomoc przy szkodzie",
|
||||||
|
"text": "Jasne kroki i kontakt."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"details": {
|
||||||
|
"title": "Szczegóły i korzyści"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,6 +3,10 @@
|
|||||||
"title": "Ubezpieczenia majątkowe",
|
"title": "Ubezpieczenia majątkowe",
|
||||||
"subtitle": "Ochrona Twojego mienia - od wyposażenia domu po nieruchomość"
|
"subtitle": "Ochrona Twojego mienia - od wyposażenia domu po nieruchomość"
|
||||||
},
|
},
|
||||||
|
"tiles": {
|
||||||
|
"title": "Nasze ubezpieczenia majątkowe",
|
||||||
|
"subtitle": "Wybierz odpowiednią ochronę dla domu, mieszkania i życia codziennego."
|
||||||
|
},
|
||||||
"topics": {
|
"topics": {
|
||||||
"hausrat": "Ubezpieczenie mienia ruchomego",
|
"hausrat": "Ubezpieczenie mienia ruchomego",
|
||||||
"wohngebaeude": "Ubezpieczenie budynku",
|
"wohngebaeude": "Ubezpieczenie budynku",
|
||||||
@ -10,5 +14,23 @@
|
|||||||
"tiere": "Ubezpieczenie zwierząt",
|
"tiere": "Ubezpieczenie zwierząt",
|
||||||
"rechtsschutz": "Ubezpieczenie ochrony prawnej",
|
"rechtsschutz": "Ubezpieczenie ochrony prawnej",
|
||||||
"elektro": "Ubezpieczenie sprzętu elektronicznego"
|
"elektro": "Ubezpieczenie sprzętu elektronicznego"
|
||||||
|
},
|
||||||
|
"benefits": {
|
||||||
|
"title": "Twoje korzyści jako klient prywatny",
|
||||||
|
"subtitle": "Oferujemy dopasowane rozwiązania dla Twojej osobistej ochrony",
|
||||||
|
"items": {
|
||||||
|
"protection": { "title": "Kompleksowa ochrona", "text": "Dla wszystkich obszarów życia" },
|
||||||
|
"family": { "title": "Przyjazne rodzinie", "text": "Optymalne rozwiązania dla rodzin" },
|
||||||
|
"optimization": { "title": "Optymalizacja umów", "text": "Ulepszanie istniejących umów" },
|
||||||
|
"fasthelp": { "title": "Szybka pomoc", "text": "Sprawna likwidacja szkód" },
|
||||||
|
"costs": { "title": "Przejrzyste koszty", "text": "Bez ukrytych opłat" },
|
||||||
|
"local": { "title": "Osobista opieka", "text": "Lokalnie, blisko Ciebie" }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"cta": {
|
||||||
|
"title": "Skontaktuj się z nami",
|
||||||
|
"subtitle": "Skorzystaj z bezpłatnej konsultacji dotyczącej rozwiązań dla klientów prywatnych.",
|
||||||
|
"call": "Zadzwoń teraz",
|
||||||
|
"contact": "Formularz kontaktowy"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -107,5 +107,36 @@
|
|||||||
"title": "Skontaktuj się z nami",
|
"title": "Skontaktuj się z nami",
|
||||||
"primaryCta": "Zadzwoń teraz",
|
"primaryCta": "Zadzwoń teraz",
|
||||||
"subtitle": "Skorzystaj z niezobowiązującej konsultacji w sprawie Twoich możliwości ubezpieczeniowych."
|
"subtitle": "Skorzystaj z niezobowiązującej konsultacji w sprawie Twoich możliwości ubezpieczeniowych."
|
||||||
|
},
|
||||||
|
"tiles": {
|
||||||
|
"sterbegeld": {
|
||||||
|
"title": "Ubezpieczenie pogrzebowe",
|
||||||
|
"subtitle": "Zabezpieczenie bliskich: finansowe bezpieczeństwo na wypadek śmierci.",
|
||||||
|
"exampleLabel": "np. przykład składki",
|
||||||
|
"examplePrice": "40,75€",
|
||||||
|
"exampleDetails": "miesięcznie dla sumy ubezpieczenia 12.500 €",
|
||||||
|
"bullet1": "Kobiety/Mężczyźni: od 53 lat",
|
||||||
|
"detailsLabel": "Szczegóły:",
|
||||||
|
"detailsItems": [
|
||||||
|
"Ubezpieczenie pogrzebowe",
|
||||||
|
"Zabezpieczenie kosztów pogrzebu",
|
||||||
|
"Ubezpieczenie na życie"
|
||||||
|
],
|
||||||
|
"cta": "Dowiedz się więcej"
|
||||||
|
},
|
||||||
|
"privathaftpflicht": {
|
||||||
|
"title": "Ubezpieczenie OC w życiu prywatnym",
|
||||||
|
"subtitle": "Ochrona przed wysokimi roszczeniami w życiu codziennym – dla spokoju ducha.",
|
||||||
|
"exampleLabel": "np. przykład składki",
|
||||||
|
"examplePrice": "5,57€",
|
||||||
|
"exampleDetails": "miesięcznie – przykład taryfy",
|
||||||
|
"detailsLabel": "Szczegóły:",
|
||||||
|
"detailsItems": [
|
||||||
|
"Pobyt za granicą w Europie bez ograniczenia czasowego",
|
||||||
|
"Partner/partnerka niepozostający w związku małżeńskim we wspólnym gospodarstwie domowym",
|
||||||
|
"Ochrona prawna roszczeń odszkodowawczych przy niewypłacalności sprawcy szkody"
|
||||||
|
],
|
||||||
|
"cta": "Dowiedz się więcej"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
145
public/locales/pl/wohngebaeudeversicherung.json
Normal file
145
public/locales/pl/wohngebaeudeversicherung.json
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
{
|
||||||
|
"pageTitle": "Ubezpieczenie budynku",
|
||||||
|
"hero": {
|
||||||
|
"kicker": "Dom i mieszkanie",
|
||||||
|
"title": "Ubezpieczenie budynku",
|
||||||
|
"subtitle": "Ochrona Twojej nieruchomości – dla właścicieli, wynajmujących i mieszkańców.",
|
||||||
|
"primaryCta": "Poproś o ofertę",
|
||||||
|
"secondaryCta": "Konsultacja"
|
||||||
|
},
|
||||||
|
"tabs": {
|
||||||
|
"overview": "Przegląd",
|
||||||
|
"details": "Szczegóły",
|
||||||
|
"calculator": "Kalkulator",
|
||||||
|
"form": "Zapytanie",
|
||||||
|
"claims": "Szkoda",
|
||||||
|
"catalog": "Baza wiedzy"
|
||||||
|
},
|
||||||
|
"highlights": {
|
||||||
|
"h1": {
|
||||||
|
"title": "Ochrona budynku",
|
||||||
|
"text": "Zabezpieczenie na wypadek pożaru, zalania, burzy i gradu."
|
||||||
|
},
|
||||||
|
"h2": {
|
||||||
|
"title": "Indywidualne doradztwo",
|
||||||
|
"text": "Porównujemy oferty i dobieramy ochronę dopasowaną do Twojego domu."
|
||||||
|
},
|
||||||
|
"h3": {
|
||||||
|
"title": "Szybko i rzetelnie",
|
||||||
|
"text": "Krótka ścieżka, jasne rekomendacje, osobista obsługa."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"benefits": {
|
||||||
|
"fire": {
|
||||||
|
"title": "Ochrona od pożaru",
|
||||||
|
"description": "Zabezpieczenie na wypadek szkód pożarowych i przepięć"
|
||||||
|
},
|
||||||
|
"water": {
|
||||||
|
"title": "Ochrona od zalania",
|
||||||
|
"description": "Ochrona przed szkodami spowodowanymi przez wodę z instalacji"
|
||||||
|
},
|
||||||
|
"storm": {
|
||||||
|
"title": "Burza i grad",
|
||||||
|
"description": "Pokrycie szkód spowodowanych przez zjawiska pogodowe"
|
||||||
|
},
|
||||||
|
"premium": {
|
||||||
|
"title": "Korzystne składki",
|
||||||
|
"description": "Konkurencyjne składki dzięki porównaniu ofert"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"services": {
|
||||||
|
"items": {
|
||||||
|
"wohngebaeudeversicherung": "Ubezpieczenie budynku",
|
||||||
|
"feuer": "Ubezpieczenie od pożaru",
|
||||||
|
"leitungswasser": "Ubezpieczenie od zalania (instalacje)",
|
||||||
|
"sturm": "Ubezpieczenie od wichury",
|
||||||
|
"elementar": "Ubezpieczenie od zdarzeń naturalnych",
|
||||||
|
"gebaeudehaftpflicht": "OC właściciela nieruchomości"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"overview": {
|
||||||
|
"badge": "Ochrona budynku",
|
||||||
|
"title": "Ubezpieczenie budynku",
|
||||||
|
"titleHighlight": "Bezpieczeństwo Twojej nieruchomości",
|
||||||
|
"description": "Ochrona przed pożarem, zalaniem, burzą i gradem. Porównujemy oferty i dobieramy ochronę dopasowaną do Twojego domu.",
|
||||||
|
"ctaPrimary": "Poproś o ofertę",
|
||||||
|
"ctaSecondary": "Konsultacja",
|
||||||
|
"features": {
|
||||||
|
"cover": {
|
||||||
|
"title": "Pełna ochrona",
|
||||||
|
"text": "obejmuje kluczowe ryzyka"
|
||||||
|
},
|
||||||
|
"building": {
|
||||||
|
"title": "Budynek i elementy stałe",
|
||||||
|
"text": "do wartości odtworzeniowej"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"imageMeta": "Właściciel, wynajmujący, użytkownik",
|
||||||
|
"imageText": "Porównanie ofert – szybko, uczciwie i pod Twoje potrzeby.",
|
||||||
|
"quick": {
|
||||||
|
"title": "Krótko i jasno",
|
||||||
|
"c1": {
|
||||||
|
"title": "Warto mieć",
|
||||||
|
"text": "Ważne dla każdego właściciela."
|
||||||
|
},
|
||||||
|
"c2": {
|
||||||
|
"title": "Porównanie się opłaca",
|
||||||
|
"text": "Składki i zakres ochrony różnią się znacznie."
|
||||||
|
},
|
||||||
|
"c3": {
|
||||||
|
"title": "Pomoc przy szkodzie",
|
||||||
|
"text": "Jasne kroki i kontakt."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"details": {
|
||||||
|
"title": "Szczegóły i korzyści",
|
||||||
|
"description": "Ubezpieczenie budynku chroni nieruchomość przed pożarem, zalaniem, burzą i gradem. Pomożemy dobrać sumę ubezpieczenia i najlepszą ofertę.",
|
||||||
|
"servicesTitle": "Zakres (wyciąg)",
|
||||||
|
"tipTitle": "Wskazówka",
|
||||||
|
"tipDescription": "Sprawdź sumę ubezpieczenia.",
|
||||||
|
"tipContent": "Zadbaj o odpowiednią sumę ubezpieczenia (ok. 650–750 €/m²) oraz opcjonalną ochronę przejściową np. przy zmianie lokatorów."
|
||||||
|
},
|
||||||
|
"calculator": {
|
||||||
|
"title": "Kalkulator",
|
||||||
|
"description": "Oszacuj składkę – szybko i bez zobowiązań.",
|
||||||
|
"sizeLabel": "Powierzchnia (m²)",
|
||||||
|
"sizePlaceholder": "np. 120",
|
||||||
|
"yearLabel": "Rok budowy",
|
||||||
|
"yearPlaceholder": "np. 2000",
|
||||||
|
"button": "Oblicz"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"title": "Zapytanie",
|
||||||
|
"description": "Wyślij dane – przygotujemy dopasowaną ofertę.",
|
||||||
|
"nameLabel": "Imię i nazwisko",
|
||||||
|
"phoneLabel": "Telefon",
|
||||||
|
"emailLabel": "E-mail",
|
||||||
|
"messageLabel": "Wiadomość",
|
||||||
|
"button": "Wyślij zapytanie",
|
||||||
|
"submitAlert": "Dziękujemy! Wkrótce się odezwiemy."
|
||||||
|
},
|
||||||
|
"claims": {
|
||||||
|
"title": "Zgłoszenie szkody",
|
||||||
|
"description": "Szybka pomoc w razie szkody – zgłoś nam zdarzenie.",
|
||||||
|
"hotline": "Infolinia",
|
||||||
|
"hotlineHours": "Pn–Pt 8–18",
|
||||||
|
"email": "E-mail",
|
||||||
|
"emailAddress": "schaden@mizera.de",
|
||||||
|
"button": "Zgłoś szkodę"
|
||||||
|
},
|
||||||
|
"catalog": {
|
||||||
|
"title": "Baza wiedzy",
|
||||||
|
"description": "Przydatne informacje o ubezpieczeniu budynku.",
|
||||||
|
"guideTitle": "Poradnik",
|
||||||
|
"guideDescription": "Na co zwrócić uwagę?",
|
||||||
|
"guideContent": "Suma ubezpieczenia, udział własny, wyłączenia odpowiedzialności.",
|
||||||
|
"checklistTitle": "Checklista",
|
||||||
|
"checklistDescription": "Kryteria porównania",
|
||||||
|
"checklistContent": "Cena, zakres, obsługa, likwidacja szkód."
|
||||||
|
},
|
||||||
|
"cta": {
|
||||||
|
"primary": "Umów konsultację",
|
||||||
|
"secondary": "Przejdź do przeglądu ubezpieczeń rzeczowych"
|
||||||
|
}
|
||||||
|
}
|
||||||
11
src/App.tsx
11
src/App.tsx
@ -3,7 +3,7 @@ import { Toaster } from "@/components/ui/toaster";
|
|||||||
import { Toaster as Sonner } from "@/components/ui/sonner";
|
import { Toaster as Sonner } from "@/components/ui/sonner";
|
||||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
|
||||||
import { I18nextProvider } from 'react-i18next';
|
import { I18nextProvider } from 'react-i18next';
|
||||||
import i18n from './i18n/i18n';
|
import i18n from './i18n/i18n';
|
||||||
import Index from "./pages/Index";
|
import Index from "./pages/Index";
|
||||||
@ -61,8 +61,10 @@ import Gesundheitsvorsorge from "./pages/Gesundheitsvorsorge";
|
|||||||
import Altersvorsorge from "./pages/Altersvorsorge";
|
import Altersvorsorge from "./pages/Altersvorsorge";
|
||||||
import Risikoschutz from "./pages/Risikoschutz";
|
import Risikoschutz from "./pages/Risikoschutz";
|
||||||
import Sachversicherung from "./pages/Sachversicherung";
|
import Sachversicherung from "./pages/Sachversicherung";
|
||||||
|
import Wohngebaeudeversicherung from "./pages/Wohngebaeudeversicherung";
|
||||||
import Vermoegenssicherung from "./pages/Vermoegenssicherung";
|
import Vermoegenssicherung from "./pages/Vermoegenssicherung";
|
||||||
import RiesterRente from "./pages/RiesterRente";
|
import RiesterRente from "./pages/RiesterRente";
|
||||||
|
import Haftpflicht from "./pages/haftpflicht";
|
||||||
import GeschaeftskundenFlottenversicherung from "./pages/GeschaeftskundenFlottenversicherung";
|
import GeschaeftskundenFlottenversicherung from "./pages/GeschaeftskundenFlottenversicherung";
|
||||||
import GeschaeftskundenBetriebsrente from "./pages/GeschaeftskundenBetriebsrente";
|
import GeschaeftskundenBetriebsrente from "./pages/GeschaeftskundenBetriebsrente";
|
||||||
import GeschaeftskundenBetriebshaftpflicht from "./pages/GeschaeftskundenBetriebshaftpflicht";
|
import GeschaeftskundenBetriebshaftpflicht from "./pages/GeschaeftskundenBetriebshaftpflicht";
|
||||||
@ -137,11 +139,12 @@ const App = () => {
|
|||||||
<Route path="/agentur/events/schloss-hotel-fleesensee" element={<AgenturEventFleesensee />} />
|
<Route path="/agentur/events/schloss-hotel-fleesensee" element={<AgenturEventFleesensee />} />
|
||||||
<Route path="/test-agentur" element={<div>Test-Route funktioniert! Agentur-Test</div>} />
|
<Route path="/test-agentur" element={<div>Test-Route funktioniert! Agentur-Test</div>} />
|
||||||
<Route path="/service" element={<Service />} />
|
<Route path="/service" element={<Service />} />
|
||||||
<Route path="/hausrat" element={<Hausrat />} />
|
<Route path="/wohngebaeudeversicherung" element={<Wohngebaeudeversicherung />} />
|
||||||
|
<Route path="/hausrat" element={<Navigate to="/wohngebaeudeversicherung" replace />} />
|
||||||
<Route path="/unfall" element={<Unfall />} />
|
<Route path="/unfall" element={<Unfall />} />
|
||||||
<Route path="/motorradversicherung" element={<Motorradversicherung />} />
|
<Route path="/motorradversicherung" element={<Motorradversicherung />} />
|
||||||
<Route path="/quadversicherung" element={<Quadversicherung />} />
|
<Route path="/quadversicherung" element={<Quadversicherung />} />
|
||||||
<Route path="/hausratversicherung" element={<Hausratversicherung />} />
|
<Route path="/hausratversicherung" element={<Hausrat />} />
|
||||||
<Route path="/autoversicherung" element={<Autoversicherung />} />
|
<Route path="/autoversicherung" element={<Autoversicherung />} />
|
||||||
<Route path="/fairmobil" element={<FairMobil />} />
|
<Route path="/fairmobil" element={<FairMobil />} />
|
||||||
<Route path="/flottenversicherung" element={<Flottenversicherung />} />
|
<Route path="/flottenversicherung" element={<Flottenversicherung />} />
|
||||||
@ -178,6 +181,8 @@ const App = () => {
|
|||||||
<Route path="/altersvorsorge" element={<Altersvorsorge />} />
|
<Route path="/altersvorsorge" element={<Altersvorsorge />} />
|
||||||
<Route path="/risikoschutz" element={<Risikoschutz />} />
|
<Route path="/risikoschutz" element={<Risikoschutz />} />
|
||||||
<Route path="/sachversicherung" element={<Sachversicherung />} />
|
<Route path="/sachversicherung" element={<Sachversicherung />} />
|
||||||
|
<Route path="/haftpflicht" element={<Haftpflicht />} />
|
||||||
|
<Route path="/haftpflichtversicherung" element={<Haftpflicht />} />
|
||||||
<Route path="/vermoegenssicherung" element={<Vermoegenssicherung />} />
|
<Route path="/vermoegenssicherung" element={<Vermoegenssicherung />} />
|
||||||
<Route path="/riester-rente" element={<RiesterRente />} />
|
<Route path="/riester-rente" element={<RiesterRente />} />
|
||||||
<Route path="/geschaeftskunden/flottenversicherung" element={<GeschaeftskundenFlottenversicherung />} />
|
<Route path="/geschaeftskunden/flottenversicherung" element={<GeschaeftskundenFlottenversicherung />} />
|
||||||
|
|||||||
147
src/components/BenefitsCtaSection.tsx
Normal file
147
src/components/BenefitsCtaSection.tsx
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Shield, Clock, Users, DollarSign, TrendingUp, MapPin, Phone } from 'lucide-react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
phoneHref?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const BenefitsCtaSection = ({ phoneHref = 'tel:01719864053' }: Props) => {
|
||||||
|
const { t } = useTranslation('common');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mt-14">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl md:text-4xl font-bold text-gray-900">
|
||||||
|
{t('benefitsCta.benefits.title', 'Ihre Vorteile als Privatkunde')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 text-gray-600">
|
||||||
|
{t(
|
||||||
|
'benefitsCta.benefits.subtitle',
|
||||||
|
'Wir bieten Ihnen maßgeschneiderte Lösungen für Ihre persönliche Absicherung'
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 rounded-2xl border bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm">
|
||||||
|
<div className="grid gap-6 p-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<Shield className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefitsCta.benefits.items.protection.title', 'Umfassender Schutz')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefitsCta.benefits.items.protection.text', 'Für alle Lebensbereiche')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<Users className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefitsCta.benefits.items.family.title', 'Familienfreundlich')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefitsCta.benefits.items.family.text', 'Optimale Lösungen für Familien')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<TrendingUp className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefitsCta.benefits.items.optimization.title', 'Vertragsoptimierung')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefitsCta.benefits.items.optimization.text', 'Bestehende Verträge verbessern')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<Clock className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefitsCta.benefits.items.fasthelp.title', 'Schnelle Hilfe')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefitsCta.benefits.items.fasthelp.text', 'Rasche Schadenabwicklung')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<DollarSign className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefitsCta.benefits.items.costs.title', 'Transparente Kosten')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefitsCta.benefits.items.costs.text', 'Keine versteckten Gebühren')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<MapPin className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefitsCta.benefits.items.local.title', 'Persönliche Betreuung')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefitsCta.benefits.items.local.text', 'Vor Ort in Ihrer Nähe')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-10 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-10 text-white shadow-lg">
|
||||||
|
<div className="mx-auto max-w-4xl text-center">
|
||||||
|
<div className="text-3xl md:text-4xl font-bold">
|
||||||
|
{t('benefitsCta.cta.title', 'Kontaktieren Sie uns')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 text-white/90">
|
||||||
|
{t(
|
||||||
|
'benefitsCta.cta.subtitle',
|
||||||
|
'Lassen Sie sich unverbindlich zu Ihren Privatkunden-Lösungen beraten.'
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
||||||
|
<Button asChild variant="secondary" className="w-full sm:w-auto">
|
||||||
|
<a href={phoneHref}>
|
||||||
|
<span className="inline-flex items-center gap-2">
|
||||||
|
<Phone className="h-4 w-4" />
|
||||||
|
{t('benefitsCta.cta.call', 'Jetzt anrufen')}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button asChild className="w-full sm:w-auto bg-white text-blue-700 hover:bg-white/90">
|
||||||
|
<Link to="/contact">{t('benefitsCta.cta.contact', 'Kontaktformular')}</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BenefitsCtaSection;
|
||||||
37
src/components/ChatbotCtaSection.tsx
Normal file
37
src/components/ChatbotCtaSection.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { MessageCircle, Bot } from 'lucide-react';
|
||||||
|
import { Button } from './ui/button';
|
||||||
|
|
||||||
|
export default function ChatbotCtaSection() {
|
||||||
|
const { t } = useTranslation('common');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="bg-gradient-to-r from-gray-50 to-blue-50 border-t border-gray-200">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="max-w-4xl mx-auto text-center py-4">
|
||||||
|
<div className="flex items-center justify-center gap-2 mb-2">
|
||||||
|
<Bot className="w-5 h-5 text-blue-600" />
|
||||||
|
<MessageCircle className="w-5 h-5 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-lg md:text-xl font-bold text-gray-900 mb-1">
|
||||||
|
{t('chatbot.title', 'Haben Sie noch Fragen?')}
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-gray-600 mb-3 max-w-2xl mx-auto">
|
||||||
|
{t('chatbot.subtitle', 'Unser KI-Chatbot hilft Ihnen rund um die Uhr – schnell, kostenlos und unverbindlich.')}
|
||||||
|
</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"
|
||||||
|
onClick={() => {
|
||||||
|
// Beispiel: Öffnet eine Chatbot-Seite im gleichen Tab
|
||||||
|
window.location.href = '/chatbot';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Bot className="w-4 h-4 mr-2" />
|
||||||
|
{t('chatbot.cta', 'Chatbot starten')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
35
src/components/ChatbotHint.tsx
Normal file
35
src/components/ChatbotHint.tsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Bot } from 'lucide-react';
|
||||||
|
import { Button } from './ui/button';
|
||||||
|
|
||||||
|
export default function ChatbotHint() {
|
||||||
|
const { t } = useTranslation('common');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-gradient-to-r from-gray-50 to-blue-50 border-t border-gray-200">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="max-w-4xl mx-auto text-center py-6">
|
||||||
|
<div className="flex items-center justify-center gap-2 mb-2">
|
||||||
|
<Bot className="w-6 h-6 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-lg md:text-xl font-bold text-gray-900 mb-1">
|
||||||
|
{t('chatbot.title', 'Haben Sie noch Fragen?')}
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-gray-600 mb-3 max-w-2xl mx-auto">
|
||||||
|
{t('chatbot.subtitle', 'Unser KI-Chatbot hilft Ihnen rund um die Uhr – schnell, kostenlos und unverbindlich.')}
|
||||||
|
</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"
|
||||||
|
onClick={() => {
|
||||||
|
window.location.href = '/chatbot';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Bot className="w-5 h-5 mr-2" />
|
||||||
|
{t('chatbot.cta', 'Chatbot starten')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -21,6 +21,11 @@ const Header = () => {
|
|||||||
href: '/sachversicherung',
|
href: '/sachversicherung',
|
||||||
icon: Home,
|
icon: Home,
|
||||||
},
|
},
|
||||||
|
{ name: t('householdInsurance', 'Hausratversicherung'), href: '/hausratversicherung', icon: Home },
|
||||||
|
{ name: t('residentialBuildingInsurance', 'Wohngebäudeversicherung'), href: '/wohngebaeudeversicherung', icon: Home },
|
||||||
|
{ name: t('liabilityInsurance', 'Haftpflichtversicherung'), href: '/haftpflicht', icon: Shield },
|
||||||
|
{ name: t('petInsurance', 'Tierversicherung'), href: '/tierversicherung', icon: Shield },
|
||||||
|
{ name: t('legalProtectionInsurance', 'Rechtsschutzversicherung'), href: '/rechtsschutzversicherung', icon: Shield },
|
||||||
{ name: t('health', 'Gesundheit'), href: '/gesundheitsvorsorge', icon: Shield },
|
{ name: t('health', 'Gesundheit'), href: '/gesundheitsvorsorge', icon: Shield },
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -120,7 +125,7 @@ const Header = () => {
|
|||||||
{ name: 'Flottenversicherung', href: '/flottenversicherung', icon: Truck },
|
{ name: 'Flottenversicherung', href: '/flottenversicherung', icon: Truck },
|
||||||
{ name: 'Drittfahrer-Schutz', href: '/drittfahrer-schutz', icon: Shield },
|
{ name: 'Drittfahrer-Schutz', href: '/drittfahrer-schutz', icon: Shield },
|
||||||
{ name: 'Hausratversicherung', href: '/hausratversicherung', icon: Shield },
|
{ name: 'Hausratversicherung', href: '/hausratversicherung', icon: Shield },
|
||||||
{ name: 'Wohngebäudeversicherung', href: '/hausrat', icon: Shield },
|
{ name: 'Wohngebäudeversicherung', href: '/wohngebaeudeversicherung', icon: Shield },
|
||||||
{ name: 'Haftpflichtversicherung', href: '/haftpflicht', icon: Shield },
|
{ name: 'Haftpflichtversicherung', href: '/haftpflicht', icon: Shield },
|
||||||
{ name: 'Haftpflicht', href: '/haftpflicht', icon: Shield },
|
{ name: 'Haftpflicht', href: '/haftpflicht', icon: Shield },
|
||||||
{ name: 'Rechtsschutzversicherung', href: '/rechtsschutzversicherung', icon: Shield },
|
{ name: 'Rechtsschutzversicherung', href: '/rechtsschutzversicherung', icon: Shield },
|
||||||
|
|||||||
@ -32,6 +32,7 @@ i18n
|
|||||||
'flottenversicherung',
|
'flottenversicherung',
|
||||||
'haftpflicht',
|
'haftpflicht',
|
||||||
'hausrat',
|
'hausrat',
|
||||||
|
'wohngebaeudeversicherung',
|
||||||
'motorradversicherung',
|
'motorradversicherung',
|
||||||
'quadversicherung',
|
'quadversicherung',
|
||||||
'rechtsschutzversicherung',
|
'rechtsschutzversicherung',
|
||||||
|
|||||||
@ -16,6 +16,8 @@ const Agentur = () => {
|
|||||||
|
|
||||||
const partnerLogoFallbackUrl = (url: string) => `https://www.google.com/s2/favicons?sz=128&domain_url=${encodeURIComponent(url)}`;
|
const partnerLogoFallbackUrl = (url: string) => `https://www.google.com/s2/favicons?sz=128&domain_url=${encodeURIComponent(url)}`;
|
||||||
|
|
||||||
|
const asStringArray = (value: unknown): string[] => (Array.isArray(value) ? (value as string[]) : []);
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState('overview');
|
const [activeTab, setActiveTab] = useState('overview');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -71,25 +73,31 @@ const Agentur = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<HeroSlider
|
{/* Simple header without image */}
|
||||||
slides={[
|
<div className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-16">
|
||||||
{
|
<div className="container mx-auto px-4">
|
||||||
id: 'agentur-1',
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
kicker: t('hero.kicker', 'Ihr starker Partner für Sicherheit'),
|
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||||
title: t('hero.title', 'Ihr starker Partner für Sicherheit.'),
|
{t('hero.title', 'Ihr starker Partner für Sicherheit.')}
|
||||||
subtitle: t(
|
</h1>
|
||||||
'hero.subtitle',
|
<p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
|
||||||
'Unabhängige Versicherung- und Finanzberatung – persönlich, verlässlich und auf Ihre Ziele ausgerichtet.'
|
{t('hero.subtitle', 'Unabhängige Versicherung- und Finanzberatung – persönlich, verlässlich und auf Ihre Ziele ausgerichtet.')}
|
||||||
),
|
</p>
|
||||||
imageUrl: assetUrl('Fotolia_7809059_XS.jpg'),
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
imagePosition: 'center',
|
<Button asChild className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 text-lg font-semibold shadow-lg">
|
||||||
ctas: [
|
<Link to="/contact">
|
||||||
{ label: t('hero.primaryCta', 'Jetzt beraten lassen'), href: '/contact' },
|
{t('hero.primaryCta', 'Jetzt beraten lassen')}
|
||||||
{ label: t('hero.secondaryCta', 'Unsere Leistungen'), href: '/leistungen' },
|
</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>
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-gray-50">
|
||||||
<div className="container mx-auto px-4 py-12">
|
<div className="container mx-auto px-4 py-12">
|
||||||
@ -260,9 +268,7 @@ const Agentur = () => {
|
|||||||
<div className="text-lg font-semibold text-gray-900">{t('services.cards.kfz.title')}</div>
|
<div className="text-lg font-semibold text-gray-900">{t('services.cards.kfz.title')}</div>
|
||||||
<div className="mt-2 text-sm text-gray-600">{t('services.cards.kfz.subtitle')}</div>
|
<div className="mt-2 text-sm text-gray-600">{t('services.cards.kfz.subtitle')}</div>
|
||||||
<div className="mt-4 space-y-2">
|
<div className="mt-4 space-y-2">
|
||||||
{(
|
{asStringArray(t('services.cards.kfz.items', { returnObjects: true })).map((item) => (
|
||||||
t('services.cards.kfz.items', { returnObjects: true }) as unknown as string[]
|
|
||||||
).map((item) => (
|
|
||||||
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
<span>{item}</span>
|
<span>{item}</span>
|
||||||
@ -278,9 +284,7 @@ const Agentur = () => {
|
|||||||
<div className="text-lg font-semibold text-gray-900">{t('services.cards.property.title')}</div>
|
<div className="text-lg font-semibold text-gray-900">{t('services.cards.property.title')}</div>
|
||||||
<div className="mt-2 text-sm text-gray-600">{t('services.cards.property.subtitle')}</div>
|
<div className="mt-2 text-sm text-gray-600">{t('services.cards.property.subtitle')}</div>
|
||||||
<div className="mt-4 space-y-2">
|
<div className="mt-4 space-y-2">
|
||||||
{(
|
{asStringArray(t('services.cards.property.items', { returnObjects: true })).map((item) => (
|
||||||
t('services.cards.property.items', { returnObjects: true }) as unknown as string[]
|
|
||||||
).map((item) => (
|
|
||||||
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
<span>{item}</span>
|
<span>{item}</span>
|
||||||
@ -296,9 +300,7 @@ const Agentur = () => {
|
|||||||
<div className="text-lg font-semibold text-gray-900">{t('services.cards.personal.title')}</div>
|
<div className="text-lg font-semibold text-gray-900">{t('services.cards.personal.title')}</div>
|
||||||
<div className="mt-2 text-sm text-gray-600">{t('services.cards.personal.subtitle')}</div>
|
<div className="mt-2 text-sm text-gray-600">{t('services.cards.personal.subtitle')}</div>
|
||||||
<div className="mt-4 space-y-2">
|
<div className="mt-4 space-y-2">
|
||||||
{(
|
{asStringArray(t('services.cards.personal.items', { returnObjects: true })).map((item) => (
|
||||||
t('services.cards.personal.items', { returnObjects: true }) as unknown as string[]
|
|
||||||
).map((item) => (
|
|
||||||
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
<span>{item}</span>
|
<span>{item}</span>
|
||||||
@ -314,9 +316,7 @@ const Agentur = () => {
|
|||||||
<div className="text-lg font-semibold text-gray-900">{t('services.cards.health.title')}</div>
|
<div className="text-lg font-semibold text-gray-900">{t('services.cards.health.title')}</div>
|
||||||
<div className="mt-2 text-sm text-gray-600">{t('services.cards.health.subtitle')}</div>
|
<div className="mt-2 text-sm text-gray-600">{t('services.cards.health.subtitle')}</div>
|
||||||
<div className="mt-4 space-y-2">
|
<div className="mt-4 space-y-2">
|
||||||
{(
|
{asStringArray(t('services.cards.health.items', { returnObjects: true })).map((item) => (
|
||||||
t('services.cards.health.items', { returnObjects: true }) as unknown as string[]
|
|
||||||
).map((item) => (
|
|
||||||
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
<span>{item}</span>
|
<span>{item}</span>
|
||||||
@ -332,9 +332,7 @@ const Agentur = () => {
|
|||||||
<div className="text-lg font-semibold text-gray-900">{t('services.cards.business.title')}</div>
|
<div className="text-lg font-semibold text-gray-900">{t('services.cards.business.title')}</div>
|
||||||
<div className="mt-2 text-sm text-gray-600">{t('services.cards.business.subtitle')}</div>
|
<div className="mt-2 text-sm text-gray-600">{t('services.cards.business.subtitle')}</div>
|
||||||
<div className="mt-4 space-y-2">
|
<div className="mt-4 space-y-2">
|
||||||
{(
|
{asStringArray(t('services.cards.business.items', { returnObjects: true })).map((item) => (
|
||||||
t('services.cards.business.items', { returnObjects: true }) as unknown as string[]
|
|
||||||
).map((item) => (
|
|
||||||
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
<span>{item}</span>
|
<span>{item}</span>
|
||||||
@ -350,9 +348,7 @@ const Agentur = () => {
|
|||||||
<div className="text-lg font-semibold text-gray-900">{t('services.cards.finance.title')}</div>
|
<div className="text-lg font-semibold text-gray-900">{t('services.cards.finance.title')}</div>
|
||||||
<div className="mt-2 text-sm text-gray-600">{t('services.cards.finance.subtitle')}</div>
|
<div className="mt-2 text-sm text-gray-600">{t('services.cards.finance.subtitle')}</div>
|
||||||
<div className="mt-4 space-y-2">
|
<div className="mt-4 space-y-2">
|
||||||
{(
|
{asStringArray(t('services.cards.finance.items', { returnObjects: true })).map((item) => (
|
||||||
t('services.cards.finance.items', { returnObjects: true }) as unknown as string[]
|
|
||||||
).map((item) => (
|
|
||||||
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
<div key={item} className="flex items-start gap-2 text-sm text-gray-700">
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
<span>{item}</span>
|
<span>{item}</span>
|
||||||
|
|||||||
@ -6,7 +6,7 @@ import GeneralNotice from '@/components/GeneralNotice';
|
|||||||
import Disclaimer from '@/components/Disclaimer';
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
||||||
import { Mail, Phone, MapPin, Globe, TrendingUp, LineChart, CloudSun, Newspaper, ExternalLink, Star, FileText, Shield, Lock, HelpCircle, Send, User, MessageSquare, MessageCircle } from 'lucide-react';
|
import { Mail, Phone, MapPin, Globe, TrendingUp, LineChart, CloudSun, Newspaper, ExternalLink, Star, FileText, Shield, Lock, HelpCircle, Send, User, MessageSquare, MessageCircle, Bot } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { sendEmail } from '@/services/emailService';
|
import { sendEmail } from '@/services/emailService';
|
||||||
@ -407,19 +407,7 @@ export default function ContactPage() {
|
|||||||
className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors"
|
className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors"
|
||||||
>
|
>
|
||||||
<Phone className="h-5 w-5 text-blue-600" />
|
<Phone className="h-5 w-5 text-blue-600" />
|
||||||
<div>
|
|
||||||
<span className="text-sm font-medium text-gray-900">{t('labels.mobile', 'Mobil')}: 0171 / 98 64 053</span>
|
<span className="text-sm font-medium text-gray-900">{t('labels.mobile', 'Mobil')}: 0171 / 98 64 053</span>
|
||||||
<div className="text-xs text-green-700 underline">
|
|
||||||
<a
|
|
||||||
href="https://wa.me/491719864053"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="hover:text-green-900 transition-colors"
|
|
||||||
>
|
|
||||||
WhatsApp
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="mailto:info@finanzen-mizera.de"
|
href="mailto:info@finanzen-mizera.de"
|
||||||
@ -435,7 +423,18 @@ export default function ContactPage() {
|
|||||||
className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors"
|
className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors"
|
||||||
>
|
>
|
||||||
<Globe className="h-5 w-5 text-blue-600" />
|
<Globe className="h-5 w-5 text-blue-600" />
|
||||||
<span className="text-sm font-medium text-gray-900">http://www.finanzen-mizera.de</span>
|
<span className="text-sm font-medium text-gray-900">www.finanzen-mizera.de</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors">
|
||||||
|
<div className="w-5 h-5 flex items-center justify-center">
|
||||||
|
<Bot className="w-4 h-4 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="/chatbot"
|
||||||
|
className="text-xs text-blue-700 underline hover:text-blue-900 transition-colors"
|
||||||
|
>
|
||||||
|
Chatbot starten
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -550,15 +549,13 @@ export default function ContactPage() {
|
|||||||
>
|
>
|
||||||
{t('contact.clear', 'Leeren')}
|
{t('contact.clear', 'Leeren')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<a
|
||||||
type="button"
|
href="/chatbot"
|
||||||
variant="outline"
|
className="inline-flex items-center justify-center border border-blue-500 text-blue-600 hover:bg-blue-50 text-base h-14 px-2 rounded-md transition-colors"
|
||||||
className="border-green-500 text-green-600 hover:bg-green-50 text-base h-14 px-2"
|
|
||||||
onClick={() => window.open('https://wa.me/491719864053', '_blank')}
|
|
||||||
>
|
>
|
||||||
<MessageCircle className="w-5 h-5 mr-1" />
|
<Bot className="w-5 h-5 mr-1" />
|
||||||
{t('contact.whatsapp', 'WhatsApp')}
|
{t('contact.chatbot', 'Chatbot')}
|
||||||
</Button>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Status-Meldungen */}
|
{/* Status-Meldungen */}
|
||||||
|
|||||||
@ -1,9 +1,13 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { ArrowRight, Phone, Mail, MapPin, CheckCircle, Users, Heart, Shield, Home, Car } from 'lucide-react';
|
||||||
import { Heart } from 'lucide-react';
|
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import ChatbotHint from '@/components/ChatbotHint';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
import BenefitsCtaSection from '@/components/BenefitsCtaSection';
|
||||||
|
|
||||||
const FamilienKinder = () => {
|
const FamilienKinder = () => {
|
||||||
const { t } = useTranslation('familien-kinder');
|
const { t } = useTranslation('familien-kinder');
|
||||||
@ -173,25 +177,13 @@ const FamilienKinder = () => {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="py-12 bg-white">
|
<div className="max-w-6xl mx-auto">
|
||||||
<div className="container mx-auto px-4">
|
<BenefitsCtaSection />
|
||||||
<div className="max-w-4xl mx-auto rounded-xl border border-gray-200 bg-green-50 p-6">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<div className="mt-1">
|
|
||||||
<Heart className="w-6 h-6 text-green-700" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-lg font-bold text-gray-900">Direktkontakt</div>
|
|
||||||
<div className="mt-1 text-sm text-gray-700">Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a> <a href="https://wa.me/491719864053" target="_blank" rel="noreferrer" className="text-green-600 hover:text-green-800 underline">(WhatsApp)</a></div>
|
|
||||||
<div className="mt-1 text-sm text-gray-700">E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<ChatbotHint />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -7,7 +7,6 @@ import GeneralNotice from '@/components/GeneralNotice';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
import Disclaimer from '@/components/Disclaimer';
|
|
||||||
|
|
||||||
const Finanzen = () => {
|
const Finanzen = () => {
|
||||||
const { t } = useTranslation('finanzen');
|
const { t } = useTranslation('finanzen');
|
||||||
@ -124,6 +123,7 @@ const Finanzen = () => {
|
|||||||
{ title: 'Brutto-Netto-Rechner', href: '/bruttolnetto', image: assetUrl('iStock-957363908.jpg') },
|
{ title: 'Brutto-Netto-Rechner', href: '/bruttolnetto', image: assetUrl('iStock-957363908.jpg') },
|
||||||
].map((item, index) => (
|
].map((item, index) => (
|
||||||
<div
|
<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-105"
|
||||||
role="link"
|
role="link"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
@ -151,8 +151,6 @@ const Finanzen = () => {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Disclaimer />
|
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -75,7 +75,7 @@ const Hausratversicherung = () => {
|
|||||||
</p>
|
</p>
|
||||||
<div className="flex flex-col sm:flex-row gap-3">
|
<div className="flex flex-col sm:flex-row gap-3">
|
||||||
<Button asChild size="lg" className="bg-blue-600 hover:bg-blue-700">
|
<Button asChild size="lg" className="bg-blue-600 hover:bg-blue-700">
|
||||||
<a href="/hausrat">{t('hero.ctaPrimary', 'Jetzt berechnen')}</a>
|
<a href="/hausratversicherung">{t('hero.ctaPrimary', 'Jetzt berechnen')}</a>
|
||||||
</Button>
|
</Button>
|
||||||
<Button asChild size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
|
<Button asChild size="lg" variant="outline" className="border-white text-white hover:bg-white/10">
|
||||||
<a href="/contact">{t('hero.ctaSecondary', 'Jetzt informieren')}</a>
|
<a href="/contact">{t('hero.ctaSecondary', 'Jetzt informieren')}</a>
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
|
|||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Shield, Car, Phone, Users, Award, CheckCircle, ArrowRight, Star, FileText } from 'lucide-react';
|
import { Shield, Car, Phone, Users, Award, CheckCircle, ArrowRight, Star, FileText } from 'lucide-react';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
import ChatbotHint from '@/components/ChatbotHint';
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
const { t, i18n } = useTranslation('home');
|
const { t, i18n } = useTranslation('home');
|
||||||
@ -157,7 +158,7 @@ const Index = () => {
|
|||||||
{ label: t('topics.item1.title', 'KFZ-Fahrzeuge'), href: '/kfz' },
|
{ label: t('topics.item1.title', 'KFZ-Fahrzeuge'), href: '/kfz' },
|
||||||
{ label: t('topics.item2.title', 'Privatkunden'), href: '/privatkunden' },
|
{ label: t('topics.item2.title', 'Privatkunden'), href: '/privatkunden' },
|
||||||
{ label: t('topics.item3.title', 'Senioren'), href: '/senioren' },
|
{ label: t('topics.item3.title', 'Senioren'), href: '/senioren' },
|
||||||
{ label: t('topics.item4.title', 'Hausrat'), href: '/hausrat' },
|
{ label: t('topics.item4.title', 'Hausrat'), href: '/hausratversicherung' },
|
||||||
{ label: 'Private Krankenversicherung', href: '/private-krankenversicherung' },
|
{ label: 'Private Krankenversicherung', href: '/private-krankenversicherung' },
|
||||||
{ label: 'Zahnzusatzversicherung', href: '/zahnzusatzversicherung' },
|
{ label: 'Zahnzusatzversicherung', href: '/zahnzusatzversicherung' },
|
||||||
{ label: t('topics.item6.title', 'Unfall – Was jetzt?'), href: '/unfall' },
|
{ label: t('topics.item6.title', 'Unfall – Was jetzt?'), href: '/unfall' },
|
||||||
@ -181,7 +182,7 @@ const Index = () => {
|
|||||||
{ label: 'Auslandsreisekrankenversicherung', href: '/auslandsreisekrankenversicherung' },
|
{ label: 'Auslandsreisekrankenversicherung', href: '/auslandsreisekrankenversicherung' },
|
||||||
{ label: 'Gesundheitsvorsorge', href: '/gesundheitsvorsorge' },
|
{ label: 'Gesundheitsvorsorge', href: '/gesundheitsvorsorge' },
|
||||||
{ label: 'KFZ-Fahrzeuge', href: '/kfz' },
|
{ label: 'KFZ-Fahrzeuge', href: '/kfz' },
|
||||||
{ label: 'Hausrat', href: '/hausrat' },
|
{ label: 'Hausrat', href: '/hausratversicherung' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -363,7 +364,7 @@ const Index = () => {
|
|||||||
|
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||||
{mainTopics.map((item) => (
|
{mainTopics.map((item) => (
|
||||||
<Card key={item.id} className="overflow-hidden shadow-lg hover:shadow-2xl transition-shadow">
|
<Card key={item.id} className="overflow-hidden shadow-lg hover:shadow-2xl transition-shadow flex flex-col">
|
||||||
<div className="relative h-44">
|
<div className="relative h-44">
|
||||||
<div
|
<div
|
||||||
className="absolute inset-0 bg-cover bg-center"
|
className="absolute inset-0 bg-cover bg-center"
|
||||||
@ -371,10 +372,10 @@ const Index = () => {
|
|||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" />
|
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" />
|
||||||
</div>
|
</div>
|
||||||
<CardContent className="p-6">
|
<CardContent className="p-6 flex-1 flex flex-col">
|
||||||
<div className="text-lg font-bold text-gray-900 mb-2">{item.title}</div>
|
<div className="text-lg font-bold text-gray-900 mb-2">{item.title}</div>
|
||||||
<div className="text-sm text-gray-600 mb-5">{item.description}</div>
|
<div className="text-sm text-gray-600 mb-5 md:min-h-[40px]">{item.description}</div>
|
||||||
<Button asChild className="w-full">
|
<Button asChild className="w-full mt-auto">
|
||||||
<Link to={item.href}>
|
<Link to={item.href}>
|
||||||
{item.cta}
|
{item.cta}
|
||||||
<ArrowRight className="ml-2 h-4 w-4" />
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||||||
@ -603,6 +604,7 @@ const Index = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<ChatbotHint />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -18,7 +18,7 @@ const Privatkunden = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const pool = [
|
const pool = [
|
||||||
{ id: 'kfz', title: t('topics.kfz', 'KFZ-Fahrzeuge'), href: '/kfz', image: assetUrl('Fotolia_8654128_XS.jpg') },
|
{ id: 'kfz', title: t('topics.kfz', 'KFZ-Fahrzeuge'), href: '/kfz', image: assetUrl('Fotolia_8654128_XS.jpg') },
|
||||||
{ id: 'sach', title: t('topics.sach', 'Sachversicherung'), href: '/sachversicherung', image: assetUrl('iStock-943842590.jpg') },
|
{ id: 'sach', title: t('topics.sach', 'Sachversicherung'), href: '/sachversicherung', image: assetUrl('iStock-897545934.jpg') },
|
||||||
{ id: 'gesundheit', title: t('topics.gesundheit', 'Gesundheitsvorsorge'), href: '/gesundheitsvorsorge', image: assetUrl('iStock-819100588.jpg') },
|
{ id: 'gesundheit', title: t('topics.gesundheit', 'Gesundheitsvorsorge'), href: '/gesundheitsvorsorge', image: assetUrl('iStock-819100588.jpg') },
|
||||||
{ id: 'vermoegen', title: t('topics.vermoegen', 'Vermögenssicherung'), href: '/vermoegenssicherung', image: assetUrl('iStock-495809266.jpg') },
|
{ id: 'vermoegen', title: t('topics.vermoegen', 'Vermögenssicherung'), href: '/vermoegenssicherung', image: assetUrl('iStock-495809266.jpg') },
|
||||||
{ id: 'risiko', title: t('topics.risiko', 'Risikoschutz'), href: '/risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
{ id: 'risiko', title: t('topics.risiko', 'Risikoschutz'), href: '/risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
||||||
@ -193,7 +193,7 @@ const Privatkunden = () => {
|
|||||||
<div className="grid grid-cols-1 gap-2">
|
<div className="grid grid-cols-1 gap-2">
|
||||||
{[
|
{[
|
||||||
{ title: t('details.sach.hausratversicherung', 'Hausratversicherung'), href: '/hausratversicherung' },
|
{ title: t('details.sach.hausratversicherung', 'Hausratversicherung'), href: '/hausratversicherung' },
|
||||||
{ title: t('details.sach.wohngebaeudeversicherung', 'Wohngebäudeversicherung'), href: '/hausrat' },
|
{ title: t('details.sach.wohngebaeudeversicherung', 'Wohngebäudeversicherung'), href: '/wohngebaeudeversicherung' },
|
||||||
{ title: t('details.sach.unfallversicherung', 'Unfallversicherung'), href: '/unfall' }
|
{ title: t('details.sach.unfallversicherung', 'Unfallversicherung'), href: '/unfall' }
|
||||||
].map((link) => (
|
].map((link) => (
|
||||||
<Link
|
<Link
|
||||||
@ -242,7 +242,7 @@ const Privatkunden = () => {
|
|||||||
{[
|
{[
|
||||||
{ title: t('details.vermoegen.lebensversicherung', 'Lebensversicherung'), href: '/finanzen' },
|
{ title: t('details.vermoegen.lebensversicherung', 'Lebensversicherung'), href: '/finanzen' },
|
||||||
{ title: t('details.vermoegen.risikolebensversicherung', 'Risikolebensversicherung'), href: '/finanzen' },
|
{ title: t('details.vermoegen.risikolebensversicherung', 'Risikolebensversicherung'), href: '/finanzen' },
|
||||||
{ title: t('details.vermoegen.wohngebaeudeversicherung', 'Wohngebäudeversicherung'), href: '/hausrat' }
|
{ title: t('details.vermoegen.wohngebaeudeversicherung', 'Wohngebäudeversicherung'), href: '/wohngebaeudeversicherung' }
|
||||||
].map((link) => (
|
].map((link) => (
|
||||||
<Link
|
<Link
|
||||||
key={`${link.href}-${link.title}`}
|
key={`${link.href}-${link.title}`}
|
||||||
|
|||||||
@ -3,6 +3,10 @@ import { Link } from 'react-router-dom';
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import { Card } from '@/components/ui/card';
|
import { Card } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
import { Shield, Clock, Users, DollarSign, TrendingUp, MapPin, Phone } from 'lucide-react';
|
||||||
|
import ChatbotHint from '@/components/ChatbotHint';
|
||||||
|
|
||||||
const Sachversicherung = () => {
|
const Sachversicherung = () => {
|
||||||
const { t } = useTranslation('sachversicherung');
|
const { t } = useTranslation('sachversicherung');
|
||||||
@ -13,27 +17,27 @@ const Sachversicherung = () => {
|
|||||||
{
|
{
|
||||||
title: t('topics.hausrat', 'Hausratversicherung'),
|
title: t('topics.hausrat', 'Hausratversicherung'),
|
||||||
href: '/hausratversicherung',
|
href: '/hausratversicherung',
|
||||||
image: assetUrl('iStock-943842590.jpg')
|
image: assetUrl('iStock-482694353.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t('topics.wohngebaeude', 'Wohngebäudeversicherung'),
|
title: t('topics.wohngebaeude', 'Wohngebäudeversicherung'),
|
||||||
href: '/hausrat',
|
href: '/wohngebaeudeversicherung',
|
||||||
image: assetUrl('iStock-495809266.jpg')
|
image: assetUrl('iStock-928087944.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t('topics.haftpflicht', 'Haftpflichtversicherung'),
|
title: t('topics.haftpflicht', 'Haftpflichtversicherung'),
|
||||||
href: '/haftpflichtversicherung',
|
href: '/haftpflichtversicherung',
|
||||||
image: assetUrl('Fotolia_67327775_XS.jpg')
|
image: assetUrl('iStock-638637534.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t('topics.tiere', 'Tierversicherung'),
|
title: t('topics.tiere', 'Tierversicherung'),
|
||||||
href: '/tierversicherung',
|
href: '/tierversicherung',
|
||||||
image: assetUrl('iStock-970876204.jpg')
|
image: assetUrl('Kunden Fotos/Facebook- i_jasinski.png')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t('topics.rechtsschutz', 'Rechtsschutzversicherung'),
|
title: t('topics.rechtsschutz', 'Rechtsschutzversicherung'),
|
||||||
href: '/rechtsschutzversicherung',
|
href: '/rechtsschutzversicherung',
|
||||||
image: assetUrl('iStock-957363908.jpg')
|
image: assetUrl('iStock-1067720324.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t('topics.elektro', 'Elektrogeräteversicherung'),
|
title: t('topics.elektro', 'Elektrogeräteversicherung'),
|
||||||
@ -44,24 +48,38 @@ const Sachversicherung = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="min-h-screen bg-white">
|
<HeroSlider
|
||||||
{/* Header */}
|
persistKey="sachversicherung"
|
||||||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 py-16">
|
slides={[
|
||||||
<div className="container mx-auto px-4">
|
{
|
||||||
<div className="max-w-4xl mx-auto text-center">
|
id: 'sachversicherung-1',
|
||||||
<h1 className="text-4xl font-bold text-gray-900 mb-6">
|
kicker: t('hero.kicker', 'Haus & Wohnung'),
|
||||||
{t('hero.title', 'Sachversicherung')}
|
title: t('hero.title', 'Sachversicherung'),
|
||||||
</h1>
|
subtitle: t('hero.subtitle', 'Schutz für Ihr Hab und Gut - von Hausrat bis Immobilie'),
|
||||||
<p className="text-xl text-gray-600 mb-8">
|
imageUrl: assetUrl('iStock-897545934.jpg'),
|
||||||
{t('hero.subtitle', 'Schutz für Ihr Hab und Gut - von Hausrat bis Immobilie')}
|
imagePosition: 'center 70%',
|
||||||
</p>
|
ctas: [
|
||||||
</div>
|
{ label: t('hero.primaryCta', 'Beratung'), href: '/contact' },
|
||||||
</div>
|
{ label: t('hero.secondaryCta', 'Leistungen'), href: '/leistungen' },
|
||||||
</div>
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="bg-gray-50">
|
||||||
|
|
||||||
{/* Kacheln */}
|
{/* Kacheln */}
|
||||||
<div className="container mx-auto px-4 py-12">
|
<div className="container mx-auto px-4 py-12">
|
||||||
<div className="max-w-6xl mx-auto">
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<div className="text-center mb-10">
|
||||||
|
<div className="text-3xl md:text-4xl font-bold text-gray-900">
|
||||||
|
{t('tiles.title', 'Unsere Sachversicherungen')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 text-gray-600">
|
||||||
|
{t('tiles.subtitle', 'Wählen Sie den passenden Schutz für Haus, Wohnung und Alltag.')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
{topics.map((topic, index) => (
|
{topics.map((topic, index) => (
|
||||||
<Link key={index} to={topic.href}>
|
<Link key={index} to={topic.href}>
|
||||||
@ -70,7 +88,7 @@ const Sachversicherung = () => {
|
|||||||
<img
|
<img
|
||||||
src={topic.image}
|
src={topic.image}
|
||||||
alt={topic.title}
|
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.081]"
|
||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
<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="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||||||
@ -81,6 +99,137 @@ const Sachversicherung = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-14">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-3xl md:text-4xl font-bold text-gray-900">
|
||||||
|
{t('benefits.title', 'Ihre Vorteile als Privatkunde')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 text-gray-600">
|
||||||
|
{t(
|
||||||
|
'benefits.subtitle',
|
||||||
|
'Wir bieten Ihnen maßgeschneiderte Lösungen für Ihre persönliche Absicherung'
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 rounded-2xl border bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm">
|
||||||
|
<div className="grid gap-6 p-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<Shield className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefits.items.protection.title', 'Umfassender Schutz')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefits.items.protection.text', 'Für alle Lebensbereiche')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<Users className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefits.items.family.title', 'Familienfreundlich')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefits.items.family.text', 'Optimale Lösungen für Familien')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<TrendingUp className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefits.items.optimization.title', 'Vertragsoptimierung')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefits.items.optimization.text', 'Bestehende Verträge verbessern')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<Clock className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefits.items.fasthelp.title', 'Schnelle Hilfe')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefits.items.fasthelp.text', 'Rasche Schadenabwicklung')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<DollarSign className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefits.items.costs.title', 'Transparente Kosten')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefits.items.costs.text', 'Keine versteckten Gebühren')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
||||||
|
<MapPin className="h-6 w-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">
|
||||||
|
{t('benefits.items.local.title', 'Persönliche Betreuung')}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-600">
|
||||||
|
{t('benefits.items.local.text', 'Vor Ort in Ihrer Nähe')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-10 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-10 text-white shadow-lg">
|
||||||
|
<div className="mx-auto max-w-4xl text-center">
|
||||||
|
<div className="text-3xl md:text-4xl font-bold">
|
||||||
|
{t('cta.title', 'Kontaktieren Sie uns')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 text-white/90">
|
||||||
|
{t(
|
||||||
|
'cta.subtitle',
|
||||||
|
'Lassen Sie sich unverbindlich zu Ihren Privatkunden-Lösungen beraten.'
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
||||||
|
<Button asChild variant="secondary" className="w-full sm:w-auto">
|
||||||
|
<a href="tel:+49">
|
||||||
|
<span className="inline-flex items-center gap-2">
|
||||||
|
<Phone className="h-4 w-4" />
|
||||||
|
{t('cta.call', 'Jetzt anrufen')}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button asChild className="w-full sm:w-auto bg-white text-blue-700 hover:bg-white/90">
|
||||||
|
<Link to="/contact">{t('cta.contact', 'Kontaktformular')}</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -2,11 +2,13 @@ import React, { useState, useEffect } from 'react';
|
|||||||
import { Link, useNavigate } from 'react-router-dom';
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Shield, Users, TrendingUp, Clock, DollarSign, MapPin, Phone, Mail } from 'lucide-react';
|
import { Shield, Users, TrendingUp, Clock, DollarSign, MapPin, Phone, Mail, ArrowRight, CheckCircle, Bot, MessageCircle } from 'lucide-react';
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import ChatbotHint from '@/components/ChatbotHint';
|
||||||
|
|
||||||
type FocusTopicId = 'health' | 'risk' | 'retirement' | 'funeral';
|
type FocusTopicId = 'health' | 'risk' | 'retirement';
|
||||||
|
|
||||||
const Senioren = () => {
|
const Senioren = () => {
|
||||||
const { t } = useTranslation('senioren');
|
const { t } = useTranslation('senioren');
|
||||||
@ -20,7 +22,6 @@ const Senioren = () => {
|
|||||||
{ id: 'health' as const, title: t('focus.items.health', 'Gesundheitsvorsorge'), href: '/senioren-gesundheitsvorsorge', image: assetUrl('iStock-957363908.jpg') },
|
{ id: 'health' as const, title: t('focus.items.health', 'Gesundheitsvorsorge'), href: '/senioren-gesundheitsvorsorge', image: assetUrl('iStock-957363908.jpg') },
|
||||||
{ id: 'risk' as const, title: t('focus.items.risk', 'Risikoschutz'), href: '/senioren-risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
{ id: 'risk' as const, title: t('focus.items.risk', 'Risikoschutz'), href: '/senioren-risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
||||||
{ id: 'retirement' as const, title: t('focus.items.retirement', 'Altersvorsorge'), href: '/senioren-altersvorsorge', image: assetUrl('Fotolia_67327775_XS.jpg') },
|
{ id: 'retirement' as const, title: t('focus.items.retirement', 'Altersvorsorge'), href: '/senioren-altersvorsorge', image: assetUrl('Fotolia_67327775_XS.jpg') },
|
||||||
{ id: 'funeral' as const, title: t('focus.items.funeral', 'Sterbegeldversicherung'), href: '/senioren-sterbegeldversicherung', image: assetUrl('iStock-939772870.jpg') },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
setFocusTopics(
|
setFocusTopics(
|
||||||
@ -56,15 +57,6 @@ const Senioren = () => {
|
|||||||
{ title: 'Betriebliche Altersvorsorge', href: '/senioren-altersvorsorge' },
|
{ title: 'Betriebliche Altersvorsorge', href: '/senioren-altersvorsorge' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const funeralLinksRaw = t('details.funeral.links', { returnObjects: true }) as unknown;
|
|
||||||
const funeralLinks = Array.isArray(funeralLinksRaw)
|
|
||||||
? (funeralLinksRaw as Array<{ title: string; href: string }>)
|
|
||||||
: [
|
|
||||||
{ title: 'Sterbegeldversicherung', href: '/senioren-sterbegeldversicherung' },
|
|
||||||
{ title: 'Bestattungsvorsorge', href: '/senioren-sterbegeldversicherung' },
|
|
||||||
{ title: 'Risikolebensversicherung', href: '/senioren-sterbegeldversicherung' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const benefitsRaw = t('benefits.items', { returnObjects: true }) as unknown;
|
const benefitsRaw = t('benefits.items', { returnObjects: true }) as unknown;
|
||||||
const benefits = Array.isArray(benefitsRaw) ? (benefitsRaw as Array<{ title: string; desc: string }>) : [];
|
const benefits = Array.isArray(benefitsRaw) ? (benefitsRaw as Array<{ title: string; desc: string }>) : [];
|
||||||
const benefitIcons = [Shield, Users, TrendingUp, Clock, DollarSign, MapPin];
|
const benefitIcons = [Shield, Users, TrendingUp, Clock, DollarSign, MapPin];
|
||||||
@ -156,7 +148,7 @@ const Senioren = () => {
|
|||||||
<div className="grid grid-cols-1 gap-2">
|
<div className="grid grid-cols-1 gap-2">
|
||||||
{riskLinks.map((link) => (
|
{riskLinks.map((link) => (
|
||||||
<Link
|
<Link
|
||||||
key={link.href}
|
key={`${link.href}-${link.title}`}
|
||||||
to={link.href}
|
to={link.href}
|
||||||
className="text-blue-600 hover:text-blue-800 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
|
className="text-blue-600 hover:text-blue-800 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
@ -176,7 +168,7 @@ const Senioren = () => {
|
|||||||
<div className="grid grid-cols-1 gap-2">
|
<div className="grid grid-cols-1 gap-2">
|
||||||
{retirementLinks.map((link) => (
|
{retirementLinks.map((link) => (
|
||||||
<Link
|
<Link
|
||||||
key={link.href}
|
key={`${link.href}-${link.title}`}
|
||||||
to={link.href}
|
to={link.href}
|
||||||
className="text-blue-600 hover:text-blue-800 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
|
className="text-blue-600 hover:text-blue-800 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
@ -188,29 +180,133 @@ const Senioren = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Zusätzliche Links unter dem Bild für Sterbegeldversicherung */}
|
<div className="mt-14">
|
||||||
{item.id === 'funeral' && (
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto items-stretch">
|
||||||
<div className="space-y-2">
|
<Card className="overflow-hidden shadow-lg hover:shadow-2xl transition-shadow rounded-2xl flex flex-col h-full">
|
||||||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-3">{detailsLabel}</div>
|
<div className="relative h-44">
|
||||||
<div className="grid grid-cols-1 gap-2">
|
<div
|
||||||
{funeralLinks.map((link) => (
|
className="absolute inset-0 bg-cover bg-center"
|
||||||
<Link
|
style={{ backgroundImage: `url(${assetUrl('iStock-939772870.jpg')})` }}
|
||||||
key={link.href}
|
/>
|
||||||
to={link.href}
|
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" />
|
||||||
className="text-blue-600 hover:text-blue-800 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<span className="w-2 h-2 bg-blue-600 rounded-full mr-2 group-hover:bg-blue-800 transition-colors"></span>
|
|
||||||
{link.title}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
<CardContent className="p-6 flex-1 flex flex-col">
|
||||||
|
<div className="text-xl font-bold text-gray-900">
|
||||||
|
{t('tiles.sterbegeld.title', 'Sterbegeldversicherung')}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mt-2 text-sm text-gray-600">
|
||||||
|
{t(
|
||||||
|
'tiles.sterbegeld.subtitle',
|
||||||
|
'Für Ihre Liebsten vorsorgen: finanzielle Sicherheit im Todesfall.'
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-5 text-sm text-gray-700">
|
||||||
|
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold">
|
||||||
|
{t('tiles.sterbegeld.exampleLabel', 'z.B. Beitragsbeispiel')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-4xl font-bold text-gray-900">
|
||||||
|
{t('tiles.sterbegeld.examplePrice', '40,75€')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-sm text-gray-700">
|
||||||
|
{t('tiles.sterbegeld.exampleDetails', 'pro Monat für 12.500 € Versicherungssumme')}
|
||||||
|
</div>
|
||||||
|
<ul className="mt-2 list-disc pl-5 text-sm text-gray-700">
|
||||||
|
<li>{t('tiles.sterbegeld.bullet1', 'Männer/Frauen: ab 53 Jahre')}</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div className="mt-4 text-xs uppercase tracking-wide text-gray-500 font-semibold">
|
||||||
|
{t('tiles.sterbegeld.detailsLabel', 'Details:')}
|
||||||
|
</div>
|
||||||
|
<ul className="mt-2 space-y-1 text-sm text-gray-700">
|
||||||
|
<li>{t('tiles.sterbegeld.detailsItems.0', 'Sterbegeldversicherung')}</li>
|
||||||
|
<li>{t('tiles.sterbegeld.detailsItems.1', 'Bestattungsvorsorge')}</li>
|
||||||
|
<li>{t('tiles.sterbegeld.detailsItems.2', 'Risikolebensversicherung')}</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="/senioren-sterbegeldversicherung">
|
||||||
|
{t('tiles.sterbegeld.cta', 'Jetzt informieren')}
|
||||||
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<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('head_brennen.jpg')})` }}
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" />
|
||||||
|
</div>
|
||||||
|
<CardContent className="p-6 flex-1 flex flex-col">
|
||||||
|
<div className="text-xl font-bold text-gray-900">
|
||||||
|
{t('tiles.privathaftpflicht.title', 'Privathaftpflicht')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-sm text-gray-600">
|
||||||
|
{t(
|
||||||
|
'tiles.privathaftpflicht.subtitle',
|
||||||
|
'Schutz vor hohen Forderungen im Alltag – für ein sicheres Gefühl.'
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-5 text-sm text-gray-700">
|
||||||
|
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold">
|
||||||
|
{t('tiles.privathaftpflicht.exampleLabel', 'z.B. Beitragsbeispiel')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-4xl font-bold text-gray-900">
|
||||||
|
{t('tiles.privathaftpflicht.examplePrice', '5,57€')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-sm text-gray-700">
|
||||||
|
{t('tiles.privathaftpflicht.exampleDetails', 'pro Monat – Beispieltarif')}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 text-xs uppercase tracking-wide text-gray-500 font-semibold">
|
||||||
|
{t('tiles.privathaftpflicht.detailsLabel', 'Details:')}
|
||||||
|
</div>
|
||||||
|
<ul className="mt-2 space-y-1 text-sm text-gray-700">
|
||||||
|
<li>
|
||||||
|
{t(
|
||||||
|
'tiles.privathaftpflicht.detailsItems.0',
|
||||||
|
'Auslandsaufenthalt innerhalb Europas ohne zeitliche Begrenzung'
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
{t(
|
||||||
|
'tiles.privathaftpflicht.detailsItems.1',
|
||||||
|
'nicht ehelicher Lebenspartner in häuslicher Gemeinschaft'
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
{t(
|
||||||
|
'tiles.privathaftpflicht.detailsItems.2',
|
||||||
|
'Schadenersatz-Rechtsschutz bei Forderungsausfall'
|
||||||
|
)}
|
||||||
|
</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="/haftpflichtversicherung">
|
||||||
|
{t('tiles.privathaftpflicht.cta', 'Jetzt informieren')}
|
||||||
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -259,11 +355,11 @@ const Senioren = () => {
|
|||||||
{t('contact.subtitle', 'Lassen Sie sich unverbindlich zu Ihren Versicherungsmöglichkeiten beraten.')}
|
{t('contact.subtitle', 'Lassen Sie sich unverbindlich zu Ihren Versicherungsmöglichkeiten beraten.')}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
<Button className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 text-lg font-semibold shadow-lg">
|
<Button className="w-full sm:w-64 bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 text-lg font-semibold shadow-lg">
|
||||||
<Phone className="h-5 w-5 mr-2" />
|
<Phone className="h-5 w-5 mr-2" />
|
||||||
{t('contact.primaryCta', 'Jetzt anrufen')}
|
{t('contact.primaryCta', 'Jetzt anrufen')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" className="border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 text-lg font-semibold">
|
<Button variant="outline" className="w-full sm:w-64 border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 text-lg font-semibold">
|
||||||
<Mail className="h-5 w-5 mr-2" />
|
<Mail className="h-5 w-5 mr-2" />
|
||||||
{t('contact.secondaryCta', 'Termin vereinbaren')}
|
{t('contact.secondaryCta', 'Termin vereinbaren')}
|
||||||
</Button>
|
</Button>
|
||||||
@ -272,6 +368,7 @@ const Senioren = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<ChatbotHint />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -60,8 +60,8 @@ const Tierversicherung = () => {
|
|||||||
kicker: 'Tierversicherungen',
|
kicker: 'Tierversicherungen',
|
||||||
title: 'Der beste Schutz für Ihre tierischen Begleiter.',
|
title: 'Der beste Schutz für Ihre tierischen Begleiter.',
|
||||||
subtitle: 'Umfassende Versicherungslösungen für Hunde und Pferde – weil Ihre Familie Ihnen wichtig ist.',
|
subtitle: 'Umfassende Versicherungslösungen für Hunde und Pferde – weil Ihre Familie Ihnen wichtig ist.',
|
||||||
imageUrl: assetUrl('Tiere/head_hund.jpg'),
|
imageUrl: assetUrl('Tiere/misiek.jpeg'),
|
||||||
imagePosition: 'center 5%',
|
imagePosition: 'center 55%',
|
||||||
ctas: [
|
ctas: [
|
||||||
{ label: 'Jetzt beraten lassen', href: '/contact' },
|
{ label: 'Jetzt beraten lassen', href: '/contact' },
|
||||||
{ label: 'Alle Tarife', href: '/tierversicherung' },
|
{ label: 'Alle Tarife', href: '/tierversicherung' },
|
||||||
|
|||||||
@ -28,7 +28,7 @@ const Vermoegenssicherung = () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t('topics.wohngebaeudeversicherung', 'Wohngebäudeversicherung'),
|
title: t('topics.wohngebaeudeversicherung', 'Wohngebäudeversicherung'),
|
||||||
href: '/hausrat',
|
href: '/wohngebaeudeversicherung',
|
||||||
image: assetUrl('iStock-943842590.jpg')
|
image: assetUrl('iStock-943842590.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
444
src/pages/Wohngebaeudeversicherung.tsx
Normal file
444
src/pages/Wohngebaeudeversicherung.tsx
Normal file
@ -0,0 +1,444 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Shield, Home, Star, CheckCircle, Phone, FileText, Calculator, FileCheck, AlertCircle, Users, Building, AlertTriangle, PhoneCall, Clock, Search, Mail } from 'lucide-react';
|
||||||
|
import Layout from '@/components/Layout';
|
||||||
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
|
||||||
|
const Wohngebaeudeversicherung = () => {
|
||||||
|
const { t } = useTranslation('wohngebaeudeversicherung');
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const baseUrl = import.meta.env.BASE_URL;
|
||||||
|
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||||
|
const [activeTab, setActiveTab] = useState('overview');
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
propertySize: '',
|
||||||
|
propertyType: '',
|
||||||
|
currentValue: '',
|
||||||
|
currentInsurer: '',
|
||||||
|
message: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const benefits = [
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: t('benefits.fire.title', 'Feuerschutz'),
|
||||||
|
description: t('benefits.fire.description', 'Absicherung bei Brandschäden und Überspannung')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Home,
|
||||||
|
title: t('benefits.water.title', 'Wasserschutz'),
|
||||||
|
description: t('benefits.water.description', 'Schutz vor Leitungswasserschäden')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: AlertTriangle,
|
||||||
|
title: t('benefits.storm.title', 'Sturm & Hagel'),
|
||||||
|
description: t('benefits.storm.description', 'Abdeckung von wetterbedingten Schäden')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Calculator,
|
||||||
|
title: t('benefits.premium.title', 'Günstige Prämien'),
|
||||||
|
description: t('benefits.premium.description', 'Wettbewerbsfähige Beiträge durch Tarifvergleich')
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
t('services.items.wohngebaeudeversicherung', 'Wohngebäudeversicherung'),
|
||||||
|
t('services.items.feuer', 'Feuerversicherung'),
|
||||||
|
t('services.items.leitungswasser', 'Leitungswasserversicherung'),
|
||||||
|
t('services.items.sturm', 'Sturmversicherung'),
|
||||||
|
t('services.items.elementar', 'Elementarschadenversicherung'),
|
||||||
|
t('services.items.gebaeudehaftpflicht', 'Gebäudehaftpflichtversicherung')
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleFormChange = (
|
||||||
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
||||||
|
) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
alert(t('form.submitAlert', 'Vielen Dank! Wir melden uns kurzfristig bei dir.'));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<HeroSlider
|
||||||
|
slides={[
|
||||||
|
{
|
||||||
|
id: 'wohngebaeude-1',
|
||||||
|
kicker: t('hero.kicker', 'Haus & Wohnung'),
|
||||||
|
title: t('hero.title', 'Wohngebäudeversicherung'),
|
||||||
|
subtitle: t('hero.subtitle', 'Schutz für Ihre Immobilie – für Eigentümer, Vermieter und Selbstnutzer.'),
|
||||||
|
imageUrl: assetUrl('iStock-928087944.jpg'),
|
||||||
|
imagePosition: 'center',
|
||||||
|
ctas: [
|
||||||
|
{ label: t('hero.primaryCta', 'Angebot anfordern'), href: '#form' },
|
||||||
|
{ label: t('hero.secondaryCta', 'Beratung'), href: '/contact' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
<div className="container mx-auto px-4 md:px-6 py-8">
|
||||||
|
<div className="max-w-screen-2xl mx-auto">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
|
||||||
|
{t('pageTitle', 'Wohngebäudeversicherung')}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||||
|
<Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
|
||||||
|
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||||||
|
<TabsList className="flex flex-nowrap gap-2 w-full h-auto bg-transparent border-0 shadow-none overflow-x-auto">
|
||||||
|
<TabsTrigger
|
||||||
|
value="overview"
|
||||||
|
className="relative whitespace-nowrap 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"
|
||||||
|
>
|
||||||
|
<Home className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.overview', 'Übersicht')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="details"
|
||||||
|
className="relative whitespace-nowrap 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="calculator"
|
||||||
|
className="relative whitespace-nowrap 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="form"
|
||||||
|
className="relative whitespace-nowrap 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="claims"
|
||||||
|
className="relative whitespace-nowrap 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"
|
||||||
|
>
|
||||||
|
<AlertCircle className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.claims', 'Schaden')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="catalog"
|
||||||
|
className="relative whitespace-nowrap 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', 'Infothek')}
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 md:p-6">
|
||||||
|
<TabsContent value="overview" className="mt-0">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
||||||
|
<div>
|
||||||
|
<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">
|
||||||
|
<Star className="w-4 h-4" />
|
||||||
|
<span>{t('overview.badge', 'Schutz für Ihr Gebäude')}</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||||
|
{t('overview.title', 'Wohngebäudeversicherung')}
|
||||||
|
<span className="block text-blue-700">{t('overview.titleHighlight', 'Sicherheit für Ihre Immobilie')}</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-4 text-gray-600 text-lg">
|
||||||
|
{t(
|
||||||
|
'overview.description',
|
||||||
|
'Schutz vor Feuer, Leitungswasser, Sturm und Hagel. Wir vergleichen Tarife und finden den passenden Schutz für Ihr Zuhause.'
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||||
|
<Button onClick={() => setActiveTab('form')} className="w-full sm:w-auto bg-blue-700 hover:bg-blue-800">
|
||||||
|
{t('overview.ctaPrimary', 'Angebot anfordern')}
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" onClick={() => navigate('/contact')} className="w-full sm:w-auto border-gray-300">
|
||||||
|
{t('overview.ctaSecondary', '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">
|
||||||
|
<Shield className="w-5 h-5 text-blue-700" />
|
||||||
|
<div className="text-sm">
|
||||||
|
<div className="font-semibold text-gray-900">{t('overview.features.cover.title', 'Vollschutz')}</div>
|
||||||
|
<div className="text-gray-600">{t('overview.features.cover.text', 'alle Risiken abgedeckt')}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||||
|
<Building className="w-5 h-5 text-blue-700" />
|
||||||
|
<div className="text-sm">
|
||||||
|
<div className="font-semibold text-gray-900">{t('overview.features.building.title', 'Gebäude & Co.')}</div>
|
||||||
|
<div className="text-gray-600">{t('overview.features.building.text', 'bis zur Neuwertsumme')}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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-928087944.jpg')}
|
||||||
|
alt="Wohngebäudeversicherung"
|
||||||
|
className="w-full h-[320px] 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">
|
||||||
|
<Building className="w-4 h-4" />
|
||||||
|
<span>{t('overview.imageMeta', 'Eigentümer, Vermieter, Selbstnutzer')}</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-sm text-gray-600">
|
||||||
|
{t('overview.imageText', 'Tarifcheck – schnell, fair und passend zu deinem Bedarf.')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 mb-4">{t('overview.quick.title', 'Kurz & klar')}</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-blue-700" />
|
||||||
|
{t('overview.quick.c1.title', 'Empfehlenswert')}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>{t('overview.quick.c1.text', 'Für jeden Eigentümer wichtig.')}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<Calculator className="w-4 h-4 text-blue-700" />
|
||||||
|
{t('overview.quick.c2.title', 'Vergleich lohnt sich')}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>{t('overview.quick.c2.text', 'Beiträge & Leistungen variieren stark.')}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<PhoneCall className="w-4 h-4 text-blue-700" />
|
||||||
|
{t('overview.quick.c3.title', 'Hilfe im Schadenfall')}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>{t('overview.quick.c3.text', 'Klare Schritte & Kontaktmöglichkeiten.')}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="details" className="mt-0">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">{t('details.title', 'Details & Vorteile')}</h3>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
{t(
|
||||||
|
'details.description',
|
||||||
|
'Die Wohngebäudeversicherung schützt Ihr Gebäude vor Feuer, Wasser, Sturm und Hagel. Wir helfen Ihnen, den richtigen Schutzsumme und Tarif zu finden.'
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{benefits.map((benefit, index) => {
|
||||||
|
const Icon = benefit.icon;
|
||||||
|
return (
|
||||||
|
<Card key={index} className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<Icon className="h-5 w-5 text-blue-700" />
|
||||||
|
{benefit.title}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="text-gray-600">{benefit.description}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8">
|
||||||
|
<h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.servicesTitle', 'Leistungen (Auszug)')}</h4>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
{services.map((service, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-3"
|
||||||
|
>
|
||||||
|
<CheckCircle className="h-5 w-5 text-blue-700 mt-0.5 flex-shrink-0" />
|
||||||
|
<p className="text-gray-700">{service}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">{t('details.tipTitle', 'Tipp')}</CardTitle>
|
||||||
|
<CardDescription>{t('details.tipDescription', 'Deckungssumme prüfen.')}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-sm text-gray-700">
|
||||||
|
{t(
|
||||||
|
'details.tipContent',
|
||||||
|
'Achte auf ausreichende Versicherungssumme (ca. 650-750 €/m²) und optionalen Übergangsschutz bei Umzug.'
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="calculator" className="mt-0">
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">{t('calculator.title', 'Wohngebäude-Rechner')}</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
{t('calculator.description', 'Schätzen Sie Ihre Prämie – unverbindlich und schnell.')}
|
||||||
|
</p>
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardContent className="p-6 space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">{t('calculator.sizeLabel', 'Gebäudegröße (m²)')}</label>
|
||||||
|
<input type="number" className="w-full border border-gray-300 rounded-lg px-3 py-2" placeholder={t('calculator.sizePlaceholder', 'z.B. 120')} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">{t('calculator.yearLabel', 'Baujahr')}</label>
|
||||||
|
<input type="number" className="w-full border border-gray-300 rounded-lg px-3 py-2" placeholder={t('calculator.yearPlaceholder', 'z.B. 2000')} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button className="w-full bg-blue-700 hover:bg-blue-800">{t('calculator.button', 'Jetzt berechnen')}</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="form" className="mt-0">
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<h3 id="form" className="text-2xl font-bold text-gray-900 mb-4">{t('form.title', 'Anfrage')}</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
{t('form.description', 'Senden Sie uns Ihre Details – wir erstellen ein passendes Angebot.')}
|
||||||
|
</p>
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">{t('form.nameLabel', 'Name')}</label>
|
||||||
|
<input type="text" name="name" value={formData.name} onChange={handleFormChange} className="w-full border border-gray-300 rounded-lg px-3 py-2" required />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">{t('form.phoneLabel', 'Telefon')}</label>
|
||||||
|
<input type="tel" name="phone" value={formData.phone} onChange={handleFormChange} className="w-full border border-gray-300 rounded-lg px-3 py-2" required />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">{t('form.emailLabel', 'E-Mail')}</label>
|
||||||
|
<input type="email" name="email" value={formData.email} onChange={handleFormChange} className="w-full border border-gray-300 rounded-lg px-3 py-2" required />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">{t('form.messageLabel', 'Nachricht')}</label>
|
||||||
|
<textarea name="message" value={formData.message} onChange={handleFormChange} rows={4} className="w-full border border-gray-300 rounded-lg px-3 py-2" />
|
||||||
|
</div>
|
||||||
|
<Button type="submit" className="w-full bg-blue-700 hover:bg-blue-800">{t('form.button', 'Anfrage senden')}</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="claims" className="mt-0">
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">{t('claims.title', 'Schadenmeldung')}</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
{t('claims.description', 'Schnelle Hilfe im Schadenfall – melden Sie uns den Vorfall.')}
|
||||||
|
</p>
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<PhoneCall className="w-5 h-5 text-blue-700" />
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">{t('claims.hotline', 'Hotline')}</div>
|
||||||
|
<div className="text-sm text-gray-600">{t('claims.hotlineHours', 'Mo–Fr 8–18 Uhr')}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Mail className="w-5 h-5 text-blue-700" />
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-gray-900">{t('claims.email', 'E-Mail')}</div>
|
||||||
|
<div className="text-sm text-gray-600">{t('claims.emailAddress', 'schaden@mizera.de')}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button className="w-full bg-blue-700 hover:bg-blue-800">{t('claims.button', 'Schaden melden')}</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="catalog" className="mt-0">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">{t('catalog.title', 'Infothek')}</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
{t('catalog.description', 'Wissenswertes zur Wohngebäudeversicherung.')}
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">{t('catalog.guideTitle', 'Leitfaden')}</CardTitle>
|
||||||
|
<CardDescription>{t('catalog.guideDescription', 'Worauf achten?')}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-sm text-gray-700">
|
||||||
|
{t('catalog.guideContent', 'Deckungssumme, Selbstbeteiligung, Risikoausschlüsse.')}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">{t('catalog.checklistTitle', 'Checkliste')}</CardTitle>
|
||||||
|
<CardDescription>{t('catalog.checklistDescription', 'Vergleichskriterien')}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-sm text-gray-700">
|
||||||
|
{t('catalog.checklistContent', 'Preis, Leistungen, Service, Schadenabwicklung.')}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<GeneralNotice />
|
||||||
|
</div>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Wohngebaeudeversicherung;
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useMemo, useState } from 'react';
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
@ -14,6 +14,12 @@ const Haftpflicht = () => {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const baseUrl = import.meta.env.BASE_URL;
|
const baseUrl = import.meta.env.BASE_URL;
|
||||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||||
|
const pdfChecklistUrl = `${baseUrl}PDF/102.0031.91.pdf`;
|
||||||
|
const [pdfPage, setPdfPage] = useState(2);
|
||||||
|
const pdfViewerUrl = useMemo(() => {
|
||||||
|
const page = pdfPage === 1 ? 1 : 2;
|
||||||
|
return `${pdfChecklistUrl}#page=${page}`;
|
||||||
|
}, [pdfChecklistUrl, pdfPage]);
|
||||||
const [activeTab, setActiveTab] = useState('overview');
|
const [activeTab, setActiveTab] = useState('overview');
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
name: '',
|
name: '',
|
||||||
@ -27,19 +33,35 @@ const Haftpflicht = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const benefits = [
|
const benefits = [
|
||||||
{ icon: Shield, title: 'Personenschutz', description: 'Schutz vor Schadenersatzforderungen' },
|
{
|
||||||
{ icon: Users, title: 'Familienschutz', description: 'Kinder und Partner mitversichert' },
|
icon: Shield,
|
||||||
{ icon: AlertTriangle, title: 'Weltweiter Schutz', description: 'Gilt weltweit für private Risiken' },
|
title: t('benefits.items.personal.title', 'Personenschutz'),
|
||||||
{ icon: Calculator, title: 'Günstige Prämien', description: 'Wettbewerbsfähige Beiträge durch Tarifvergleich' }
|
description: t('benefits.items.personal.description', 'Schutz vor Schadenersatzforderungen'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: t('benefits.items.family.title', 'Familienschutz'),
|
||||||
|
description: t('benefits.items.family.description', 'Kinder und Partner mitversichert'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: AlertTriangle,
|
||||||
|
title: t('benefits.items.worldwide.title', 'Weltweiter Schutz'),
|
||||||
|
description: t('benefits.items.worldwide.description', 'Gilt weltweit für private Risiken'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Calculator,
|
||||||
|
title: t('benefits.items.premium.title', 'Günstige Prämien'),
|
||||||
|
description: t('benefits.items.premium.description', 'Wettbewerbsfähige Beiträge durch Tarifvergleich'),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const services = [
|
const services = [
|
||||||
'Private Haftpflichtversicherung',
|
t('services.items.private', 'Private Haftpflichtversicherung'),
|
||||||
'Familien-Haftpflichtversicherung',
|
t('services.items.family', 'Familien-Haftpflichtversicherung'),
|
||||||
'Betriebshaftpflichtversicherung',
|
t('services.items.business', 'Betriebshaftpflichtversicherung'),
|
||||||
'Vermieterhaftpflichtversicherung',
|
t('services.items.landlord', 'Vermieterhaftpflichtversicherung'),
|
||||||
'Tierhalterhaftpflichtversicherung',
|
t('services.items.petOwner', 'Tierhalterhaftpflichtversicherung'),
|
||||||
'Berufshaftpflichtversicherung'
|
t('services.items.professional', 'Berufshaftpflichtversicherung'),
|
||||||
];
|
];
|
||||||
|
|
||||||
const handleFormChange = (
|
const handleFormChange = (
|
||||||
@ -54,7 +76,7 @@ const Haftpflicht = () => {
|
|||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
alert('Vielen Dank! Wir melden uns kurzfristig bei dir.');
|
alert(t('form.submitAlert', 'Vielen Dank! Wir melden uns kurzfristig bei dir.'));
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -83,47 +105,48 @@ const Haftpflicht = () => {
|
|||||||
{t('pageTitle', 'Haftpflichtversicherung')}
|
{t('pageTitle', 'Haftpflichtversicherung')}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||||
<Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
|
<Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
|
||||||
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
<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-1 md:grid-cols-2 lg:grid-cols-3 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
<TabsList className="flex flex-nowrap gap-2 w-full h-auto bg-transparent border-0 shadow-none overflow-x-auto">
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="overview"
|
value="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"
|
className="relative whitespace-nowrap 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"
|
||||||
>
|
>
|
||||||
<Home className="w-4 h-4 mr-1.5" />
|
<Home className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.overview', 'Übersicht')}
|
{t('tabs.overview', 'Übersicht')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="details"
|
value="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"
|
className="relative whitespace-nowrap 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" />
|
<FileText className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.details', 'Details')}
|
{t('tabs.details', 'Details')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="form"
|
value="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"
|
className="relative whitespace-nowrap 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" />
|
<Phone className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.form', 'Anfrage')}
|
{t('tabs.form', 'Anfrage')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="calculator"
|
value="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"
|
className="relative whitespace-nowrap 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" />
|
<Calculator className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.calculator', 'Haftpflicht-Rechner')}
|
{t('tabs.calculator', 'Haftpflicht-Rechner')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="claims"
|
value="claims"
|
||||||
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"
|
className="relative whitespace-nowrap 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"
|
||||||
>
|
>
|
||||||
<AlertCircle className="w-4 h-4 mr-1.5" />
|
<AlertCircle className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.claims', 'Schadenmeldung!')}
|
{t('tabs.claims', 'Schadenmeldung!')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="catalog"
|
value="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"
|
className="relative whitespace-nowrap 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" />
|
<FileCheck className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.catalog', 'Infothek')}
|
{t('tabs.catalog', 'Infothek')}
|
||||||
@ -137,23 +160,25 @@ const Haftpflicht = () => {
|
|||||||
<div>
|
<div>
|
||||||
<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">
|
<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">
|
||||||
<Star className="w-4 h-4" />
|
<Star className="w-4 h-4" />
|
||||||
<span>Essentieller Schutz für jeden</span>
|
<span>{t('overview.badge', 'Essentieller Schutz für jeden')}</span>
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||||
Haftpflichtversicherung
|
{t('overview.title', 'Haftpflichtversicherung')}
|
||||||
<span className="block text-blue-700">Sicherheit vor Schadenersatzforderungen</span>
|
<span className="block text-blue-700">{t('overview.titleHighlight', 'Sicherheit vor Schadenersatzforderungen')}</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className="mt-4 text-gray-600 text-lg">
|
<p className="mt-4 text-gray-600 text-lg">
|
||||||
Schutz vor finanziellen Folgen bei Personen-, Sach- und Vermögensschäden.
|
{t(
|
||||||
Wir vergleichen Tarife und finden den passenden Schutz für Sie und Ihre Familie.
|
'overview.description',
|
||||||
|
'Schutz vor finanziellen Folgen bei Personen-, Sach- und Vermögensschäden. Wir vergleichen Tarife und finden den passenden Schutz für Sie und Ihre Familie.'
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||||
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
||||||
Angebot anfordern
|
{t('overview.ctaPrimary', 'Angebot anfordern')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
|
<Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
|
||||||
Beratung
|
{t('overview.ctaSecondary', 'Beratung')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -161,15 +186,15 @@ const Haftpflicht = () => {
|
|||||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||||
<Shield className="w-5 h-5 text-blue-700" />
|
<Shield className="w-5 h-5 text-blue-700" />
|
||||||
<div className="text-sm">
|
<div className="text-sm">
|
||||||
<div className="font-semibold text-gray-900">Millionenschutz</div>
|
<div className="font-semibold text-gray-900">{t('overview.features.cover.title', 'Millionenschutz')}</div>
|
||||||
<div className="text-gray-600">bis 100 Mio. € Deckung</div>
|
<div className="text-gray-600">{t('overview.features.cover.text', 'bis 100 Mio. € Deckung')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||||
<Users className="w-5 h-5 text-blue-700" />
|
<Users className="w-5 h-5 text-blue-700" />
|
||||||
<div className="text-sm">
|
<div className="text-sm">
|
||||||
<div className="font-semibold text-gray-900">Familienschutz</div>
|
<div className="font-semibold text-gray-900">{t('overview.features.family.title', 'Familienschutz')}</div>
|
||||||
<div className="text-gray-600">Partner & Kinder inklusive</div>
|
<div className="text-gray-600">{t('overview.features.family.text', 'Partner & Kinder inklusive')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -180,7 +205,7 @@ const Haftpflicht = () => {
|
|||||||
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||||||
<img
|
<img
|
||||||
src={assetUrl('iStock-638637534.jpg')}
|
src={assetUrl('iStock-638637534.jpg')}
|
||||||
alt="Haftpflichtversicherung"
|
alt={t('overview.imageAlt', 'Haftpflichtversicherung')}
|
||||||
className="w-full h-[320px] object-cover"
|
className="w-full h-[320px] object-cover"
|
||||||
onError={(e) => {
|
onError={(e) => {
|
||||||
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
||||||
@ -189,10 +214,10 @@ const Haftpflicht = () => {
|
|||||||
<div className="p-5">
|
<div className="p-5">
|
||||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
<Users className="w-4 h-4" />
|
<Users className="w-4 h-4" />
|
||||||
<span>Einzel-, Familien-, Gewerbe</span>
|
<span>{t('overview.sideMeta', 'Einzel-, Familien-, Gewerbe')}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2 text-sm text-gray-600">
|
<div className="mt-2 text-sm text-gray-600">
|
||||||
Tarifcheck – schnell, fair und passend zu deinem Bedarf.
|
{t('overview.sideText', 'Tarifcheck – schnell, fair und passend zu deinem Bedarf.')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -200,33 +225,33 @@ const Haftpflicht = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
|
<div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
|
||||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
|
<h3 className="text-xl font-bold text-gray-900 mb-4">{t('overview.quick.title', 'Kurz & klar')}</h3>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-base flex items-center gap-2">
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
<CheckCircle className="w-4 h-4 text-blue-700" />
|
<CheckCircle className="w-4 h-4 text-blue-700" />
|
||||||
Unverzichtbar
|
{t('overview.quick.cards.essential.title', 'Unverzichtbar')}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>Für jeden Menschen wichtig.</CardDescription>
|
<CardDescription>{t('overview.quick.cards.essential.text', 'Für jeden Menschen wichtig.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
</Card>
|
</Card>
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-base flex items-center gap-2">
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
<Calculator className="w-4 h-4 text-blue-700" />
|
<Calculator className="w-4 h-4 text-blue-700" />
|
||||||
Günstig
|
{t('overview.quick.cards.affordable.title', 'Günstig')}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>Bereits ab wenigen Euro pro Monat.</CardDescription>
|
<CardDescription>{t('overview.quick.cards.affordable.text', 'Bereits ab wenigen Euro pro Monat.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
</Card>
|
</Card>
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-base flex items-center gap-2">
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
<PhoneCall className="w-4 h-4 text-blue-700" />
|
<PhoneCall className="w-4 h-4 text-blue-700" />
|
||||||
Hilfe im Schadenfall
|
{t('overview.quick.cards.help.title', 'Hilfe im Schadenfall')}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>Klare Schritte & Kontaktmöglichkeiten.</CardDescription>
|
<CardDescription>{t('overview.quick.cards.help.text', 'Klare Schritte & Kontaktmöglichkeiten.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
@ -236,11 +261,12 @@ const Haftpflicht = () => {
|
|||||||
<TabsContent value="details" className="mt-0">
|
<TabsContent value="details" className="mt-0">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
<div className="lg:col-span-2">
|
<div className="lg:col-span-2">
|
||||||
<h3 className="text-2xl font-bold text-gray-900">Details & Vorteile</h3>
|
<h3 className="text-2xl font-bold text-gray-900">{t('details.title', 'Details & Vorteile')}</h3>
|
||||||
<p className="mt-2 text-gray-600">
|
<p className="mt-2 text-gray-600">
|
||||||
Die Haftpflichtversicherung schützt Sie vor finanziellen Folgen, wenn Sie
|
{t(
|
||||||
anderen Personen, Sachschäden oder Vermögensschäden zufügen.
|
'details.intro',
|
||||||
Wir helfen Ihnen, die richtige Deckungssumme und Tarif zu finden.
|
'Die Haftpflichtversicherung schützt Sie vor finanziellen Folgen, wenn Sie anderen Personen, Sachschäden oder Vermögensschäden zufügen. Wir helfen Ihnen, die richtige Deckungssumme und Tarif zu finden.'
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
@ -261,7 +287,7 @@ const Haftpflicht = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-8">
|
<div className="mt-8">
|
||||||
<h4 className="text-lg font-semibold text-gray-900 mb-3">Leistungen (Auszug)</h4>
|
<h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.servicesTitle', 'Leistungen (Auszug)')}</h4>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
{services.map((service, index) => (
|
{services.map((service, index) => (
|
||||||
<div
|
<div
|
||||||
@ -279,12 +305,14 @@ const Haftpflicht = () => {
|
|||||||
<div>
|
<div>
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-lg">Tipp</CardTitle>
|
<CardTitle className="text-lg">{t('details.tip.title', 'Tipp')}</CardTitle>
|
||||||
<CardDescription>Deckungssumme prüfen.</CardDescription>
|
<CardDescription>{t('details.tip.subtitle', 'Deckungssumme prüfen.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="text-sm text-gray-700">
|
<CardContent className="text-sm text-gray-700">
|
||||||
Mindestens 10 Mio. € für Personen- und Sachschäden,
|
{t(
|
||||||
besser 50-100 Mio. € für optimalen Schutz.
|
'details.tip.text',
|
||||||
|
'Mindestens 10 Mio. € für Personen- und Sachschäden, besser 50-100 Mio. € für optimalen Schutz.'
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
@ -294,10 +322,12 @@ const Haftpflicht = () => {
|
|||||||
<TabsContent value="statistics" className="mt-0">
|
<TabsContent value="statistics" className="mt-0">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
<div className="lg:col-span-2">
|
<div className="lg:col-span-2">
|
||||||
<h3 className="text-2xl font-bold text-gray-900">Schadensstatistik</h3>
|
<h3 className="text-2xl font-bold text-gray-900">{t('statistics.title', 'Schadensstatistik')}</h3>
|
||||||
<p className="mt-2 text-gray-600">
|
<p className="mt-2 text-gray-600">
|
||||||
Haftpflichtschäden können jeden treffen. Stolpern, umgefallene Gegenstände
|
{t(
|
||||||
oder Unfälle im Alltag sind häufige Ursachen.
|
'statistics.intro',
|
||||||
|
'Haftpflichtschäden können jeden treffen. Stolpern, umgefallene Gegenstände oder Unfälle im Alltag sind häufige Ursachen.'
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
@ -305,10 +335,10 @@ const Haftpflicht = () => {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-base flex items-center gap-2">
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
<AlertTriangle className="w-5 h-5 text-blue-700" />
|
<AlertTriangle className="w-5 h-5 text-blue-700" />
|
||||||
Häufige Schadensarten
|
{t('statistics.cards.common.title', 'Häufige Schadensarten')}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
Stolpern, Wasserschäden, Unfälle im Sport.
|
{t('statistics.cards.common.text', 'Stolpern, Wasserschäden, Unfälle im Sport.')}
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
</Card>
|
</Card>
|
||||||
@ -316,10 +346,10 @@ const Haftpflicht = () => {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-base flex items-center gap-2">
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
<Clock className="w-5 h-5 text-blue-700" />
|
<Clock className="w-5 h-5 text-blue-700" />
|
||||||
Statistik
|
{t('statistics.cards.stats.title', 'Statistik')}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
4 Mio. Schäden/Jahr, 4.000 Mio. € Schadenssumme.
|
{t('statistics.cards.stats.text', '4 Mio. Schäden/Jahr, 4.000 Mio. € Schadenssumme.')}
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
</Card>
|
</Card>
|
||||||
@ -329,12 +359,14 @@ const Haftpflicht = () => {
|
|||||||
<div>
|
<div>
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-lg">Tipp</CardTitle>
|
<CardTitle className="text-lg">{t('statistics.tip.title', 'Tipp')}</CardTitle>
|
||||||
<CardDescription>Vorsorge ist besser als Nachsorge.</CardDescription>
|
<CardDescription>{t('statistics.tip.subtitle', 'Vorsorge ist besser als Nachsorge.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="text-sm text-gray-700">
|
<CardContent className="text-sm text-gray-700">
|
||||||
Sorgfalt im Alltag kann viele Schäden vermeiden.
|
{t(
|
||||||
Eine gute Versicherung schützt vor den Rest.
|
'statistics.tip.text',
|
||||||
|
'Sorgfalt im Alltag kann viele Schäden vermeiden. Eine gute Versicherung schützt vor den Rest.'
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
@ -344,65 +376,67 @@ const Haftpflicht = () => {
|
|||||||
<TabsContent value="calculator" className="mt-0">
|
<TabsContent value="calculator" className="mt-0">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-2xl font-bold text-gray-900">Haftpflicht-Rechner</h3>
|
<h3 className="text-2xl font-bold text-gray-900">{t('calculator.title', 'Haftpflicht-Rechner')}</h3>
|
||||||
<p className="mt-2 text-gray-600">
|
<p className="mt-2 text-gray-600">
|
||||||
Richtwert zur Orientierung. Für ein exaktes Angebot brauchen wir u. a.
|
{t(
|
||||||
Familienstand, Beruf und gewünschte Deckungssumme.
|
'calculator.intro',
|
||||||
|
'Richtwert zur Orientierung. Für ein exaktes Angebot brauchen wir u. a. Familienstand, Beruf und gewünschte Deckungssumme.'
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<Card className="mt-6 border-gray-200">
|
<Card className="mt-6 border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-lg flex items-center gap-2">
|
<CardTitle className="text-lg flex items-center gap-2">
|
||||||
<Calculator className="w-5 h-5 text-blue-700" />
|
<Calculator className="w-5 h-5 text-blue-700" />
|
||||||
Grobe Beitragsschätzung
|
{t('calculator.card.title', 'Grobe Beitragsschätzung')}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>Unverbindlich – wir kalkulieren danach exakt.</CardDescription>
|
<CardDescription>{t('calculator.card.subtitle', 'Unverbindlich – wir kalkulieren danach exakt.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-4">
|
<CardContent className="space-y-4">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="text-sm font-medium text-gray-700">Familienstand</label>
|
<label className="text-sm font-medium text-gray-700">{t('form.labels.familyStatus', 'Familienstand')}</label>
|
||||||
<select
|
<select
|
||||||
name="familySize"
|
name="familySize"
|
||||||
value={formData.familySize}
|
value={formData.familySize}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||||
>
|
>
|
||||||
<option value="">Bitte wählen</option>
|
<option value="">{t('form.options.select', 'Bitte wählen')}</option>
|
||||||
<option value="single">Single</option>
|
<option value="single">{t('form.options.single', 'Single')}</option>
|
||||||
<option value="family">Familie</option>
|
<option value="family">{t('form.options.family', 'Familie')}</option>
|
||||||
<option value="couple">Paar ohne Kinder</option>
|
<option value="couple">{t('form.options.couple', 'Paar ohne Kinder')}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-sm font-medium text-gray-700">Beruf</label>
|
<label className="text-sm font-medium text-gray-700">{t('form.labels.occupation', 'Beruf')}</label>
|
||||||
<select
|
<select
|
||||||
name="propertyType"
|
name="propertyType"
|
||||||
value={formData.propertyType}
|
value={formData.propertyType}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||||
>
|
>
|
||||||
<option value="">Bitte wählen</option>
|
<option value="">{t('form.options.select', 'Bitte wählen')}</option>
|
||||||
<option value="angestellt">Angestellt</option>
|
<option value="angestellt">{t('form.options.employee', 'Angestellt')}</option>
|
||||||
<option value="selbstständig">Selbstständig</option>
|
<option value="selbstständig">{t('form.options.selfEmployed', 'Selbstständig')}</option>
|
||||||
<option value="beamter">Beamter</option>
|
<option value="beamter">{t('form.options.civilServant', 'Beamter')}</option>
|
||||||
<option value="student">Student</option>
|
<option value="student">{t('form.options.student', 'Student')}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
|
<div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
|
||||||
<div className="text-sm text-blue-900 font-semibold">Richtwert (Beispiel)</div>
|
<div className="text-sm text-blue-900 font-semibold">{t('calculator.estimate.title', 'Richtwert (Beispiel)')}</div>
|
||||||
<div className="mt-1 text-sm text-blue-900">
|
<div className="mt-1 text-sm text-blue-900">
|
||||||
Ab <span className="font-bold">ca. 4 €</span>/Monat
|
{t('calculator.estimate.valuePrefix', 'Ab')} <span className="font-bold">{t('calculator.estimate.value', 'ca. 4 €')}</span>/{t('calculator.estimate.per', 'Monat')}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-blue-900/80 mt-2">
|
<div className="text-xs text-blue-900/80 mt-2">
|
||||||
Abhängig von Familienstand, Beruf, Deckungssumme.
|
{t('calculator.estimate.note', 'Abhängig von Familienstand, Beruf, Deckungssumme.')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button onClick={() => setActiveTab('form')} className="w-full bg-blue-700 hover:bg-blue-800">
|
<Button onClick={() => setActiveTab('form')} className="w-full bg-blue-700 hover:bg-blue-800">
|
||||||
Jetzt konkretes Angebot anfordern
|
{t('calculator.cta', 'Jetzt konkretes Angebot anfordern')}
|
||||||
</Button>
|
</Button>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
@ -411,21 +445,21 @@ const Haftpflicht = () => {
|
|||||||
<div>
|
<div>
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-lg">Was wir fürs Angebot brauchen</CardTitle>
|
<CardTitle className="text-lg">{t('calculator.need.title', 'Was wir fürs Angebot brauchen')}</CardTitle>
|
||||||
<CardDescription>Je genauer, desto besser.</CardDescription>
|
<CardDescription>{t('calculator.need.subtitle', 'Je genauer, desto besser.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-3 text-sm text-gray-700">
|
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<Users className="w-4 h-4 text-blue-700 mt-0.5" />
|
<Users className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||||
<span>Familiensituation (Kinder, Partner)</span>
|
<span>{t('calculator.need.items.family', 'Familiensituation (Kinder, Partner)')}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<Search className="w-4 h-4 text-blue-700 mt-0.5" />
|
<Search className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||||
<span>Berufliche Tätigkeit</span>
|
<span>{t('calculator.need.items.job', 'Berufliche Tätigkeit')}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<AlertCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
<AlertCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||||
<span>Gewünschte Deckungssumme?</span>
|
<span>{t('calculator.need.items.cover', 'Gewünschte Deckungssumme?')}</span>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
@ -436,9 +470,9 @@ const Haftpflicht = () => {
|
|||||||
<TabsContent value="form" className="mt-0">
|
<TabsContent value="form" className="mt-0">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
<div className="lg:col-span-2">
|
<div className="lg:col-span-2">
|
||||||
<h3 className="text-2xl font-bold text-gray-900">Anfrageformular</h3>
|
<h3 className="text-2xl font-bold text-gray-900">{t('form.title', 'Anfrageformular')}</h3>
|
||||||
<p className="mt-2 text-gray-600">
|
<p className="mt-2 text-gray-600">
|
||||||
Sende uns deine Eckdaten – wir melden uns mit einem passenden Angebot.
|
{t('form.intro', 'Sende uns deine Eckdaten – wir melden uns mit einem passenden Angebot.')}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<Card className="mt-6 border-gray-200">
|
<Card className="mt-6 border-gray-200">
|
||||||
@ -446,7 +480,7 @@ const Haftpflicht = () => {
|
|||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="text-sm font-medium text-gray-700">Name</label>
|
<label className="text-sm font-medium text-gray-700">{t('form.labels.name', 'Name')}</label>
|
||||||
<input
|
<input
|
||||||
name="name"
|
name="name"
|
||||||
value={formData.name}
|
value={formData.name}
|
||||||
@ -456,7 +490,7 @@ const Haftpflicht = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-sm font-medium text-gray-700">Telefon</label>
|
<label className="text-sm font-medium text-gray-700">{t('form.labels.phone', 'Telefon')}</label>
|
||||||
<input
|
<input
|
||||||
name="phone"
|
name="phone"
|
||||||
value={formData.phone}
|
value={formData.phone}
|
||||||
@ -467,7 +501,7 @@ const Haftpflicht = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="text-sm font-medium text-gray-700">E-Mail</label>
|
<label className="text-sm font-medium text-gray-700">{t('form.labels.email', 'E-Mail')}</label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
name="email"
|
name="email"
|
||||||
@ -480,48 +514,48 @@ const Haftpflicht = () => {
|
|||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<label className="text-sm font-medium text-gray-700">Familienstand</label>
|
<label className="text-sm font-medium text-gray-700">{t('form.labels.familyStatus', 'Familienstand')}</label>
|
||||||
<select
|
<select
|
||||||
name="familySize"
|
name="familySize"
|
||||||
value={formData.familySize}
|
value={formData.familySize}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||||
>
|
>
|
||||||
<option value="">Bitte wählen</option>
|
<option value="">{t('form.options.select', 'Bitte wählen')}</option>
|
||||||
<option value="single">Single</option>
|
<option value="single">{t('form.options.single', 'Single')}</option>
|
||||||
<option value="family">Familie</option>
|
<option value="family">{t('form.options.family', 'Familie')}</option>
|
||||||
<option value="couple">Paar ohne Kinder</option>
|
<option value="couple">{t('form.options.couple', 'Paar ohne Kinder')}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-sm font-medium text-gray-700">Beruf</label>
|
<label className="text-sm font-medium text-gray-700">{t('form.labels.occupation', 'Beruf')}</label>
|
||||||
<select
|
<select
|
||||||
name="propertyType"
|
name="propertyType"
|
||||||
value={formData.propertyType}
|
value={formData.propertyType}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||||
>
|
>
|
||||||
<option value="">Bitte wählen</option>
|
<option value="">{t('form.options.select', 'Bitte wählen')}</option>
|
||||||
<option value="angestellt">Angestellt</option>
|
<option value="angestellt">{t('form.options.employee', 'Angestellt')}</option>
|
||||||
<option value="selbstständig">Selbstständig</option>
|
<option value="selbstständig">{t('form.options.selfEmployed', 'Selbstständig')}</option>
|
||||||
<option value="beamter">Beamter</option>
|
<option value="beamter">{t('form.options.civilServant', 'Beamter')}</option>
|
||||||
<option value="student">Student</option>
|
<option value="student">{t('form.options.student', 'Student')}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-sm font-medium text-gray-700">Deckungssumme</label>
|
<label className="text-sm font-medium text-gray-700">{t('form.labels.coverage', 'Deckungssumme')}</label>
|
||||||
<input
|
<input
|
||||||
name="currentValue"
|
name="currentValue"
|
||||||
value={formData.currentValue}
|
value={formData.currentValue}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
placeholder="z. B. 50 Mio. €"
|
placeholder={t('form.placeholders.coverage', 'z. B. 50 Mio. €')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="text-sm font-medium text-gray-700">Aktueller Versicherer (optional)</label>
|
<label className="text-sm font-medium text-gray-700">{t('form.labels.currentInsurer', 'Aktueller Versicherer (optional)')}</label>
|
||||||
<input
|
<input
|
||||||
name="currentInsurer"
|
name="currentInsurer"
|
||||||
value={formData.currentInsurer}
|
value={formData.currentInsurer}
|
||||||
@ -531,18 +565,18 @@ const Haftpflicht = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label className="text-sm font-medium text-gray-700">Nachricht</label>
|
<label className="text-sm font-medium text-gray-700">{t('form.labels.message', 'Nachricht')}</label>
|
||||||
<textarea
|
<textarea
|
||||||
name="message"
|
name="message"
|
||||||
value={formData.message}
|
value={formData.message}
|
||||||
onChange={handleFormChange}
|
onChange={handleFormChange}
|
||||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm min-h-[120px]"
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm min-h-[120px]"
|
||||||
placeholder="Welche Leistungen sind dir wichtig? (Personenschutz, Sachschutz, etc.)"
|
placeholder={t('form.placeholders.message', 'Welche Leistungen sind dir wichtig? (Personenschutz, Sachschutz, etc.)')}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button type="submit" className="bg-blue-700 hover:bg-blue-800">
|
<Button type="submit" className="bg-blue-700 hover:bg-blue-800">
|
||||||
Anfrage senden
|
{t('form.submit', 'Anfrage senden')}
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
@ -552,21 +586,21 @@ const Haftpflicht = () => {
|
|||||||
<div>
|
<div>
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-lg">Direktkontakt</CardTitle>
|
<CardTitle className="text-lg">{t('form.direct.title', 'Direktkontakt')}</CardTitle>
|
||||||
<CardDescription>Wenn es schnell gehen soll.</CardDescription>
|
<CardDescription>{t('form.direct.subtitle', 'Wenn es schnell gehen soll.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="space-y-3 text-sm text-gray-700">
|
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Phone className="w-4 h-4 text-blue-700" />
|
<Phone className="w-4 h-4 text-blue-700" />
|
||||||
<span>Telefon: 0171 / 9864053</span>
|
<span>{t('form.direct.phone', 'Telefon: 0171 / 9864053')}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Mail className="w-4 h-4 text-blue-700" />
|
<Mail className="w-4 h-4 text-blue-700" />
|
||||||
<span>E-Mail: info@finanzen-mizera.de</span>
|
<span>{t('form.direct.email', 'E-Mail: info@finanzen-mizera.de')}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="pt-2">
|
<div className="pt-2">
|
||||||
<Button variant="outline" className="w-full" onClick={() => navigate('/kontakt')}>
|
<Button variant="outline" className="w-full" onClick={() => navigate('/contact')}>
|
||||||
Kontaktseite
|
{t('form.direct.contactCta', 'Kontaktseite')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
@ -578,41 +612,41 @@ const Haftpflicht = () => {
|
|||||||
<TabsContent value="claims" className="mt-0">
|
<TabsContent value="claims" className="mt-0">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
<div className="lg:col-span-2">
|
<div className="lg:col-span-2">
|
||||||
<h3 className="text-2xl font-bold text-gray-900">Schadenmeldung</h3>
|
<h3 className="text-2xl font-bold text-gray-900">{t('claims.title', 'Schadenmeldung')}</h3>
|
||||||
<p className="mt-2 text-gray-600">
|
<p className="mt-2 text-gray-600">
|
||||||
Im Schadenfall zählt eine klare Reihenfolge. Hier ist die Kurz-Checkliste.
|
{t('claims.intro', 'Im Schadenfall zählt eine klare Reihenfolge. Hier ist die Kurz-Checkliste.')}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="mt-6 space-y-3">
|
<div className="mt-6 space-y-3">
|
||||||
<div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
|
<div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
|
||||||
<AlertTriangle className="w-5 h-5 text-blue-700 mt-0.5" />
|
<AlertTriangle className="w-5 h-5 text-blue-700 mt-0.5" />
|
||||||
<div>
|
<div>
|
||||||
<div className="font-semibold text-gray-900">Erste Hilfe leisten</div>
|
<div className="font-semibold text-gray-900">{t('claims.steps.firstAid.title', 'Erste Hilfe leisten')}</div>
|
||||||
<div className="text-gray-600 text-sm">Verletzten versorgen, Gefahren beseitigen.</div>
|
<div className="text-gray-600 text-sm">{t('claims.steps.firstAid.text', 'Verletzten versorgen, Gefahren beseitigen.')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
|
<div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
|
||||||
<FileCheck className="w-5 h-5 text-blue-700 mt-0.5" />
|
<FileCheck className="w-5 h-5 text-blue-700 mt-0.5" />
|
||||||
<div>
|
<div>
|
||||||
<div className="font-semibold text-gray-900">Dokumentation</div>
|
<div className="font-semibold text-gray-900">{t('claims.steps.documentation.title', 'Dokumentation')}</div>
|
||||||
<div className="text-gray-600 text-sm">Fotos, Zeugenaussagen, Schadensbeschreibung.</div>
|
<div className="text-gray-600 text-sm">{t('claims.steps.documentation.text', 'Fotos, Zeugenaussagen, Schadensbeschreibung.')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
|
<div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
|
||||||
<PhoneCall className="w-5 h-5 text-blue-700 mt-0.5" />
|
<PhoneCall className="w-5 h-5 text-blue-700 mt-0.5" />
|
||||||
<div>
|
<div>
|
||||||
<div className="font-semibold text-gray-900">Melden</div>
|
<div className="font-semibold text-gray-900">{t('claims.steps.report.title', 'Melden')}</div>
|
||||||
<div className="text-gray-600 text-sm">So schnell wie möglich melden – wir unterstützen dich.</div>
|
<div className="text-gray-600 text-sm">{t('claims.steps.report.text', 'So schnell wie möglich melden – wir unterstützen dich.')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||||
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
||||||
Hilfe anfordern
|
{t('claims.ctaHelp', 'Hilfe anfordern')}
|
||||||
</Button>
|
</Button>
|
||||||
<Link to="/kontakt" className="inline-flex">
|
<Link to="/contact" className="inline-flex">
|
||||||
<Button variant="outline">Kontakt</Button>
|
<Button variant="outline">{t('claims.ctaContact', 'Kontakt')}</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -620,17 +654,17 @@ const Haftpflicht = () => {
|
|||||||
<div>
|
<div>
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-lg">Notfall-Info</CardTitle>
|
<CardTitle className="text-lg">{t('claims.emergency.title', 'Notfall-Info')}</CardTitle>
|
||||||
<CardDescription>Bei Verletzungen immer 112 wählen.</CardDescription>
|
<CardDescription>{t('claims.emergency.subtitle', 'Bei Verletzungen immer 112 wählen.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="text-sm text-gray-700 space-y-2">
|
<CardContent className="text-sm text-gray-700 space-y-2">
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<PhoneCall className="w-4 h-4 text-blue-700 mt-0.5" />
|
<PhoneCall className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||||
<span>Rettung: 112</span>
|
<span>{t('claims.emergency.rescue', 'Rettung: 112')}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-start gap-2">
|
<div className="flex items-start gap-2">
|
||||||
<PhoneCall className="w-4 h-4 text-blue-700 mt-0.5" />
|
<PhoneCall className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||||
<span>Polizei: 110</span>
|
<span>{t('claims.emergency.police', 'Polizei: 110')}</span>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
@ -641,26 +675,62 @@ const Haftpflicht = () => {
|
|||||||
<TabsContent value="catalog" className="mt-0">
|
<TabsContent value="catalog" className="mt-0">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
<div className="lg:col-span-2">
|
<div className="lg:col-span-2">
|
||||||
<h3 className="text-2xl font-bold text-gray-900">Infothek</h3>
|
<h3 className="text-2xl font-bold text-gray-900">{t('catalog.title', 'Infothek')}</h3>
|
||||||
<p className="mt-2 text-gray-600">
|
<p className="mt-2 text-gray-600">
|
||||||
Nützliche Informationen rund um die Haftpflichtversicherung.
|
{t('catalog.intro', 'Nützliche Informationen rund um die Haftpflichtversicherung.')}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="mt-4 flex flex-col sm:flex-row gap-3">
|
<div className="mt-4 flex flex-col sm:flex-row gap-3">
|
||||||
<Button className="bg-blue-700 hover:bg-blue-800">
|
<Button asChild className="bg-blue-700 hover:bg-blue-800">
|
||||||
Checkliste herunterladen
|
<a href={pdfChecklistUrl} target="_blank" rel="noreferrer">
|
||||||
|
{t('catalog.downloadChecklist', 'Checkliste herunterladen')}
|
||||||
|
</a>
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" className="gap-2" onClick={() => window.print()}>
|
<Button variant="outline" className="gap-2" onClick={() => window.print()}>
|
||||||
Seite drucken
|
{t('catalog.print', 'Seite drucken')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<div className="text-sm font-semibold text-gray-900">
|
||||||
|
{t('catalog.pdf.title', 'Dokument (PDF)')}
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant={pdfPage === 1 ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setPdfPage(1)}
|
||||||
|
>
|
||||||
|
{t('catalog.pdf.page1', 'Seite 1')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant={pdfPage === 2 ? 'default' : 'outline'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setPdfPage(2)}
|
||||||
|
>
|
||||||
|
{t('catalog.pdf.page2', 'Seite 2')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 rounded-lg border border-gray-200 bg-white overflow-hidden">
|
||||||
|
<iframe
|
||||||
|
title={t('catalog.pdf.iframeTitle', 'Haftpflicht Dokument PDF')}
|
||||||
|
src={pdfViewerUrl}
|
||||||
|
className="w-full h-[75vh]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-xs text-gray-600">
|
||||||
|
{t('catalog.pdf.hint', 'Falls die PDF hier nicht angezeigt wird, öffnen Sie sie bitte über den Download-Button.')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-lg">Hinweis</CardTitle>
|
<CardTitle className="text-lg">{t('catalog.note.title', 'Hinweis')}</CardTitle>
|
||||||
<CardDescription>Informationen können sich ändern – bitte aktuelle Quellen prüfen.</CardDescription>
|
<CardDescription>{t('catalog.note.text', 'Informationen können sich ändern – bitte aktuelle Quellen prüfen.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
@ -673,6 +743,7 @@ const Haftpflicht = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
|
|||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import GeneralNotice from '@/components/GeneralNotice';
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, Home, FileCheck, AlertCircle, Users, Building } from 'lucide-react';
|
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, Home, FileCheck, AlertCircle, Users, Building, AlertTriangle, PhoneCall, Clock, Search } from 'lucide-react';
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
|
||||||
@ -66,7 +66,7 @@ const Hausrat = () => {
|
|||||||
kicker: t('hero.kicker', 'Ihr Zuhause bestens geschützt'),
|
kicker: t('hero.kicker', 'Ihr Zuhause bestens geschützt'),
|
||||||
title: t('hero.title', 'Hausratversicherung'),
|
title: t('hero.title', 'Hausratversicherung'),
|
||||||
subtitle: t('hero.subtitle', 'Sicherheit für Ihre Einrichtung – Schutz vor Einbruch, Feuer, Wasser und Sturm'),
|
subtitle: t('hero.subtitle', 'Sicherheit für Ihre Einrichtung – Schutz vor Einbruch, Feuer, Wasser und Sturm'),
|
||||||
imageUrl: assetUrl('iStock-495809266.jpg'),
|
imageUrl: assetUrl('iStock-482694353.jpg'),
|
||||||
imagePosition: 'center',
|
imagePosition: 'center',
|
||||||
ctas: [
|
ctas: [
|
||||||
{ label: t('hero.primaryCta', 'Angebot anfordern'), href: '#form' },
|
{ label: t('hero.primaryCta', 'Angebot anfordern'), href: '#form' },
|
||||||
@ -83,54 +83,55 @@ const Hausrat = () => {
|
|||||||
{t('pageTitle', 'Hausratversicherung')}
|
{t('pageTitle', 'Hausratversicherung')}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||||
<Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
|
<Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
|
||||||
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
<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-4 lg:grid-cols-7 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
<TabsList className="flex flex-nowrap gap-2 w-full h-auto bg-transparent border-0 shadow-none overflow-x-auto">
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="overview"
|
value="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"
|
className="relative whitespace-nowrap 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"
|
||||||
>
|
>
|
||||||
<Home className="w-4 h-4 mr-1.5" />
|
<Home className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.overview', 'Übersicht')}
|
{t('tabs.overview', 'Übersicht')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="details"
|
value="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"
|
className="relative whitespace-nowrap 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" />
|
<FileText className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.details', 'Details')}
|
{t('tabs.details', 'Details')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="statistics"
|
value="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"
|
className="relative whitespace-nowrap 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" />
|
<Calculator className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.statistics', 'Statistik')}
|
{t('tabs.statistics', 'Statistik')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="calculator"
|
value="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"
|
className="relative whitespace-nowrap 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" />
|
<Calculator className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.calculator', 'Rechner')}
|
{t('tabs.calculator', 'Rechner')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="form"
|
value="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"
|
className="relative whitespace-nowrap 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" />
|
<Phone className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.form', 'Anfrage')}
|
{t('tabs.form', 'Anfrage')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="claims"
|
value="claims"
|
||||||
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"
|
className="relative whitespace-nowrap 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"
|
||||||
>
|
>
|
||||||
<AlertCircle className="w-4 h-4 mr-1.5" />
|
<AlertCircle className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.claims', 'Schaden')}
|
{t('tabs.claims', 'Schaden')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="catalog"
|
value="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"
|
className="relative whitespace-nowrap 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" />
|
<FileCheck className="w-4 h-4 mr-1.5" />
|
||||||
{t('tabs.catalog', 'Infothek')}
|
{t('tabs.catalog', 'Infothek')}
|
||||||
@ -144,22 +145,25 @@ const Hausrat = () => {
|
|||||||
<div>
|
<div>
|
||||||
<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">
|
<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">
|
||||||
<Star className="w-4 h-4" />
|
<Star className="w-4 h-4" />
|
||||||
<span>Ihr Zuhause bestens geschützt</span>
|
<span>{t('overview.badge', 'Ihr Zuhause bestens geschützt')}</span>
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||||
Hausratversicherung
|
{t('overview.title', 'Hausratversicherung')}
|
||||||
<span className="block text-blue-700">Sicherheit für Ihre Einrichtung</span>
|
<span className="block text-blue-700">{t('overview.titleHighlight', 'Sicherheit für Ihre Einrichtung')}</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className="mt-4 text-gray-600 text-lg">
|
<p className="mt-4 text-gray-600 text-lg">
|
||||||
Schutz vor Einbruch, Feuer, Wasser und Sturm. Wir vergleichen Tarife und finden den passenden Schutz für Ihr Hab und Gut.
|
{t(
|
||||||
|
'overview.description',
|
||||||
|
'Schutz vor Einbruch, Feuer, Wasser und Sturm. Wir vergleichen Tarife und finden den passenden Schutz für Ihr Hab und Gut.'
|
||||||
|
)}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||||
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
<Button onClick={() => setActiveTab('form')} className="w-full sm:w-auto bg-blue-700 hover:bg-blue-800">
|
||||||
Angebot anfordern
|
{t('overview.ctaPrimary', 'Angebot anfordern')}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
|
<Button variant="outline" onClick={() => navigate('/contact')} className="w-full sm:w-auto border-gray-300">
|
||||||
Beratung
|
{t('overview.ctaSecondary', 'Beratung')}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -167,15 +171,15 @@ const Hausrat = () => {
|
|||||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||||
<Shield className="w-5 h-5 text-blue-700" />
|
<Shield className="w-5 h-5 text-blue-700" />
|
||||||
<div className="text-sm">
|
<div className="text-sm">
|
||||||
<div className="font-semibold text-gray-900">Vollschutz</div>
|
<div className="font-semibold text-gray-900">{t('overview.features.cover.title', 'Vollschutz')}</div>
|
||||||
<div className="text-gray-600">alle Risiken abgedeckt</div>
|
<div className="text-gray-600">{t('overview.features.cover.text', 'alle Risiken abgedeckt')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||||
<Home className="w-5 h-5 text-blue-700" />
|
<Home className="w-5 h-5 text-blue-700" />
|
||||||
<div className="text-sm">
|
<div className="text-sm">
|
||||||
<div className="font-semibold text-gray-900">Möbel & Co.</div>
|
<div className="font-semibold text-gray-900">{t('overview.features.household.title', 'Möbel & Co.')}</div>
|
||||||
<div className="text-gray-600">bis zur Neuwertsumme</div>
|
<div className="text-gray-600">{t('overview.features.household.text', 'bis zur Neuwertsumme')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -195,10 +199,10 @@ const Hausrat = () => {
|
|||||||
<div className="p-5">
|
<div className="p-5">
|
||||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
<Home className="w-4 h-4" />
|
<Home className="w-4 h-4" />
|
||||||
<span>Wohnung, Haus, Mieter</span>
|
<span>{t('overview.imageMeta', 'Wohnung, Haus, Mieter')}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-2 text-sm text-gray-600">
|
<div className="mt-2 text-sm text-gray-600">
|
||||||
Tarifcheck – schnell, fair und passend zu deinem Bedarf.
|
{t('overview.imageText', 'Tarifcheck – schnell, fair und passend zu deinem Bedarf.')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -206,33 +210,33 @@ const Hausrat = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
|
<div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
|
||||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Kurz & klar</h3>
|
<h3 className="text-xl font-bold text-gray-900 mb-4">{t('overview.quick.title', 'Kurz & klar')}</h3>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-base flex items-center gap-2">
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
<CheckCircle className="w-4 h-4 text-blue-700" />
|
<CheckCircle className="w-4 h-4 text-blue-700" />
|
||||||
Empfehlenswert
|
{t('overview.quick.c1.title', 'Empfehlenswert')}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>Für jeden Haushalt wichtig.</CardDescription>
|
<CardDescription>{t('overview.quick.c1.text', 'Für jeden Haushalt wichtig.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
</Card>
|
</Card>
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-base flex items-center gap-2">
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
<Calculator className="w-4 h-4 text-blue-700" />
|
<Calculator className="w-4 h-4 text-blue-700" />
|
||||||
Vergleich lohnt sich
|
{t('overview.quick.c2.title', 'Vergleich lohnt sich')}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>Beiträge & Leistungen variieren stark.</CardDescription>
|
<CardDescription>{t('overview.quick.c2.text', 'Beiträge & Leistungen variieren stark.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
</Card>
|
</Card>
|
||||||
<Card className="border-gray-200">
|
<Card className="border-gray-200">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-base flex items-center gap-2">
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
<PhoneCall className="w-4 h-4 text-blue-700" />
|
<PhoneCall className="w-4 h-4 text-blue-700" />
|
||||||
Hilfe im Schadenfall
|
{t('overview.quick.c3.title', 'Hilfe im Schadenfall')}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription>Klare Schritte & Kontaktmöglichkeiten.</CardDescription>
|
<CardDescription>{t('overview.quick.c3.text', 'Klare Schritte & Kontaktmöglichkeiten.')}</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
@ -242,7 +246,7 @@ const Hausrat = () => {
|
|||||||
<TabsContent value="details" className="mt-0">
|
<TabsContent value="details" className="mt-0">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
<div className="lg:col-span-2">
|
<div className="lg:col-span-2">
|
||||||
<h3 className="text-2xl font-bold text-gray-900">Details & Vorteile</h3>
|
<h3 className="text-2xl font-bold text-gray-900">{t('details.title', 'Details & Vorteile')}</h3>
|
||||||
<p className="mt-2 text-gray-600">
|
<p className="mt-2 text-gray-600">
|
||||||
Die Hausratversicherung schützt Ihr Hab und Gut vor Feuer, Wasser, Einbruch und Sturm.
|
Die Hausratversicherung schützt Ihr Hab und Gut vor Feuer, Wasser, Einbruch und Sturm.
|
||||||
Wir helfen Ihnen, den richtigen Schutzsumme und Tarif zu finden.
|
Wir helfen Ihnen, den richtigen Schutzsumme und Tarif zu finden.
|
||||||
@ -678,6 +682,7 @@ const Hausrat = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user