377 lines
19 KiB
TypeScript
377 lines
19 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { Link, useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Shield, Users, TrendingUp, Clock, DollarSign, MapPin, Phone, Mail, ArrowRight, CheckCircle, Bot, MessageCircle } from 'lucide-react';
|
||
import Layout from '@/components/Layout';
|
||
import HeroSlider from '@/components/HeroSlider';
|
||
import { Card, CardContent } from '@/components/ui/card';
|
||
import ChatbotHint from '@/components/ChatbotHint';
|
||
|
||
type FocusTopicId = 'health' | 'risk' | 'retirement';
|
||
|
||
const Senioren = () => {
|
||
const { t } = useTranslation('senioren');
|
||
const navigate = useNavigate();
|
||
const baseUrl = import.meta.env.BASE_URL;
|
||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||
const [focusTopics, setFocusTopics] = useState<Array<{ id: FocusTopicId; title: string; href: string; image: string }>>([]);
|
||
|
||
useEffect(() => {
|
||
const pool = [
|
||
{ id: 'health' as const, title: t('focus.items.health', 'Gesundheitsvorsorge'), href: '/senioren-gesundheitsvorsorge', image: assetUrl('iStock-957363908.jpg') },
|
||
{ id: 'risk' as const, title: t('focus.items.risk', 'Risikoschutz'), href: '/senioren-risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
||
{ id: 'retirement' as const, title: t('focus.items.retirement', 'Altersvorsorge'), href: '/senioren-altersvorsorge', image: assetUrl('Fotolia_67327775_XS.jpg') },
|
||
];
|
||
|
||
setFocusTopics(
|
||
[...pool].sort((a, b) => a.title.localeCompare(b.title, 'de', { sensitivity: 'base' }))
|
||
);
|
||
}, [t]);
|
||
|
||
const detailsLabel = t('details.label', 'Details:');
|
||
const healthLinksRaw = t('details.health.links', { returnObjects: true }) as unknown;
|
||
const healthLinks = Array.isArray(healthLinksRaw)
|
||
? (healthLinksRaw as Array<{ title: string; href: string }>)
|
||
: [
|
||
{ title: 'Krankenversicherung', href: '/senioren-gesundheitsvorsorge' },
|
||
{ title: 'Pflegeversicherung', href: '/senioren-gesundheitsvorsorge' },
|
||
{ title: 'Unfallversicherung', href: '/senioren-gesundheitsvorsorge' },
|
||
];
|
||
|
||
const riskLinksRaw = t('details.risk.links', { returnObjects: true }) as unknown;
|
||
const riskLinks = Array.isArray(riskLinksRaw)
|
||
? (riskLinksRaw as Array<{ title: string; href: string }>)
|
||
: [
|
||
{ title: 'Sterbegeldversicherung', href: '/senioren-risikoschutz' },
|
||
{ title: 'Hausratversicherung', href: '/senioren-risikoschutz' },
|
||
{ title: 'Tierhalterhaftpflicht', href: '/senioren-risikoschutz' },
|
||
];
|
||
|
||
const retirementLinksRaw = t('details.retirement.links', { returnObjects: true }) as unknown;
|
||
const retirementLinks = Array.isArray(retirementLinksRaw)
|
||
? (retirementLinksRaw as Array<{ title: string; href: string }>)
|
||
: [
|
||
{ title: 'Riester-Rente', href: '/senioren-altersvorsorge' },
|
||
{ title: 'Rürup-Rente', href: '/senioren-altersvorsorge' },
|
||
{ title: 'Betriebliche Altersvorsorge', href: '/senioren-altersvorsorge' },
|
||
];
|
||
|
||
const benefitsRaw = t('benefits.items', { returnObjects: true }) as unknown;
|
||
const benefits = Array.isArray(benefitsRaw) ? (benefitsRaw as Array<{ title: string; desc: string }>) : [];
|
||
const benefitIcons = [Shield, Users, TrendingUp, Clock, DollarSign, MapPin];
|
||
|
||
return (
|
||
<Layout>
|
||
<HeroSlider
|
||
slides={[
|
||
{
|
||
id: 'senioren-1',
|
||
kicker: t('hero.kicker', 'Versicherungen für Senioren'),
|
||
title: t('hero.title', 'Sicherheit und Wohlbefinden im Alter.'),
|
||
subtitle: t(
|
||
'hero.subtitle',
|
||
'Maßgeschneiderte Lösungen für Ihre Lebensphase – von der Gesundheitsvorsorge bis zur Altersvorsorge.'
|
||
),
|
||
imageUrl: assetUrl('Fotolia_67327775_XS.jpg'),
|
||
imagePosition: 'center 35%',
|
||
ctas: [
|
||
{ label: t('hero.primaryCta', 'Jetzt beraten lassen'), href: '/contact' },
|
||
{ label: t('hero.secondaryCta', 'Alle Leistungen'), href: '/leistungen' },
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
|
||
{/* Senioren Themen */}
|
||
<section className="py-16 bg-gradient-to-br from-gray-50 to-blue-50">
|
||
<div className="container mx-auto px-4">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||
{t('topics.title', 'Themen für Senioren')}
|
||
</h2>
|
||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
{t('topics.subtitle', 'Die wichtigsten Lösungen für Ihre Lebensphase')}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||
{focusTopics.map((item) => (
|
||
<div
|
||
key={`${item.href}-${item.title}`}
|
||
className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
|
||
role="link"
|
||
tabIndex={0}
|
||
onClick={() => navigate(item.href)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') navigate(item.href);
|
||
}}
|
||
>
|
||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||
<div
|
||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||
style={{ backgroundImage: `url(${item.image})` }}
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||
|
||
{/* Overlay mit Titel */}
|
||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||
<div className="text-xl font-bold">{item.title.replace('Versicherung', '').trim()}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Links unter dem Bild */}
|
||
<div className="mt-4 p-4 bg-white rounded-lg shadow-md">
|
||
{item.id === 'health' && (
|
||
<div className="space-y-2">
|
||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-3">{detailsLabel}</div>
|
||
<div className="grid grid-cols-1 gap-2">
|
||
{healthLinks.map((link) => (
|
||
<Link
|
||
key={`${link.href}-${link.title}`}
|
||
to={link.href}
|
||
className="text-blue-600 hover:text-blue-800 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<span className="w-2 h-2 bg-blue-600 rounded-full mr-2 group-hover:bg-blue-800 transition-colors"></span>
|
||
{link.title}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Zusätzliche Links unter dem Bild für Risikoschutz */}
|
||
{item.id === 'risk' && (
|
||
<div className="space-y-2">
|
||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-3">{detailsLabel}</div>
|
||
<div className="grid grid-cols-1 gap-2">
|
||
{riskLinks.map((link) => (
|
||
<Link
|
||
key={`${link.href}-${link.title}`}
|
||
to={link.href}
|
||
className="text-blue-600 hover:text-blue-800 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<span className="w-2 h-2 bg-blue-600 rounded-full mr-2 group-hover:bg-blue-800 transition-colors"></span>
|
||
{link.title}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Zusätzliche Links unter dem Bild für Altersvorsorge */}
|
||
{item.id === 'retirement' && (
|
||
<div className="space-y-2">
|
||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-3">{detailsLabel}</div>
|
||
<div className="grid grid-cols-1 gap-2">
|
||
{retirementLinks.map((link) => (
|
||
<Link
|
||
key={`${link.href}-${link.title}`}
|
||
to={link.href}
|
||
className="text-blue-600 hover:text-blue-800 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<span className="w-2 h-2 bg-blue-600 rounded-full mr-2 group-hover:bg-blue-800 transition-colors"></span>
|
||
{link.title}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-14">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto items-stretch">
|
||
<Card className="overflow-hidden shadow-lg hover:shadow-2xl transition-shadow rounded-2xl flex flex-col h-full">
|
||
<div className="relative h-44">
|
||
<div
|
||
className="absolute inset-0 bg-cover bg-center"
|
||
style={{ backgroundImage: `url(${assetUrl('iStock-939772870.jpg')})` }}
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" />
|
||
</div>
|
||
<CardContent className="p-6 flex-1 flex flex-col">
|
||
<div className="text-xl font-bold text-gray-900">
|
||
{t('tiles.sterbegeld.title', 'Sterbegeldversicherung')}
|
||
</div>
|
||
<div className="mt-2 text-sm text-gray-600">
|
||
{t(
|
||
'tiles.sterbegeld.subtitle',
|
||
'Für Ihre Liebsten vorsorgen: finanzielle Sicherheit im Todesfall.'
|
||
)}
|
||
</div>
|
||
|
||
<div className="mt-5 text-sm text-gray-700">
|
||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold">
|
||
{t('tiles.sterbegeld.exampleLabel', 'z.B. Beitragsbeispiel')}
|
||
</div>
|
||
<div className="mt-2 text-4xl font-bold text-gray-900">
|
||
{t('tiles.sterbegeld.examplePrice', '40,75€')}
|
||
</div>
|
||
<div className="mt-2 text-sm text-gray-700">
|
||
{t('tiles.sterbegeld.exampleDetails', 'pro Monat für 12.500 € Versicherungssumme')}
|
||
</div>
|
||
<ul className="mt-2 list-disc pl-5 text-sm text-gray-700">
|
||
<li>{t('tiles.sterbegeld.bullet1', 'Männer/Frauen: ab 53 Jahre')}</li>
|
||
</ul>
|
||
|
||
<div className="mt-4 text-xs uppercase tracking-wide text-gray-500 font-semibold">
|
||
{t('tiles.sterbegeld.detailsLabel', 'Details:')}
|
||
</div>
|
||
<ul className="mt-2 space-y-1 text-sm text-gray-700">
|
||
<li>{t('tiles.sterbegeld.detailsItems.0', 'Sterbegeldversicherung')}</li>
|
||
<li>{t('tiles.sterbegeld.detailsItems.1', 'Bestattungsvorsorge')}</li>
|
||
<li>{t('tiles.sterbegeld.detailsItems.2', 'Risikolebensversicherung')}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="flex-1" />
|
||
|
||
<Button asChild className="w-full mt-6 bg-red-900 hover:bg-red-950 rounded-full">
|
||
<Link to="/senioren-sterbegeldversicherung">
|
||
{t('tiles.sterbegeld.cta', 'Jetzt informieren')}
|
||
<ArrowRight className="ml-2 h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="overflow-hidden shadow-lg hover:shadow-2xl transition-shadow rounded-2xl flex flex-col h-full">
|
||
<div className="relative h-44">
|
||
<div
|
||
className="absolute inset-0 bg-cover bg-center"
|
||
style={{ backgroundImage: `url(${assetUrl('head_brennen.jpg')})` }}
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/10 to-transparent" />
|
||
</div>
|
||
<CardContent className="p-6 flex-1 flex flex-col">
|
||
<div className="text-xl font-bold text-gray-900">
|
||
{t('tiles.privathaftpflicht.title', 'Privathaftpflicht')}
|
||
</div>
|
||
<div className="mt-2 text-sm text-gray-600">
|
||
{t(
|
||
'tiles.privathaftpflicht.subtitle',
|
||
'Schutz vor hohen Forderungen im Alltag – für ein sicheres Gefühl.'
|
||
)}
|
||
</div>
|
||
|
||
<div className="mt-5 text-sm text-gray-700">
|
||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold">
|
||
{t('tiles.privathaftpflicht.exampleLabel', 'z.B. Beitragsbeispiel')}
|
||
</div>
|
||
<div className="mt-2 text-4xl font-bold text-gray-900">
|
||
{t('tiles.privathaftpflicht.examplePrice', '5,57€')}
|
||
</div>
|
||
<div className="mt-2 text-sm text-gray-700">
|
||
{t('tiles.privathaftpflicht.exampleDetails', 'pro Monat – Beispieltarif')}
|
||
</div>
|
||
|
||
<div className="mt-4 text-xs uppercase tracking-wide text-gray-500 font-semibold">
|
||
{t('tiles.privathaftpflicht.detailsLabel', 'Details:')}
|
||
</div>
|
||
<ul className="mt-2 space-y-1 text-sm text-gray-700">
|
||
<li>
|
||
{t(
|
||
'tiles.privathaftpflicht.detailsItems.0',
|
||
'Auslandsaufenthalt innerhalb Europas ohne zeitliche Begrenzung'
|
||
)}
|
||
</li>
|
||
<li>
|
||
{t(
|
||
'tiles.privathaftpflicht.detailsItems.1',
|
||
'nicht ehelicher Lebenspartner in häuslicher Gemeinschaft'
|
||
)}
|
||
</li>
|
||
<li>
|
||
{t(
|
||
'tiles.privathaftpflicht.detailsItems.2',
|
||
'Schadenersatz-Rechtsschutz bei Forderungsausfall'
|
||
)}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="flex-1" />
|
||
|
||
<Button asChild className="w-full mt-6 bg-red-900 hover:bg-red-950 rounded-full">
|
||
<Link to="/haftpflichtversicherung">
|
||
{t('tiles.privathaftpflicht.cta', 'Jetzt informieren')}
|
||
<ArrowRight className="ml-2 h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Content */}
|
||
<div className="min-h-screen bg-gradient-to-br from-white to-gray-50">
|
||
<div className="container mx-auto px-4 py-16">
|
||
<div className="max-w-6xl mx-auto">
|
||
{/* Special Features */}
|
||
<div className="mb-20">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||
{t('benefits.title', 'Ihre Vorteile als Senior')}
|
||
</h2>
|
||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||
{t('benefits.subtitle', 'Wir bieten Ihnen maßgeschneiderte Lösungen für Ihre Lebensphase')}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-10 shadow-xl">
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{benefits.map((benefit, index) => {
|
||
const Icon = benefitIcons[index] ?? Shield;
|
||
return (
|
||
<div key={index} className="flex items-start space-x-4 group">
|
||
<div className="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-blue-700 transition-colors">
|
||
<Icon className="h-6 w-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h3 className="font-semibold text-gray-900 mb-1">{benefit.title}</h3>
|
||
<p className="text-gray-600 text-sm">{benefit.desc}</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contact Section */}
|
||
<div className="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-10 text-center text-white shadow-2xl">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||
{t('contact.title', 'Kontaktieren Sie uns')}
|
||
</h2>
|
||
<p className="text-lg text-blue-100 mb-8 max-w-2xl mx-auto">
|
||
{t('contact.subtitle', 'Lassen Sie sich unverbindlich zu Ihren Versicherungsmöglichkeiten beraten.')}
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button className="w-full sm:w-64 bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 text-lg font-semibold shadow-lg">
|
||
<Phone className="h-5 w-5 mr-2" />
|
||
{t('contact.primaryCta', 'Jetzt anrufen')}
|
||
</Button>
|
||
<Button variant="outline" className="w-full sm:w-64 border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 text-lg font-semibold">
|
||
<Mail className="h-5 w-5 mr-2" />
|
||
{t('contact.secondaryCta', 'Termin vereinbaren')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ChatbotHint />
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default Senioren;
|