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 Zahnzusatzversicherung from "./pages/Zahnzusatzversicherung";
|
||||
import Auslandsreisekrankenversicherung from "./pages/Auslandsreisekrankenversicherung";
|
||||
import Risikolebensversicherung from "./pages/Risikolebensversicherung";
|
||||
import Krankheitsschutzbrief from "./pages/Krankheitsschutzbrief";
|
||||
import Gesundheitsvorsorge from "./pages/Gesundheitsvorsorge";
|
||||
import Altersvorsorge from "./pages/Altersvorsorge";
|
||||
import Risikoschutz from "./pages/Risikoschutz";
|
||||
@ -168,6 +170,8 @@ const App = () => {
|
||||
<Route path="/private-krankenversicherung" element={<PrivateKrankenversicherung />} />
|
||||
<Route path="/zahnzusatzversicherung" element={<Zahnzusatzversicherung />} />
|
||||
<Route path="/auslandsreisekrankenversicherung" element={<Auslandsreisekrankenversicherung />} />
|
||||
<Route path="/risikolebensversicherung" element={<Risikolebensversicherung />} />
|
||||
<Route path="/krankheitsschutzbrief" element={<Krankheitsschutzbrief />} />
|
||||
<Route path="/gesundheitsvorsorge" element={<Gesundheitsvorsorge />} />
|
||||
<Route path="/altersvorsorge" element={<Altersvorsorge />} />
|
||||
<Route path="/risikoschutz" element={<Risikoschutz />} />
|
||||
|
||||
@ -35,6 +35,9 @@ const Header = () => {
|
||||
{ name: t('accidentInsurance', 'Unfall'), href: '/unfall', icon: Shield },
|
||||
{ name: t('carInsurance', 'KFZ'), href: '/kfz', icon: Truck },
|
||||
{ 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();
|
||||
|
||||
@ -44,6 +44,9 @@ i18n
|
||||
'geschaeftskunden',
|
||||
'service',
|
||||
'unfall',
|
||||
'vermoegenssicherung',
|
||||
'risikolebensversicherung',
|
||||
'krankheitsschutzbrief',
|
||||
],
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
|
||||
@ -9,7 +9,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import GeneralNotice from '@/components/GeneralNotice';
|
||||
|
||||
const Agentur = () => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useTranslation('agentur');
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
@ -51,7 +51,7 @@ const Agentur = () => {
|
||||
slides={[
|
||||
{
|
||||
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.'),
|
||||
subtitle: t(
|
||||
'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"
|
||||
>
|
||||
<Home className="w-4 h-4 mr-1" />
|
||||
Philosophie
|
||||
{t('tabs.overview', 'Philosophie')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
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"
|
||||
>
|
||||
<Star className="w-4 h-4 mr-1" />
|
||||
Leistungen
|
||||
{t('tabs.leistungen', 'Leistungen')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
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"
|
||||
>
|
||||
<Users className="w-4 h-4 mr-1" />
|
||||
Partner
|
||||
{t('tabs.partner', 'Partner')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="events"
|
||||
|
||||
@ -1,44 +1,66 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Heart, Shield, TrendingUp, PiggyBank, Home, Calculator } from 'lucide-react';
|
||||
import Layout from '@/components/Layout';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import Disclaimer from '@/components/Disclaimer';
|
||||
|
||||
const Altersvorsorge = () => {
|
||||
const { t } = useTranslation('altersvorsorge');
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
const topics = [
|
||||
{
|
||||
title: 'Riester-Rente',
|
||||
title: t('topics.riester.title', 'Riester-Rente'),
|
||||
href: '/riester-rente',
|
||||
image: assetUrl('iStock-957363908.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Rürup-Rente',
|
||||
title: t('topics.ruerup.title', 'Rürup-Rente'),
|
||||
href: '/ruerup-rente',
|
||||
image: assetUrl('iStock-943842590.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Betriebliche Altersvorsorge',
|
||||
title: t('topics.betrieblich.title', 'Betriebliche Altersvorsorge'),
|
||||
href: '/betriebliche-altersvorsorge',
|
||||
image: assetUrl('Fotolia_8654128_XS.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Private Rentenversicherung',
|
||||
title: t('topics.privat.title', 'Private Rentenversicherung'),
|
||||
href: '/private-rentenversicherung',
|
||||
image: assetUrl('iStock-495809266.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Kapitallebensversicherung',
|
||||
title: t('topics.kapital.title', 'Kapitallebensversicherung'),
|
||||
href: '/kapitallebensversicherung',
|
||||
image: assetUrl('Fotolia_67327775_XS.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Fondsgebundene Versicherung',
|
||||
title: t('topics.fonds.title', '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="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-6">
|
||||
Altersvorsorge
|
||||
{t('title', 'Altersvorsorge')}
|
||||
</h1>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -22,37 +22,58 @@ const Finanzen = () => {
|
||||
const services = [
|
||||
{
|
||||
icon: Calculator,
|
||||
title: 'Finanzberatung',
|
||||
description: 'Umfassende Beratung für Ihre finanzielle Zukunft',
|
||||
features: ['Vermögensaufbau', 'Altersvorsorge', 'Sparpläne', 'Investmentberatung', 'Steuerplanung']
|
||||
title: t('services.finanzberatung.title', 'Finanzberatung'),
|
||||
description: t('services.finanzberatung.description', 'Umfassende Beratung für Ihre finanzielle Zukunft'),
|
||||
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,
|
||||
title: 'Vorsorgelösungen',
|
||||
description: 'Sichere Absicherung für alle Lebensphasen',
|
||||
features: ['Private Rentenversicherung', 'Riester-Rente', 'Rürup-Rente', 'Betriebliche Altersvorsorge']
|
||||
title: t('services.vorsorge.title', 'Vorsorgelösungen'),
|
||||
description: t('services.vorsorge.description', 'Sichere Absicherung für alle Lebensphasen'),
|
||||
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,
|
||||
title: 'Vermögensmanagement',
|
||||
description: 'Professionelle Verwaltung Ihres Vermögens',
|
||||
features: ['Fondsberatung', 'Aktienberatung', 'Immobilienfinanzierung', 'Nachlassplanung']
|
||||
title: t('services.vermoegen.title', 'Vermögensmanagement'),
|
||||
description: t('services.vermoegen.description', 'Professionelle Verwaltung Ihres Vermögens'),
|
||||
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,
|
||||
title: 'Kreditberatung',
|
||||
description: 'Optimale Finanzierungslösungen',
|
||||
features: ['Hausfinanzierung', 'Kreditvergleich', 'Umschuldung', 'Fördermittelberatung']
|
||||
title: t('services.kredit.title', 'Kreditberatung'),
|
||||
description: t('services.kredit.description', 'Optimale Finanzierungslösungen'),
|
||||
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 = [
|
||||
'Unabhängige und objektive Beratung',
|
||||
'Transparente Kostenstruktur',
|
||||
'Individuelle Lösungsansätze',
|
||||
'Langfristige Strategien statt kurzfristiger Trends',
|
||||
'Regelmäßige Überprüfung und Anpassung',
|
||||
'Verständliche Empfehlungen ohne Fachchinesisch',
|
||||
t('highlights.unabhaengig', 'Unabhängige und objektive Beratung'),
|
||||
t('highlights.transparent', 'Transparente Kostenstruktur'),
|
||||
t('highlights.individuell', 'Individuelle Lösungsansätze'),
|
||||
t('highlights.langfristig', 'Langfristige Strategien statt kurzfristiger Trends'),
|
||||
t('highlights.ueberpruefung', 'Regelmäßige Überprüfung und Anpassung'),
|
||||
t('highlights.verstaendlich', 'Verständliche Empfehlungen ohne Fachchinesisch'),
|
||||
];
|
||||
|
||||
return (
|
||||
@ -62,7 +83,7 @@ const Finanzen = () => {
|
||||
slides={[
|
||||
{
|
||||
id: 'finanzen-1',
|
||||
kicker: 'Finanzen',
|
||||
kicker: t('hero.kicker', 'Finanzen'),
|
||||
title: t('hero.title', 'Finanzielle Sicherheit mit Plan'),
|
||||
subtitle: t(
|
||||
'hero.subtitle',
|
||||
@ -83,9 +104,10 @@ const Finanzen = () => {
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Finanzlösungen
|
||||
{t('section.title', 'Finanzlösungen')}
|
||||
</h2>
|
||||
<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
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -27,17 +27,17 @@ const Geschaeftskunden = () => {
|
||||
const pool = [
|
||||
{
|
||||
id: 'flottenversicherung',
|
||||
title: 'Flottenversicherung',
|
||||
subtitle: 'Optimaler Schutz für Ihren Fuhrpark\nSicher und wirtschaftlich.',
|
||||
title: t('topics.flotten.title', 'Flottenversicherung'),
|
||||
subtitle: t('topics.flotten.subtitle', 'Optimaler Schutz für Ihren Fuhrpark\nSicher und wirtschaftlich.'),
|
||||
href: '/geschaeftskunden/flottenversicherung',
|
||||
image: assetUrl('Geascheaftskunden/iStock-637230106.jpg'),
|
||||
links: [
|
||||
{ title: 'Flottenmanagement', href: '/geschaeftskunden/flottenversicherung' },
|
||||
{ title: t('topics.flotten.links.management', 'Flottenmanagement'), href: '/geschaeftskunden/flottenversicherung' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'betriebsrente',
|
||||
title: 'Betriebsrente (BAV)',
|
||||
title: t('topics.betriebsrente.title', 'Betriebsrente (BAV)'),
|
||||
subtitle: 'Altersvorsorge für Ihre Mitarbeiter\nZukunftssichere Lösungen.',
|
||||
href: '/geschaeftskunden/betriebsrente',
|
||||
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(() => {
|
||||
const pool = [
|
||||
{ title: 'KFZ-Fahrzeuge', href: '/kfz', image: assetUrl('Fotolia_8654128_XS.jpg') },
|
||||
{ title: 'Sachversicherung', href: '/sachversicherung', image: assetUrl('iStock-943842590.jpg') },
|
||||
{ title: 'Gesundheitsvorsorge', href: '/gesundheitsvorsorge', image: assetUrl('iStock-819100588.jpg') },
|
||||
{ title: 'Vermögenssicherung', href: '/vermoegenssicherung', image: assetUrl('iStock-495809266.jpg') },
|
||||
{ title: 'Risikoschutz', href: '/risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
||||
{ title: 'Altersvorsorge', href: '/altersvorsorge', image: assetUrl('Fotolia_67327775_XS.jpg') },
|
||||
{ title: t('topics.kfz', 'KFZ-Fahrzeuge'), href: '/kfz', image: assetUrl('Fotolia_8654128_XS.jpg') },
|
||||
{ title: t('topics.sach', 'Sachversicherung'), href: '/sachversicherung', image: assetUrl('iStock-943842590.jpg') },
|
||||
{ title: t('topics.gesundheit', 'Gesundheitsvorsorge'), href: '/gesundheitsvorsorge', image: assetUrl('iStock-819100588.jpg') },
|
||||
{ title: t('topics.vermoegen', 'Vermögenssicherung'), href: '/vermoegenssicherung', image: assetUrl('iStock-495809266.jpg') },
|
||||
{ title: t('topics.risiko', 'Risikoschutz'), href: '/risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
||||
{ title: t('topics.altersvorsorge', 'Altersvorsorge'), href: '/altersvorsorge', image: assetUrl('Fotolia_67327775_XS.jpg') },
|
||||
];
|
||||
|
||||
setFocusTopics(
|
||||
@ -31,13 +31,20 @@ const Privatkunden = () => {
|
||||
const services = [
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'KFZ-Versicherung',
|
||||
description: 'Perfekter Schutz für Ihr Fahrzeug – individuell und fair',
|
||||
features: ['Autoversicherung', 'Motorradversicherung', 'Quadversicherung', 'FairMobil', 'Drittfahrer-Schutz', 'Flottenversicherung']
|
||||
title: t('services.kfz.title', 'KFZ-Versicherung'),
|
||||
description: t('services.kfz.description', 'Perfekter Schutz für Ihr Fahrzeug – individuell und fair'),
|
||||
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,
|
||||
title: 'Sachversicherung',
|
||||
title: t('services.sach.title', 'Sachversicherung'),
|
||||
description: 'Ihr Hab und Gut bestens abgesichert',
|
||||
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 { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TrendingUp, PiggyBank, DollarSign, Shield, Calculator, Home } from 'lucide-react';
|
||||
import Layout from '@/components/Layout';
|
||||
import { Card } from '@/components/ui/card';
|
||||
|
||||
const Vermoegenssicherung = () => {
|
||||
const { t } = useTranslation('vermoegenssicherung');
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
const topics = [
|
||||
{
|
||||
title: 'Lebensversicherung',
|
||||
title: t('topics.lebensversicherung', 'Lebensversicherung'),
|
||||
href: '/finanzen',
|
||||
image: assetUrl('iStock-495809266.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Risikolebensversicherung',
|
||||
href: '/finanzen',
|
||||
image: assetUrl('Fotolia_67327775_XS.jpg')
|
||||
title: t('topics.risikolebensversicherung', 'Risikolebensversicherung'),
|
||||
href: '/risikolebensversicherung',
|
||||
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',
|
||||
image: assetUrl('iStock-943842590.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Kapitalanlageversicherung',
|
||||
href: '/kapitalanlageversicherung',
|
||||
title: t('topics.altersvorsorge', 'Altersvorsorge'),
|
||||
href: '/altersvorsorge',
|
||||
image: assetUrl('Fotolia_8654128_XS.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Fondsversicherung',
|
||||
href: '/fondsversicherung',
|
||||
title: t('topics.gesundheitsvorsorge', 'Gesundheitsvorsorge'),
|
||||
href: '/gesundheitsvorsorge',
|
||||
image: assetUrl('iStock-970876204.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Vorsorgeversicherung',
|
||||
href: '/vorsorgeversicherung',
|
||||
title: t('topics.risikoschutz', 'Risikoschutz'),
|
||||
href: '/risikoschutz',
|
||||
image: assetUrl('iStock-957363908.jpg')
|
||||
}
|
||||
];
|
||||
@ -44,15 +51,37 @@ const Vermoegenssicherung = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<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 */}
|
||||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-6">
|
||||
Vermögenssicherung
|
||||
</h1>
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-6">
|
||||
{t('title', 'Vermögenssicherung')}
|
||||
</h2>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user