430 lines
24 KiB
TypeScript
430 lines
24 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import {
|
||
BadgeCheck,
|
||
BarChart3,
|
||
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_STATISTICS = 'statistics';
|
||
const TAB_CALCULATOR = 'calculator';
|
||
const TAB_FORM = 'form';
|
||
const TAB_CATALOG = 'catalog';
|
||
const TAB_BROCHURE = 'brochure';
|
||
|
||
const RiesterRenteFinal = () => {
|
||
const navigate = useNavigate();
|
||
const location = useLocation();
|
||
const { t } = useTranslation('riester_rente');
|
||
|
||
const baseUrl = import.meta.env.BASE_URL;
|
||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||
|
||
const [activeTab, setActiveTab] = useState<string>(TAB_OVERVIEW);
|
||
|
||
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%') },
|
||
];
|
||
|
||
useEffect(() => {
|
||
const hash = (location.hash || '').replace('#', '').toLowerCase();
|
||
|
||
if (hash === TAB_DETAILS) setActiveTab(TAB_DETAILS);
|
||
else if (hash === TAB_STATISTICS) setActiveTab(TAB_STATISTICS);
|
||
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: 'riester-1',
|
||
kicker: t('hero.kicker', 'Altersvorsorge'),
|
||
title: t('hero.title', 'Riester-Rente'),
|
||
subtitle: t('hero.subtitle', 'Staatliche Förderung für Ihre Rente.'),
|
||
highlights: [
|
||
t('hero.highlights.0', 'Zulagen & Steuervorteile'),
|
||
t('hero.highlights.1', 'Familienfreundlich (Kinderzulage)'),
|
||
t('hero.highlights.2', 'Langfristige Planung'),
|
||
],
|
||
imageUrl: assetUrl('Chatgpt_bilder/Riester-Rente.png'),
|
||
imagePosition: 'center 30%',
|
||
ctas: [
|
||
{ label: t('hero.cta1', 'Jetzt beraten lassen'), href: '/contact#contact' },
|
||
{ label: t('hero.cta2', 'Zur Übersicht'), href: '/altersvorsorge' },
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
|
||
<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-7 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_STATISTICS}
|
||
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"
|
||
>
|
||
<BarChart3 className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.statistics', 'Statistik')}
|
||
</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', 'Riester – staatlich gefördert')}</span>
|
||
</div>
|
||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||
{t('overview.title', 'Mehr Förderung für Ihre Rente')}
|
||
<span className="block text-blue-700">{t('overview.subtitle', 'Wir prüfen, ob sich Riester für Sie lohnt.')}</span>
|
||
</h1>
|
||
<p className="mt-4 text-gray-600 text-lg">{t('overview.description')}</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', 'Förderung')}</div>
|
||
<div className="text-gray-600">{t('overview.feature1Desc', 'Zulagen & Steuervorteile')}</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', 'Planbar')}</div>
|
||
<div className="text-gray-600">{t('overview.feature2Desc', 'Langfristige Vorsorge')}</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('Chatgpt_bilder/Riester-Rente.png')}
|
||
alt={t('overview.imageAlt', 'Riester-Rente')}
|
||
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', 'Zulagen prüfen')}</span>
|
||
</div>
|
||
<div className="mt-2 text-sm text-gray-600">{t('overview.imageSubtext')}</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')}</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{[
|
||
{ icon: TrendingUp, title: t('details.cards.0.title'), desc: t('details.cards.0.desc') },
|
||
{ icon: ShieldCheck, title: t('details.cards.1.title'), desc: t('details.cards.1.desc') },
|
||
{ icon: BadgeCheck, title: t('details.cards.2.title'), desc: t('details.cards.2.desc') },
|
||
].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_STATISTICS} 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('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>
|
||
</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', 'Fördercheck')}</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 kommt als nächstes – wir beraten Sie gern persönlich.')}</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('Chatgpt_bilder/Riester-Rente.png')} alt={t('form.imageAlt', 'Riester Beratung')}>
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('form.tipTitle', 'Tipp')}</CardTitle>
|
||
<CardDescription>{t('form.tipDescription', 'Wir prüfen Zulagen, Kosten und passende Tarife – transparent & verständlich.')}</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', 'Förderung, Kosten, Zulagenberechtigung, passende Produktart.')}</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('Chatgpt_bilder/Riester-Rente.png')} alt={t('catalog.imageAlt', 'Ratgeber Riester')}>
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('catalog.boxTitle', 'Hinweis')}</CardTitle>
|
||
<CardDescription>{t('catalog.boxDescription', 'Nicht für jeden sinnvoll – wir machen den Fördercheck mit Ihnen.')}</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('Chatgpt_bilder/Riester-Rente.png')} alt={t('brochure.imageAlt', 'PDF Riester')}>
|
||
<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 RiesterRenteFinal;
|