474 lines
25 KiB
TypeScript
474 lines
25 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import {
|
||
BadgeCheck,
|
||
Calculator,
|
||
Download,
|
||
FileCheck,
|
||
FileText,
|
||
LineChart,
|
||
Mail,
|
||
Phone,
|
||
ShieldCheck,
|
||
TrendingUp,
|
||
} from 'lucide-react';
|
||
import Layout from '@/components/Layout';
|
||
import GeneralNotice from '@/components/GeneralNotice';
|
||
import HeroSlider from '@/components/HeroSlider';
|
||
import { Button } from '@/components/ui/button';
|
||
import Disclaimer from '@/components/Disclaimer';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||
|
||
const TAB_OVERVIEW = 'overview';
|
||
const TAB_DETAILS = 'details';
|
||
const TAB_CALCULATOR = 'calculator';
|
||
const TAB_FORM = 'form';
|
||
const TAB_CATALOG = 'catalog';
|
||
const TAB_BROCHURE = 'brochure';
|
||
|
||
const Berufsunfaehigkeitsversicherung = () => {
|
||
const navigate = useNavigate();
|
||
const location = useLocation();
|
||
const { t } = useTranslation('berufsunfaehigkeit');
|
||
|
||
const baseUrl = import.meta.env.BASE_URL;
|
||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||
|
||
const [activeTab, setActiveTab] = useState<string>(TAB_OVERVIEW);
|
||
|
||
useEffect(() => {
|
||
const hash = (location.hash || '').replace('#', '').toLowerCase();
|
||
|
||
if (hash === TAB_DETAILS) setActiveTab(TAB_DETAILS);
|
||
else if (hash === TAB_CALCULATOR) setActiveTab(TAB_CALCULATOR);
|
||
else if (hash === TAB_FORM) setActiveTab(TAB_FORM);
|
||
else if (hash === TAB_CATALOG) setActiveTab(TAB_CATALOG);
|
||
else if (hash === TAB_BROCHURE) setActiveTab(TAB_BROCHURE);
|
||
else setActiveTab(TAB_OVERVIEW);
|
||
|
||
if (!hash) return;
|
||
|
||
window.setTimeout(() => {
|
||
const tabSection = document.getElementById('tab-section');
|
||
if (tabSection) tabSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}, 100);
|
||
}, [location.hash]);
|
||
|
||
const onTabChange = (tab: string) => {
|
||
setActiveTab(tab);
|
||
if (tab === TAB_OVERVIEW) {
|
||
navigate(location.pathname, { replace: true });
|
||
return;
|
||
}
|
||
navigate(`${location.pathname}#${tab}`, { replace: true });
|
||
};
|
||
|
||
const phoneLabel = t('form.phoneNumber', 'Telefon: 0171 / 9864053');
|
||
const EMAIL = 'info@finanzen-mizera.de';
|
||
|
||
return (
|
||
<Layout>
|
||
<div className="min-h-screen bg-gray-50">
|
||
<HeroSlider
|
||
slides={[
|
||
{
|
||
id: 'bu-1',
|
||
kicker: t('hero.kicker', 'Risikoschutz'),
|
||
title: t('hero.title', 'Berufsunfähigkeitsversicherung'),
|
||
subtitle: t(
|
||
'hero.subtitle',
|
||
'Sichern Sie Ihr Einkommen ab – falls Sie Ihren Beruf aus gesundheitlichen Gründen nicht mehr ausüben können.'
|
||
),
|
||
highlights: [
|
||
t('hero.highlights.0', 'Einkommen absichern'),
|
||
t('hero.highlights.1', 'Frühzeitig vorsorgen'),
|
||
t('hero.highlights.2', 'Tarife vergleichen'),
|
||
],
|
||
imageUrl: assetUrl('iStock-1065789424.jpg'),
|
||
imagePosition: 'center 35%',
|
||
ctas: [
|
||
{ label: t('hero.cta1', 'Jetzt beraten lassen'), href: '/contact#contact' },
|
||
{ label: t('hero.cta2', 'Zur Übersicht'), href: '/risikoschutz' },
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
|
||
<div className="container mx-auto px-4 md:px-6 py-8">
|
||
<div className="max-w-screen-2xl mx-auto">
|
||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||
<Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section">
|
||
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||
<TabsList className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
||
<TabsTrigger
|
||
value={TAB_OVERVIEW}
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<TrendingUp className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.overview', 'Übersicht')}
|
||
</TabsTrigger>
|
||
|
||
<TabsTrigger
|
||
value={TAB_DETAILS}
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<FileText className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.details', 'Details')}
|
||
</TabsTrigger>
|
||
|
||
<TabsTrigger
|
||
value={TAB_CALCULATOR}
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<Calculator className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.calculator', 'Rechner')}
|
||
</TabsTrigger>
|
||
|
||
<TabsTrigger
|
||
value={TAB_FORM}
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<Phone className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.form', 'Anfrage')}
|
||
</TabsTrigger>
|
||
|
||
<TabsTrigger
|
||
value={TAB_CATALOG}
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<FileCheck className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.catalog', 'Ratgeber')}
|
||
</TabsTrigger>
|
||
|
||
<TabsTrigger
|
||
value={TAB_BROCHURE}
|
||
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
||
>
|
||
<Download className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.brochure', 'PDF')}
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
</div>
|
||
|
||
<div className="p-4 md:p-6">
|
||
<TabsContent value={TAB_OVERVIEW} className="mt-0">
|
||
<TwoColumnTab
|
||
className="gap-8 items-center"
|
||
left={
|
||
<>
|
||
<div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
|
||
<LineChart className="w-4 h-4" />
|
||
<span>{t('overview.badge', 'BU – Einkommensschutz')}</span>
|
||
</div>
|
||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||
{t('overview.title', 'Wenn Arbeit nicht mehr geht')}
|
||
<span className="block text-blue-700">
|
||
{t('overview.subtitle', 'Schützen Sie Ihr Einkommen langfristig.')}
|
||
</span>
|
||
</h1>
|
||
<p className="mt-4 text-gray-600 text-lg">
|
||
{t(
|
||
'overview.description',
|
||
'Die Berufsunfähigkeitsversicherung zählt zu den wichtigsten Absicherungen. Wir helfen Ihnen dabei, Leistungen, Bedingungen und Beiträge verständlich zu vergleichen.'
|
||
)}
|
||
</p>
|
||
|
||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||
<Button onClick={() => onTabChange(TAB_FORM)} className="bg-blue-600 hover:bg-blue-700">
|
||
{t('overview.cta1', 'Angebot anfordern')}
|
||
</Button>
|
||
<Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
|
||
{t('overview.cta2', 'Beratung')}
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||
<ShieldCheck className="w-5 h-5 text-blue-700" />
|
||
<div className="text-sm">
|
||
<div className="font-semibold text-gray-900">
|
||
{t('overview.feature1Title', 'Leistung')}
|
||
</div>
|
||
<div className="text-gray-600">
|
||
{t('overview.feature1Desc', 'Monatliche BU-Rente')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||
<BadgeCheck className="w-5 h-5 text-blue-700" />
|
||
<div className="text-sm">
|
||
<div className="font-semibold text-gray-900">
|
||
{t('overview.feature2Title', 'Schutz')}
|
||
</div>
|
||
<div className="text-gray-600">
|
||
{t('overview.feature2Desc', 'Individuelle Bedingungen')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
}
|
||
right={
|
||
<div className="relative">
|
||
<div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
|
||
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||
<img
|
||
src={assetUrl('iStock-1065789424.jpg')}
|
||
alt={t('overview.imageAlt', 'Berufsunfähigkeitsversicherung')}
|
||
className="w-full h-[240px] object-cover"
|
||
onError={(e) => {
|
||
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
||
}}
|
||
/>
|
||
<div className="p-5">
|
||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||
<BadgeCheck className="w-4 h-4" />
|
||
<span>{t('overview.imageCaption', 'Absicherung prüfen')}</span>
|
||
</div>
|
||
<div className="mt-2 text-sm text-gray-600">
|
||
{t(
|
||
'overview.imageSubtext',
|
||
'Wir unterstützen Sie bei der Auswahl der passenden BU-Lösung.'
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_DETAILS} className="mt-0">
|
||
<div className="space-y-8">
|
||
<div className="text-center mb-8">
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-4">{t('details.title', 'Details')}</h2>
|
||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||
{t(
|
||
'details.subtitle',
|
||
'Worauf es bei der BU ankommt: Bedingungen, Gesundheitsfragen, Laufzeit und passende Rentenhöhe.'
|
||
)}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{[
|
||
{
|
||
icon: TrendingUp,
|
||
title: t('details.cards.0.title', 'Höhe der BU-Rente'),
|
||
desc: t('details.cards.0.desc', 'Passend zum Einkommen und Lebensstandard'),
|
||
},
|
||
{
|
||
icon: ShieldCheck,
|
||
title: t('details.cards.1.title', 'Bedingungen'),
|
||
desc: t('details.cards.1.desc', 'Wichtige Klauseln und Leistungsdefinitionen'),
|
||
},
|
||
{
|
||
icon: BadgeCheck,
|
||
title: t('details.cards.2.title', 'Gesundheitsprüfung'),
|
||
desc: t('details.cards.2.desc', 'Risikovoranfrage & transparente Angaben'),
|
||
},
|
||
].map((item, idx) => (
|
||
<Card key={idx} className="h-full">
|
||
<CardHeader>
|
||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||
<item.icon className="w-6 h-6 text-blue-600" />
|
||
</div>
|
||
<CardTitle className="text-xl">{item.title}</CardTitle>
|
||
<CardDescription>{item.desc}</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
<GeneralNotice />
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_CALCULATOR} className="mt-0">
|
||
<div className="max-w-2xl mx-auto">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl">{t('calculator.title', 'Bedarfs-Check')}</CardTitle>
|
||
<CardDescription>
|
||
{t('calculator.subtitle', 'Schnelle Orientierung – unverbindlich.')}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="text-sm text-gray-700">
|
||
{t(
|
||
'calculator.placeholder',
|
||
'Rechner folgt – wir beraten Sie gern zur passenden BU-Rentenhöhe und Laufzeit.'
|
||
)}
|
||
</div>
|
||
<Button onClick={() => onTabChange(TAB_FORM)} className="bg-blue-600 hover:bg-blue-700 w-full">
|
||
{t('calculator.cta', 'Beratung anfordern')}
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_FORM} className="mt-0">
|
||
<div className="grid lg:grid-cols-2 gap-6">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-2xl">{t('form.title', 'Anfrage')}</CardTitle>
|
||
<CardDescription>{t('form.subtitle', 'Wir melden uns kurzfristig bei Ihnen.')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||
<Phone className="w-5 h-5 text-blue-700" />
|
||
<div className="text-sm">
|
||
<div className="font-semibold text-gray-900">{t('form.phone', 'Telefon')}</div>
|
||
<div className="text-gray-600">{phoneLabel}</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||
<Mail className="w-5 h-5 text-blue-700" />
|
||
<div className="text-sm">
|
||
<div className="font-semibold text-gray-900">{t('form.email', 'E-Mail')}</div>
|
||
<div className="text-gray-600">{EMAIL}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Link to="/contact" className="inline-flex w-full">
|
||
<Button className="w-full bg-blue-600 hover:bg-blue-700">
|
||
{t('form.cta', 'Zum Kontaktformular')}
|
||
</Button>
|
||
</Link>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<RightImageCard
|
||
src={assetUrl('iStock-1065789424.jpg')}
|
||
alt={t('form.imageAlt', 'BU Beratung')}
|
||
>
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('form.tipTitle', 'Tipp')}</CardTitle>
|
||
<CardDescription>
|
||
{t(
|
||
'form.tipDescription',
|
||
'Je früher der Abschluss, desto besser sind häufig Beiträge und Annahmemöglichkeiten.'
|
||
)}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
</RightImageCard>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_CATALOG} className="mt-0">
|
||
<TwoColumnTab
|
||
left={
|
||
<>
|
||
<h3 className="text-2xl font-bold text-gray-900">{t('catalog.title', 'Ratgeber')}</h3>
|
||
<p className="mt-2 text-gray-600">
|
||
{t('catalog.subtitle', 'Kurz & verständlich – die wichtigsten Punkte auf einen Blick.')}
|
||
</p>
|
||
|
||
<Card className="mt-6 border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('catalog.cardTitle', 'Was ist wichtig?')}</CardTitle>
|
||
<CardDescription>
|
||
{t(
|
||
'catalog.cardDescription',
|
||
'Definition Berufsunfähigkeit, Verweisbarkeit, Nachversicherung, Laufzeit, Dynamik.'
|
||
)}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Link to="/contact" className="inline-flex w-full">
|
||
<Button className="w-full bg-blue-600 hover:bg-blue-700">
|
||
{t('catalog.cta', 'Beratung anfordern')}
|
||
</Button>
|
||
</Link>
|
||
</CardContent>
|
||
</Card>
|
||
</>
|
||
}
|
||
right={
|
||
<RightImageCard
|
||
src={assetUrl('iStock-1065789424.jpg')}
|
||
alt={t('catalog.imageAlt', 'Ratgeber BU')}
|
||
>
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('catalog.boxTitle', 'Hinweis')}</CardTitle>
|
||
<CardDescription>
|
||
{t(
|
||
'catalog.boxDescription',
|
||
'Nicht nur der Beitrag zählt – Bedingungen und Leistungsfall-Regelungen sind entscheidend.'
|
||
)}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
</RightImageCard>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_BROCHURE} className="mt-0">
|
||
<TwoColumnTab
|
||
left={
|
||
<>
|
||
<h3 className="text-2xl font-bold text-gray-900">{t('brochure.title', 'Informationen (PDF)')}</h3>
|
||
<p className="mt-2 text-gray-600">{t('brochure.subtitle', 'PDF zum Download – auf Anfrage.')}</p>
|
||
|
||
<Card className="mt-6 border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('brochure.cardTitle', 'PDF')}</CardTitle>
|
||
<CardDescription>
|
||
{t('brochure.cardDescription', 'Gerne senden wir Ihnen die passende Broschüre zu.')}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Link to="/contact" className="inline-flex w-full">
|
||
<Button className="w-full bg-blue-600 hover:bg-blue-700">
|
||
{t('brochure.cta', 'PDF anfragen')}
|
||
</Button>
|
||
</Link>
|
||
</CardContent>
|
||
</Card>
|
||
</>
|
||
}
|
||
right={
|
||
<RightImageCard
|
||
src={assetUrl('iStock-1065789424.jpg')}
|
||
alt={t('brochure.imageAlt', 'PDF BU')}
|
||
>
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('brochure.tipTitle', 'Tipp')}</CardTitle>
|
||
<CardDescription>
|
||
{t(
|
||
'brochure.tipDescription',
|
||
'Wir erklären verständlich – ohne Fachchinesisch.'
|
||
)}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
</RightImageCard>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
</div>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Disclaimer />
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default Berufsunfaehigkeitsversicherung;
|