923 lines
53 KiB
TypeScript
923 lines
53 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { Link, useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { Shield, Phone, Mail, CheckCircle, Star, 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;
|