456 lines
20 KiB
TypeScript
456 lines
20 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Shield, Phone, Mail, CheckCircle, Star, PiggyBank, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, TrendingUp } 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 RiesterRente = () => {
|
|
const { t } = useTranslation('riesterRente');
|
|
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: '',
|
|
income: '',
|
|
familyStatus: '',
|
|
children: '',
|
|
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();
|
|
alert('Vielen Dank! Wir melden uns kurzfristig bei dir.');
|
|
};
|
|
|
|
const benefits = [
|
|
{
|
|
icon: TrendingUp,
|
|
title: t('details.benefits.b1.title', 'Staatliche Zulagen'),
|
|
description: t('details.benefits.b1.description', 'Großzügige Förderung durch den Staat'),
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: t('details.benefits.b2.title', 'Steuerliche Vorteile'),
|
|
description: t('details.benefits.b2.description', 'Steuerfreie Beiträge im Ansparphase'),
|
|
},
|
|
{
|
|
icon: PiggyBank,
|
|
title: t('details.benefits.b3.title', 'Sichere Rente'),
|
|
description: t('details.benefits.b3.description', 'Garantierte Leistungen im Alter'),
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: t('details.benefits.b4.title', 'Kindersicherung'),
|
|
description: t('details.benefits.b4.description', 'Zusätzliche Zulagen für Kinder'),
|
|
},
|
|
{
|
|
icon: CheckCircle,
|
|
title: t('details.benefits.b5.title', 'Flexibel'),
|
|
description: t('details.benefits.b5.description', 'An Ihre Lebenssituation anpassbar'),
|
|
},
|
|
{
|
|
icon: Star,
|
|
title: t('details.benefits.b6.title', 'Widerrufsmöglichkeit'),
|
|
description: t('details.benefits.b6.description', 'Spezielles Kündigungsrecht'),
|
|
}
|
|
];
|
|
|
|
const statistics = [
|
|
{ label: t('stats.s1.label', 'Verträge'), value: t('stats.s1.value', '16,5 Mio') },
|
|
{ label: t('stats.s2.label', 'Förderung/Jahr'), value: t('stats.s2.value', '10 Mrd €') },
|
|
{ label: t('stats.s3.label', 'Zulagen'), value: t('stats.s3.value', '175 €/Kind') },
|
|
{ label: t('stats.s4.label', 'Zufriedenheit'), value: t('stats.s4.value', '89%') }
|
|
];
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-white">
|
|
{/* Hero Section */}
|
|
<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">
|
|
{t('hero.title', 'Riester-Rente')}
|
|
</h1>
|
|
<p className="text-xl text-gray-600 mb-8">
|
|
{t('hero.subtitle', 'Staatlich geförderte Altersvorsorge mit attraktiven Zulagen')}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
size="lg"
|
|
onClick={() => setActiveTab('form')}
|
|
className="bg-blue-600 hover:bg-blue-700"
|
|
>
|
|
{t('hero.cta1', 'Jetzt beraten lassen')}
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
onClick={() => setActiveTab('calculator')}
|
|
>
|
|
{t('hero.cta2', 'Förderung berechnen')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="container mx-auto px-4 py-8">
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="max-w-6xl mx-auto">
|
|
<TabsList className="grid w-full grid-cols-7 mb-8">
|
|
<TabsTrigger value="overview">{t('tabs.overview', 'Übersicht')}</TabsTrigger>
|
|
<TabsTrigger value="details">{t('tabs.details', 'Details')}</TabsTrigger>
|
|
<TabsTrigger value="statistics">{t('tabs.statistics', 'Statistik')}</TabsTrigger>
|
|
<TabsTrigger value="calculator">{t('tabs.calculator', 'Rechner')}</TabsTrigger>
|
|
<TabsTrigger value="form">{t('tabs.form', 'Anfrage')}</TabsTrigger>
|
|
<TabsTrigger value="claims">{t('tabs.claims', 'Leistung')}</TabsTrigger>
|
|
<TabsTrigger value="brochure">{t('tabs.brochure', 'Broschüre')}</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* Übersicht Tab */}
|
|
<TabsContent value="overview">
|
|
<TwoColumnTab
|
|
title={t('overview.title', 'Riester-Rente - Ihre staatlich geförderte Rente')}
|
|
description={t('overview.description', 'Mit der Riester-Rente sichern Sie sich staatliche Zulagen und steuerliche Vorteile für Ihre Altersvorsorge. Wir finden den passenden Tarif für Ihre Bedürfnisse.')}
|
|
image={assetUrl('iStock-957363908.jpg')}
|
|
imageAlt={t('overview.imageAlt', 'Riester-Rente')}
|
|
features={benefits}
|
|
/>
|
|
</TabsContent>
|
|
|
|
{/* Details Tab */}
|
|
<TabsContent value="details">
|
|
<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', 'Leistungen im Detail')}
|
|
</h2>
|
|
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
|
{t('details.subtitle', 'Entdecken Sie die Vorteile der Riester-Rente')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{benefits.map((benefit, index) => (
|
|
<Card key={index} className="h-full">
|
|
<CardHeader>
|
|
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
|
<benefit.icon className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<CardTitle className="text-xl">{benefit.title}</CardTitle>
|
|
<CardDescription>{benefit.description}</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Statistik Tab */}
|
|
<TabsContent value="statistics">
|
|
<div className="space-y-8">
|
|
<div className="text-center mb-8">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
|
{t('statistics.title', 'Riester-Rente in Zahlen')}
|
|
</h2>
|
|
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
|
{t('statistics.subtitle', 'Fakten und Daten zur staatlichen Förderung')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-4 gap-6">
|
|
{statistics.map((stat, index) => (
|
|
<Card key={index}>
|
|
<CardContent className="text-center p-6">
|
|
<div className="text-3xl font-bold text-blue-600 mb-2">{stat.value}</div>
|
|
<div className="text-gray-600">{stat.label}</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
<RightImageCard
|
|
title={t('statistics.comparison.title', 'Fördervergleich')}
|
|
description={t('statistics.comparison.description', 'Wie viel Förderung erhalten Sie?')}
|
|
image={assetUrl('iStock-957363908.jpg')}
|
|
imageAlt={t('statistics.comparison.imageAlt', 'Riester Förderung')}
|
|
/>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Rechner Tab */}
|
|
<TabsContent value="calculator">
|
|
<div className="max-w-2xl mx-auto">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">
|
|
{t('calculator.title', 'Förderrechner')}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{t('calculator.subtitle', 'Berechnen Sie Ihre staatliche Förderung')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">
|
|
{t('calculator.income', 'Jahreseinkommen')}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
className="w-full p-2 border rounded"
|
|
placeholder="50.000"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">
|
|
{t('calculator.children', 'Anzahl Kinder')}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
className="w-full p-2 border rounded"
|
|
placeholder="2"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">
|
|
{t('calculator.status', 'Veranlagungsstatus')}
|
|
</label>
|
|
<select className="w-full p-2 border rounded">
|
|
<option>{t('calculator.single', 'Ledig')}</option>
|
|
<option>{t('calculator.married', 'Verheiratet')}</option>
|
|
</select>
|
|
</div>
|
|
<Button className="w-full">
|
|
{t('calculator.calculate', 'Förderung berechnen')}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Formular Tab */}
|
|
<TabsContent value="form">
|
|
<div className="max-w-2xl mx-auto">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">
|
|
{t('form.title', 'Beratungsanfrage')}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{t('form.subtitle', 'Wir finden den optimalen Riester-Vertrag für Sie')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">
|
|
{t('form.name', 'Name')}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleFormChange}
|
|
className="w-full p-2 border rounded"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">
|
|
{t('form.phone', 'Telefon')}
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
name="phone"
|
|
value={formData.phone}
|
|
onChange={handleFormChange}
|
|
className="w-full p-2 border rounded"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">
|
|
{t('form.email', 'E-Mail')}
|
|
</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleFormChange}
|
|
className="w-full p-2 border rounded"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">
|
|
{t('form.age', 'Alter')}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
name="age"
|
|
value={formData.age}
|
|
onChange={handleFormChange}
|
|
className="w-full p-2 border rounded"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">
|
|
{t('form.income', 'Einkommen')}
|
|
</label>
|
|
<input
|
|
type="number"
|
|
name="income"
|
|
value={formData.income}
|
|
onChange={handleFormChange}
|
|
className="w-full p-2 border rounded"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">
|
|
{t('form.message', 'Nachricht')}
|
|
</label>
|
|
<textarea
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleFormChange}
|
|
rows={4}
|
|
className="w-full p-2 border rounded"
|
|
/>
|
|
</div>
|
|
<Button type="submit" className="w-full">
|
|
{t('form.submit', 'Anfrage senden')}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Leistung Tab */}
|
|
<TabsContent value="claims">
|
|
<div className="max-w-2xl mx-auto">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">
|
|
{t('claims.title', 'Leistungen im Alter')}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{t('claims.subtitle', 'So erhalten Sie Ihre Rente')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-4">
|
|
<div className="flex items-start space-x-3">
|
|
<AlertCircle className="w-5 h-5 text-blue-600 mt-1" />
|
|
<div>
|
|
<h3 className="font-semibold">{t('claims.step1', 'Rentenbeginn')}</h3>
|
|
<p className="text-sm text-gray-600">{t('claims.step1desc', 'Auszahlung ab dem regulären Rentenalter')}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start space-x-3">
|
|
<FileCheck className="w-5 h-5 text-blue-600 mt-1" />
|
|
<div>
|
|
<h3 className="font-semibold">{t('claims.step2', 'Leistungsformen')}</h3>
|
|
<p className="text-sm text-gray-600">{t('claims.step2desc', 'Rente oder Kapitalauswahl möglich')}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start space-x-3">
|
|
<Clock className="w-5 h-5 text-blue-600 mt-1" />
|
|
<div>
|
|
<h3 className="font-semibold">{t('claims.step3', 'Lebenslange Rente')}</h3>
|
|
<p className="text-sm text-gray-600">{t('claims.step3desc', 'Garantierte Zahlung lebenslang')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button className="w-full">
|
|
{t('claims.button', 'Leistungen prüfen')}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Broschüre Tab */}
|
|
<TabsContent value="brochure">
|
|
<div className="max-w-2xl mx-auto">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">
|
|
{t('brochure.title', 'Informationsmaterial')}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{t('brochure.subtitle', 'Downloaden Sie unsere Broschüren und Ratgeber')}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between p-4 border rounded">
|
|
<div className="flex items-center space-x-3">
|
|
<FileText className="w-5 h-5 text-blue-600" />
|
|
<div>
|
|
<h3 className="font-semibold">{t('brochure.guide1', 'Riester-Rente Ratgeber')}</h3>
|
|
<p className="text-sm text-gray-600">{t('brochure.guide1desc', 'Alles Wichtige zur staatlichen Förderung')}</p>
|
|
</div>
|
|
</div>
|
|
<Button variant="outline" size="sm">
|
|
<Download className="w-4 h-4 mr-2" />
|
|
{t('brochure.download', 'Download')}
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center justify-between p-4 border rounded">
|
|
<div className="flex items-center space-x-3">
|
|
<FileText className="w-5 h-5 text-blue-600" />
|
|
<div>
|
|
<h3 className="font-semibold">{t('brochure.guide2', 'Förderrechner')}</h3>
|
|
<p className="text-sm text-gray-600">{t('brochure.guide2desc', 'Ihre persönliche Förderung berechnen')}</p>
|
|
</div>
|
|
</div>
|
|
<Button variant="outline" size="sm">
|
|
<Download className="w-4 h-4 mr-2" />
|
|
{t('brochure.download', 'Download')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
|
|
<GeneralNotice />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default RiesterRente;
|