432 lines
22 KiB
TypeScript
432 lines
22 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { Link, useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||
import { Shield, TrendingUp, Calculator, Users, CheckCircle, Phone, Mail, FileText, Download, PiggyBank, Home, Heart, Star, AlertTriangle, Clock } from 'lucide-react';
|
||
import Layout from '@/components/Layout';
|
||
import HeroSlider from '@/components/HeroSlider';
|
||
import GeneralNotice from '@/components/GeneralNotice';
|
||
|
||
const SeniorenAltersvorsorge = () => {
|
||
const { t } = useTranslation('seniorenAltersvorsorge');
|
||
const navigate = useNavigate();
|
||
const baseUrl = import.meta.env.BASE_URL;
|
||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||
const [activeTab, setActiveTab] = useState('overview');
|
||
|
||
const benefits = [
|
||
{
|
||
icon: PiggyBank,
|
||
title: 'Sichere Rente',
|
||
description: 'Planen Sie Ihre finanzielle Unabhängigkeit im Ruhestand'
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: 'Staatliche Förderung',
|
||
description: 'Nutzen Sie alle möglichen staatlichen Zulagen und Steuervorteile'
|
||
},
|
||
{
|
||
icon: TrendingUp,
|
||
title: 'Flexible Anlagen',
|
||
description: 'Wählen Sie zwischen sicheren und renditestarken Anlageformen'
|
||
},
|
||
{
|
||
icon: Heart,
|
||
title: 'Hinterbliebenenschutz',
|
||
description: 'Sorgen Sie für Ihre Angehörigen vorzusorgen'
|
||
}
|
||
];
|
||
|
||
const products = [
|
||
{
|
||
title: 'Riester-Rente',
|
||
description: 'Staatlich geförderte private Altersvorsorge mit Zulagen',
|
||
details: 'Direkte Zulagen vom Staat, steuerliche Vorteile, flexible Verträge'
|
||
},
|
||
{
|
||
title: 'Rürup-Rente',
|
||
description: 'Für Selbstständige und Freiberufler mit Steuervorteilen',
|
||
details: 'Steuerliche Absetzbarkeit, hohe Flexibilität, auch für Angestellte'
|
||
},
|
||
{
|
||
title: 'Betriebliche Altersvorsorge',
|
||
description: 'Durch den Arbeitgeber geförderte Vorsorge',
|
||
details: 'Arbeitgeberzuschüsse, Steuerfreiheit, verschiedene Durchführungswege'
|
||
},
|
||
{
|
||
title: 'Kapitallebensversicherung',
|
||
description: 'Kombination aus Vorsorge und Vermögensaufbau',
|
||
details: 'Garantierte Leistungen, flexible Verträge, Hinterbliebenenschutz'
|
||
},
|
||
{
|
||
title: 'Rentenversicherung',
|
||
description: 'Sichere monatliche Rente für den Lebensabend',
|
||
details: 'Lebenslange Rente, Inflationsausgleich, flexible Optionen'
|
||
},
|
||
{
|
||
title: 'Fondsgebundene Politik',
|
||
description: 'Chancen auf höhere Renditen mit Fondsanlagen',
|
||
details: 'Renditechancen, Risikomanagement, professionelles Fondsmanagement'
|
||
}
|
||
];
|
||
|
||
const steps = [
|
||
{
|
||
step: '1',
|
||
title: 'Bedarfsanalyse',
|
||
description: 'Ermittlung Ihres individuellen Vorsorgebedarfs'
|
||
},
|
||
{
|
||
step: '2',
|
||
title: 'Geeignete Produkte',
|
||
description: 'Auswahl der passenden Vorsorgelösungen'
|
||
},
|
||
{
|
||
step: '3',
|
||
title: 'Förderung prüfen',
|
||
description: 'Optimierung staatlicher Zulagen und Steuervorteile'
|
||
},
|
||
{
|
||
step: '4',
|
||
title: 'Umsetzung',
|
||
description: 'Abschluss und regelmäßige Betreuung'
|
||
}
|
||
];
|
||
|
||
return (
|
||
<Layout>
|
||
<HeroSlider
|
||
slides={[
|
||
{
|
||
id: 'senioren-altersvorsorge-1',
|
||
kicker: 'Altersvorsorge für Senioren',
|
||
title: 'Sorgen Sie für Ihren Lebensabend vor',
|
||
subtitle: 'Maßgeschneiderte Vorsorgelösungen für Ihre finanzielle Sicherheit im Ruhestand',
|
||
imageUrl: assetUrl('Fotolia_67327775_XS.jpg'),
|
||
imagePosition: 'center 35%',
|
||
ctas: [
|
||
{ label: 'Beratung anfordern', href: '#form' },
|
||
{ label: 'Vorsorge-Rechner', href: '#calculator' },
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
|
||
<div className="min-h-screen bg-gray-50">
|
||
<div className="container mx-auto px-4 md:px-6 py-8">
|
||
<div className="max-w-screen-2xl mx-auto">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
|
||
Altersvorsorge für Senioren
|
||
</h2>
|
||
|
||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||
<TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 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"
|
||
>
|
||
<Phone className="w-4 h-4 mr-1.5" />
|
||
Anfrage
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="products"
|
||
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"
|
||
>
|
||
<Home className="w-4 h-4 mr-1.5" />
|
||
Übersicht
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="benefits"
|
||
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"
|
||
>
|
||
<Star className="w-4 h-4 mr-1.5" />
|
||
Vorteile
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="process"
|
||
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" />
|
||
Prozess
|
||
</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" />
|
||
Rechner
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
</div>
|
||
|
||
<div className="p-4 md:p-6">
|
||
<TabsContent value="overview" className="mt-0">
|
||
<div className="text-center">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
|
||
<p className="text-gray-600 mb-6">
|
||
Lassen Sie sich unverbindlich zu Ihrer Altersvorsorge beraten
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
|
||
<Phone className="h-5 w-5 mr-2" />
|
||
Jetzt anrufen
|
||
</Button>
|
||
<Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
|
||
<Mail className="h-5 w-5 mr-2" />
|
||
Kontakt aufnehmen
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="products" className="mt-0">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
||
<div>
|
||
<div className="inline-flex items-center gap-2 rounded-full bg-blue-50 border border-blue-200 px-3 py-1 text-sm text-blue-800 mb-4">
|
||
<Star className="w-4 h-4" />
|
||
<span>Sicherheit im Ruhestand</span>
|
||
</div>
|
||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||
Altersvorsorge für Senioren
|
||
<span className="block text-blue-700">Planen Sie Ihre Zukunft sicher</span>
|
||
</h1>
|
||
<p className="mt-4 text-gray-600 text-lg">
|
||
Es ist nie zu spät, für den Lebensabend vorzusorgen. Wir helfen Ihnen,
|
||
die passende Altersvorsorge zu finden – mit staatlicher Förderung und
|
||
steuerlichen Vorteilen.
|
||
</p>
|
||
|
||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||
<Button onClick={() => setActiveTab('overview')} className="bg-blue-700 hover:bg-blue-800">
|
||
Beratung anfordern
|
||
</Button>
|
||
<Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
|
||
Kostenlos beraten lassen
|
||
</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">
|
||
<PiggyBank className="w-5 h-5 text-blue-700" />
|
||
<div className="text-sm">
|
||
<div className="font-semibold text-gray-900">Sichere Rente</div>
|
||
<div className="text-gray-600">Finanzielle Unabhängigkeit</div>
|
||
</div>
|
||
</div>
|
||
<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">Staatliche Hilfe</div>
|
||
<div className="text-gray-600">Zulagen & Steuervorteile</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
|
||
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||
<img
|
||
src={assetUrl('Fotolia_67327775_XS.jpg')}
|
||
alt="Altersvorsorge"
|
||
className="w-full h-[320px] object-cover"
|
||
onError={(e) => {
|
||
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
||
}}
|
||
/>
|
||
<div className="p-5">
|
||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||
<TrendingUp className="w-4 h-4" />
|
||
<span>Riester, Rürup, bAV & Co.</span>
|
||
</div>
|
||
<div className="mt-2 text-sm text-gray-600">
|
||
Wir finden die passende Lösung für Ihre Situation.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-10 bg-white rounded-xl border border-gray-200 p-6">
|
||
<h3 className="text-xl font-bold text-gray-900 mb-4">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" />
|
||
Nie zu spät
|
||
</CardTitle>
|
||
<CardDescription>Selbst mit 50+ noch sinnvoll.</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" />
|
||
Staatliche Hilfe
|
||
</CardTitle>
|
||
<CardDescription>Zulagen & Steuervorteile nutzen.</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-base flex items-center gap-2">
|
||
<Clock className="w-4 h-4 text-blue-700" />
|
||
Flexible Optionen
|
||
</CardTitle>
|
||
<CardDescription>Passgenau für Ihre Situation.</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="products" className="mt-0">
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
<div className="lg:col-span-2">
|
||
<h3 className="text-2xl font-bold text-gray-900">Unsere Vorsorgelösungen</h3>
|
||
<p className="mt-2 text-gray-600">
|
||
Wir bieten verschiedene Altersvorsorge-Produkte, die perfekt auf Ihre
|
||
Situation zugeschnitten sind.
|
||
</p>
|
||
|
||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{products.map((product, index) => (
|
||
<Card key={index} className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{product.title}</CardTitle>
|
||
<CardDescription>{product.description}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm text-gray-700">
|
||
{product.details}
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Welches Produkt passt?</CardTitle>
|
||
<CardDescription>Abhängig von Ihrer Situation</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3 text-sm text-gray-700">
|
||
<div className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||
<span><strong>Riester:</strong> Für Angestellte mit Kindern</span>
|
||
</div>
|
||
<div className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||
<span><strong>Rürup:</strong> Für Selbstständige</span>
|
||
</div>
|
||
<div className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||
<span><strong>bAV:</strong> Durch Arbeitgeber</span>
|
||
</div>
|
||
<div className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||
<span><strong>Kapital:</strong> Sicherheit + Vermögen</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="benefits" className="mt-0">
|
||
<div className="text-center mb-12">
|
||
<h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||
Ihre Vorteile
|
||
</h3>
|
||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||
Warum die Altersvorsorge besonders wichtig ist
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{benefits.map((benefit, index) => {
|
||
const Icon = benefit.icon;
|
||
return (
|
||
<div key={index} className="text-center">
|
||
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<Icon className="h-8 w-8 text-blue-700" />
|
||
</div>
|
||
<h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
|
||
<p className="text-gray-600 text-sm">{benefit.description}</p>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="process" className="mt-0">
|
||
<div className="text-center mb-12">
|
||
<h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||
So läuft die Beratung ab
|
||
</h3>
|
||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||
Schritt für Schritt zu Ihrer optimalen Altersvorsorge
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-4 gap-6">
|
||
{steps.map((step) => (
|
||
<div key={step.step} className="text-center">
|
||
<div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
|
||
{step.step}
|
||
</div>
|
||
<h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
|
||
<p className="text-gray-600 text-sm">{step.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="calculator" className="mt-0">
|
||
<div className="text-center">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Altersvorsorge-Rechner</h3>
|
||
<p className="text-gray-600 mb-6">
|
||
Berechnen Sie Ihre voraussichtliche Rente und den Bedarf
|
||
</p>
|
||
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
||
<Calculator className="mr-2 h-4 w-4" />
|
||
Rechner starten
|
||
</Button>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="form" className="mt-0">
|
||
<div className="text-center">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
|
||
<p className="text-gray-600 mb-6">
|
||
Lassen Sie sich unverbindlich zu Ihrer Altersvorsorge beraten
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
|
||
<Phone className="h-5 w-5 mr-2" />
|
||
Jetzt anrufen
|
||
</Button>
|
||
<Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
|
||
<Mail className="h-5 w-5 mr-2" />
|
||
Kontakt aufnehmen
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
</div>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default SeniorenAltersvorsorge;
|