menue
This commit is contained in:
parent
16e00659aa
commit
099b5d80e1
BIN
public/PDF/Kundenbroschüre.pdf
Normal file
BIN
public/PDF/Kundenbroschüre.pdf
Normal file
Binary file not shown.
BIN
public/PDF/PR_DEGTP_PP_2DE.pdf
Normal file
BIN
public/PDF/PR_DEGTP_PP_2DE.pdf
Normal file
Binary file not shown.
BIN
public/head_pillen.jpg
Normal file
BIN
public/head_pillen.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
public/iStock-975006448.jpg
Normal file
BIN
public/iStock-975006448.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
Binary file not shown.
BIN
public/locales/de/altersvorsorge.json
Normal file
BIN
public/locales/de/altersvorsorge.json
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
public/locales/de/krankheitsschutzbrief.json
Normal file
BIN
public/locales/de/krankheitsschutzbrief.json
Normal file
Binary file not shown.
Binary file not shown.
BIN
public/locales/de/risikolebensversicherung.json
Normal file
BIN
public/locales/de/risikolebensversicherung.json
Normal file
Binary file not shown.
BIN
public/locales/de/vermoegenssicherung.json
Normal file
BIN
public/locales/de/vermoegenssicherung.json
Normal file
Binary file not shown.
Binary file not shown.
BIN
public/locales/pl/altersvorsorge.json
Normal file
BIN
public/locales/pl/altersvorsorge.json
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
public/locales/pl/krankheitsschutzbrief.json
Normal file
BIN
public/locales/pl/krankheitsschutzbrief.json
Normal file
Binary file not shown.
Binary file not shown.
BIN
public/locales/pl/risikolebensversicherung.json
Normal file
BIN
public/locales/pl/risikolebensversicherung.json
Normal file
Binary file not shown.
BIN
public/locales/pl/vermoegenssicherung.json
Normal file
BIN
public/locales/pl/vermoegenssicherung.json
Normal file
Binary file not shown.
@ -54,6 +54,8 @@ import SeniorenSterbegeldversicherung from "./pages/SeniorenSterbegeldversicheru
|
|||||||
import PrivateKrankenversicherung from "./pages/PrivateKrankenversicherung";
|
import PrivateKrankenversicherung from "./pages/PrivateKrankenversicherung";
|
||||||
import Zahnzusatzversicherung from "./pages/Zahnzusatzversicherung";
|
import Zahnzusatzversicherung from "./pages/Zahnzusatzversicherung";
|
||||||
import Auslandsreisekrankenversicherung from "./pages/Auslandsreisekrankenversicherung";
|
import Auslandsreisekrankenversicherung from "./pages/Auslandsreisekrankenversicherung";
|
||||||
|
import Risikolebensversicherung from "./pages/Risikolebensversicherung";
|
||||||
|
import Krankheitsschutzbrief from "./pages/Krankheitsschutzbrief";
|
||||||
import Gesundheitsvorsorge from "./pages/Gesundheitsvorsorge";
|
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";
|
||||||
@ -168,6 +170,8 @@ const App = () => {
|
|||||||
<Route path="/private-krankenversicherung" element={<PrivateKrankenversicherung />} />
|
<Route path="/private-krankenversicherung" element={<PrivateKrankenversicherung />} />
|
||||||
<Route path="/zahnzusatzversicherung" element={<Zahnzusatzversicherung />} />
|
<Route path="/zahnzusatzversicherung" element={<Zahnzusatzversicherung />} />
|
||||||
<Route path="/auslandsreisekrankenversicherung" element={<Auslandsreisekrankenversicherung />} />
|
<Route path="/auslandsreisekrankenversicherung" element={<Auslandsreisekrankenversicherung />} />
|
||||||
|
<Route path="/risikolebensversicherung" element={<Risikolebensversicherung />} />
|
||||||
|
<Route path="/krankheitsschutzbrief" element={<Krankheitsschutzbrief />} />
|
||||||
<Route path="/gesundheitsvorsorge" element={<Gesundheitsvorsorge />} />
|
<Route path="/gesundheitsvorsorge" element={<Gesundheitsvorsorge />} />
|
||||||
<Route path="/altersvorsorge" element={<Altersvorsorge />} />
|
<Route path="/altersvorsorge" element={<Altersvorsorge />} />
|
||||||
<Route path="/risikoschutz" element={<Risikoschutz />} />
|
<Route path="/risikoschutz" element={<Risikoschutz />} />
|
||||||
|
|||||||
@ -35,6 +35,9 @@ const Header = () => {
|
|||||||
{ name: t('accidentInsurance', 'Unfall'), href: '/unfall', icon: Shield },
|
{ name: t('accidentInsurance', 'Unfall'), href: '/unfall', icon: Shield },
|
||||||
{ name: t('carInsurance', 'KFZ'), href: '/kfz', icon: Truck },
|
{ name: t('carInsurance', 'KFZ'), href: '/kfz', icon: Truck },
|
||||||
{ name: t('services', 'Leistungen'), href: '/leistungen', icon: FileText },
|
{ name: t('services', 'Leistungen'), href: '/leistungen', icon: FileText },
|
||||||
|
{ name: 'Risikolebensversicherung', href: '/risikolebensversicherung', icon: Shield },
|
||||||
|
{ name: 'Krankheits-Schutzbrief', href: '/krankheitsschutzbrief', icon: Shield },
|
||||||
|
{ name: 'Vermögenssicherung', href: '/vermoegenssicherung', icon: Shield },
|
||||||
];
|
];
|
||||||
|
|
||||||
const normalizedQuery = searchQuery.trim().toLowerCase();
|
const normalizedQuery = searchQuery.trim().toLowerCase();
|
||||||
|
|||||||
@ -44,6 +44,9 @@ i18n
|
|||||||
'geschaeftskunden',
|
'geschaeftskunden',
|
||||||
'service',
|
'service',
|
||||||
'unfall',
|
'unfall',
|
||||||
|
'vermoegenssicherung',
|
||||||
|
'risikolebensversicherung',
|
||||||
|
'krankheitsschutzbrief',
|
||||||
],
|
],
|
||||||
interpolation: {
|
interpolation: {
|
||||||
escapeValue: false,
|
escapeValue: false,
|
||||||
|
|||||||
@ -9,7 +9,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|||||||
import GeneralNotice from '@/components/GeneralNotice';
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
|
|
||||||
const Agentur = () => {
|
const Agentur = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation('agentur');
|
||||||
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)}`;
|
||||||
|
|
||||||
@ -51,7 +51,7 @@ const Agentur = () => {
|
|||||||
slides={[
|
slides={[
|
||||||
{
|
{
|
||||||
id: 'agentur-1',
|
id: 'agentur-1',
|
||||||
kicker: 'Ihr starker Partner für Sicherheit',
|
kicker: t('hero.kicker', 'Ihr starker Partner für Sicherheit'),
|
||||||
title: t('hero.title', 'Ihr starker Partner für Sicherheit.'),
|
title: t('hero.title', 'Ihr starker Partner für Sicherheit.'),
|
||||||
subtitle: t(
|
subtitle: t(
|
||||||
'hero.subtitle',
|
'hero.subtitle',
|
||||||
@ -80,21 +80,21 @@ const Agentur = () => {
|
|||||||
className="relative px-2 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 px-2 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" />
|
<Home className="w-4 h-4 mr-1" />
|
||||||
Philosophie
|
{t('tabs.overview', 'Philosophie')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="leistungen"
|
value="leistungen"
|
||||||
className="relative px-2 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 px-2 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"
|
||||||
>
|
>
|
||||||
<Star className="w-4 h-4 mr-1" />
|
<Star className="w-4 h-4 mr-1" />
|
||||||
Leistungen
|
{t('tabs.leistungen', 'Leistungen')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="philosophie"
|
value="philosophie"
|
||||||
className="relative px-2 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 px-2 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"
|
||||||
>
|
>
|
||||||
<Users className="w-4 h-4 mr-1" />
|
<Users className="w-4 h-4 mr-1" />
|
||||||
Partner
|
{t('tabs.partner', 'Partner')}
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
<TabsTrigger
|
<TabsTrigger
|
||||||
value="events"
|
value="events"
|
||||||
|
|||||||
@ -1,44 +1,66 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Heart, Shield, TrendingUp, PiggyBank, Home, Calculator } from 'lucide-react';
|
import { Heart, Shield, TrendingUp, PiggyBank, Home, Calculator } from 'lucide-react';
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import { Card } from '@/components/ui/card';
|
import { Card } from '@/components/ui/card';
|
||||||
import Disclaimer from '@/components/Disclaimer';
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Altersvorsorge = () => {
|
const Altersvorsorge = () => {
|
||||||
|
const { t } = useTranslation('altersvorsorge');
|
||||||
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 topics = [
|
const topics = [
|
||||||
{
|
{
|
||||||
title: 'Riester-Rente',
|
title: t('topics.riester.title', 'Riester-Rente'),
|
||||||
href: '/riester-rente',
|
href: '/riester-rente',
|
||||||
image: assetUrl('iStock-957363908.jpg')
|
image: assetUrl('iStock-957363908.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Rürup-Rente',
|
title: t('topics.ruerup.title', 'Rürup-Rente'),
|
||||||
href: '/ruerup-rente',
|
href: '/ruerup-rente',
|
||||||
image: assetUrl('iStock-943842590.jpg')
|
image: assetUrl('iStock-943842590.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Betriebliche Altersvorsorge',
|
title: t('topics.betrieblich.title', 'Betriebliche Altersvorsorge'),
|
||||||
href: '/betriebliche-altersvorsorge',
|
href: '/betriebliche-altersvorsorge',
|
||||||
image: assetUrl('Fotolia_8654128_XS.jpg')
|
image: assetUrl('Fotolia_8654128_XS.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Private Rentenversicherung',
|
title: t('topics.privat.title', 'Private Rentenversicherung'),
|
||||||
href: '/private-rentenversicherung',
|
href: '/private-rentenversicherung',
|
||||||
image: assetUrl('iStock-495809266.jpg')
|
image: assetUrl('iStock-495809266.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Kapitallebensversicherung',
|
title: t('topics.kapital.title', 'Kapitallebensversicherung'),
|
||||||
href: '/kapitallebensversicherung',
|
href: '/kapitallebensversicherung',
|
||||||
image: assetUrl('Fotolia_67327775_XS.jpg')
|
image: assetUrl('Fotolia_67327775_XS.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Fondsgebundene Versicherung',
|
title: t('topics.fonds.title', 'Fondsgebundene Versicherung'),
|
||||||
href: '/fondsgebundene-versicherung',
|
href: '/fondsgebundene-versicherung',
|
||||||
image: assetUrl('iStock-970876204.jpg')
|
image: assetUrl('iStock-923620990.jpg')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('topics.zukunft.title', 'Zukunftsvorsorge'),
|
||||||
|
href: '/zukunftsvorsorge',
|
||||||
|
image: assetUrl('iStock-618896642.jpg')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('topics.sparplan.title', 'Sparplan'),
|
||||||
|
href: '/sparplan',
|
||||||
|
image: assetUrl('iStock-957363908.jpg')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('topics.investment.title', 'Investmentfonds'),
|
||||||
|
href: '/investmentfonds',
|
||||||
|
image: assetUrl('iStock-635975818.jpg')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('topics.etf.title', 'ETF-Sparplan'),
|
||||||
|
href: '/etf-sparplan',
|
||||||
|
image: assetUrl('iStock-1346163204.jpg')
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -50,10 +72,10 @@ const Altersvorsorge = () => {
|
|||||||
<div className="container mx-auto px-4">
|
<div className="container mx-auto px-4">
|
||||||
<div className="max-w-4xl mx-auto text-center">
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
<h1 className="text-4xl font-bold text-gray-900 mb-6">
|
<h1 className="text-4xl font-bold text-gray-900 mb-6">
|
||||||
Altersvorsorge
|
{t('title', 'Altersvorsorge')}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-xl text-gray-600 mb-8">
|
<p className="text-xl text-gray-600 mb-8">
|
||||||
Sorgen Sie frühzeitig für Ihre finanzielle Zukunft vor
|
{t('subtitle', 'Sorgen Sie frühzeitig für Ihre finanzielle Zukunft vor')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -22,37 +22,58 @@ const Finanzen = () => {
|
|||||||
const services = [
|
const services = [
|
||||||
{
|
{
|
||||||
icon: Calculator,
|
icon: Calculator,
|
||||||
title: 'Finanzberatung',
|
title: t('services.finanzberatung.title', 'Finanzberatung'),
|
||||||
description: 'Umfassende Beratung für Ihre finanzielle Zukunft',
|
description: t('services.finanzberatung.description', 'Umfassende Beratung für Ihre finanzielle Zukunft'),
|
||||||
features: ['Vermögensaufbau', 'Altersvorsorge', 'Sparpläne', 'Investmentberatung', 'Steuerplanung']
|
features: [
|
||||||
|
t('services.finanzberatung.features.vermoegen', 'Vermögensaufbau'),
|
||||||
|
t('services.finanzberatung.features.altersvorsorge', 'Altersvorsorge'),
|
||||||
|
t('services.finanzberatung.features.sparplaene', 'Sparpläne'),
|
||||||
|
t('services.finanzberatung.features.investment', 'Investmentberatung'),
|
||||||
|
t('services.finanzberatung.features.steuer', 'Steuerplanung')
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Shield,
|
icon: Shield,
|
||||||
title: 'Vorsorgelösungen',
|
title: t('services.vorsorge.title', 'Vorsorgelösungen'),
|
||||||
description: 'Sichere Absicherung für alle Lebensphasen',
|
description: t('services.vorsorge.description', 'Sichere Absicherung für alle Lebensphasen'),
|
||||||
features: ['Private Rentenversicherung', 'Riester-Rente', 'Rürup-Rente', 'Betriebliche Altersvorsorge']
|
features: [
|
||||||
|
t('services.vorsorge.features.privat', 'Private Rentenversicherung'),
|
||||||
|
t('services.vorsorge.features.riester', 'Riester-Rente'),
|
||||||
|
t('services.vorsorge.features.ruerup', 'Rürup-Rente'),
|
||||||
|
t('services.vorsorge.features.betrieblich', 'Betriebliche Altersvorsorge')
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: PiggyBank,
|
icon: PiggyBank,
|
||||||
title: 'Vermögensmanagement',
|
title: t('services.vermoegen.title', 'Vermögensmanagement'),
|
||||||
description: 'Professionelle Verwaltung Ihres Vermögens',
|
description: t('services.vermoegen.description', 'Professionelle Verwaltung Ihres Vermögens'),
|
||||||
features: ['Fondsberatung', 'Aktienberatung', 'Immobilienfinanzierung', 'Nachlassplanung']
|
features: [
|
||||||
|
t('services.vermoegen.features.fonds', 'Fondsberatung'),
|
||||||
|
t('services.vermoegen.features.aktien', 'Aktienberatung'),
|
||||||
|
t('services.vermoegen.features.immobilien', 'Immobilienfinanzierung'),
|
||||||
|
t('services.vermoegen.features.nachlass', 'Nachlassplanung')
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: FileText,
|
icon: FileText,
|
||||||
title: 'Kreditberatung',
|
title: t('services.kredit.title', 'Kreditberatung'),
|
||||||
description: 'Optimale Finanzierungslösungen',
|
description: t('services.kredit.description', 'Optimale Finanzierungslösungen'),
|
||||||
features: ['Hausfinanzierung', 'Kreditvergleich', 'Umschuldung', 'Fördermittelberatung']
|
features: [
|
||||||
|
t('services.kredit.features.haus', 'Hausfinanzierung'),
|
||||||
|
t('services.kredit.features.vergleich', 'Kreditvergleich'),
|
||||||
|
t('services.kredit.features.umschuldung', 'Umschuldung'),
|
||||||
|
t('services.kredit.features.foerderung', 'Fördermittelberatung')
|
||||||
|
]
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const highlights = [
|
const highlights = [
|
||||||
'Unabhängige und objektive Beratung',
|
t('highlights.unabhaengig', 'Unabhängige und objektive Beratung'),
|
||||||
'Transparente Kostenstruktur',
|
t('highlights.transparent', 'Transparente Kostenstruktur'),
|
||||||
'Individuelle Lösungsansätze',
|
t('highlights.individuell', 'Individuelle Lösungsansätze'),
|
||||||
'Langfristige Strategien statt kurzfristiger Trends',
|
t('highlights.langfristig', 'Langfristige Strategien statt kurzfristiger Trends'),
|
||||||
'Regelmäßige Überprüfung und Anpassung',
|
t('highlights.ueberpruefung', 'Regelmäßige Überprüfung und Anpassung'),
|
||||||
'Verständliche Empfehlungen ohne Fachchinesisch',
|
t('highlights.verstaendlich', 'Verständliche Empfehlungen ohne Fachchinesisch'),
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -62,7 +83,7 @@ const Finanzen = () => {
|
|||||||
slides={[
|
slides={[
|
||||||
{
|
{
|
||||||
id: 'finanzen-1',
|
id: 'finanzen-1',
|
||||||
kicker: 'Finanzen',
|
kicker: t('hero.kicker', 'Finanzen'),
|
||||||
title: t('hero.title', 'Finanzielle Sicherheit mit Plan'),
|
title: t('hero.title', 'Finanzielle Sicherheit mit Plan'),
|
||||||
subtitle: t(
|
subtitle: t(
|
||||||
'hero.subtitle',
|
'hero.subtitle',
|
||||||
@ -83,9 +104,10 @@ const Finanzen = () => {
|
|||||||
<div className="container mx-auto px-4">
|
<div className="container mx-auto px-4">
|
||||||
<div className="text-center mb-12">
|
<div className="text-center mb-12">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||||
Finanzlösungen
|
{t('section.title', 'Finanzlösungen')}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||||
|
{t('section.subtitle', 'Wir bieten Ihnen umfassende Finanzberatung für alle Lebensbereiche – von der Altersvorsorge bis zur Immobilienfinanzierung.')}
|
||||||
Die wichtigsten Lösungen für Ihre finanzielle Zukunft
|
Die wichtigsten Lösungen für Ihre finanzielle Zukunft
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -27,17 +27,17 @@ const Geschaeftskunden = () => {
|
|||||||
const pool = [
|
const pool = [
|
||||||
{
|
{
|
||||||
id: 'flottenversicherung',
|
id: 'flottenversicherung',
|
||||||
title: 'Flottenversicherung',
|
title: t('topics.flotten.title', 'Flottenversicherung'),
|
||||||
subtitle: 'Optimaler Schutz für Ihren Fuhrpark\nSicher und wirtschaftlich.',
|
subtitle: t('topics.flotten.subtitle', 'Optimaler Schutz für Ihren Fuhrpark\nSicher und wirtschaftlich.'),
|
||||||
href: '/geschaeftskunden/flottenversicherung',
|
href: '/geschaeftskunden/flottenversicherung',
|
||||||
image: assetUrl('Geascheaftskunden/iStock-637230106.jpg'),
|
image: assetUrl('Geascheaftskunden/iStock-637230106.jpg'),
|
||||||
links: [
|
links: [
|
||||||
{ title: 'Flottenmanagement', href: '/geschaeftskunden/flottenversicherung' },
|
{ title: t('topics.flotten.links.management', 'Flottenmanagement'), href: '/geschaeftskunden/flottenversicherung' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'betriebsrente',
|
id: 'betriebsrente',
|
||||||
title: 'Betriebsrente (BAV)',
|
title: t('topics.betriebsrente.title', 'Betriebsrente (BAV)'),
|
||||||
subtitle: 'Altersvorsorge für Ihre Mitarbeiter\nZukunftssichere Lösungen.',
|
subtitle: 'Altersvorsorge für Ihre Mitarbeiter\nZukunftssichere Lösungen.',
|
||||||
href: '/geschaeftskunden/betriebsrente',
|
href: '/geschaeftskunden/betriebsrente',
|
||||||
image: assetUrl('Geascheaftskunden/iStock-917884956.jpg'),
|
image: assetUrl('Geascheaftskunden/iStock-917884956.jpg'),
|
||||||
|
|||||||
797
src/pages/Krankheitsschutzbrief.tsx
Normal file
797
src/pages/Krankheitsschutzbrief.tsx
Normal file
@ -0,0 +1,797 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, Gauge, Heart, UserCheck, Pill, Stethoscope } from 'lucide-react';
|
||||||
|
import Layout from '@/components/Layout';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Progress } from '@/components/ui/progress';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
|
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||||
|
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||||||
|
|
||||||
|
const Krankheitsschutzbrief = () => {
|
||||||
|
const { t } = useTranslation('krankheitsschutzbrief');
|
||||||
|
|
||||||
|
// Add SEO metadata for search
|
||||||
|
React.useEffect(() => {
|
||||||
|
document.title = 'Krankheits-Schutzbrief - Agentur Mizera';
|
||||||
|
const metaDescription = document.querySelector('meta[name="description"]');
|
||||||
|
if (metaDescription) {
|
||||||
|
metaDescription.setAttribute('content', 'Krankheits-Schutzbrief: Umfassender Schutz bei schweren Krankheiten. Unabhängige Beratung und Tarifvergleich für Krankheits-Schutzbriefe.');
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
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: '',
|
||||||
|
age: '',
|
||||||
|
coverageAmount: '',
|
||||||
|
duration: '',
|
||||||
|
healthStatus: '',
|
||||||
|
smoker: '',
|
||||||
|
message: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleFormChange = (
|
||||||
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
||||||
|
) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFormSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log('Form submitted:', formData);
|
||||||
|
navigate('/contact');
|
||||||
|
};
|
||||||
|
|
||||||
|
const benefits = [
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Krankheitsschutz',
|
||||||
|
description: 'Finanzielle Absicherung bei schweren Krankheiten',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Heart,
|
||||||
|
title: 'Sofortleistung',
|
||||||
|
description: 'Schnelle Auszahlung bei Diagnosestellung',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Calculator,
|
||||||
|
title: 'Günstige Beiträge',
|
||||||
|
description: 'Schutz zu fairen und transparenten Konditionen',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: UserCheck,
|
||||||
|
title: 'Einfacher Abschluss',
|
||||||
|
description: 'Unkomplizierte Vertragsaufnahme ohne Gesundheitsprüfungen',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: FileText,
|
||||||
|
title: 'Flexible Laufzeiten',
|
||||||
|
description: 'Anpassbar an Ihre persönliche Situation',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Stethoscope,
|
||||||
|
title: 'Medizinische Vorsorge',
|
||||||
|
description: 'Zusätzlicher Schutz für Ihre Gesundheit',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
'Leistung bei Krebserkrankungen',
|
||||||
|
'Herz-Kreislauf-Erkrankungen',
|
||||||
|
'Schlaganfall-Versorgung',
|
||||||
|
'Organversagen-Schutz',
|
||||||
|
'Multiple Sklerose Abdeckung',
|
||||||
|
'Parkinson-Erkrankung',
|
||||||
|
'Sofortauszahlung ohne Wartezeit',
|
||||||
|
'Beratung bei Krankheitsfällen',
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className="h-96 bg-cover bg-center relative"
|
||||||
|
style={{ backgroundImage: `url(${assetUrl('head_pillen.jpg')})` }}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-gray-900/20" />
|
||||||
|
<div className="relative container mx-auto px-4 h-full flex items-center">
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<div className="bg-black/40 text-white px-8 py-6 md:px-10 md:py-8 shadow-lg">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
Krankheits-Schutzbrief
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-white/90 mb-8 max-w-2xl">
|
||||||
|
Umfassender Schutz bei schweren Krankheiten
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<Button onClick={() => setActiveTab('form')} size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||||
|
Jetzt beraten lassen
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => setActiveTab('calculator')} size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
|
||||||
|
Beitrag berechnen
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<style>{`
|
||||||
|
[data-state="active"] {
|
||||||
|
outline: none !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
button:focus {
|
||||||
|
outline: none !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
button:focus-visible {
|
||||||
|
outline: none !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
<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">
|
||||||
|
Krankheits-Schutzbrief
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||||
|
<Tabs
|
||||||
|
value={activeTab}
|
||||||
|
onValueChange={(next) => {
|
||||||
|
setActiveTab(next);
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
id="tab-section"
|
||||||
|
>
|
||||||
|
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||||||
|
<TabsList className="grid grid-cols-5 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Shield className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.overview', 'Übersicht')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<FileText className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.details', 'Details')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Calculator className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.calculator', 'Rechner')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Phone className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.form', 'Anfrage')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="brochure"
|
||||||
|
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||||
|
>
|
||||||
|
<Download className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.brochure', 'PDF')}
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 md:p-6">
|
||||||
|
<TabsContent value="overview" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
className="gap-8 items-center"
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
|
||||||
|
<Star className="w-4 h-4" />
|
||||||
|
<span>Schutz bei schweren Krankheiten</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||||
|
Krankheits-Schutzbrief
|
||||||
|
<span className="block text-blue-700">Finanzielle Sicherheit in schweren Zeiten</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-4 text-gray-600 text-lg">
|
||||||
|
Umfassender Schutz bei schweren Krankheiten – mit sofortiger Leistungsauszahlung und flexibler Gestaltung.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||||
|
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
||||||
|
Angebot anfordern
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
|
||||||
|
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">Krankheitsschutz</div>
|
||||||
|
<div className="text-gray-600">Finanzielle Absicherung bei schweren Krankheiten</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||||
|
<Heart className="w-5 h-5 text-blue-700" />
|
||||||
|
<div className="text-sm">
|
||||||
|
<div className="font-semibold text-gray-900">Sofortleistung</div>
|
||||||
|
<div className="text-gray-600">Schnelle Auszahlung bei Diagnosestellung</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
(
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
|
||||||
|
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={assetUrl('head_pillen.jpg')}
|
||||||
|
alt="Krankheits-Schutzbrief"
|
||||||
|
className="w-full h-[240px] object-cover"
|
||||||
|
onError={(e) => {
|
||||||
|
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="p-5">
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
|
<Pill className="w-4 h-4" />
|
||||||
|
<span>Krebserkrankungen, Herzinfarkt, Schlaganfall, Sofortleistung</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-sm text-gray-600">
|
||||||
|
Tarifcheck – schnell, fair und passend zu Ihrer Gesundheitssituation.
|
||||||
|
</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">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" />
|
||||||
|
Schwerkrankenschutz
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>Finanzielle Sicherheit bei schweren Erkrankungen.</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" />
|
||||||
|
Sofortauszahlung
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>Keine Wartezeit bei Diagnosestellung.</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" />
|
||||||
|
Persönliche Beratung
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>Wir finden den passenden Schutz für Sie.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 rounded-xl bg-blue-700 p-6 text-white">
|
||||||
|
<h3 className="text-2xl font-bold">Was beeinflusst die Kosten des Krankheits-Schutzbriefs?</h3>
|
||||||
|
|
||||||
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="rounded-lg bg-white/10 p-4">
|
||||||
|
<UserCheck className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||||
|
<div className="mt-3 text-lg font-semibold">Alter und Gesundheitszustand</div>
|
||||||
|
<div className="mt-1 text-sm text-white/85">
|
||||||
|
Jüngere und gesündere Personen zahlen geringere Beiträge.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-lg bg-white/10 p-4">
|
||||||
|
<Calculator className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||||
|
<div className="mt-3 text-lg font-semibold">Versicherungssumme</div>
|
||||||
|
<div className="mt-1 text-sm text-white/85">
|
||||||
|
Höhere Leistungen bei schweren Krankheiten kosten mehr.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-lg bg-white/10 p-4">
|
||||||
|
<Clock className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||||
|
<div className="mt-3 text-lg font-semibold">Laufzeit</div>
|
||||||
|
<div className="mt-1 text-sm text-white/85">
|
||||||
|
Längere Laufzeiten können günstigere Konditionen ermöglichen.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-lg bg-white/10 p-4">
|
||||||
|
<AlertTriangle className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||||
|
<div className="mt-3 text-lg font-semibold">Leistungsumfang</div>
|
||||||
|
<div className="mt-1 text-sm text-white/85">
|
||||||
|
Anzahl der versicherten Krankheiten beeinflusst die Prämie.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 rounded-lg bg-white/10 p-4 text-sm text-white/90">
|
||||||
|
Beispiel: Beiträge liegen in Deutschland meist zwischen 10 € und 80 € monatlich.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="details" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Details & Vorteile</h3>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
Umfassender Schutz bei schweren Krankheiten – mit sofortiger Leistungsauszahlung und flexibler Gestaltung.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{benefits.map((benefit, index) => (
|
||||||
|
<Card key={index} className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<benefit.icon className="w-5 h-5 text-blue-700" />
|
||||||
|
{benefit.title}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>{benefit.description}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<h4 className="text-lg font-semibold text-gray-900 mb-3">Versicherte Krankheiten</h4>
|
||||||
|
<div className="rounded-lg border border-gray-200 bg-white overflow-hidden">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead className="bg-gray-50 border-b border-gray-200">
|
||||||
|
<tr>
|
||||||
|
<th className="px-4 py-3 text-left text-sm font-medium text-gray-900">Krankheitsgruppe</th>
|
||||||
|
<th className="px-4 py-3 text-left text-sm font-medium text-gray-900">Beispiele</th>
|
||||||
|
<th className="px-4 py-3 text-left text-sm font-medium text-gray-900">Leistung</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-gray-200">
|
||||||
|
<tr className="hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-3 text-sm font-medium text-gray-900">Krebserkrankungen</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">Brustkrebs, Lungenkrebs, Darmkrebs, Prostatakrebs</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">Sofortauszahlung bei Diagnose</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-3 text-sm font-medium text-gray-900">Herz-Kreislauf</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">Herzinfarkt, Herzinsuffizienz, Koronare Herzkrankheit</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">100% der vereinbarten Summe</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-3 text-sm font-medium text-gray-900">Schlaganfall</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">Ischämischer und hämorrhagischer Schlaganfall</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">Sofortleistung bei bleibenden Schäden</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-3 text-sm font-medium text-gray-900">Organversagen</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">Nierenversagen, Leberversagen, Pankreasversagen</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">Vollständige Auszahlung</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-3 text-sm font-medium text-gray-900">Nervensystem</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">Multiple Sklerose, Parkinson, ALS</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">Progressive Leistungsauszahlung</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-3 text-sm font-medium text-gray-900">Weitere Krankheiten</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">Blindheit, Taubheit, Verbrennungen, Koma</td>
|
||||||
|
<td className="px-4 py-3 text-sm text-gray-700">Je nach Schweregrad</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||||||
|
<p className="text-sm text-blue-900">
|
||||||
|
<strong>Hinweis:</strong> Die genauen Krankheiten und Bedingungen entnehmen Sie bitte der
|
||||||
|
<a href="/PDF/Kundenbroschüre.pdf" download className="text-blue-700 hover:text-blue-800 underline ml-1">Kundenbroschüre</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src={assetUrl('head_pillen.jpg')} alt="Details & Vorteile">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Tipp</CardTitle>
|
||||||
|
<CardDescription>Leistungsumfang sorgfältig prüfen.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-sm text-gray-700">
|
||||||
|
Achten Sie auf welche Krankheiten versichert sind und ob Vorerkrankungen
|
||||||
|
ausgeschlossen sind. Prüfen Sie auch die Höhe der Sofortleistung.
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="calculator" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Krankheits-Schutz-Vergleichsrechner</h3>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
Ein Richtwert hilft bei der Orientierung. Für ein exaktes Angebot brauchen
|
||||||
|
wir u. a. Alter, Gesundheitszustand und gewünschte Leistungssumme.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Card className="mt-6 border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg flex items-center gap-2">
|
||||||
|
<Calculator className="w-5 h-5 text-blue-700" />
|
||||||
|
Grobe Beitragsschätzung
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>Unverbindlich – wir kalkulieren danach exakt.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Alter</label>
|
||||||
|
<select
|
||||||
|
name="age"
|
||||||
|
value={formData.age}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="18-25">18-25 Jahre</option>
|
||||||
|
<option value="26-35">26-35 Jahre</option>
|
||||||
|
<option value="36-45">36-45 Jahre</option>
|
||||||
|
<option value="46-55">46-55 Jahre</option>
|
||||||
|
<option value="56-65">56-65 Jahre</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Leistungssumme</label>
|
||||||
|
<select
|
||||||
|
name="coverageAmount"
|
||||||
|
value={formData.coverageAmount}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="25000">25.000 €</option>
|
||||||
|
<option value="50000">50.000 €</option>
|
||||||
|
<option value="75000">75.000 €</option>
|
||||||
|
<option value="100000">100.000 €</option>
|
||||||
|
<option value="200000">200.000 €</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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="mt-1 text-sm text-blue-900">
|
||||||
|
Krankheits-Schutzbrief ab <span className="font-bold">ca. 10 €</span>/Monat
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-blue-900/80 mt-2">
|
||||||
|
Abhängig von Alter, Gesundheitszustand, Leistungssumme und Umfang.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button onClick={() => setActiveTab('form')} className="w-full bg-blue-700 hover:bg-blue-800">
|
||||||
|
Jetzt konkretes Angebot anfordern
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src={assetUrl('head_pillen.jpg')} alt="Krankheits-Schutz-Vergleichsrechner">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Was wir fürs Angebot brauchen</CardTitle>
|
||||||
|
<CardDescription>Je genauer, desto besser.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<FileText className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||||
|
<span>Alter und Gesundheitszustand</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Search className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||||
|
<span>Vorerkrankungen und Risikofaktoren</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<AlertCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||||
|
<span>Gewünschte Leistungssumme und Krankheiten</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="form" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Anfrageformular</h3>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
Sende uns deine Eckdaten – wir melden uns mit einem passenden Angebot.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Card className="mt-6 border-gray-200">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<form onSubmit={handleFormSubmit} className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Name</label>
|
||||||
|
<input
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Telefon</label>
|
||||||
|
<input
|
||||||
|
name="phone"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">E-Mail</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Alter</label>
|
||||||
|
<select
|
||||||
|
name="age"
|
||||||
|
value={formData.age}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="18-25">18-25 Jahre</option>
|
||||||
|
<option value="26-35">26-35 Jahre</option>
|
||||||
|
<option value="36-45">36-45 Jahre</option>
|
||||||
|
<option value="46-55">46-55 Jahre</option>
|
||||||
|
<option value="56-65">56-65 Jahre</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Leistungssumme</label>
|
||||||
|
<select
|
||||||
|
name="coverageAmount"
|
||||||
|
value={formData.coverageAmount}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="25000">25.000 €</option>
|
||||||
|
<option value="50000">50.000 €</option>
|
||||||
|
<option value="75000">75.000 €</option>
|
||||||
|
<option value="100000">100.000 €</option>
|
||||||
|
<option value="200000">200.000 €</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Laufzeit</label>
|
||||||
|
<select
|
||||||
|
name="duration"
|
||||||
|
value={formData.duration}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="5">5 Jahre</option>
|
||||||
|
<option value="10">10 Jahre</option>
|
||||||
|
<option value="15">15 Jahre</option>
|
||||||
|
<option value="20">20 Jahre</option>
|
||||||
|
<option value="30">30 Jahre</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Gesundheitszustand</label>
|
||||||
|
<select
|
||||||
|
name="healthStatus"
|
||||||
|
value={formData.healthStatus}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="gesund">Gesund</option>
|
||||||
|
<option value="kleine-beschwerden">Kleine Beschwerden</option>
|
||||||
|
<option value="chronisch">Chronische Erkrankungen</option>
|
||||||
|
<option value="unbekannt">Möchte ich nicht angeben</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">
|
||||||
|
Haben Sie in den letzten 12 Monaten, wenn auch nur gelegentlich, geraucht und/oder Nikotin konsumiert?*
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
name="smoker"
|
||||||
|
value={formData.smoker}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="ja">Ja</option>
|
||||||
|
<option value="nein">Nein</option>
|
||||||
|
</select>
|
||||||
|
<div className="mt-2 text-xs text-gray-600">
|
||||||
|
<p className="font-semibold">* Rauchen und/oder Nikotinkonsum ist:</p>
|
||||||
|
<p>a) Rauchen von Zigarette, Zigarillo, Zigarre, Pfeife, Tabak, Shisha oder Wasserpfeife,</p>
|
||||||
|
<p>b) Konsum von E-Zigarette, E-Pfeife, E-Zigarre, Schnupftabak, Kautabak, Nikotinersatzprodukte wie Nikotinpflaster oder Kaugummi.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Nachricht</label>
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm min-h-[120px]"
|
||||||
|
placeholder="Welche Krankheiten sollen versichert sein?"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="submit" className="bg-blue-700 hover:bg-blue-800">
|
||||||
|
Anfrage senden
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src="/head_kontakt_agentur_mizera.jpg" alt="Anfrageformular">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Direktkontakt</CardTitle>
|
||||||
|
<CardDescription>Wenn es schnell gehen soll.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Phone className="w-4 h-4 text-blue-700" />
|
||||||
|
<span>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></span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Mail className="w-4 h-4 text-blue-700" />
|
||||||
|
<span>E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></span>
|
||||||
|
</div>
|
||||||
|
<div className="pt-2">
|
||||||
|
<Button variant="outline" className="w-full" onClick={() => navigate('/contact')}>
|
||||||
|
Kontaktseite
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
|
||||||
|
<TabsContent value="brochure" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Kundenbroschüre (PDF)</h3>
|
||||||
|
<p className="mt-2 text-gray-600">Broschüre als PDF zum Download.</p>
|
||||||
|
|
||||||
|
<Card className="mt-6 border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Krankheits-Schutzbrief (PDF)</CardTitle>
|
||||||
|
<CardDescription>Informationsbroschüre zur Krankheits-Schutzversicherung</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="flex flex-col md:flex-row gap-4 items-center">
|
||||||
|
<div className="flex-1">
|
||||||
|
<a href="/PDF/Kundenbroschüre.pdf" download className="block">
|
||||||
|
<Button className="bg-blue-700 hover:bg-blue-800 w-full">
|
||||||
|
<Download className="w-4 h-4 mr-2" />
|
||||||
|
PDF herunterladen
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center gap-1">
|
||||||
|
<div className="w-20 h-20 bg-white border-2 border-gray-300 rounded-lg p-1 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-gray-100 rounded flex items-center justify-center">
|
||||||
|
<div className="text-xs text-gray-600 text-center font-semibold">
|
||||||
|
QR-Code
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-gray-600 text-center">
|
||||||
|
Scan für Zugriff
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src={assetUrl('head_pillen.jpg')} alt="Kundenbroschüre">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Hinweis</CardTitle>
|
||||||
|
<CardDescription>Bei Fragen beraten wir gerne.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<GeneralNotice />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Krankheitsschutzbrief;
|
||||||
@ -15,12 +15,12 @@ const Privatkunden = () => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const pool = [
|
const pool = [
|
||||||
{ title: 'KFZ-Fahrzeuge', href: '/kfz', image: assetUrl('Fotolia_8654128_XS.jpg') },
|
{ title: t('topics.kfz', 'KFZ-Fahrzeuge'), href: '/kfz', image: assetUrl('Fotolia_8654128_XS.jpg') },
|
||||||
{ title: 'Sachversicherung', href: '/sachversicherung', image: assetUrl('iStock-943842590.jpg') },
|
{ title: t('topics.sach', 'Sachversicherung'), href: '/sachversicherung', image: assetUrl('iStock-943842590.jpg') },
|
||||||
{ title: 'Gesundheitsvorsorge', href: '/gesundheitsvorsorge', image: assetUrl('iStock-819100588.jpg') },
|
{ title: t('topics.gesundheit', 'Gesundheitsvorsorge'), href: '/gesundheitsvorsorge', image: assetUrl('iStock-819100588.jpg') },
|
||||||
{ title: 'Vermögenssicherung', href: '/vermoegenssicherung', image: assetUrl('iStock-495809266.jpg') },
|
{ title: t('topics.vermoegen', 'Vermögenssicherung'), href: '/vermoegenssicherung', image: assetUrl('iStock-495809266.jpg') },
|
||||||
{ title: 'Risikoschutz', href: '/risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
{ title: t('topics.risiko', 'Risikoschutz'), href: '/risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
||||||
{ title: 'Altersvorsorge', href: '/altersvorsorge', image: assetUrl('Fotolia_67327775_XS.jpg') },
|
{ title: t('topics.altersvorsorge', 'Altersvorsorge'), href: '/altersvorsorge', image: assetUrl('Fotolia_67327775_XS.jpg') },
|
||||||
];
|
];
|
||||||
|
|
||||||
setFocusTopics(
|
setFocusTopics(
|
||||||
@ -31,13 +31,20 @@ const Privatkunden = () => {
|
|||||||
const services = [
|
const services = [
|
||||||
{
|
{
|
||||||
icon: Shield,
|
icon: Shield,
|
||||||
title: 'KFZ-Versicherung',
|
title: t('services.kfz.title', 'KFZ-Versicherung'),
|
||||||
description: 'Perfekter Schutz für Ihr Fahrzeug – individuell und fair',
|
description: t('services.kfz.description', 'Perfekter Schutz für Ihr Fahrzeug – individuell und fair'),
|
||||||
features: ['Autoversicherung', 'Motorradversicherung', 'Quadversicherung', 'FairMobil', 'Drittfahrer-Schutz', 'Flottenversicherung']
|
features: [
|
||||||
|
t('services.kfz.features.auto', 'Autoversicherung'),
|
||||||
|
t('services.kfz.features.motorrad', 'Motorradversicherung'),
|
||||||
|
t('services.kfz.features.quad', 'Quadversicherung'),
|
||||||
|
t('services.kfz.features.fairmobil', 'FairMobil'),
|
||||||
|
t('services.kfz.features.drittfahrer', 'Drittfahrer-Schutz'),
|
||||||
|
t('services.kfz.features.flotte', 'Flottenversicherung')
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Shield,
|
icon: Shield,
|
||||||
title: 'Sachversicherung',
|
title: t('services.sach.title', 'Sachversicherung'),
|
||||||
description: 'Ihr Hab und Gut bestens abgesichert',
|
description: 'Ihr Hab und Gut bestens abgesichert',
|
||||||
features: ['Hausratversicherung', 'Unfallversicherung']
|
features: ['Hausratversicherung', 'Unfallversicherung']
|
||||||
},
|
},
|
||||||
|
|||||||
665
src/pages/Risikolebensversicherung.tsx
Normal file
665
src/pages/Risikolebensversicherung.tsx
Normal file
@ -0,0 +1,665 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, Gauge, Heart, UserCheck } from 'lucide-react';
|
||||||
|
import Layout from '@/components/Layout';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Progress } from '@/components/ui/progress';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
|
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||||
|
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||||||
|
|
||||||
|
const Risikolebensversicherung = () => {
|
||||||
|
const { t } = useTranslation('risikolebensversicherung');
|
||||||
|
|
||||||
|
// Add SEO metadata for search
|
||||||
|
React.useEffect(() => {
|
||||||
|
document.title = t('title', 'Risikolebensversicherung') + ' - Agentur Mizera';
|
||||||
|
const metaDescription = document.querySelector('meta[name="description"]');
|
||||||
|
if (metaDescription) {
|
||||||
|
metaDescription.setAttribute('content', t('title', 'Risikolebensversicherung') + ': ' + t('subtitle', 'Optimaler Schutz für Ihre Familie im Todesfall') + '. Unabhängige Beratung und Tarifvergleich für Risikolebensversicherungen.');
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
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: '',
|
||||||
|
age: '',
|
||||||
|
coverageAmount: '',
|
||||||
|
duration: '',
|
||||||
|
healthStatus: '',
|
||||||
|
message: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
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();
|
||||||
|
const subject = encodeURIComponent(`Anfrage Risikolebensversicherung - ${formData.name}`);
|
||||||
|
const body = encodeURIComponent(
|
||||||
|
`Name: ${formData.name}\nTelefon: ${formData.phone}\nE-Mail: ${formData.email}\nAlter: ${formData.age}\nVersicherungssumme: ${formData.coverageAmount}€\nLaufzeit: ${formData.duration} Jahre\nGesundheitszustand: ${formData.healthStatus}\n\nNachricht:\n${formData.message}`
|
||||||
|
);
|
||||||
|
window.location.href = `mailto:info@finanzen-mizera.de?subject=${subject}&body=${body}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const benefits = [
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: t('benefits.family.title', 'Familienschutz'),
|
||||||
|
description: t('benefits.family.description', 'Sichert Ihre Familie finanziell ab')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: t('benefits.death.title', 'Todesfallschutz'),
|
||||||
|
description: t('benefits.death.description', 'Zahlung bei Tod der versicherten Person')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Calculator,
|
||||||
|
title: t('benefits.cheap.title', 'Günstige Beiträge'),
|
||||||
|
description: t('benefits.cheap.description', 'Reiner Risikoschutz ohne Sparanteil')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: FileCheck,
|
||||||
|
title: t('benefits.easy.title', 'Einfacher Abschluss'),
|
||||||
|
description: t('benefits.easy.description', 'Schnelle und unkomplizierte Beantragung')
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className="h-96 bg-cover bg-center relative"
|
||||||
|
style={{ backgroundImage: `url(${assetUrl('iStock-975006448.jpg')})` }}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-gray-900/20" />
|
||||||
|
<div className="relative container mx-auto px-4 h-full flex items-center">
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<div className="bg-black/40 text-white px-8 py-6 md:px-10 md:py-8 shadow-lg">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
{t('title', 'Risikolebensversicherung')}
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-white/90 mb-8 max-w-2xl">
|
||||||
|
{t('subtitle', 'Optimaler Schutz für Ihre Familie im Todesfall')}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<Button onClick={() => setActiveTab('form')} size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||||
|
{t('buttons.consultation', 'Jetzt beraten lassen')}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => setActiveTab('calculator')} size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
|
||||||
|
{t('buttons.calculator', 'Beitrag berechnen')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<style>{`
|
||||||
|
[data-state="active"] {
|
||||||
|
outline: none !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
button:focus-visible {
|
||||||
|
outline: none !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
<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('title', 'Risikolebensversicherung')}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||||
|
<Tabs
|
||||||
|
value={activeTab}
|
||||||
|
onValueChange={(next) => {
|
||||||
|
setActiveTab(next);
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
id="tab-section"
|
||||||
|
>
|
||||||
|
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||||||
|
<TabsList className="grid grid-cols-5 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Shield className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.overview', 'Übersicht')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<FileText className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.details', 'Details')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Calculator className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.calculator', 'Rechner')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Phone className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.form', 'Anfrage')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="brochure"
|
||||||
|
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||||
|
>
|
||||||
|
<Download className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.brochure', 'PDF')}
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TabsContent value="overview" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<div className="flex items-center gap-2 mb-6">
|
||||||
|
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||||||
|
<Shield className="w-4 h-4 text-blue-700" />
|
||||||
|
</div>
|
||||||
|
<span className="text-lg font-semibold text-gray-900">{t('overview.subtitle', 'Ihre Familie optimal absichern')}</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||||
|
{t('title', 'Risikolebensversicherung')}
|
||||||
|
<span className="block text-blue-700">{t('overview.tagline', 'Finanzielle Sicherheit für Ihre Liebsten')}</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-4 text-gray-600 text-lg">
|
||||||
|
{t('overview.description', 'Eine Risikolebensversicherung bietet reinen Todesfallschutz zu günstigen Beiträgen. Im Todesfall der versicherten Person wird die vereinbarte Versicherungssumme an die Hinterbliebenen ausgezahlt.')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-8 space-y-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-900">{t('overview.benefit1.title', 'Reiner Risikoschutz')}</h3>
|
||||||
|
<p className="text-gray-600">{t('overview.benefit1.description', 'Kein Sparanteil - nur Schutz für den Todesfall')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-900">{t('overview.benefit2.title', 'Günstige Beiträge')}</h3>
|
||||||
|
<p className="text-gray-600">{t('overview.benefit2.description', 'Deutlich günstiger als kapitalbildende Lebensversicherung')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-900">{t('overview.benefit3.title', 'Flexible Laufzeiten')}</h3>
|
||||||
|
<p className="text-gray-600">{t('overview.benefit3.description', 'Anpassbar an Ihre individuelle Situation')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Risikolebensversicherung">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">{t('overview.features.title', 'Leistungen im Überblick')}</h3>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||||
|
<span className="text-sm">{t('overview.features.item1', 'Todesfallleistung')}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||||
|
<span className="text-sm">{t('overview.features.item2', 'Kreditabsicherung möglich')}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||||
|
<span className="text-sm">{t('overview.features.item3', 'Steuerfrei (§20 EStG)')}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
||||||
|
<span className="text-sm">{t('overview.features.item4', 'Unabhängige Tarifauswahl')}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="details" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">{t('details.title', 'Details zur Risikolebensversicherung')}</h3>
|
||||||
|
|
||||||
|
<div className="mt-6 space-y-6">
|
||||||
|
<div>
|
||||||
|
<h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.what.title', 'Was ist eine Risikolebensversicherung?')}</h4>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
{t('details.what.description', 'Eine Risikolebensversicherung ist eine reine Risikoversicherung, die nur im Todesfall der versicherten Person leistet. Im Gegensatz zur kapitalbildenden Lebensversicherung enthält sie keinen Sparanteil und ist daher deutlich günstiger.')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.features.title', 'Wichtigste Merkmale')}</h4>
|
||||||
|
<ul className="space-y-2 text-gray-600">
|
||||||
|
<li>• {t('details.features.item1', 'Reiner Todesfallschutz ohne Kapitalbildung')}</li>
|
||||||
|
<li>• {t('details.features.item2', 'Günstige monatliche Beiträge')}</li>
|
||||||
|
<li>• {t('details.features.item3', 'Flexible Versicherungssummen (typisch 100.000€ - 1.000.000€)')}</li>
|
||||||
|
<li>• {t('details.features.item4', 'Laufzeiten meist 10, 15, 20 oder 30 Jahre')}</li>
|
||||||
|
<li>• {t('details.features.item5', 'Steuerfreie Auszahlung an Hinterbliebene')}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.suitable.title', 'Für wen geeignet?')}</h4>
|
||||||
|
<ul className="space-y-2 text-gray-600">
|
||||||
|
<li>• {t('details.suitable.item1', 'Familien mit Kindern zur Absicherung des Einkommensverlusts')}</li>
|
||||||
|
<li>• {t('details.suitable.item2', 'Hausbesitzer zur Absicherung von Immobiliendarlehen')}</li>
|
||||||
|
<li>• {t('details.suitable.item3', 'Selbstständige zur Absicherung von Geschäftspartnern')}</li>
|
||||||
|
<li>• {t('details.suitable.item4', 'Alle, die Hinterbliebene finanziell absichern möchten')}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Details">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">Beispielrechnung</h3>
|
||||||
|
<div className="bg-blue-50 rounded-lg p-4">
|
||||||
|
<div className="text-sm text-blue-900 font-semibold mb-2">Beispiel: 40-jähriger Mann, Nichtraucher</div>
|
||||||
|
<div className="space-y-2 text-sm text-blue-900">
|
||||||
|
<div>• Versicherungssumme: 250.000€</div>
|
||||||
|
<div>• Laufzeit: 20 Jahre</div>
|
||||||
|
<div>• Monatlicher Beitrag: ca. 15-25€</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 rounded-xl bg-blue-700 p-6 text-white">
|
||||||
|
<h3 className="text-2xl font-bold">Was beeinflusst die Kosten?</h3>
|
||||||
|
|
||||||
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="rounded-lg bg-white/10 p-4">
|
||||||
|
<h4 className="font-semibold mb-2">Risikofaktoren</h4>
|
||||||
|
<ul className="text-sm space-y-1">
|
||||||
|
<li>• Alter bei Vertragsbeginn</li>
|
||||||
|
<li>• Gesundheitszustand</li>
|
||||||
|
<li>• Raucherstatus</li>
|
||||||
|
<li>• Berufliche Risiken</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-lg bg-white/10 p-4">
|
||||||
|
<h4 className="font-semibold mb-2">Vertragsdetails</h4>
|
||||||
|
<ul className="text-sm space-y-1">
|
||||||
|
<li>• Versicherungssumme</li>
|
||||||
|
<li>• Laufzeit</li>
|
||||||
|
<li>• Einschließungen</li>
|
||||||
|
<li>• Zahlweise (monatlich/jährlich)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="calculator" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Beitragsrechner</h3>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
Berechnen Sie grob den monatlichen Beitrag für Ihre Risikolebensversicherung.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-6 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Alter</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="z.B. 35"
|
||||||
|
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Versicherungssumme (€)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="z.B. 250000"
|
||||||
|
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Laufzeit (Jahre)</label>
|
||||||
|
<select className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm">
|
||||||
|
<option value="">Bitte wählen</option>
|
||||||
|
<option value="10">10 Jahre</option>
|
||||||
|
<option value="15">15 Jahre</option>
|
||||||
|
<option value="20">20 Jahre</option>
|
||||||
|
<option value="30">30 Jahre</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Raucherstatus</label>
|
||||||
|
<select className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm">
|
||||||
|
<option value="">Bitte wählen</option>
|
||||||
|
<option value="nein">Nichtraucher</option>
|
||||||
|
<option value="ja">Raucher</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button className="w-full bg-blue-700 hover:bg-blue-800">
|
||||||
|
Beitrag berechnen
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||||||
|
<div className="text-sm text-blue-900 font-semibold">Unverbindliche Schätzung</div>
|
||||||
|
<div className="mt-1 text-sm text-blue-900">
|
||||||
|
Monatlicher Beitrag: <span className="font-bold">ca. 15-25 €</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-blue-900/80 mt-2">
|
||||||
|
Dies ist eine grobe Schätzung. Der genaue Beitrag hängt von vielen Faktoren ab und wird vom Versicherer individuell berechnet.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Rechner">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900">Beispielrechnungen</h3>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="border rounded-lg p-3">
|
||||||
|
<div className="text-sm font-semibold text-gray-900">Beispiel 1: Junge Familie</div>
|
||||||
|
<div className="text-xs text-gray-600 mt-1">
|
||||||
|
35 Jahre, Nichtraucher, 250.000€, 20 Jahre<br/>
|
||||||
|
<strong>Monatlich ca. 15-20 €</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border rounded-lg p-3">
|
||||||
|
<div className="text-sm font-semibold text-gray-900">Beispiel 2: Immobilienfinanzierung</div>
|
||||||
|
<div className="text-xs text-gray-600 mt-1">
|
||||||
|
40 Jahre, Nichtraucher, 200.000€, 15 Jahre<br/>
|
||||||
|
<strong>Monatlich ca. 20-30 €</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border rounded-lg p-3">
|
||||||
|
<div className="text-sm font-semibold text-gray-900">Beispiel 3: Ältere Person</div>
|
||||||
|
<div className="text-xs text-gray-600 mt-1">
|
||||||
|
50 Jahre, Raucher, 100.000€, 10 Jahre<br/>
|
||||||
|
<strong>Monatlich ca. 40-60 €</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 p-3 bg-yellow-50 rounded-lg border border-yellow-200">
|
||||||
|
<div className="text-xs text-yellow-900">
|
||||||
|
<strong>Hinweis:</strong> Dies sind nur Beispiele. Der tatsächliche Beitrag wird individuell berechnet.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="form" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Beratungsanfrage</h3>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
Füllen Sie das Formular aus und wir erstellen Ihnen ein unverbindliches Angebot.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Name*</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
required
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
placeholder="Ihr vollständiger Name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Telefon*</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
name="phone"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
required
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
placeholder="Ihre Telefonnummer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700">E-Mail*</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
required
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
placeholder="Ihre E-Mail-Adresse"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Alter*</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="age"
|
||||||
|
value={formData.age}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
required
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
placeholder="Ihr Alter in Jahren"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Versicherungssumme (€)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="coverageAmount"
|
||||||
|
value={formData.coverageAmount}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
placeholder="z.B. 250000"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Laufzeit (Jahre)</label>
|
||||||
|
<select
|
||||||
|
name="duration"
|
||||||
|
value={formData.duration}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="10">10 Jahre</option>
|
||||||
|
<option value="15">15 Jahre</option>
|
||||||
|
<option value="20">20 Jahre</option>
|
||||||
|
<option value="30">30 Jahre</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Gesundheitszustand</label>
|
||||||
|
<select
|
||||||
|
name="healthStatus"
|
||||||
|
value={formData.healthStatus}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="gesund">Gesund</option>
|
||||||
|
<option value="kleine-beschwerden">Kleine Beschwerden</option>
|
||||||
|
<option value="chronisch">Chronische Erkrankungen</option>
|
||||||
|
<option value="unbekannt">Möchte ich nicht angeben</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700">Nachricht</label>
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm min-h-[120px]"
|
||||||
|
placeholder="Zusätzliche Informationen oder Fragen..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="submit" className="bg-blue-700 hover:bg-blue-800">
|
||||||
|
Anfrage senden
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src="/head_kontakt_agentur_mizera.jpg" alt="Anfrageformular">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Direktkontakt</CardTitle>
|
||||||
|
<CardDescription>Wenn es schnell gehen soll.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Phone className="w-4 h-4 text-blue-700" />
|
||||||
|
<span>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></span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Mail className="w-4 h-4 text-blue-700" />
|
||||||
|
<span>E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></span>
|
||||||
|
</div>
|
||||||
|
<div className="pt-2">
|
||||||
|
<Button variant="outline" className="w-full" onClick={() => navigate('/contact')}>
|
||||||
|
Kontaktseite
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="brochure" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Informationsmaterial</h3>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
Laden Sie unsere Informationsbroschüre zur Risikolebensversicherung herunter.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Card className="mt-6 border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Risikolebensversicherung (PDF)</CardTitle>
|
||||||
|
<CardDescription>Informationsbroschüre zur Risikolebensversicherung</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<a href="/PDF/PR_DEGTP_PP_2DE.pdf" download>
|
||||||
|
<Button className="bg-blue-700 hover:bg-blue-800 w-full">PDF herunterladen</Button>
|
||||||
|
</a>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Informationsmaterial">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Hinweis</CardTitle>
|
||||||
|
<CardDescription>Bei Fragen beraten wir gerne.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Phone className="w-4 h-4 text-blue-700" />
|
||||||
|
<span>Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a></span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Mail className="w-4 h-4 text-blue-700" />
|
||||||
|
<span>E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Benefits Section */}
|
||||||
|
<div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{benefits.map((benefit, index) => {
|
||||||
|
const Icon = benefit.icon;
|
||||||
|
return (
|
||||||
|
<Card key={index} className="text-center">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Icon className="w-6 h-6 text-blue-700" />
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-gray-900 mb-2">{benefit.title}</h3>
|
||||||
|
<p className="text-sm text-gray-600">{benefit.description}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* General Notice */}
|
||||||
|
<GeneralNotice />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Risikolebensversicherung;
|
||||||
693
src/pages/Risikolebensversicherung_backup.tsx
Normal file
693
src/pages/Risikolebensversicherung_backup.tsx
Normal file
@ -0,0 +1,693 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, Gauge, Heart } from 'lucide-react';
|
||||||
|
import Layout from '@/components/Layout';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Progress } from '@/components/ui/progress';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
|
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||||
|
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||||||
|
|
||||||
|
const Auslandsreisekrankenversicherung = () => {
|
||||||
|
const { t } = useTranslation('auslandsreisekrankenversicherung');
|
||||||
|
|
||||||
|
// Add SEO metadata for search
|
||||||
|
React.useEffect(() => {
|
||||||
|
document.title = 'Auslandsreisekrankenversicherung - Agentur Mizera';
|
||||||
|
const metaDescription = document.querySelector('meta[name="description"]');
|
||||||
|
if (metaDescription) {
|
||||||
|
metaDescription.setAttribute('content', 'Auslandsreisekrankenversicherung: Sorgenfrei reisen mit umfassendem Schutz im Ausland. Unabhängige Beratung und Tarifvergleich für Reiseversicherungen.');
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
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: '',
|
||||||
|
destination: '',
|
||||||
|
travelDuration: '',
|
||||||
|
coverageType: '',
|
||||||
|
message: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleFormChange = (
|
||||||
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
||||||
|
) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFormSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log('Form submitted:', formData);
|
||||||
|
navigate('/contact');
|
||||||
|
};
|
||||||
|
|
||||||
|
const benefits = [
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Weltweiter Schutz',
|
||||||
|
description: 'Sicherheit bei Reisen in alle Länder',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Heart,
|
||||||
|
title: 'Medizinische Notfälle',
|
||||||
|
description: 'Sofortige Hilfe bei Krankheit und Unfall',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Star,
|
||||||
|
title: 'Kostenübernahme',
|
||||||
|
description: 'Übernahme von Arzt- und Krankenhauskosten',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: 'Rückholung',
|
||||||
|
description: 'Organisation des medizinischen Rücktransports',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: FileText,
|
||||||
|
title: '24h Hotline',
|
||||||
|
description: 'Rund um die Uhr erreichbare Notfallnummer',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Dental-Schutz',
|
||||||
|
description: 'Zahnbehandlungen im Ausland mitversichert',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const services = [
|
||||||
|
'Ärztliche Behandlungen im Ausland',
|
||||||
|
'Krankenhausaufenthalte',
|
||||||
|
'Notfall-Operationen',
|
||||||
|
'Medikamenteneinbezug',
|
||||||
|
'Zahnbehandlungen',
|
||||||
|
'Augenoptikerleistungen',
|
||||||
|
'Rücktransport nach Deutschland',
|
||||||
|
'Kostenlose Notfall-Hotline',
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className="h-96 bg-cover bg-center relative"
|
||||||
|
style={{ backgroundImage: `url(${assetUrl('iStock-637584740.jpg')})` }}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-gray-900/20" />
|
||||||
|
<div className="relative container mx-auto px-4 h-full flex items-center">
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<div className="bg-black/40 text-white px-8 py-6 md:px-10 md:py-8 shadow-lg">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
Auslandsreisekrankenversicherung
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-white/90 mb-8 max-w-2xl">
|
||||||
|
Sorgenfrei reisen mit umfassendem Schutz im Ausland
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<Button onClick={() => setActiveTab('form')} size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||||
|
Jetzt beraten lassen
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => setActiveTab('calculator')} size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
|
||||||
|
Beitrag berechnen
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<style>{`
|
||||||
|
[data-state="active"] {
|
||||||
|
outline: none !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
button:focus {
|
||||||
|
outline: none !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
button:focus-visible {
|
||||||
|
outline: none !important;
|
||||||
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
<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">
|
||||||
|
Auslandsreisekrankenversicherung
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||||
|
<Tabs
|
||||||
|
value={activeTab}
|
||||||
|
onValueChange={(next) => {
|
||||||
|
setActiveTab(next);
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
id="tab-section"
|
||||||
|
>
|
||||||
|
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||||||
|
<TabsList className="grid grid-cols-5 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Shield className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.overview', 'Übersicht')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<FileText className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.details', 'Details')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Calculator className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.calculator', 'Rechner')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Phone className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.form', 'Anfrage')}
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="brochure"
|
||||||
|
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||||||
|
>
|
||||||
|
<Download className="w-4 h-4 mr-1.5" />
|
||||||
|
{t('tabs.brochure', 'PDF')}
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 md:p-6">
|
||||||
|
<TabsContent value="overview" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
className="gap-8 items-center"
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
|
||||||
|
<Star className="w-4 h-4" />
|
||||||
|
<span>Sicher reisen – optimal geschützt</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||||
|
Auslandsreisekrankenversicherung
|
||||||
|
<span className="block text-blue-700">Sorgenfrei reisen in alle Welt</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-4 text-gray-600 text-lg">
|
||||||
|
Umfassender Schutz für Ihre Gesundheit im Ausland – von Notfallbehandlung bis zum Rücktransport.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||||
|
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
||||||
|
Angebot anfordern
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
|
||||||
|
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">Weltweiter Schutz</div>
|
||||||
|
<div className="text-gray-600">Sicherheit bei Reisen in alle Länder</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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" />
|
||||||
|
<div className="text-sm">
|
||||||
|
<div className="font-semibold text-gray-900">Notfall-Schutz</div>
|
||||||
|
<div className="text-gray-600">Sofortige Hilfe bei Krankheit und Unfall</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
(
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
|
||||||
|
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={assetUrl('iStock-637584740.jpg')}
|
||||||
|
alt="Auslandsreisekrankenversicherung"
|
||||||
|
className="w-full h-[240px] object-cover"
|
||||||
|
onError={(e) => {
|
||||||
|
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="p-5">
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||||
|
<Heart className="w-4 h-4" />
|
||||||
|
<span>Notfallbehandlung, Rücktransport, 24h Hotline</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-sm text-gray-600">
|
||||||
|
Tarifcheck – schnell, fair und passend zu Ihrer Reise.
|
||||||
|
</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">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" />
|
||||||
|
Reise-Schutz
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>Umfassende Absicherung für Ihre Auslandsreise.</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" />
|
||||||
|
Vergleich lohnt sich
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>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" />
|
||||||
|
Persönliche Beratung
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>Klare Schritte & Kontaktmöglichkeiten.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 rounded-xl bg-blue-700 p-6 text-white">
|
||||||
|
<h3 className="text-2xl font-bold">Was beeinflusst die Kosten der Zahnzusatzversicherung?</h3>
|
||||||
|
|
||||||
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="rounded-lg bg-white/10 p-4">
|
||||||
|
<Heart className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||||
|
<div className="mt-3 text-lg font-semibold">Zahnzustand</div>
|
||||||
|
<div className="mt-1 text-sm text-white/85">
|
||||||
|
Aktuelle Zahngesundheit und bisherige Behandlungen beeinflussen die Prämie.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-lg bg-white/10 p-4">
|
||||||
|
<Users className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||||
|
<div className="mt-3 text-lg font-semibold">Alter</div>
|
||||||
|
<div className="mt-1 text-sm text-white/85">
|
||||||
|
Jungere Versicherte zahlen oft geringere Beiträge als ältere.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-lg bg-white/10 p-4">
|
||||||
|
<Shield className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||||
|
<div className="mt-3 text-lg font-semibold">Leistungsumfang</div>
|
||||||
|
<div className="mt-1 text-sm text-white/85">
|
||||||
|
Umfassende Tarife mit 100% Erstattung kosten mehr als Basis-Tarife.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-lg bg-white/10 p-4">
|
||||||
|
<Calculator className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||||
|
<div className="mt-3 text-lg font-semibold">Selbstbeteiligung</div>
|
||||||
|
<div className="mt-1 text-sm text-white/85">
|
||||||
|
Höhere Selbstbeteiligung senkt den monatlichen Beitrag.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 rounded-lg bg-white/10 p-4 text-sm text-white/90">
|
||||||
|
Beispiel: Beiträge liegen in Deutschland meist zwischen 15 € und 80 € monatlich.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="details" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Details & Vorteile</h3>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
Umfassender Schutz für Ihre Gesundheit im Ausland – von Notfallbehandlung bis zum Rücktransport.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
{benefits.map((benefit, index) => (
|
||||||
|
<Card key={index} className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base flex items-center gap-2">
|
||||||
|
<benefit.icon className="w-5 h-5 text-blue-700" />
|
||||||
|
{benefit.title}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>{benefit.description}</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<h4 className="text-lg font-semibold text-gray-900 mb-3">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>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src={assetUrl('iStock-637584740.jpg')} alt="Details & Vorteile">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Tipp</CardTitle>
|
||||||
|
<CardDescription>Deckungssumme & Rücktransport prüfen.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-sm text-gray-700">
|
||||||
|
Achte auf hohe Deckungssummen und optionalen Rücktransport (medizinische
|
||||||
|
Evakuierung, Notfall-Hotline, Assistance).
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="calculator" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Auslandsreise-Vergleichsrechner</h3>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
Ein Richtwert hilft bei der Orientierung. Für ein exaktes Angebot brauchen
|
||||||
|
wir u. a. Reiseziel, Reisedauer und gewünschte Leistungen.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Card className="mt-6 border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg flex items-center gap-2">
|
||||||
|
<Calculator className="w-5 h-5 text-blue-700" />
|
||||||
|
Grobe Beitragsschätzung
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>Unverbindlich – wir kalkulieren danach exakt.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Reiseziel</label>
|
||||||
|
<select
|
||||||
|
name="destination"
|
||||||
|
value={formData.destination}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="europa">Europa</option>
|
||||||
|
<option value="asien">Asien</option>
|
||||||
|
<option value="amerika">Amerika</option>
|
||||||
|
<option value="weltweit">Weltweit</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Reisedauer</label>
|
||||||
|
<select
|
||||||
|
name="travelDuration"
|
||||||
|
value={formData.travelDuration}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="kurz">Bis 14 Tage</option>
|
||||||
|
<option value="mittel">15-30 Tage</option>
|
||||||
|
<option value="lang">Über 30 Tage</option>
|
||||||
|
<option value="jahr">Ganzes Jahr</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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="mt-1 text-sm text-blue-900">
|
||||||
|
Reiseversicherung ab <span className="font-bold">ca. 15 €</span>/Woche
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-blue-900/80 mt-2">
|
||||||
|
Abhängig von Reiseziel, Dauer, Leistungen und Alter.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button onClick={() => setActiveTab('form')} className="w-full bg-blue-700 hover:bg-blue-800">
|
||||||
|
Jetzt konkretes Angebot anfordern
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src={assetUrl('iStock-637584740.jpg')} alt="Auslandsreise-Vergleichsrechner">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Was wir fürs Angebot brauchen</CardTitle>
|
||||||
|
<CardDescription>Je genauer, desto besser.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<FileText className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||||
|
<span>Reisedaten und Zielregion</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Search className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||||
|
<span>Alter und Gesundheitszustand</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<AlertCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||||
|
<span>Wunsch: Rücktransport / Dental-Schutz</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="form" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Anfrageformular</h3>
|
||||||
|
<p className="mt-2 text-gray-600">
|
||||||
|
Sende uns deine Eckdaten – wir melden uns mit einem passenden Angebot.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Card className="mt-6 border-gray-200">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<form onSubmit={handleFormSubmit} className="space-y-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Name</label>
|
||||||
|
<input
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Telefon</label>
|
||||||
|
<input
|
||||||
|
name="phone"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">E-Mail</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Reiseziel</label>
|
||||||
|
<select
|
||||||
|
name="destination"
|
||||||
|
value={formData.destination}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="europa">Europa</option>
|
||||||
|
<option value="asien">Asien</option>
|
||||||
|
<option value="amerika">Amerika</option>
|
||||||
|
<option value="weltweit">Weltweit</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Reisedauer</label>
|
||||||
|
<select
|
||||||
|
name="travelDuration"
|
||||||
|
value={formData.travelDuration}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="kurz">Bis 14 Tage</option>
|
||||||
|
<option value="mittel">15-30 Tage</option>
|
||||||
|
<option value="lang">Über 30 Tage</option>
|
||||||
|
<option value="jahr">Ganzes Jahr</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Versicherungstyp</label>
|
||||||
|
<select
|
||||||
|
name="coverageType"
|
||||||
|
value={formData.coverageType}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
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="einzeln">Einzelversicherung</option>
|
||||||
|
<option value="familie">Familienversicherung</option>
|
||||||
|
<option value="gruppe">Gruppenversicherung</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-gray-700">Nachricht</label>
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleFormChange}
|
||||||
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm min-h-[120px]"
|
||||||
|
placeholder="Welche Leistungen sind Ihnen wichtig?"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="submit" className="bg-blue-700 hover:bg-blue-800">
|
||||||
|
Anfrage senden
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src={assetUrl('head_kontakt_agentur_mizera.jpg')} alt="Anfrageformular">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Direktkontakt</CardTitle>
|
||||||
|
<CardDescription>Wenn es schnell gehen soll.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Phone className="w-4 h-4 text-blue-700" />
|
||||||
|
<span>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></span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Mail className="w-4 h-4 text-blue-700" />
|
||||||
|
<span>E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></span>
|
||||||
|
</div>
|
||||||
|
<div className="pt-2">
|
||||||
|
<Button variant="outline" className="w-full" onClick={() => navigate('/kontakt')}>
|
||||||
|
Kontaktseite
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
|
||||||
|
<TabsContent value="brochure" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Kundenbroschüre (PDF)</h3>
|
||||||
|
<p className="mt-2 text-gray-600">Broschüre als PDF zum Download.</p>
|
||||||
|
|
||||||
|
<Card className="mt-6 border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Auslandsreisekrankenversicherung (PDF)</CardTitle>
|
||||||
|
<CardDescription>Informationsbroschüre zur Auslandsreisekrankenversicherung</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<a href="/PDF/Tarifvergleich-CEZKCEZP_CEZE_01.2023-2791.pdf" download>
|
||||||
|
<Button className="bg-blue-700 hover:bg-blue-800 w-full">PDF herunterladen</Button>
|
||||||
|
</a>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
<RightImageCard src={assetUrl('iStock-637584740.jpg')} alt="Kundenbroschüre">
|
||||||
|
<Card className="border-gray-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Hinweis</CardTitle>
|
||||||
|
<CardDescription>Bei Fragen beraten wir gerne.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
</RightImageCard>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<GeneralNotice />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Auslandsreisekrankenversicherung;
|
||||||
@ -1,42 +1,49 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import { TrendingUp, PiggyBank, DollarSign, Shield, Calculator, Home } from 'lucide-react';
|
import { TrendingUp, PiggyBank, DollarSign, Shield, Calculator, Home } from 'lucide-react';
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import { Card } from '@/components/ui/card';
|
import { Card } from '@/components/ui/card';
|
||||||
|
|
||||||
const Vermoegenssicherung = () => {
|
const Vermoegenssicherung = () => {
|
||||||
|
const { t } = useTranslation('vermoegenssicherung');
|
||||||
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 topics = [
|
const topics = [
|
||||||
{
|
{
|
||||||
title: 'Lebensversicherung',
|
title: t('topics.lebensversicherung', 'Lebensversicherung'),
|
||||||
href: '/finanzen',
|
href: '/finanzen',
|
||||||
image: assetUrl('iStock-495809266.jpg')
|
image: assetUrl('iStock-495809266.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Risikolebensversicherung',
|
title: t('topics.risikolebensversicherung', 'Risikolebensversicherung'),
|
||||||
href: '/finanzen',
|
href: '/risikolebensversicherung',
|
||||||
image: assetUrl('Fotolia_67327775_XS.jpg')
|
image: assetUrl('iStock-975006448.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Wohngebäudeversicherung',
|
title: t('topics.krankheitsschutzbrief', 'Krankheits-Schutzbrief'),
|
||||||
|
href: '/krankheitsschutzbrief',
|
||||||
|
image: assetUrl('head_pillen.jpg')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: t('topics.wohngebaeudeversicherung', 'Wohngebäudeversicherung'),
|
||||||
href: '/hausrat',
|
href: '/hausrat',
|
||||||
image: assetUrl('iStock-943842590.jpg')
|
image: assetUrl('iStock-943842590.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Kapitalanlageversicherung',
|
title: t('topics.altersvorsorge', 'Altersvorsorge'),
|
||||||
href: '/kapitalanlageversicherung',
|
href: '/altersvorsorge',
|
||||||
image: assetUrl('Fotolia_8654128_XS.jpg')
|
image: assetUrl('Fotolia_8654128_XS.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Fondsversicherung',
|
title: t('topics.gesundheitsvorsorge', 'Gesundheitsvorsorge'),
|
||||||
href: '/fondsversicherung',
|
href: '/gesundheitsvorsorge',
|
||||||
image: assetUrl('iStock-970876204.jpg')
|
image: assetUrl('iStock-970876204.jpg')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Vorsorgeversicherung',
|
title: t('topics.risikoschutz', 'Risikoschutz'),
|
||||||
href: '/vorsorgeversicherung',
|
href: '/risikoschutz',
|
||||||
image: assetUrl('iStock-957363908.jpg')
|
image: assetUrl('iStock-957363908.jpg')
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
@ -44,15 +51,37 @@ const Vermoegenssicherung = () => {
|
|||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className="h-96 bg-cover bg-center relative"
|
||||||
|
style={{ backgroundImage: `url(${assetUrl('iStock-975006448.jpg')})` }}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-gray-900/20" />
|
||||||
|
<div className="relative container mx-auto px-4 h-full flex items-center">
|
||||||
|
<div className="max-w-3xl">
|
||||||
|
<div className="bg-black/40 text-white px-8 py-6 md:px-10 md:py-8 shadow-lg">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||||
|
{t('title', 'Vermögenssicherung')}
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-white/90 mb-8 max-w-2xl">
|
||||||
|
{t('subtitle', 'Sichern Sie Ihr Vermögen und bauen Sie Ihren Wohlstand auf')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 py-16">
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 py-16">
|
||||||
<div className="container mx-auto px-4">
|
<div className="container mx-auto px-4">
|
||||||
<div className="max-w-4xl mx-auto text-center">
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
<h1 className="text-4xl font-bold text-gray-900 mb-6">
|
<h2 className="text-4xl font-bold text-gray-900 mb-6">
|
||||||
Vermögenssicherung
|
{t('title', 'Vermögenssicherung')}
|
||||||
</h1>
|
</h2>
|
||||||
<p className="text-xl text-gray-600 mb-8">
|
<p className="text-xl text-gray-600 mb-8">
|
||||||
Sichern Sie Ihr Vermögen und bauen Sie Ihren Wohlstand auf
|
{t('subtitle', 'Sichern Sie Ihr Vermögen und bauen Sie Ihren Wohlstand auf')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user