seiten kranken
This commit is contained in:
parent
ddc386a560
commit
8026ea57d1
BIN
public/Fotolia_45263348_S.jpg
Normal file
BIN
public/Fotolia_45263348_S.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
public/PDF/Tarifvergleich-CEZKCEZP_CEZE_01.2023-2791.pdf
Normal file
BIN
public/PDF/Tarifvergleich-CEZKCEZP_CEZE_01.2023-2791.pdf
Normal file
Binary file not shown.
BIN
public/head_kranken.jpg
Normal file
BIN
public/head_kranken.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
public/iStock-637584740.jpg
Normal file
BIN
public/iStock-637584740.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 MiB |
@ -81,8 +81,21 @@
|
||||
"item3": { "title": "Seniorzy" },
|
||||
"item4": { "title": "Gospodarstwo domowe" },
|
||||
"item5": { "title": "Odpowiedzialność cywilna" },
|
||||
"rechtsschutz": { "title": "Ochrona prawna" },
|
||||
"item6": { "title": "Wypadek" }
|
||||
"rechtsschutzTitle": { "title": "Ochrona prawna" },
|
||||
"item6": { "title": "Wypadek" },
|
||||
"kfz": { "description": "Ubezpieczenie samochodu & KFZ" },
|
||||
"privatkunden": { "description": "Bezpieczeństwo i ochrona" },
|
||||
"senioren": { "description": "Komfort na emeryturze" },
|
||||
"hausrat": { "description": "Ochrona Twojego domu" },
|
||||
"rechtsschutz": { "description": "Ochrona Twoich praw" },
|
||||
"unfall": { "description": "Szybka pomoc" },
|
||||
"familie": { "description": "Dla Twojej rodziny" },
|
||||
"tiere": { "description": "Ochrona Twoich zwierząt" },
|
||||
"finanzen": { "description": "Twoja przyszłość finansowa" },
|
||||
"privateKrankenversicherung": { "description": "Optymalna ochrona zdrowia" },
|
||||
"zahnzusatzversicherung": { "description": "Doskonała ochrona zębów" },
|
||||
"auslandsreisekrankenversicherung": { "description": "Bezpieczne podróże" },
|
||||
"gesundheitsvorsorge": { "description": "Profilaktyka i prewencja" }
|
||||
},
|
||||
|
||||
"experience": {
|
||||
@ -135,6 +148,19 @@
|
||||
"button": "Umów spotkanie"
|
||||
},
|
||||
|
||||
"testimonials": {
|
||||
"title": "Co mówią nasi klienci",
|
||||
"subtitle": "Doświadczenia i opinie zadowolonych klientów"
|
||||
},
|
||||
"cta": {
|
||||
"title": "Gotowy na najlepszą ochronę ubezpieczeniową?",
|
||||
"subtitle": "Skontaktuj się ze mną już dziś dla bezpłatnej konsultacji",
|
||||
"button": "Skontaktuj się teraz"
|
||||
},
|
||||
"process": {
|
||||
"title": "Jak przebiega nasza konsultacja",
|
||||
"subtitle": "Jasno, zorganizowanie i bez fachowego żargonu – krok po kroku."
|
||||
},
|
||||
"contact": {
|
||||
"title": "Skontaktuj się z nami",
|
||||
"subtitle": "Chętnie udzielimy Ci osobistej porady",
|
||||
|
||||
18
src/App.tsx
18
src/App.tsx
@ -50,6 +50,15 @@ import BruttoNettoRechner from "./pages/BruttoNettoRechner";
|
||||
import SeniorenAltersvorsorge from "./pages/SeniorenAltersvorsorge";
|
||||
import SeniorenGesundheitsvorsorge from "./pages/SeniorenGesundheitsvorsorge";
|
||||
import SeniorenRisikoschutz from "./pages/SeniorenRisikoschutz";
|
||||
import PrivateKrankenversicherung from "./pages/PrivateKrankenversicherung";
|
||||
import Zahnzusatzversicherung from "./pages/Zahnzusatzversicherung";
|
||||
import Auslandsreisekrankenversicherung from "./pages/Auslandsreisekrankenversicherung";
|
||||
import Gesundheitsvorsorge from "./pages/Gesundheitsvorsorge";
|
||||
import Altersvorsorge from "./pages/Altersvorsorge";
|
||||
import Risikoschutz from "./pages/Risikoschutz";
|
||||
import Sachversicherung from "./pages/Sachversicherung";
|
||||
import Vermoegenssicherung from "./pages/Vermoegenssicherung";
|
||||
import RiesterRente from "./pages/RiesterRente";
|
||||
import NotFound from "./pages/NotFound";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
@ -142,6 +151,15 @@ const App = () => {
|
||||
<Route path="/senioren-altersvorsorge" element={<SeniorenAltersvorsorge />} />
|
||||
<Route path="/senioren-gesundheitsvorsorge" element={<SeniorenGesundheitsvorsorge />} />
|
||||
<Route path="/senioren-risikoschutz" element={<SeniorenRisikoschutz />} />
|
||||
<Route path="/private-krankenversicherung" element={<PrivateKrankenversicherung />} />
|
||||
<Route path="/zahnzusatzversicherung" element={<Zahnzusatzversicherung />} />
|
||||
<Route path="/auslandsreisekrankenversicherung" element={<Auslandsreisekrankenversicherung />} />
|
||||
<Route path="/gesundheitsvorsorge" element={<Gesundheitsvorsorge />} />
|
||||
<Route path="/altersvorsorge" element={<Altersvorsorge />} />
|
||||
<Route path="/risikoschutz" element={<Risikoschutz />} />
|
||||
<Route path="/sachversicherung" element={<Sachversicherung />} />
|
||||
<Route path="/vermoegenssicherung" element={<Vermoegenssicherung />} />
|
||||
<Route path="/riester-rente" element={<RiesterRente />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
90
src/pages/Altersvorsorge.tsx
Normal file
90
src/pages/Altersvorsorge.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Heart, Shield, TrendingUp, PiggyBank, Home, Calculator } from 'lucide-react';
|
||||
import Layout from '@/components/Layout';
|
||||
import { Card } from '@/components/ui/card';
|
||||
|
||||
const Altersvorsorge = () => {
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
const topics = [
|
||||
{
|
||||
title: 'Riester-Rente',
|
||||
href: '/riester-rente',
|
||||
image: assetUrl('iStock-957363908.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Rürup-Rente',
|
||||
href: '/ruerup-rente',
|
||||
image: assetUrl('iStock-943842590.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Betriebliche Altersvorsorge',
|
||||
href: '/betriebliche-altersvorsorge',
|
||||
image: assetUrl('Fotolia_8654128_XS.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Private Rentenversicherung',
|
||||
href: '/private-rentenversicherung',
|
||||
image: assetUrl('iStock-495809266.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Kapitallebensversicherung',
|
||||
href: '/kapitallebensversicherung',
|
||||
image: assetUrl('Fotolia_67327775_XS.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Fondsgebundene Versicherung',
|
||||
href: '/fondsgebundene-versicherung',
|
||||
image: assetUrl('iStock-970876204.jpg')
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<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">
|
||||
Altersvorsorge
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Sorgen Sie frühzeitig für Ihre finanzielle Zukunft vor
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kacheln */}
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{topics.map((topic, index) => (
|
||||
<Link key={index} to={topic.href}>
|
||||
<Card className="group hover:shadow-lg transition-shadow duration-300 cursor-pointer overflow-hidden">
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<img
|
||||
src={topic.image}
|
||||
alt={topic.title}
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||||
<div className="text-xl font-bold">{topic.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Altersvorsorge;
|
||||
693
src/pages/Auslandsreisekrankenversicherung.tsx
Normal file
693
src/pages/Auslandsreisekrankenversicherung.tsx
Normal file
@ -0,0 +1,693 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, Gauge, Heart } 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 Auslandsreisekrankenversicherung = () => {
|
||||
const { t } = useTranslation('auslandsreisekrankenversicherung');
|
||||
|
||||
// Add SEO metadata for search
|
||||
React.useEffect(() => {
|
||||
document.title = 'Auslandsreisekrankenversicherung - Agentur Mizera';
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Auslandsreisekrankenversicherung: Sorgenfrei reisen mit umfassendem Schutz im Ausland. Unabhängige Beratung und Tarifvergleich für Reiseversicherungen.');
|
||||
}
|
||||
}, []);
|
||||
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: '',
|
||||
destination: '',
|
||||
travelDuration: '',
|
||||
coverageType: '',
|
||||
message: ''
|
||||
});
|
||||
|
||||
const handleFormChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleFormSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log('Form submitted:', formData);
|
||||
navigate('/contact');
|
||||
};
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Weltweiter Schutz',
|
||||
description: 'Sicherheit bei Reisen in alle Länder',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: 'Medizinische Notfälle',
|
||||
description: 'Sofortige Hilfe bei Krankheit und Unfall',
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: 'Kostenübernahme',
|
||||
description: 'Übernahme von Arzt- und Krankenhauskosten',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Rückholung',
|
||||
description: 'Organisation des medizinischen Rücktransports',
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: '24h Hotline',
|
||||
description: 'Rund um die Uhr erreichbare Notfallnummer',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Dental-Schutz',
|
||||
description: 'Zahnbehandlungen im Ausland mitversichert',
|
||||
},
|
||||
];
|
||||
|
||||
const services = [
|
||||
'Ärztliche Behandlungen im Ausland',
|
||||
'Krankenhausaufenthalte',
|
||||
'Notfall-Operationen',
|
||||
'Medikamenteneinbezug',
|
||||
'Zahnbehandlungen',
|
||||
'Augenoptikerleistungen',
|
||||
'Rücktransport nach Deutschland',
|
||||
'Kostenlose Notfall-Hotline',
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="h-96 bg-cover bg-center relative"
|
||||
style={{ backgroundImage: `url(${assetUrl('iStock-637584740.jpg')})` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gray-900/20" />
|
||||
<div className="relative container mx-auto px-4 h-full flex items-center">
|
||||
<div className="max-w-3xl">
|
||||
<div className="bg-black/40 text-white px-8 py-6 md:px-10 md:py-8 shadow-lg">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
Auslandsreisekrankenversicherung
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 mb-8 max-w-2xl">
|
||||
Sorgenfrei reisen mit umfassendem Schutz im Ausland
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Button onClick={() => setActiveTab('form')} size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Jetzt beraten lassen
|
||||
</Button>
|
||||
<Button onClick={() => setActiveTab('calculator')} size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
|
||||
Beitrag berechnen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<style>{`
|
||||
[data-state="active"] {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:focus {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:focus-visible {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
`}</style>
|
||||
<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">
|
||||
Auslandsreisekrankenversicherung
|
||||
</h2>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(next) => {
|
||||
setActiveTab(next);
|
||||
}}
|
||||
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-5 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"
|
||||
>
|
||||
<Shield className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.overview', 'Übersicht')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="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="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="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="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="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">
|
||||
<Star className="w-4 h-4" />
|
||||
<span>Sicher reisen – optimal geschützt</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||
Auslandsreisekrankenversicherung
|
||||
<span className="block text-blue-700">Sorgenfrei reisen in alle Welt</span>
|
||||
</h1>
|
||||
<p className="mt-4 text-gray-600 text-lg">
|
||||
Umfassender Schutz für Ihre Gesundheit im Ausland – von Notfallbehandlung bis zum Rücktransport.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
||||
Angebot anfordern
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
|
||||
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">
|
||||
<Shield className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">Weltweiter Schutz</div>
|
||||
<div className="text-gray-600">Sicherheit bei Reisen in alle Länder</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<Users className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">Notfall-Schutz</div>
|
||||
<div className="text-gray-600">Sofortige Hilfe bei Krankheit und Unfall</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-637584740.jpg')}
|
||||
alt="Auslandsreisekrankenversicherung"
|
||||
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">
|
||||
<Heart className="w-4 h-4" />
|
||||
<span>Notfallbehandlung, Rücktransport, 24h Hotline</span>
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-600">
|
||||
Tarifcheck – schnell, fair und passend zu Ihrer Reise.
|
||||
</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" />
|
||||
Reise-Schutz
|
||||
</CardTitle>
|
||||
<CardDescription>Umfassende Absicherung für Ihre Auslandsreise.</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" />
|
||||
Vergleich lohnt sich
|
||||
</CardTitle>
|
||||
<CardDescription>Beiträge & Leistungen variieren stark.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<PhoneCall className="w-4 h-4 text-blue-700" />
|
||||
Persönliche Beratung
|
||||
</CardTitle>
|
||||
<CardDescription>Klare Schritte & Kontaktmöglichkeiten.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-xl bg-blue-700 p-6 text-white">
|
||||
<h3 className="text-2xl font-bold">Was beeinflusst die Kosten der Zahnzusatzversicherung?</h3>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Heart className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Zahnzustand</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Aktuelle Zahngesundheit und bisherige Behandlungen beeinflussen die Prämie.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Users className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Alter</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Jungere Versicherte zahlen oft geringere Beiträge als ältere.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Shield className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Leistungsumfang</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Umfassende Tarife mit 100% Erstattung kosten mehr als Basis-Tarife.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Calculator className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Selbstbeteiligung</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Höhere Selbstbeteiligung senkt den monatlichen Beitrag.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-lg bg-white/10 p-4 text-sm text-white/90">
|
||||
Beispiel: Beiträge liegen in Deutschland meist zwischen 15 € und 80 € monatlich.
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="details" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Details & Vorteile</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Umfassender Schutz für Ihre Gesundheit im Ausland – von Notfallbehandlung bis zum Rücktransport.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{benefits.map((benefit, index) => (
|
||||
<Card key={index} className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<benefit.icon className="w-5 h-5 text-blue-700" />
|
||||
{benefit.title}
|
||||
</CardTitle>
|
||||
<CardDescription>{benefit.description}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-lg font-semibold text-gray-900 mb-3">Leistungen (Auszug)</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{services.map((service, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-3"
|
||||
>
|
||||
<CheckCircle className="h-5 w-5 text-blue-700 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-gray-700">{service}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('iStock-637584740.jpg')} alt="Details & Vorteile">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Tipp</CardTitle>
|
||||
<CardDescription>Deckungssumme & Rücktransport prüfen.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-gray-700">
|
||||
Achte auf hohe Deckungssummen und optionalen Rücktransport (medizinische
|
||||
Evakuierung, Notfall-Hotline, Assistance).
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="calculator" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Auslandsreise-Vergleichsrechner</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Ein Richtwert hilft bei der Orientierung. Für ein exaktes Angebot brauchen
|
||||
wir u. a. Reiseziel, Reisedauer und gewünschte Leistungen.
|
||||
</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Calculator className="w-5 h-5 text-blue-700" />
|
||||
Grobe Beitragsschätzung
|
||||
</CardTitle>
|
||||
<CardDescription>Unverbindlich – wir kalkulieren danach exakt.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Reiseziel</label>
|
||||
<select
|
||||
name="destination"
|
||||
value={formData.destination}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="europa">Europa</option>
|
||||
<option value="asien">Asien</option>
|
||||
<option value="amerika">Amerika</option>
|
||||
<option value="weltweit">Weltweit</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Reisedauer</label>
|
||||
<select
|
||||
name="travelDuration"
|
||||
value={formData.travelDuration}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="kurz">Bis 14 Tage</option>
|
||||
<option value="mittel">15-30 Tage</option>
|
||||
<option value="lang">Über 30 Tage</option>
|
||||
<option value="jahr">Ganzes Jahr</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
|
||||
<div className="text-sm text-blue-900 font-semibold">Richtwert (Beispiel)</div>
|
||||
<div className="mt-1 text-sm text-blue-900">
|
||||
Reiseversicherung ab <span className="font-bold">ca. 15 €</span>/Woche
|
||||
</div>
|
||||
<div className="text-xs text-blue-900/80 mt-2">
|
||||
Abhängig von Reiseziel, Dauer, Leistungen und Alter.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button onClick={() => setActiveTab('form')} className="w-full bg-blue-700 hover:bg-blue-800">
|
||||
Jetzt konkretes Angebot anfordern
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('iStock-637584740.jpg')} alt="Auslandsreise-Vergleichsrechner">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Was wir fürs Angebot brauchen</CardTitle>
|
||||
<CardDescription>Je genauer, desto besser.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||
<div className="flex items-start gap-2">
|
||||
<FileText className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Reisedaten und Zielregion</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Search className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Alter und Gesundheitszustand</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Wunsch: Rücktransport / Dental-Schutz</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="form" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Anfrageformular</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Sende uns deine Eckdaten – wir melden uns mit einem passenden Angebot.
|
||||
</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardContent className="p-6">
|
||||
<form onSubmit={handleFormSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Name</label>
|
||||
<input
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Telefon</label>
|
||||
<input
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">E-Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Reiseziel</label>
|
||||
<select
|
||||
name="destination"
|
||||
value={formData.destination}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="europa">Europa</option>
|
||||
<option value="asien">Asien</option>
|
||||
<option value="amerika">Amerika</option>
|
||||
<option value="weltweit">Weltweit</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Reisedauer</label>
|
||||
<select
|
||||
name="travelDuration"
|
||||
value={formData.travelDuration}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="kurz">Bis 14 Tage</option>
|
||||
<option value="mittel">15-30 Tage</option>
|
||||
<option value="lang">Über 30 Tage</option>
|
||||
<option value="jahr">Ganzes Jahr</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Versicherungstyp</label>
|
||||
<select
|
||||
name="coverageType"
|
||||
value={formData.coverageType}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="einzeln">Einzelversicherung</option>
|
||||
<option value="familie">Familienversicherung</option>
|
||||
<option value="gruppe">Gruppenversicherung</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Nachricht</label>
|
||||
<textarea
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm min-h-[120px]"
|
||||
placeholder="Welche Leistungen sind Ihnen wichtig?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="bg-blue-700 hover:bg-blue-800">
|
||||
Anfrage senden
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('head_kontakt_agentur_mizera.jpg')} alt="Anfrageformular">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Direktkontakt</CardTitle>
|
||||
<CardDescription>Wenn es schnell gehen soll.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="w-4 h-4 text-blue-700" />
|
||||
<span>Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a> <a href="https://wa.me/491719864053" target="_blank" rel="noreferrer" className="text-green-600 hover:text-green-800 underline">(WhatsApp)</a></span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4 text-blue-700" />
|
||||
<span>E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></span>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<Button variant="outline" className="w-full" onClick={() => navigate('/kontakt')}>
|
||||
Kontaktseite
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
|
||||
<TabsContent value="brochure" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Kundenbroschüre (PDF)</h3>
|
||||
<p className="mt-2 text-gray-600">Broschüre als PDF zum Download.</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Auslandsreisekrankenversicherung (PDF)</CardTitle>
|
||||
<CardDescription>Informationsbroschüre zur Auslandsreisekrankenversicherung</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<a href="/PDF/Tarifvergleich-CEZKCEZP_CEZE_01.2023-2791.pdf" download>
|
||||
<Button className="bg-blue-700 hover:bg-blue-800 w-full">PDF herunterladen</Button>
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('iStock-637584740.jpg')} alt="Kundenbroschüre">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Hinweis</CardTitle>
|
||||
<CardDescription>Bei Fragen beraten wir gerne.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<GeneralNotice />
|
||||
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Auslandsreisekrankenversicherung;
|
||||
@ -99,9 +99,8 @@ const Finanzen = () => {
|
||||
{ title: 'Kredit Vergleichsrechner', href: '/kreditvergleich', image: assetUrl('Finanzen/Fotolia_60240828_S.jpg') },
|
||||
{ title: 'Kreditabsicherung', href: '/kreditabsicherung', image: assetUrl('Finanzen/iStock-975006448.jpg') },
|
||||
{ title: 'Brutto-Netto-Rechner', href: '/bruttolnetto', image: assetUrl('iStock-957363908.jpg') },
|
||||
].map((item) => (
|
||||
].map((item, index) => (
|
||||
<div
|
||||
key={`${item.href}-${item.title}`}
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
|
||||
111
src/pages/Gesundheitsvorsorge.tsx
Normal file
111
src/pages/Gesundheitsvorsorge.tsx
Normal file
@ -0,0 +1,111 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Heart, Shield, Plane, ArrowRight } from 'lucide-react';
|
||||
import Layout from '@/components/Layout';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
|
||||
const Gesundheitsvorsorge = () => {
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
// Add SEO metadata for search
|
||||
useEffect(() => {
|
||||
document.title = 'Gesundheitsvorsorge - Agentur Mizera';
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Gesundheitsvorsorge: Umfassende Vorsorge und Prävention für Ihre Gesundheit. Unabhängige Beratung für alle Bereiche der Gesundheitsvorsorge.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const healthTopics = [
|
||||
{
|
||||
title: 'Private Krankenversicherung',
|
||||
href: '/private-krankenversicherung',
|
||||
image: assetUrl('head_kranken.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Zahnzusatzversicherung',
|
||||
href: '/zahnzusatzversicherung',
|
||||
image: assetUrl('Fotolia_45263348_S.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Auslandsreisekrankenversicherung',
|
||||
href: '/auslandsreisekrankenversicherung',
|
||||
image: assetUrl('iStock-637584740.jpg')
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Hero Section wie bei anderen Seiten */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="h-96 bg-cover bg-center relative"
|
||||
style={{ backgroundImage: `url(${assetUrl('iStock-819100588.jpg')})` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gray-900/20" />
|
||||
<div className="relative container mx-auto px-4 h-full flex items-center">
|
||||
<div className="max-w-3xl">
|
||||
<div className="bg-black/40 text-white px-8 py-6 md:px-10 md:py-8 shadow-lg">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
Gesundheitsvorsorge
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 mb-8 max-w-2xl">
|
||||
Umfassender Schutz für Ihre Gesundheit - im In- und Ausland
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Jetzt beraten lassen
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
<Button size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
|
||||
Vergleich starten
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kacheln */}
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||
Wählen Sie Ihren Versicherungsschutz
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
Wir bieten Ihnen maßgeschneiderte Lösungen für alle Bereiche der Gesundheitsvorsorge
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{healthTopics.map((topic, index) => (
|
||||
<Link key={index} to={topic.href}>
|
||||
<Card className="group hover:shadow-lg transition-shadow duration-300 cursor-pointer overflow-hidden">
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<img
|
||||
src={topic.image}
|
||||
alt={topic.title}
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||||
<div className="text-xl font-bold">{topic.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Gesundheitsvorsorge;
|
||||
@ -10,7 +10,7 @@ import HeroSlider from '@/components/HeroSlider';
|
||||
const Index = () => {
|
||||
const { t } = useTranslation('home');
|
||||
const navigate = useNavigate();
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
const [yearsOfExperience, setYearsOfExperience] = useState(new Date().getFullYear() - 1994);
|
||||
const [focusTopics, setFocusTopics] = useState<Array<{ title: string; href: string; image: string }>>([]);
|
||||
@ -23,16 +23,23 @@ const Index = () => {
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
const pool = [
|
||||
{ title: 'KFZ-Fahrzeuge', href: '/kfz', image: assetUrl('Fotolia_8654128_XS.jpg') },
|
||||
{ title: 'Privatkunden', href: '/privatkunden', image: assetUrl('Fotolia_11700075_XS.jpg') },
|
||||
{ title: 'Senioren', href: '/senioren', image: assetUrl('Fotolia_8218560_XS.jpg') },
|
||||
{ title: 'Hausrat', href: '/hausrat', image: assetUrl('iStock-482694353.jpg') },
|
||||
{ title: 'Rechtsschutzversicherung', href: '/rechtsschutzversicherung', image: assetUrl('iStock-1067720324.jpg') },
|
||||
{ title: 'Unfall – Was jetzt?', href: '/unfall', image: assetUrl('iStock-523830845.jpg') },
|
||||
{ title: 'Familien & Kinder', href: '/familien-kinder', image: assetUrl('iStock-956005062.jpg') },
|
||||
{ title: 'Tierversicherungen', href: '/tierversicherung', image: assetUrl('Tiere/DSC_4029.JPG?v=1') },
|
||||
{ title: 'Finanzen', href: '/finanzen', image: assetUrl('iStock-957363908.jpg') },
|
||||
{ title: 'KFZ-Fahrzeuge', href: '/kfz', image: import.meta.env.BASE_URL + encodeURI('Fotolia_8654128_XS.jpg') },
|
||||
{ title: 'Privatkunden', href: '/privatkunden', image: import.meta.env.BASE_URL + encodeURI('Fotolia_11700075_XS.jpg') },
|
||||
{ title: 'Senioren', href: '/senioren', image: import.meta.env.BASE_URL + encodeURI('Fotolia_8218560_XS.jpg') },
|
||||
{ title: 'Hausrat', href: '/hausrat', image: import.meta.env.BASE_URL + encodeURI('iStock-482694353.jpg') },
|
||||
{ title: 'Rechtsschutzversicherung', href: '/rechtsschutzversicherung', image: import.meta.env.BASE_URL + encodeURI('iStock-1067720324.jpg') },
|
||||
{ title: 'Unfall – Was jetzt?', href: '/unfall', image: import.meta.env.BASE_URL + encodeURI('iStock-523830845.jpg') },
|
||||
{ title: 'Familien & Kinder', href: '/familien-kinder', image: import.meta.env.BASE_URL + encodeURI('iStock-956005062.jpg') },
|
||||
{ title: 'Tierversicherungen', href: '/tierversicherung', image: import.meta.env.BASE_URL + encodeURI('Tiere/DSC_4029.JPG?v=1') },
|
||||
{ title: 'Finanzen', href: '/finanzen', image: import.meta.env.BASE_URL + encodeURI('iStock-957363908.jpg') },
|
||||
{ title: 'Private Krankenversicherung', href: '/private-krankenversicherung', image: import.meta.env.BASE_URL + encodeURI('head_kranken.jpg') },
|
||||
{ title: 'Zahnzusatzversicherung', href: '/zahnzusatzversicherung', image: import.meta.env.BASE_URL + encodeURI('Fotolia_45263348_S.jpg') },
|
||||
{ title: 'Auslandsreisekrankenversicherung', href: '/auslandsreisekrankenversicherung', image: import.meta.env.BASE_URL + encodeURI('iStock-637584740.jpg') },
|
||||
{ title: 'Gesundheitsvorsorge', href: '/gesundheitsvorsorge', image: import.meta.env.BASE_URL + encodeURI('iStock-819100588.jpg') },
|
||||
];
|
||||
|
||||
setFocusTopics(
|
||||
@ -40,7 +47,7 @@ const Index = () => {
|
||||
a.title.localeCompare(b.title, 'de-DE', { sensitivity: 'base' })
|
||||
)
|
||||
);
|
||||
}, [t]);
|
||||
}, []);
|
||||
|
||||
const benefits = [
|
||||
t('benefits.benefit1', {
|
||||
@ -86,7 +93,7 @@ const Index = () => {
|
||||
'hero.subtitle',
|
||||
'Unabhängige Beratung seit 1994 – schnell vergleichen, besser entscheiden.'
|
||||
),
|
||||
imageUrl: assetUrl('iStock-928087944.jpg'),
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('iStock-928087944.jpg'),
|
||||
imagePosition: 'center 35%',
|
||||
ctas: [
|
||||
{ label: t('hero.primaryCta', 'Jetzt berechnen'), href: '/kfz' },
|
||||
@ -97,30 +104,29 @@ const Index = () => {
|
||||
{ label: t('topics.item2.title', 'Privatkunden'), href: '/privatkunden' },
|
||||
{ label: t('topics.item3.title', 'Senioren'), href: '/senioren' },
|
||||
{ label: t('topics.item4.title', 'Hausrat'), href: '/hausrat' },
|
||||
{ label: 'Private Krankenversicherung', href: '/private-krankenversicherung' },
|
||||
{ label: 'Zahnzusatzversicherung', href: '/zahnzusatzversicherung' },
|
||||
{ label: t('topics.item6.title', 'Unfall – Was jetzt?'), href: '/unfall' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'home-2',
|
||||
kicker: t('topics.item1.title', 'KFZ-Fahrzeuge'),
|
||||
title: t('hero.title', 'Sicherheit, die zu Ihnen passt.'),
|
||||
subtitle: t(
|
||||
'hero.subtitle',
|
||||
'Unabhängige Beratung seit 1994 – schnell vergleichen, besser entscheiden.'
|
||||
),
|
||||
imageUrl: assetUrl('Fotolia_8654128_XS.jpg'),
|
||||
kicker: 'Private Krankenversicherung',
|
||||
title: 'Optimaler Gesundheitsschutz für Sie',
|
||||
subtitle: 'Umfassende Absicherung für Ihre Gesundheit – unabhängig vergleichen und besser entscheiden.',
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('head_kranken.jpg'),
|
||||
imagePosition: 'center 45%',
|
||||
ctas: [
|
||||
{ label: t('hero.primaryCta', 'Jetzt berechnen'), href: '/kfz' },
|
||||
{ label: t('hero.secondaryCta', 'Jetzt informieren'), href: '/autoversicherung' },
|
||||
{ label: 'Jetzt beraten lassen', href: '/private-krankenversicherung' },
|
||||
{ label: 'Alle Versicherungen', href: '/privatkunden' },
|
||||
],
|
||||
topics: [
|
||||
{ label: 'Autoversicherung', href: '/autoversicherung' },
|
||||
{ label: 'Motorrad', href: '/motorradversicherung' },
|
||||
{ label: 'Quad', href: '/quadversicherung' },
|
||||
{ label: 'FairMobil', href: '/fairmobil' },
|
||||
{ label: 'Drittfahrer-Schutz', href: '/drittfahrer-schutz' },
|
||||
{ label: 'Flotte', href: '/flottenversicherung' },
|
||||
{ label: 'Private Krankenversicherung', href: '/private-krankenversicherung' },
|
||||
{ label: 'Zahnzusatzversicherung', href: '/zahnzusatzversicherung' },
|
||||
{ label: 'Auslandsreisekrankenversicherung', href: '/auslandsreisekrankenversicherung' },
|
||||
{ label: 'Gesundheitsvorsorge', href: '/gesundheitsvorsorge' },
|
||||
{ label: 'KFZ-Fahrzeuge', href: '/kfz' },
|
||||
{ label: 'Hausrat', href: '/hausrat' },
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -131,7 +137,7 @@ const Index = () => {
|
||||
'hero.finance.subtitle',
|
||||
'Unabhängige Beratung zu Vermögensaufbau, Altersvorsorge und Finanzierung – verständlich und transparent.'
|
||||
),
|
||||
imageUrl: assetUrl('iStock-957363908.jpg'),
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('iStock-957363908.jpg'),
|
||||
imagePosition: 'center 30%',
|
||||
ctas: [
|
||||
{ label: t('hero.finance.primaryCta', 'Beratung'), href: '/contact' },
|
||||
@ -148,7 +154,7 @@ const Index = () => {
|
||||
kicker: t('hero.contact.kicker', 'Kontakt'),
|
||||
title: t('hero.contact.title', 'Wir sind für Sie da.'),
|
||||
subtitle: t('hero.contact.subtitle', 'Kontakt, Adressen und Service – schnell und übersichtlich.'),
|
||||
imageUrl: assetUrl('Fotolia_7809059_XS.jpg'),
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('Fotolia_7809059_XS.jpg'),
|
||||
imagePosition: 'center',
|
||||
ctas: [
|
||||
{ label: t('hero.contact.primaryCta', 'Kontakt'), href: '/contact' },
|
||||
@ -163,7 +169,7 @@ const Index = () => {
|
||||
'hero.private.subtitle',
|
||||
'Individuelle Beratung für alle Lebensbereiche – von der Kfz-Versicherung bis zur Altersvorsorge.'
|
||||
),
|
||||
imageUrl: assetUrl('Fotolia_11700075_XS.jpg'),
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('Fotolia_11700075_XS.jpg'),
|
||||
imagePosition: 'center',
|
||||
ctas: [
|
||||
{ label: t('hero.private.primaryCta', 'Privatkunden'), href: '/privatkunden' },
|
||||
@ -178,7 +184,7 @@ const Index = () => {
|
||||
'hero.seniors.subtitle',
|
||||
'Maßgeschneiderte Lösungen für Ihre Lebensphase – von der Gesundheitsvorsorge bis zur Altersvorsorge.'
|
||||
),
|
||||
imageUrl: assetUrl('Fotolia_67327775_XS.jpg'),
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('Fotolia_67327775_XS.jpg'),
|
||||
imagePosition: 'center 35%',
|
||||
ctas: [
|
||||
{ label: t('hero.seniors.primaryCta', 'Senioren'), href: '/senioren' },
|
||||
@ -193,7 +199,7 @@ const Index = () => {
|
||||
'hero.business.subtitle',
|
||||
'Professionelle Versicherungsberatung für Unternehmen und Selbstständige – individuell, transparent und zuverlässig.'
|
||||
),
|
||||
imageUrl: assetUrl('iStock-943842590.jpg'),
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('iStock-943842590.jpg'),
|
||||
imagePosition: 'center',
|
||||
ctas: [
|
||||
{ label: t('hero.business.primaryCta', 'Geschäftskunden'), href: '/geschaeftskunden' },
|
||||
@ -208,7 +214,7 @@ const Index = () => {
|
||||
'hero.bike.subtitle',
|
||||
'Optimaler Schutz für Motorräder – Haftpflicht, Teilkasko, Vollkasko und flexible Verträge.'
|
||||
),
|
||||
imageUrl: assetUrl('head_motorradversicherung.jpg'),
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('head_motorradversicherung.jpg'),
|
||||
imagePosition: 'center',
|
||||
ctas: [
|
||||
{ label: t('hero.bike.primaryCta', 'Angebot'), href: '/motorradversicherung' },
|
||||
@ -231,7 +237,7 @@ const Index = () => {
|
||||
'hero.family.subtitle',
|
||||
'Umfassende Versicherungen für Familien und Kinder – von Geburt an bestens abgesichert.'
|
||||
),
|
||||
imageUrl: assetUrl('iStock-956005062.jpg'),
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('iStock-956005062.jpg'),
|
||||
imagePosition: 'center 20%',
|
||||
ctas: [
|
||||
{ label: t('hero.family.primaryCta', 'Jetzt berechnen'), href: '/familien-kinder' },
|
||||
@ -246,7 +252,7 @@ const Index = () => {
|
||||
'hero.rechtsschutz.subtitle',
|
||||
'Absicherung bei Streitigkeiten – wir finden die passenden Bausteine und Tarife für Sie.'
|
||||
),
|
||||
imageUrl: assetUrl('iStock-1067720324.jpg'),
|
||||
imageUrl: import.meta.env.BASE_URL + encodeURI('iStock-1067720324.jpg'),
|
||||
imagePosition: 'center 35%',
|
||||
ctas: [
|
||||
{ label: t('hero.rechtsschutz.primaryCta', 'Mehr erfahren'), href: '/rechtsschutzversicherung' },
|
||||
@ -261,24 +267,19 @@ const Index = () => {
|
||||
<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">
|
||||
Unsere Leistungen
|
||||
{t('topics.title', 'Unsere Leistungen')}
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Die wichtigsten Lösungen für Ihre private Absicherung
|
||||
{t('topics.subtitle', 'Die wichtigsten Lösungen für Ihre private Absicherung')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
{focusTopics.map((item) => (
|
||||
<div
|
||||
<Link
|
||||
key={`${item.href}-${item.title}`}
|
||||
className="group cursor-pointer transform transition-all duration-300 hover:scale-105"
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => navigate(item.href)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') navigate(item.href);
|
||||
}}
|
||||
to={item.href}
|
||||
className="group block transform transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<div
|
||||
@ -289,17 +290,21 @@ const Index = () => {
|
||||
|
||||
{/* Overlay mit Titel und Beschreibung */}
|
||||
<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 className="text-xl font-black">{item.title.replace('Versicherung', '').trim()}</div>
|
||||
<div className="text-sm text-white/90 mt-1">
|
||||
{item.title === 'KFZ-Fahrzeuge' && 'Autoversicherung & Kfz'}
|
||||
{item.title === 'Privatkunden' && 'Sicherheit & Vorsorge'}
|
||||
{item.title === 'Senioren' && 'Wohlbefinden im Alter'}
|
||||
{item.title === 'Hausrat' && 'Schutz für Ihr Zuhause'}
|
||||
{item.title === 'Rechtsschutzversicherung' && 'Ihre Rechte schützen'}
|
||||
{item.title === 'Unfall – Was jetzt?' && 'Schnelle Hilfe'}
|
||||
{item.title === 'Familien & Kinder' && 'Für Ihre Familie'}
|
||||
{item.title === 'Tierversicherungen' && 'Schutz für Ihre Haustiere'}
|
||||
{item.title === 'Finanzen' && 'Ihre finanzielle Zukunft'}
|
||||
{item.title === 'KFZ-Fahrzeuge' && t('topics.kfz.description', 'Autoversicherung & Kfz')}
|
||||
{item.title === 'Privatkunden' && t('topics.privatkunden.description', 'Sicherheit & Vorsorge')}
|
||||
{item.title === 'Senioren' && t('topics.senioren.description', 'Wohlbefinden im Alter')}
|
||||
{item.title === 'Hausrat' && t('topics.hausrat.description', 'Schutz für Ihr Zuhause')}
|
||||
{item.title === 'Rechtsschutzversicherung' && t('topics.rechtsschutz.description', 'Ihre Rechte schützen')}
|
||||
{item.title === 'Unfall – Was jetzt?' && t('topics.unfall.description', 'Schnelle Hilfe')}
|
||||
{item.title === 'Familien & Kinder' && t('topics.familie.description', 'Für Ihre Familie')}
|
||||
{item.title === 'Tierversicherungen' && t('topics.tiere.description', 'Schutz für Ihre Haustiere')}
|
||||
{item.title === 'Finanzen' && t('topics.finanzen.description', 'Ihre finanzielle Zukunft')}
|
||||
{item.title === 'Private Krankenversicherung' && t('topics.privateKrankenversicherung.description', 'Optimaler Gesundheitsschutz')}
|
||||
{item.title === 'Zahnzusatzversicherung' && t('topics.zahnzusatzversicherung.description', 'Perfekter Zahnschutz')}
|
||||
{item.title === 'Auslandsreisekrankenversicherung' && t('topics.auslandsreisekrankenversicherung.description', 'Sorgenfrei reisen')}
|
||||
{item.title === 'Gesundheitsvorsorge' && t('topics.gesundheitsvorsorge.description', 'Vorsorge & Prävention')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -356,9 +361,9 @@ const Index = () => {
|
||||
<section className="py-12 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">So läuft unsere Beratung ab</h2>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">{t('process.title', 'So läuft unsere Beratung ab')}</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
Klar, strukturiert und ohne Fachchinesisch – Schritt für Schritt.
|
||||
{t('process.subtitle', 'Klar, strukturiert und ohne Fachchinesisch – Schritt für Schritt.')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -402,10 +407,10 @@ const Index = () => {
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Was unsere Kunden sagen
|
||||
{t('testimonials.title', 'Was unsere Kunden sagen')}
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
Erfahrungen und Meinungen zufriedener Kunden
|
||||
{t('testimonials.subtitle', 'Erfahrungen und Meinungen zufriedener Kunden')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||||
@ -430,15 +435,15 @@ const Index = () => {
|
||||
<section className="py-12 bg-blue-600">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center text-white">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Bereit für den besten Versicherungsschutz?</h2>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">{t('cta.title', 'Bereit für den besten Versicherungsschutz?')}</h2>
|
||||
<p className="text-xl mb-8 text-blue-100">
|
||||
Kontaktieren Sie mich noch heute für eine kostenlose Beratung
|
||||
{t('cta.subtitle', 'Kontaktieren Sie mich noch heute für eine kostenlose Beratung')}
|
||||
</p>
|
||||
<Button asChild size="lg" variant="secondary" className="text-lg px-8 py-3 bg-white text-blue-600 hover:bg-gray-100">
|
||||
<Link to="/contact#contact">
|
||||
<Phone className="mr-2 h-5 w-5" />
|
||||
Jetzt kontaktieren
|
||||
</Link>
|
||||
{t('cta.button', 'Jetzt kontaktieren')}
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -449,3 +454,76 @@ const Index = () => {
|
||||
};
|
||||
|
||||
export default Index;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
826
src/pages/PrivateKrankenversicherung.tsx
Normal file
826
src/pages/PrivateKrankenversicherung.tsx
Normal file
@ -0,0 +1,826 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, Gauge, Heart } 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 PrivateKrankenversicherung = () => {
|
||||
const { t } = useTranslation('privateKrankenversicherung');
|
||||
|
||||
// Add SEO metadata for search
|
||||
React.useEffect(() => {
|
||||
document.title = 'Private Krankenversicherung - Agentur Mizera';
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Private Krankenversicherung: Umfassender Schutz für Ihre Gesundheit. Unabhängige Beratung und Tarifvergleich für private Krankenversicherungen.');
|
||||
}
|
||||
}, []);
|
||||
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: '',
|
||||
occupation: '',
|
||||
currentInsurance: '',
|
||||
message: ''
|
||||
});
|
||||
|
||||
const handleFormChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleFormSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log('Form submitted:', formData);
|
||||
navigate('/contact');
|
||||
};
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Umfassender Schutz',
|
||||
description: 'Optimale medizinische Versorgung',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: 'Freie Arztwahl',
|
||||
description: 'Behandlung bei allen Fachärzten ohne Überweisung',
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: 'Keine Wartezeiten',
|
||||
description: 'Schnelle Termine bei Fachärzten und Kliniken',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Premium Leistungen',
|
||||
description: 'Zimmer mit Komfort und Einbettbetten',
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: 'Komfort im Krankenhaus',
|
||||
description: 'Ein- oder Zweibettzimmer, Chefarztbehandlung',
|
||||
},
|
||||
];
|
||||
|
||||
const services = [
|
||||
'Ambulante Behandlungen',
|
||||
'Stationäre Aufenthalte',
|
||||
'Zahnbehandlungen',
|
||||
'Vorsorgeuntersuchungen',
|
||||
'Alternative Medizin',
|
||||
'Auslandsbehandlungen',
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="h-96 bg-cover bg-center relative"
|
||||
style={{ backgroundImage: `url(${assetUrl('head_kranken.jpg')})` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gray-900/20" />
|
||||
<div className="relative container mx-auto px-4 h-full flex items-center">
|
||||
<div className="max-w-3xl">
|
||||
<div className="bg-black/40 text-white px-8 py-6 md:px-10 md:py-8 shadow-lg">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
Private Krankenversicherung
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 mb-8 max-w-2xl">
|
||||
Gesundheit ist ein hohes, wenn nicht das höchste Gut!
|
||||
<br />
|
||||
Verwenden Sie die beste Absicherung für Ihre Gesundheit.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Button onClick={() => setActiveTab('form')} size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Jetzt beraten lassen
|
||||
</Button>
|
||||
<Button onClick={() => setActiveTab('calculator')} size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
|
||||
Jetzt berechnen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<style>{`
|
||||
[data-state="active"] {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:focus {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:focus-visible {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
`}</style>
|
||||
<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">
|
||||
Private Krankenversicherung
|
||||
</h2>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(next) => {
|
||||
setActiveTab(next);
|
||||
}}
|
||||
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-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"
|
||||
>
|
||||
<Shield className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.overview', 'Übersicht')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="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="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="reform"
|
||||
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"
|
||||
>
|
||||
<AlertCircle className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.reform', 'Reform')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="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="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="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">
|
||||
<Star className="w-4 h-4" />
|
||||
<span>Vorteile einer privaten Krankenversicherung</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||
Private Krankenversicherung
|
||||
<span className="block text-blue-700">für Ihre Gesundheit nur das Beste!</span>
|
||||
</h1>
|
||||
<p className="mt-4 text-gray-600 text-lg">
|
||||
Bei über ca. vierzig Gesellschaften die eine private Krankenversicherung anbieten, fällt es schwer die Übersicht zu behalten. Es gibt verschiedene Tarife, mehrere Selbstbeteiligungen, Spezialtarife für bestimmte Berufsgruppen und andere Besonderheiten im Bereich der privaten Krankenversicherung. Doch mit Hilfe speziellen Software, behalten wir für Sie den Überblick im Tarif Dschungel der private Krankenversicherung.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
||||
Angebot anfordern
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
|
||||
Leistungsumfang
|
||||
</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">
|
||||
<Shield className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">Umfassender Schutz</div>
|
||||
<div className="text-gray-600">Optimale medizinische Versorgung</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<Users className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">Freie Arztwahl</div>
|
||||
<div className="text-gray-600">Behandlung bei allen Fachärzten</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('head_kranken.jpg')}
|
||||
alt="Private Krankenversicherung"
|
||||
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">
|
||||
<Heart className="w-4 h-4" />
|
||||
<span>Professionelle Vorsorge und optimale Behandlung</span>
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-600">
|
||||
Tarifcheck – schnell, fair und passend zu Ihrem Bedarf.
|
||||
</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" />
|
||||
Umfassender Schutz
|
||||
</CardTitle>
|
||||
<CardDescription>Optimale medizinische Versorgung.</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" />
|
||||
Tarifvergleich lohnt sich
|
||||
</CardTitle>
|
||||
<CardDescription>Beiträge & Leistungen variieren stark.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<PhoneCall className="w-4 h-4 text-blue-700" />
|
||||
Persönliche Beratung
|
||||
</CardTitle>
|
||||
<CardDescription>Klare Schritte & Kontaktmöglichkeiten.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-xl bg-blue-700 p-6 text-white">
|
||||
<h3 className="text-2xl font-bold">Was beeinflusst die Kosten der privaten Krankenversicherung?</h3>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Heart className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Eintrittsalter und Gesundheitszustand</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Aktuelle Gesundheit und bisherige Behandlungen beeinflussen die Prämie.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Users className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Gewählte Tarifart und Leistungsumfang</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Umfassende Tarife mit 100% Erstattung kosten mehr als Basis-Tarife.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Shield className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Selbstbeteiligung und Franchise</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Höhere Selbstbeteiligung senkt den monatlichen Beitrag.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Calculator className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Berufsgruppe und Familienstand</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Berufsgruppe und Familienstand beeinflussen die Prämie.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-lg bg-white/10 p-4 text-sm text-white/90">
|
||||
Beispiel: Beiträge liegen in Deutschland meist zwischen 450 und 800 € monatlich.
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="details" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Vorteile einer privaten Krankenversicherung</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Bei über ca. vierzig Gesellschaften die eine private Krankenversicherung anbieten, fällt es schwer die Übersicht zu behalten. Es gibt verschiedene Tarife, mehrere Selbstbeteiligungen, Spezialtarife für bestimmte Berufsgruppen und andere Besonderheiten im Bereich der privaten Krankenversicherung. Doch mit Hilfe speziellen Software, behalten wir für Sie den Überblick im Tarif Dschungel der private Krankenversicherung.
|
||||
</p>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-lg font-semibold text-gray-900 mb-3">Vorteile:</h4>
|
||||
<div className="space-y-2 text-sm text-gray-700">
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Beitragsgestaltung individuell je nach Tarif</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Freie Tarifwahl, Individuelle Leistungspakete</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Individuelle Zusammenstellung</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Freie Privatärzte, Arzt- und Krankenhauswahl</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Facharztbesuch ohne Überweisung</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>100% Zahnbehandlung</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>optimale Behandlung, keine Arzneimittelzuzahlung *</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Erstattung von Sehhilfen</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Alternative Behandlungen</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Gezielte Vorsorgeuntersuchungen</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Stationäre Behandlung im Einbettzimmer / Chefarzt *</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Kostenübernahme Heilpraktiker *</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Hohe Kostenerstattung Zahnersatz *</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Beitragsrückerstattung *</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Weltweiter Krankenschutz *</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Unbeschwerter Urlaub mit dem Reisekrankenschutz</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 text-xs text-gray-500">
|
||||
* je nach Tarif und individuelle Zusammenstellung des Versicherungsschutzes
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-lg font-semibold text-gray-900 mb-3">Nachteile:</h4>
|
||||
<div className="space-y-2 text-sm text-gray-700">
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Risikozuschläge oder Ausschlüsse von Leistungen bei Vorerkrankungen möglich</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Beitragspflicht auch bei längerer Krankheit über 6 Wochen</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Wechsel der Krankenversicherung nur eingeschränkt möglich</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Keine Beitragsfreiheit während Mutterschafts- und Erziehungsurlaub</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Summenbegrenzung bei Zahnersatz in den ersten Jahren möglich</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('head_kranken.jpg')} alt="Details & Vorteile">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Tipp</CardTitle>
|
||||
<CardDescription>Leistungsumfang & Tarifdetails prüfen.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-gray-700">
|
||||
Achte auf umfassenden Leistungsumfang und Tarifdetails.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="reform" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-orange-50 border border-orange-200 px-3 py-1 text-sm text-orange-800 mb-4">
|
||||
<AlertCircle className="w-4 h-4" />
|
||||
<span>EINE AKTUELLE</span>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Gesundheitsreform - Versicherungspflicht seit 16. Juni 2008</h3>
|
||||
|
||||
<div className="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<p className="text-sm text-blue-800 font-medium mb-2">
|
||||
Information - Bundesministerium für Gesundheit - Versicherungspflicht
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 space-y-6">
|
||||
<div>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
"Wie wichtig eine Absicherung für den Krankheitsfall ist, merkt man spätestens, wenn man krank wird und keine hat. Zwar waren auch bisher die meisten Einwohner in Deutschland über eine Krankenversicherung abgesichert, aber die Zahl derer, die ohne jegliche Absicherung im Krankheitsfall waren, war immer noch zu groß. Ihnen konnte es bisher jederzeit so gehen, dass sie bei Krankheit nicht wussten, wie sie die notwendigen Behandlungskosten bezahlen sollten. Dies soll in Zukunft niemandem mehr passieren.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Alle Einwohnerinnen und Einwohner, die keinen Anspruch auf anderweitige Absicherung im Krankheitsfall haben, erhalten wieder Zugang zu einer Krankenversicherung. Ob gesetzlich oder privat, hängt davon ab, wie man vorher versichert war. Wer bisher weder gesetzlich noch privat versichert war, wird in dem System versichert, dem er oder sie aufgrund der zuletzt ausgeübten Tätigkeit zuzuordnen ist. Wer zum Beispiel selbstständig ist, hat Zugang zur privaten Krankenversicherung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Die Erweiterung der bisherigen Versicherungspflicht auf Personen ohne anderweitige Absicherung im Krankheitsfall bedeutet, dass im Grundsatz nunmehr jede und jeder dazu beiträgt, das persönliche Krankheitsrisiko finanziell abzusichern. Sie verhindert auch, dass Menschen bewusst auf die Absicherung verzichten, weil sie wissen, dass letztlich die Allgemeinheit die Kosten einer medizinischen Behandlung tragen muss, wenn die eigenen Mittel nicht ausreichen. Zugleich kann allen, die versichert sind, künftig auch der Versicherungsschutz nicht mehr vollständig entzogen werden zum Beispiel wegen Beitragsrückstand.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Auf der anderen Seite gilt: Wer zu spät, zum Beispiel erst, wenn er krank ist, dieser neuen Versicherungspflicht nachkommt, muss nicht bezahlte Beiträge nachzahlen. Denn seit dem 1. April 2007 ist diese neue Versicherungspflicht in der GKV entstanden, die damit verbundene Beitragspflicht beginnt mit dem Zeitpunkt, in dem kein anderweitiger Anspruch auf Absicherung im Krankheitsfall vorliegt. In der privaten Krankenversicherung beginnt die entsprechende Pflicht zum Abschluss einer Krankenversicherung ab dem 1. Januar 2009. Im Ergebnis besteht danach praktisch für alle Bürgerinnen und Bürger eine lückenlose Krankenversicherungspflicht. Sie sind soweit dies nicht schon bereits der Fall war - damit zugleich auch pflegeversichert."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="border-orange-200 bg-orange-50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2 text-orange-800">
|
||||
<AlertCircle className="w-5 h-5 text-orange-600" />
|
||||
Wer muss sich versichern?
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-700 leading-relaxed text-sm">
|
||||
Bundesministerium für Gesundheit - "Mit der Einführung der Versicherungspflicht seit dem 1. Januar 2009 muss sich jede/r versichern. Wer dies nicht tut, muss bei verspätetem Vertragsabschluss Prämienzuschläge zahlen: Für Februar bis Mai dieses Jahres jeweils den vollen Monatsbeitrag, also maximal rund 570 Euro pro Monat, ab Juni 2009 für jeden weiteren Monat ein Sechstel des entsprechenden Beitrags. Sie sollten also auf jeden Fall einen Vertrag abschließen, falls Sie dies nicht schon getan haben."
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('head_kranken.jpg')} alt="Gesundheitsreform">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Unsere Empfehlung</CardTitle>
|
||||
<CardDescription>Professionelle Beratung in Zeiten der Reform</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-gray-700">
|
||||
In Zeiten der Gesundheitsreform ist eine professionelle Beratung besonders wichtig. Wir helfen Ihnen, die richtigen Entscheidungen für Ihre Absicherung zu treffen.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="calculator" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Beitragssatz-Rechner</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Ein Richtwert hilft bei der Orientierung. Für ein exaktes Angebot brauchen
|
||||
wir u. a. Alter, Gesundheitszustand und Berufsgruppe.
|
||||
</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Calculator className="w-5 h-5 text-blue-700" />
|
||||
Grobe Beitragsschätzung
|
||||
</CardTitle>
|
||||
<CardDescription>Unverbindlich – wir kalkulieren danach exakt.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Fahrzeugtyp</label>
|
||||
<select
|
||||
name="age"
|
||||
value={formData.age}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Berufsgruppe</label>
|
||||
<select
|
||||
name="occupation"
|
||||
value={formData.occupation}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option>Angestellter</option>
|
||||
<option>Selbstständig</option>
|
||||
<option>Beamter</option>
|
||||
<option>Freiberufler</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
|
||||
<div className="text-sm text-blue-900 font-semibold">Richtwert (Beispiel)</div>
|
||||
<div className="mt-1 text-sm text-blue-900">
|
||||
Krankenversicherung ab <span className='font-bold'>ca. 450-650 €</span>/Monat
|
||||
</div>
|
||||
<div className="text-xs text-blue-900/80 mt-2">
|
||||
Abhängig von Alter, Gesundheitszustand, Berufsgruppe, Tarif.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button onClick={() => setActiveTab('form')} className="w-full bg-blue-700 hover:bg-blue-800">
|
||||
Jetzt konkretes Angebot anfordern
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('head_kranken.jpg')} alt="Beitragssatz-Rechner">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Für wen eignet sich die PKV?</CardTitle>
|
||||
<CardDescription>Je genauer, desto besser.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||
<div className="flex items-start gap-2">
|
||||
<FileText className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Selbstständige über 66.600 € Jahresgehalt</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Search className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Beamte mit Beihilfeanspruch</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertCircle className="w-4 h-4 text-red-600 mt-0.5 flex-shrink-0" />
|
||||
<span>Höhere Beiträge: Kosten steigen mit dem Alter</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="form" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Anfrageformular</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Sende uns deine Eckdaten – wir melden uns mit einem passenden Angebot.
|
||||
</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardContent className="p-6">
|
||||
<form onSubmit={handleFormSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Name</label>
|
||||
<input
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Telefon</label>
|
||||
<input
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">E-Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Alter</label>
|
||||
<input
|
||||
name="age"
|
||||
value={formData.age}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
placeholder="z. B. 35"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Berufsgruppe</label>
|
||||
<select
|
||||
name="occupation"
|
||||
value={formData.occupation}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option>Angestellter</option>
|
||||
<option>Selbstständig</option>
|
||||
<option>Beamter</option>
|
||||
<option>Freiberufler</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Aktuelle Versicherung</label>
|
||||
<select
|
||||
name="currentInsurance"
|
||||
value={formData.currentInsurance}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="gkv">Gesetzlich (GKV)</option>
|
||||
<option value="pkv">Privat (PKV)</option>
|
||||
<option value="keine">Keine Versicherung</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Nachricht</label>
|
||||
<textarea
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm min-h-[120px]"
|
||||
placeholder="Welche Leistungen sind dir wichtig?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full bg-blue-700 hover:bg-blue-800">
|
||||
Anfrage senden
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('head_kontakt_agentur_mizera.jpg')} alt="Anfrageformular">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Direktkontakt</CardTitle>
|
||||
<CardDescription>Wenn es schnell gehen soll.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="w-4 h-4 text-blue-700" />
|
||||
<span>Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a> <a href="https://wa.me/491719864053" target="_blank" rel="noreferrer" className="text-green-600 hover:text-green-800 underline">(WhatsApp)</a></span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4 text-blue-700" />
|
||||
<span>E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></span>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<Button variant="outline" className="w-full" onClick={() => navigate('/kontakt')}>
|
||||
Kontaktseite
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
|
||||
<TabsContent value="brochure" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Kundenbroschüre (PDF)</h3>
|
||||
<p className="mt-2 text-gray-600">Broschüre als PDF zum Download.</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Private Krankenversicherung (PDF)</CardTitle>
|
||||
<CardDescription>Informationsbroschüre zur privaten Krankenversicherung</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<a href={`${baseUrl}/PDF/PKV-Ratgeber.pdf`} download target='_blank'>
|
||||
<Button className="bg-blue-700 hover:bg-blue-800 w-full">PDF herunterladen</Button>
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('head_kranken.jpg')} alt="Informationsmaterial">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Hinweis</CardTitle>
|
||||
<CardDescription>Bei Fragen beraten wir gerne.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<GeneralNotice />
|
||||
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default PrivateKrankenversicherung;
|
||||
@ -16,11 +16,11 @@ const Privatkunden = () => {
|
||||
useEffect(() => {
|
||||
const pool = [
|
||||
{ title: 'KFZ-Fahrzeuge', href: '/kfz', image: assetUrl('Fotolia_8654128_XS.jpg') },
|
||||
{ title: 'Sachversicherung', href: '/hausrat', image: assetUrl('iStock-943842590.jpg') },
|
||||
{ title: 'Gesundheitsvorsorge', href: '/senioren', image: assetUrl('iStock-957363908.jpg') },
|
||||
{ title: 'Vermögenssicherung', href: '/finanzen', image: assetUrl('iStock-495809266.jpg') },
|
||||
{ title: 'Risikoschutz', href: '/unfall', image: assetUrl('iStock-970876204.jpg') },
|
||||
{ title: 'Altersvorsorge', href: '/finanzen', image: assetUrl('Fotolia_67327775_XS.jpg') },
|
||||
{ title: 'Sachversicherung', href: '/sachversicherung', image: assetUrl('iStock-943842590.jpg') },
|
||||
{ title: 'Gesundheitsvorsorge', href: '/gesundheitsvorsorge', image: assetUrl('iStock-819100588.jpg') },
|
||||
{ title: 'Vermögenssicherung', href: '/vermoegenssicherung', image: assetUrl('iStock-495809266.jpg') },
|
||||
{ title: 'Risikoschutz', href: '/risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
||||
{ title: 'Altersvorsorge', href: '/altersvorsorge', image: assetUrl('Fotolia_67327775_XS.jpg') },
|
||||
];
|
||||
|
||||
setFocusTopics(
|
||||
@ -185,9 +185,9 @@ const Privatkunden = () => {
|
||||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-3">Details:</div>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{[
|
||||
{ title: 'Private Krankenversicherung', href: '/senioren' },
|
||||
{ title: 'Zahnzusatzversicherung', href: '/senioren' },
|
||||
{ title: 'Auslandsreisekrankenversicherung', href: '/senioren' }
|
||||
{ title: 'Private Krankenversicherung', href: '/private-krankenversicherung' },
|
||||
{ title: 'Zahnzusatzversicherung', href: '/zahnzusatzversicherung' },
|
||||
{ title: 'Auslandsreisekrankenversicherung', href: '/auslandsreisekrankenversicherung' }
|
||||
].map((link) => (
|
||||
<Link
|
||||
key={`${link.href}-${link.title}`}
|
||||
|
||||
455
src/pages/RiesterRente.tsx
Normal file
455
src/pages/RiesterRente.tsx
Normal file
@ -0,0 +1,455 @@
|
||||
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;
|
||||
90
src/pages/Risikoschutz.tsx
Normal file
90
src/pages/Risikoschutz.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Shield, Heart, Car, Home, Briefcase, Users } from 'lucide-react';
|
||||
import Layout from '@/components/Layout';
|
||||
import { Card } from '@/components/ui/card';
|
||||
|
||||
const Risikoschutz = () => {
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
const topics = [
|
||||
{
|
||||
title: 'Unfallversicherung',
|
||||
href: '/unfall',
|
||||
image: assetUrl('iStock-970876204.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Berufsunfähigkeitsversicherung',
|
||||
href: '/berufsunfaehigkeitsversicherung',
|
||||
image: assetUrl('iStock-957363908.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Haftpflichtversicherung',
|
||||
href: '/haftpflichtversicherung',
|
||||
image: assetUrl('iStock-943842590.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Rechtsschutzversicherung',
|
||||
href: '/rechtsschutzversicherung',
|
||||
image: assetUrl('Fotolia_8654128_XS.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Tierhalterhaftpflicht',
|
||||
href: '/tierhalterhaftpflicht',
|
||||
image: assetUrl('iStock-495809266.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Dread-Disease Versicherung',
|
||||
href: '/dread-disease-versicherung',
|
||||
image: assetUrl('Fotolia_67327775_XS.jpg')
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<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">
|
||||
Risikoschutz
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Umfassender Schutz für Sie und Ihre Familie bei unvorhergesehenen Ereignissen
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kacheln */}
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{topics.map((topic, index) => (
|
||||
<Link key={index} to={topic.href}>
|
||||
<Card className="group hover:shadow-lg transition-shadow duration-300 cursor-pointer overflow-hidden">
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<img
|
||||
src={topic.image}
|
||||
alt={topic.title}
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||||
<div className="text-xl font-bold">{topic.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Risikoschutz;
|
||||
90
src/pages/Sachversicherung.tsx
Normal file
90
src/pages/Sachversicherung.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Home, Car, Fire, Zap, Shield, Phone } from 'lucide-react';
|
||||
import Layout from '@/components/Layout';
|
||||
import { Card } from '@/components/ui/card';
|
||||
|
||||
const Sachversicherung = () => {
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
const topics = [
|
||||
{
|
||||
title: 'Hausratversicherung',
|
||||
href: '/hausratversicherung',
|
||||
image: assetUrl('iStock-943842590.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Wohngebäudeversicherung',
|
||||
href: '/hausrat',
|
||||
image: assetUrl('iStock-495809266.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Haftpflichtversicherung',
|
||||
href: '/haftpflichtversicherung',
|
||||
image: assetUrl('Fotolia_67327775_XS.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Tierversicherung',
|
||||
href: '/tierversicherung',
|
||||
image: assetUrl('iStock-970876204.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Rechtsschutzversicherung',
|
||||
href: '/rechtsschutzversicherung',
|
||||
image: assetUrl('iStock-957363908.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Elektrogeräteversicherung',
|
||||
href: '/elektrogeraeteversicherung',
|
||||
image: assetUrl('Fotolia_8654128_XS.jpg')
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<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">
|
||||
Sachversicherung
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Schutz für Ihr Hab und Gut - von Hausrat bis Immobilie
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kacheln */}
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{topics.map((topic, index) => (
|
||||
<Link key={index} to={topic.href}>
|
||||
<Card className="group hover:shadow-lg transition-shadow duration-300 cursor-pointer overflow-hidden">
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<img
|
||||
src={topic.image}
|
||||
alt={topic.title}
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||||
<div className="text-xl font-bold">{topic.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sachversicherung;
|
||||
90
src/pages/Vermoegenssicherung.tsx
Normal file
90
src/pages/Vermoegenssicherung.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { TrendingUp, PiggyBank, DollarSign, Shield, Calculator, Home } from 'lucide-react';
|
||||
import Layout from '@/components/Layout';
|
||||
import { Card } from '@/components/ui/card';
|
||||
|
||||
const Vermoegenssicherung = () => {
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||
|
||||
const topics = [
|
||||
{
|
||||
title: 'Lebensversicherung',
|
||||
href: '/finanzen',
|
||||
image: assetUrl('iStock-495809266.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Risikolebensversicherung',
|
||||
href: '/finanzen',
|
||||
image: assetUrl('Fotolia_67327775_XS.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Wohngebäudeversicherung',
|
||||
href: '/hausrat',
|
||||
image: assetUrl('iStock-943842590.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Kapitalanlageversicherung',
|
||||
href: '/kapitalanlageversicherung',
|
||||
image: assetUrl('Fotolia_8654128_XS.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Fondsversicherung',
|
||||
href: '/fondsversicherung',
|
||||
image: assetUrl('iStock-970876204.jpg')
|
||||
},
|
||||
{
|
||||
title: 'Vorsorgeversicherung',
|
||||
href: '/vorsorgeversicherung',
|
||||
image: assetUrl('iStock-957363908.jpg')
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<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">
|
||||
Vermögenssicherung
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
Sichern Sie Ihr Vermögen und bauen Sie Ihren Wohlstand auf
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kacheln */}
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{topics.map((topic, index) => (
|
||||
<Link key={index} to={topic.href}>
|
||||
<Card className="group hover:shadow-lg transition-shadow duration-300 cursor-pointer overflow-hidden">
|
||||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||||
<img
|
||||
src={topic.image}
|
||||
alt={topic.title}
|
||||
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||||
<div className="text-xl font-bold">{topic.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Vermoegenssicherung;
|
||||
682
src/pages/Zahnzusatzversicherung.tsx
Normal file
682
src/pages/Zahnzusatzversicherung.tsx
Normal file
@ -0,0 +1,682 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, Gauge, Heart } 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 Zahnzusatzversicherung = () => {
|
||||
const { t } = useTranslation('zahnzusatzversicherung');
|
||||
|
||||
// Add SEO metadata for search
|
||||
React.useEffect(() => {
|
||||
document.title = 'Zahnzusatzversicherung - Agentur Mizera';
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Zahnzusatzversicherung: Perfekter Schutz für Ihre Zähne. Unabhängige Beratung und Tarifvergleich für Zahnzusatzversicherungen.');
|
||||
}
|
||||
}, []);
|
||||
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: '',
|
||||
vehicleType: '',
|
||||
vehicleAge: '',
|
||||
licenseSince: '',
|
||||
currentInsurer: '',
|
||||
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: Shield,
|
||||
title: 'Freiwilliger Zusatzschutz',
|
||||
description: 'Optimale Ergänzung zur gesetzlichen Krankenversicherung',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: 'Umfassender Zahnschutz',
|
||||
description: 'Professionelle Reinigung, Füllungen und Zahnersatz',
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: '100% Kostenerstattung',
|
||||
description: 'Vollständige Erstattung für alle Zahnbehandlungen',
|
||||
},
|
||||
{
|
||||
icon: Calculator,
|
||||
title: 'Günstige Beiträge',
|
||||
description: 'Wettbewerbsfähige Prämien für umfassenden Schutz',
|
||||
},
|
||||
];
|
||||
|
||||
const services = [
|
||||
'Professionelle Zahnreinigung',
|
||||
'Füllungen und Inlays',
|
||||
'Kronen und Brücken',
|
||||
'Implantate',
|
||||
'Kieferorthopädische Behandlungen',
|
||||
'Prophylaxe und Vorsorge',
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="relative">
|
||||
<div
|
||||
className="h-96 bg-cover bg-center relative"
|
||||
style={{ backgroundImage: `url(${assetUrl('Fotolia_45263348_S.jpg')})` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gray-900/20" />
|
||||
<div className="relative container mx-auto px-4 h-full flex items-center">
|
||||
<div className="max-w-3xl">
|
||||
<div className="bg-black/40 text-white px-8 py-6 md:px-10 md:py-8 shadow-lg">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
Zahnzusatzversicherung
|
||||
</h1>
|
||||
<p className="text-xl text-white/90 mb-8 max-w-2xl">
|
||||
Perfekter Schutz für Ihre Zähne und Ihr Lächeln - professionelle Zahnvorsorge
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<Button onClick={() => setActiveTab('form')} size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
|
||||
Jetzt beraten lassen
|
||||
</Button>
|
||||
<Button onClick={() => setActiveTab('calculator')} size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
|
||||
Beitrag berechnen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<style>{`
|
||||
[data-state="active"] {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:focus {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:focus-visible {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
`}</style>
|
||||
<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">
|
||||
Zahnzusatzversicherung
|
||||
</h2>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(next) => {
|
||||
setActiveTab(next);
|
||||
}}
|
||||
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-5 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"
|
||||
>
|
||||
<Shield className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.overview', 'Übersicht')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="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="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="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="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="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">
|
||||
<Star className="w-4 h-4" />
|
||||
<span>Gesundes Lächeln – optimal geschützt</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||
Zahnzusatzversicherung
|
||||
<span className="block text-blue-700">Perfekter Schutz für Ihre Zähne</span>
|
||||
</h1>
|
||||
<p className="mt-4 text-gray-600 text-lg">
|
||||
Umfassender Schutz für Ihre Zahngesundheit – von professioneller Reinigung bis zu Zahnersatz.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
||||
Angebot anfordern
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
|
||||
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">
|
||||
<Shield className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">Freiwilliger Zusatzschutz</div>
|
||||
<div className="text-gray-600">Optimale Ergänzung zur gesetzlichen Versicherung</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<Users className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">Schutz für Ihre Zähne</div>
|
||||
<div className="text-gray-600">Zahnbehandlungen und Zahnersatz vollständig gedeckt</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('Fotolia_45263348_S.jpg')}
|
||||
alt="Zahnzusatzversicherung"
|
||||
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">
|
||||
<Heart className="w-4 h-4" />
|
||||
<span>Zahnreinigung, Zahnersatz, Prophylaxe</span>
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-600">
|
||||
Tarifcheck – schnell, fair und passend zu Ihrem Bedarf.
|
||||
</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" />
|
||||
Freiwilliger Schutz
|
||||
</CardTitle>
|
||||
<CardDescription>Optimale Ergänzung zur gesetzlichen Versicherung.</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" />
|
||||
Vergleich lohnt sich
|
||||
</CardTitle>
|
||||
<CardDescription>Beiträge & Leistungen variieren stark.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<PhoneCall className="w-4 h-4 text-blue-700" />
|
||||
Persönliche Beratung
|
||||
</CardTitle>
|
||||
<CardDescription>Klare Schritte & Kontaktmöglichkeiten.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-xl bg-blue-700 p-6 text-white">
|
||||
<h3 className="text-2xl font-bold">Was beeinflusst die Kosten der Zahnzusatzversicherung?</h3>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Heart className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Zahnzustand</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Aktuelle Zahngesundheit und bisherige Behandlungen beeinflussen die Prämie.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Users className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Alter</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Jungere Versicherte zahlen oft geringere Beiträge als ältere.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Shield className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Leistungsumfang</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Umfassende Tarife mit 100% Erstattung kosten mehr als Basis-Tarife.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Calculator className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">Selbstbeteiligung</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
Höhere Selbstbeteiligung senkt den monatlichen Beitrag.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-lg bg-white/10 p-4 text-sm text-white/90">
|
||||
Beispiel: Beiträge liegen in Deutschland meist zwischen 15 € und 80 € monatlich.
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="details" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Details & Vorteile</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Umfassender Schutz für Ihre Zahngesundheit – von professioneller Reinigung bis zu Zahnersatz.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{benefits.map((benefit, index) => (
|
||||
<Card key={index} className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<benefit.icon className="w-5 h-5 text-blue-700" />
|
||||
{benefit.title}
|
||||
</CardTitle>
|
||||
<CardDescription>{benefit.description}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-lg font-semibold text-gray-900 mb-3">Leistungen (Auszug)</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{services.map((service, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-3"
|
||||
>
|
||||
<CheckCircle className="h-5 w-5 text-blue-700 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-gray-700">{service}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('Fotolia_45263348_S.jpg')} alt="Details & Vorteile">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Tipp</CardTitle>
|
||||
<CardDescription>Deckungssumme & Schutzbrief prüfen.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-gray-700">
|
||||
Achte auf hohe Deckungssummen und optionalen Schutzbrief (Pannenhilfe,
|
||||
Abschleppen, Ersatzmobilität).
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="calculator" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">KFZ-Vergleichsrechner</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Ein Richtwert hilft bei der Orientierung. Für ein exaktes Angebot brauchen
|
||||
wir u. a. Region, SF-Klasse und Fahrzeugdaten.
|
||||
</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Calculator className="w-5 h-5 text-blue-700" />
|
||||
Grobe Beitragsschätzung
|
||||
</CardTitle>
|
||||
<CardDescription>Unverbindlich – wir kalkulieren danach exakt.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Fahrzeugtyp</label>
|
||||
<select
|
||||
name="vehicleType"
|
||||
value={formData.vehicleType}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="pkw">PKW</option>
|
||||
<option value="suv">SUV</option>
|
||||
<option value="kombi">Kombi</option>
|
||||
<option value="transporter">Transporter</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Fahrzeugalter</label>
|
||||
<select
|
||||
name="vehicleAge"
|
||||
value={formData.vehicleAge}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="0-1">0-1 Jahr</option>
|
||||
<option value="2-5">2-5 Jahre</option>
|
||||
<option value="6-10">6-10 Jahre</option>
|
||||
<option value="10+">10+ Jahre</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
|
||||
<div className="text-sm text-blue-900 font-semibold">Richtwert (Beispiel)</div>
|
||||
<div className="mt-1 text-sm text-blue-900">
|
||||
Haftpflicht ab <span className="font-bold">ca. 18 €</span>/Monat
|
||||
</div>
|
||||
<div className="text-xs text-blue-900/80 mt-2">
|
||||
Abhängig von Region, SF-Klasse, Fahrleistung, Tarif.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button onClick={() => setActiveTab('form')} className="w-full bg-blue-700 hover:bg-blue-800">
|
||||
Jetzt konkretes Angebot anfordern
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('iStock-482694353.jpg')} alt="KFZ-Vergleichsrechner">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Was wir fürs Angebot brauchen</CardTitle>
|
||||
<CardDescription>Je genauer, desto besser.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||
<div className="flex items-start gap-2">
|
||||
<FileText className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Zulassungsbescheinigung (HSN/TSN)</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Search className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>SF-Klasse / Vorversicherung</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Wunsch: Kasko / Schutzbrief / Fahrerschutz</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="form" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Anfrageformular</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Sende uns deine Eckdaten – wir melden uns mit einem passenden Angebot.
|
||||
</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardContent className="p-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Name</label>
|
||||
<input
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Telefon</label>
|
||||
<input
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">E-Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Fahrzeugtyp</label>
|
||||
<select
|
||||
name="vehicleType"
|
||||
value={formData.vehicleType}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="pkw">PKW</option>
|
||||
<option value="suv">SUV</option>
|
||||
<option value="kombi">Kombi</option>
|
||||
<option value="transporter">Transporter</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Fahrzeugalter</label>
|
||||
<input
|
||||
name="vehicleAge"
|
||||
value={formData.vehicleAge}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
placeholder="z. B. 3 Jahre"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Führerschein seit</label>
|
||||
<input
|
||||
name="licenseSince"
|
||||
value={formData.licenseSince}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
placeholder="z. B. 2015"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Aktueller Versicherer (optional)</label>
|
||||
<input
|
||||
name="currentInsurer"
|
||||
value={formData.currentInsurer}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Nachricht</label>
|
||||
<textarea
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm min-h-[120px]"
|
||||
placeholder="Welche Leistungen sind dir wichtig? (Haftpflicht/Kasko/Schutzbrief/Fahrerschutz)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="bg-blue-700 hover:bg-blue-800">
|
||||
Anfrage senden
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('head_kontakt_agentur_mizera.jpg')} alt="Anfrageformular">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Direktkontakt</CardTitle>
|
||||
<CardDescription>Wenn es schnell gehen soll.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="w-4 h-4 text-blue-700" />
|
||||
<span>Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a> <a href="https://wa.me/491719864053" target="_blank" rel="noreferrer" className="text-green-600 hover:text-green-800 underline">(WhatsApp)</a></span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4 text-blue-700" />
|
||||
<span>E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></span>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<Button variant="outline" className="w-full" onClick={() => navigate('/kontakt')}>
|
||||
Kontaktseite
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
|
||||
<TabsContent value="brochure" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Kundenbroschüre (PDF)</h3>
|
||||
<p className="mt-2 text-gray-600">Broschüre als PDF zum Download.</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Zahnzusatzversicherung (PDF)</CardTitle>
|
||||
<CardDescription>Informationsbroschüre zur Zahnzusatzversicherung</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<a href="/PDF/Tarifvergleich-CEZKCEZP_CEZE_01.2023-2791.pdf" download>
|
||||
<Button className="bg-blue-700 hover:bg-blue-800 w-full">PDF herunterladen</Button>
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('head_autoversicherung.jpg')} alt="Kundenbroschüre">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Hinweis</CardTitle>
|
||||
<CardDescription>Bei Fragen beraten wir gerne.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<GeneralNotice />
|
||||
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Zahnzusatzversicherung;
|
||||
0
src/pages/Zahnzusatzversicherung_backup.tsx
Normal file
0
src/pages/Zahnzusatzversicherung_backup.tsx
Normal file
922
src/pages/Zahnzusatzversicherung_temp.tsx
Normal file
922
src/pages/Zahnzusatzversicherung_temp.tsx
Normal file
@ -0,0 +1,922 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, Gauge } 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 Autoversicherung = () => {
|
||||
const { t } = useTranslation('autoversicherung');
|
||||
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: '',
|
||||
vehicleType: '',
|
||||
vehicleAge: '',
|
||||
licenseSince: '',
|
||||
currentInsurer: '',
|
||||
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: Shield,
|
||||
title: t('details.benefits.b1.title', 'Gesetzlich vorgeschrieben'),
|
||||
description: t(
|
||||
'details.benefits.b1.desc',
|
||||
'Ohne Haftpflichtversicherung darf kein Fahrzeug am Straßenverkehr teilnehmen',
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: t('details.benefits.b2.title', 'Schutz für Dritte'),
|
||||
description: t(
|
||||
'details.benefits.b2.desc',
|
||||
'Deckt Personenschäden, Sachschäden und Vermögensschäden von Unfallopfern',
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
title: t('details.benefits.b3.title', 'Unbegrenzte Deckung'),
|
||||
description: t('details.benefits.b3.desc', 'Millionen-Höchstsummen für Personenschäden und Sachschäden'),
|
||||
},
|
||||
{
|
||||
icon: Calculator,
|
||||
title: t('details.benefits.b4.title', 'Günstiger Basisschutz'),
|
||||
description: t(
|
||||
'details.benefits.b4.desc',
|
||||
'Wettbewerbsfähige Beiträge für den gesetzlich vorgeschriebenen Schutz',
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const services = [
|
||||
t('details.services.s1', 'Autoversicherung Vollkasko'),
|
||||
t('details.services.s2', 'Autoversicherung Teilkasko'),
|
||||
t('details.services.s3', 'Kfz-Haftpflichtversicherung'),
|
||||
t('details.services.s4', 'Insassenunfallversicherung'),
|
||||
t('details.services.s5', 'Schutzbrief und Pannenhilfe'),
|
||||
t('details.services.s6', 'Autoversicherung für junge Fahrer'),
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<style>{`
|
||||
[data-state="active"] {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:focus {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
button:focus-visible {
|
||||
outline: none !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
`}</style>
|
||||
<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">
|
||||
{t('page.title', 'Kfz-Haftpflichtversicherung')}
|
||||
</h2>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(next) => {
|
||||
setActiveTab(next);
|
||||
}}
|
||||
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-8 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"
|
||||
>
|
||||
<Shield className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.overview', 'Übersicht')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="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="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"
|
||||
>
|
||||
<Calculator className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.statistics', 'Statistik')}
|
||||
</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"
|
||||
>
|
||||
<Gauge className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.calculator', 'Rechner')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="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="claims"
|
||||
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"
|
||||
>
|
||||
<AlertCircle className="w-4 h-4 mr-1.5" />
|
||||
{t('tabs.claims', 'Schaden')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="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', 'Katalog')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="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="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">
|
||||
<Star className="w-4 h-4" />
|
||||
<span>{t('hero.badge', 'Sicher unterwegs – rechtlich abgesichert')}</span>
|
||||
</div>
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||
{t('hero.title', 'Kfz-Haftpflichtversicherung')}
|
||||
<span className="block text-blue-700">{t('hero.subtitle', 'gesetzlicher Basisschutz für alle Fahrzeuge')}</span>
|
||||
</h1>
|
||||
<p className="mt-4 text-gray-600 text-lg">
|
||||
{t(
|
||||
'hero.description',
|
||||
'Die Kfz-Haftpflicht ist Pflicht. Sie schützt dich vor hohen Kosten, wenn du Dritten einen Schaden zufügst.'
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
||||
{t('hero.ctaOffer', 'Angebot anfordern')}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
|
||||
{t('hero.ctaConsulting', '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">
|
||||
<Shield className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('hero.features.f1.title', 'Pflichtversicherung')}</div>
|
||||
<div className="text-gray-600">{t('hero.features.f1.desc', 'ohne geht es nicht')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||||
<Users className="w-5 h-5 text-blue-700" />
|
||||
<div className="text-sm">
|
||||
<div className="font-semibold text-gray-900">{t('hero.features.f2.title', 'Schutz für Dritte')}</div>
|
||||
<div className="text-gray-600">{t('hero.features.f2.desc', 'Personen & Sachen')}</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('Fotolia_8654128_XS.jpg')}
|
||||
alt="Kfz-Haftpflicht"
|
||||
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">
|
||||
<Car className="w-4 h-4" />
|
||||
<span>{t('hero.imageHint', 'Auto, SUV, Transporter')}</span>
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-600">
|
||||
{t('hero.imageText', 'Tarifcheck – schnell, fair und passend zu deinem Bedarf.')}
|
||||
</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">{t('overview.quick.title', '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" />
|
||||
{t('overview.quick.c1.title', 'Gesetzlich Pflicht')}
|
||||
</CardTitle>
|
||||
<CardDescription>{t('overview.quick.c1.desc', 'Ohne Haftpflicht keine Zulassung.')}</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" />
|
||||
{t('overview.quick.c2.title', 'Vergleich lohnt sich')}
|
||||
</CardTitle>
|
||||
<CardDescription>{t('overview.quick.c2.desc', 'Beiträge & Leistungen variieren stark.')}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<PhoneCall className="w-4 h-4 text-blue-700" />
|
||||
{t('overview.quick.c3.title', 'Hilfe im Schadenfall')}
|
||||
</CardTitle>
|
||||
<CardDescription>{t('overview.quick.c3.desc', 'Klare Schritte & Kontaktmöglichkeiten.')}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-xl bg-blue-700 p-6 text-white">
|
||||
<h3 className="text-2xl font-bold">{t('overview.costs.title', 'Was beeinflusst die Kosten der Kfz-Haftpflichtversicherung?')}</h3>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Car className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">{t('overview.costs.c1.title', 'Fahrzeugtyp')}</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
{t('overview.costs.c1.desc', 'Sportwagen und teure Modelle bedeuten höhere Prämien.')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Users className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">{t('overview.costs.c2.title', 'Fahrerprofil')}</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
{t(
|
||||
'overview.costs.c2.desc',
|
||||
'Alter, Erfahrung und Schadenfreiheitsklasse beeinflussen den Beitrag stark.',
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<MapPin className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">{t('overview.costs.c3.title', 'Region')}</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
{t('overview.costs.c3.desc', 'In Großstädten sind die Prämien oft höher als auf dem Land.')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-white/10 p-4">
|
||||
<Gauge className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||||
<div className="mt-3 text-lg font-semibold">{t('overview.costs.c4.title', 'Fahrleistung')}</div>
|
||||
<div className="mt-1 text-sm text-white/85">
|
||||
{t('overview.costs.c4.desc', 'Jährliche Kilometer und Zusatzleistungen beeinflussen die Kosten.')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 rounded-lg bg-white/10 p-4 text-sm text-white/90">
|
||||
{t('overview.costs.example', 'Beispiel: Beiträge liegen in Deutschland meist zwischen 300 € und über 1.000 € jährlich.')}
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="details" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">{t('details.title', 'Details & Vorteile')}</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
{t(
|
||||
'details.description',
|
||||
'Neben der gesetzlich vorgeschriebenen Haftpflicht können zusätzliche Bausteine (z. B. Teil-/Vollkasko, Schutzbrief, Fahrerschutz) sinnvoll sein – je nach Fahrzeug und Nutzung.',
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{benefits.map((benefit, index) => (
|
||||
<Card key={index} className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<benefit.icon className="w-5 h-5 text-blue-700" />
|
||||
{benefit.title}
|
||||
</CardTitle>
|
||||
<CardDescription>{benefit.description}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.servicesTitle', 'Leistungen (Auszug)')}</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{services.map((service, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-3"
|
||||
>
|
||||
<CheckCircle className="h-5 w-5 text-blue-700 mt-0.5 flex-shrink-0" />
|
||||
<p className="text-gray-700">{service}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('iStock-637230106.jpg')} alt="Details & Vorteile">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Tipp</CardTitle>
|
||||
<CardDescription>Deckungssumme & Schutzbrief prüfen.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-gray-700">
|
||||
Achte auf hohe Deckungssummen und optionalen Schutzbrief (Pannenhilfe,
|
||||
Abschleppen, Ersatzmobilität).
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="statistics" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Unfallstatistik</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Viele Schäden entstehen im Alltag: Auffahrunfälle, Parkrempler oder
|
||||
Missverständnisse im Verkehr. Eine gute Haftpflicht sorgt für klare
|
||||
Abwicklung und schützt vor finanziellen Risiken.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 bg-blue-50 rounded-lg p-4">
|
||||
<h4 className="text-lg font-semibold text-blue-900 mb-2">Schäden in Zahlen (Beispiel)</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<div className="text-xl font-bold text-blue-600">2,4 Mio.</div>
|
||||
<p className="text-sm text-gray-600">Unfälle/Jahr</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-blue-600">370.000</div>
|
||||
<p className="text-sm text-gray-600">Verletzte</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-blue-600">2.800</div>
|
||||
<p className="text-sm text-gray-600">Tote</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<AlertTriangle className="w-5 h-5 text-blue-700" />
|
||||
Häufige Schadensarten
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Parkschäden, Auffahrunfälle, Rangierschäden.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Clock className="w-5 h-5 text-blue-700" />
|
||||
Personen- & Fahrerschutz
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Wichtige Bausteine für Fahrer und Mitfahrer.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-gray-700 space-y-2">
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Personenschäden: Behandlung, Verdienstausfall, Schmerzensgeld (im Rahmen der Haftpflicht)</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Insassen-/Fahrerschutz: Absicherung für Fahrer/Insassen (je nach Tarif optional)</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Rechtsschutz/Schutzbrief: Hilfe bei Streit, Panne, Abschleppen (optional)</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 bg-blue-50 rounded-lg p-4">
|
||||
<h4 className="text-lg font-semibold text-blue-900 mb-2">Deckungs- / Entschädigungssummen (Beispiel)</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<div className="text-xl font-bold text-blue-600">100 Mio. €</div>
|
||||
<p className="text-sm text-gray-600">Personenschäden</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-blue-600">100 Mio. €</div>
|
||||
<p className="text-sm text-gray-600">Sachschäden</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-blue-600">15 Mio. €</div>
|
||||
<p className="text-sm text-gray-600">Vermögensschäden</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('iStock-523830845.jpg')} alt="Unfallstatistik">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Tipp</CardTitle>
|
||||
<CardDescription>Foto-Doku beschleunigt.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="calculator" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">KFZ-Vergleichsrechner</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Ein Richtwert hilft bei der Orientierung. Für ein exaktes Angebot brauchen
|
||||
wir u. a. Region, SF-Klasse und Fahrzeugdaten.
|
||||
</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Calculator className="w-5 h-5 text-blue-700" />
|
||||
Grobe Beitragsschätzung
|
||||
</CardTitle>
|
||||
<CardDescription>Unverbindlich – wir kalkulieren danach exakt.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Fahrzeugtyp</label>
|
||||
<select
|
||||
name="vehicleType"
|
||||
value={formData.vehicleType}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="pkw">PKW</option>
|
||||
<option value="suv">SUV</option>
|
||||
<option value="kombi">Kombi</option>
|
||||
<option value="transporter">Transporter</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Fahrzeugalter</label>
|
||||
<select
|
||||
name="vehicleAge"
|
||||
value={formData.vehicleAge}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="0-1">0-1 Jahr</option>
|
||||
<option value="2-5">2-5 Jahre</option>
|
||||
<option value="6-10">6-10 Jahre</option>
|
||||
<option value="10+">10+ Jahre</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
|
||||
<div className="text-sm text-blue-900 font-semibold">Richtwert (Beispiel)</div>
|
||||
<div className="mt-1 text-sm text-blue-900">
|
||||
Haftpflicht ab <span className="font-bold">ca. 18 €</span>/Monat
|
||||
</div>
|
||||
<div className="text-xs text-blue-900/80 mt-2">
|
||||
Abhängig von Region, SF-Klasse, Fahrleistung, Tarif.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button onClick={() => setActiveTab('form')} className="w-full bg-blue-700 hover:bg-blue-800">
|
||||
Jetzt konkretes Angebot anfordern
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('iStock-482694353.jpg')} alt="KFZ-Vergleichsrechner">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Was wir fürs Angebot brauchen</CardTitle>
|
||||
<CardDescription>Je genauer, desto besser.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||
<div className="flex items-start gap-2">
|
||||
<FileText className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Zulassungsbescheinigung (HSN/TSN)</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Search className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>SF-Klasse / Vorversicherung</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<AlertCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Wunsch: Kasko / Schutzbrief / Fahrerschutz</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="form" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Anfrageformular</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Sende uns deine Eckdaten – wir melden uns mit einem passenden Angebot.
|
||||
</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardContent className="p-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Name</label>
|
||||
<input
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Telefon</label>
|
||||
<input
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">E-Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Fahrzeugtyp</label>
|
||||
<select
|
||||
name="vehicleType"
|
||||
value={formData.vehicleType}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Bitte wählen</option>
|
||||
<option value="pkw">PKW</option>
|
||||
<option value="suv">SUV</option>
|
||||
<option value="kombi">Kombi</option>
|
||||
<option value="transporter">Transporter</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Fahrzeugalter</label>
|
||||
<input
|
||||
name="vehicleAge"
|
||||
value={formData.vehicleAge}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
placeholder="z. B. 3 Jahre"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Führerschein seit</label>
|
||||
<input
|
||||
name="licenseSince"
|
||||
value={formData.licenseSince}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
placeholder="z. B. 2015"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Aktueller Versicherer (optional)</label>
|
||||
<input
|
||||
name="currentInsurer"
|
||||
value={formData.currentInsurer}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-sm font-medium text-gray-700">Nachricht</label>
|
||||
<textarea
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleFormChange}
|
||||
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm min-h-[120px]"
|
||||
placeholder="Welche Leistungen sind dir wichtig? (Haftpflicht/Kasko/Schutzbrief/Fahrerschutz)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="bg-blue-700 hover:bg-blue-800">
|
||||
Anfrage senden
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('head_kontakt_agentur_mizera.jpg')} alt="Anfrageformular">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Direktkontakt</CardTitle>
|
||||
<CardDescription>Wenn es schnell gehen soll.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm text-gray-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="w-4 h-4 text-blue-700" />
|
||||
<span>Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a> <a href="https://wa.me/491719864053" target="_blank" rel="noreferrer" className="text-green-600 hover:text-green-800 underline">(WhatsApp)</a></span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4 text-blue-700" />
|
||||
<span>E-Mail: <a href="mailto:info@finanzen-mizera.de" className="text-blue-600 hover:text-blue-800 underline">info@finanzen-mizera.de</a></span>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<Button variant="outline" className="w-full" onClick={() => navigate('/kontakt')}>
|
||||
Kontaktseite
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="claims" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Schadenmeldung</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Im Schadenfall zählt eine klare Reihenfolge. Hier ist die Kurz-Checkliste.
|
||||
</p>
|
||||
|
||||
<div className="mt-6 space-y-3">
|
||||
<div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
|
||||
<AlertTriangle className="w-5 h-5 text-blue-700 mt-0.5" />
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">Sicherheit zuerst</div>
|
||||
<div className="text-gray-600 text-sm">Warnblinker, Warnweste, Warndreieck, ggf. Erste Hilfe.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
|
||||
<FileCheck className="w-5 h-5 text-blue-700 mt-0.5" />
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">Dokumentation</div>
|
||||
<div className="text-gray-600 text-sm">Fotos, Unfallskizze, Daten austauschen, Zeugen notieren.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 rounded-lg border border-gray-200 bg-white p-4">
|
||||
<PhoneCall className="w-5 h-5 text-blue-700 mt-0.5" />
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">Melden</div>
|
||||
<div className="text-gray-600 text-sm">So schnell wie möglich Schaden melden – wir unterstützen dich.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||||
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
||||
Hilfe anfordern
|
||||
</Button>
|
||||
<Link to="/kontakt" className="inline-flex">
|
||||
<Button variant="outline">Kontakt</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('iStock-495809266.jpg')} alt="Schadenmeldung">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Notfall-Info</CardTitle>
|
||||
<CardDescription>In akuten Situationen immer 110 / 112 wählen.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-gray-700 space-y-2">
|
||||
<div className="flex items-start gap-2">
|
||||
<PhoneCall className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Polizei: 110</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<PhoneCall className="w-4 h-4 text-blue-700 mt-0.5" />
|
||||
<span>Rettung: 112</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="catalog" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">Bußgeldkatalog</h3>
|
||||
<p className="mt-2 text-gray-600">
|
||||
Informiere dich über Bußgelder & Punkte. Externe Quelle:
|
||||
</p>
|
||||
|
||||
<div className="mt-4 flex flex-col sm:flex-row gap-3">
|
||||
<a
|
||||
href="https://www.derbussgeldkatalog.de/geschwindigkeit/?Ads-Kampagne-Bussgeldkatalog&gad_source=1&gad_campaignid=22848963551&gclid=CjwKCAiA09jKBhB9EiwAgB8l-EEMEsLQRd9_7VP8lxqXg8NBMFKwGCo1NDVYVwH2K0LQMfRmmDNAxRoCglsQAvD_BwE"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex"
|
||||
>
|
||||
<Button className="bg-blue-700 hover:bg-blue-800">
|
||||
Zum Bußgeldkatalog
|
||||
</Button>
|
||||
</a>
|
||||
<Button variant="outline" className="gap-2" onClick={() => window.print()}>
|
||||
<Download className="w-4 h-4" />
|
||||
Als PDF speichern
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Das Gröbste auf einen Blick (Beispiel)</CardTitle>
|
||||
<CardDescription>
|
||||
Richtwerte – Details je nach Ort/Tempo/Promillewert. Quelle bitte immer aktuell prüfen.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm">
|
||||
<div className="grid grid-cols-12 gap-2 text-xs font-semibold text-gray-600 pb-2 border-b border-gray-200">
|
||||
<div className="col-span-6">Verstoß</div>
|
||||
<div className="col-span-2 text-right">Bußgeld</div>
|
||||
<div className="col-span-2 text-right">Punkte</div>
|
||||
<div className="col-span-2 text-right">Fahrverbot</div>
|
||||
</div>
|
||||
|
||||
{[
|
||||
{ offense: 'Handy am Steuer', fine: 'ab 100 €', points: '1', ban: '—' },
|
||||
{ offense: 'Rotlichtverstoß (einfach)', fine: 'ab 90 €', points: '1', ban: '—' },
|
||||
{ offense: 'Abstand zu gering', fine: 'ab 75 €', points: '1', ban: '—' },
|
||||
{ offense: 'Rettungsgasse blockiert', fine: 'ab 200 €', points: '2', ban: '1 Monat' },
|
||||
{ offense: 'Alkohol am Steuer (Beispiel)', fine: 'ab 500 €', points: '2', ban: '1 Monat' },
|
||||
{ offense: 'Geschwindigkeit (Beispiel)', fine: 'ab 20 €', points: '—', ban: '—' },
|
||||
].map((row) => (
|
||||
<div
|
||||
key={row.offense}
|
||||
className="grid grid-cols-12 gap-2 py-2 border-b border-gray-100 last:border-b-0"
|
||||
>
|
||||
<div className="col-span-6 text-gray-900">{row.offense}</div>
|
||||
<div className="col-span-2 text-right text-gray-900">{row.fine}</div>
|
||||
<div className="col-span-2 text-right text-gray-900">{row.points}</div>
|
||||
<div className="col-span-2 text-right text-gray-900">{row.ban}</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('iStock-829786854.jpg')} alt="Bußgeldkatalog">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Hinweis</CardTitle>
|
||||
<CardDescription>Werte können sich ändern – bitte aktuelle Quelle prüfen.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="brochure" className="mt-0">
|
||||
<TwoColumnTab
|
||||
left={
|
||||
<>
|
||||
<h3 className="text-2xl font-bold text-gray-900">{t('brochure.title', 'Kundenbroschüre (PDF)')}</h3>
|
||||
<p className="mt-2 text-gray-600">{t('brochure.subtitle', 'Broschüre als PDF zum Download.')}</p>
|
||||
|
||||
<Card className="mt-6 border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('brochure.cardTitle', 'Autoversicherung (PDF)')}</CardTitle>
|
||||
<CardDescription>{t('brochure.cardDescription', 'Informationsbroschüre zur Autoversicherung')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<a href="/autoversicherung-broschuere.pdf" download>
|
||||
<Button className="bg-blue-700 hover:bg-blue-800 w-full">{t('brochure.download', 'PDF herunterladen')}</Button>
|
||||
</a>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<RightImageCard src={assetUrl('head_autoversicherung.jpg')} alt="Kundenbroschüre">
|
||||
<Card className="border-gray-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Hinweis</CardTitle>
|
||||
<CardDescription>Bei Fragen beraten wir gerne.</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</RightImageCard>
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
<GeneralNotice />
|
||||
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Autoversicherung;
|
||||
Loading…
x
Reference in New Issue
Block a user