313 lines
18 KiB
TypeScript
313 lines
18 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { Link, useNavigate } from 'react-router-dom';
|
||
import { Shield, Users, Phone, Mail, CheckCircle, Download, AlertTriangle, FileCheck, Home, FileText, Calculator } from 'lucide-react';
|
||
import Layout from '@/components/Layout';
|
||
import GeneralNotice from '@/components/GeneralNotice';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||
|
||
const FamilienHaftpflicht = () => {
|
||
const navigate = useNavigate();
|
||
const baseUrl = import.meta.env.BASE_URL;
|
||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||
const [activeTab, setActiveTab] = useState('overview');
|
||
|
||
return (
|
||
<Layout>
|
||
<div className="min-h-screen bg-gray-50">
|
||
<div className="container mx-auto px-4 md:px-6 py-8">
|
||
<div className="max-w-screen-2xl mx-auto">
|
||
<h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">Haftpflicht (Familie)</h2>
|
||
|
||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||
<TabsList className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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"
|
||
>
|
||
<Home className="w-4 h-4 mr-1.5" />
|
||
Ü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" />
|
||
Details
|
||
</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" />
|
||
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"
|
||
>
|
||
<AlertTriangle className="w-4 h-4 mr-1.5" />
|
||
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" />
|
||
Ratgeber
|
||
</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-green-50 border border-green-200 px-3 py-1 text-sm text-green-800 mb-4">
|
||
<Shield className="w-4 h-4" />
|
||
<span>Schutz vor hohen Forderungen</span>
|
||
</div>
|
||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||
Privathaftpflicht für Familien
|
||
<span className="block text-green-700">Kinder & Eltern abgesichert</span>
|
||
</h1>
|
||
<p className="mt-4 text-gray-600 text-lg">
|
||
Wenn etwas passiert, kann es teuer werden. Die Privathaftpflicht schützt vor Schadenersatzforderungen.
|
||
</p>
|
||
|
||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||
<Button onClick={() => setActiveTab('form')} className="bg-green-700 hover:bg-green-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">
|
||
<Users className="w-5 h-5 text-green-700" />
|
||
<div className="text-sm">
|
||
<div className="font-semibold text-gray-900">Familien-Schutz</div>
|
||
<div className="text-gray-600">Kinder mitversichert</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||
<Shield className="w-5 h-5 text-green-700" />
|
||
<div className="text-sm">
|
||
<div className="font-semibold text-gray-900">Hohe Deckung</div>
|
||
<div className="text-gray-600">sinnvoll & wichtig</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
}
|
||
right={
|
||
<div className="relative">
|
||
<div className="absolute inset-0 bg-gradient-to-tr from-green-100 to-white rounded-2xl" />
|
||
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||
<img
|
||
src={assetUrl('iStock-956005062.jpg')}
|
||
alt="Haftpflicht Familie"
|
||
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">
|
||
<Shield className="w-4 h-4" />
|
||
<span>Alltag, Spiel, Missgeschick</span>
|
||
</div>
|
||
<div className="mt-2 text-sm text-gray-600">Tarifcheck – schnell und fair.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="details" className="mt-0">
|
||
<TwoColumnTab
|
||
left={
|
||
<>
|
||
<h3 className="text-2xl font-bold text-gray-900">Worauf achten?</h3>
|
||
<p className="mt-2 text-gray-600">
|
||
Deckungssumme, deliktunfähige Kinder, Mietsachschäden, Schlüsselverlust, Forderungsausfalldeckung.
|
||
</p>
|
||
|
||
<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">
|
||
<Shield className="w-5 h-5 text-green-700" />
|
||
Deliktunfähig
|
||
</CardTitle>
|
||
<CardDescription>Absicherung bei Schäden durch kleine Kinder.</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-base flex items-center gap-2">
|
||
<Shield className="w-5 h-5 text-green-700" />
|
||
Schlüssel/Miete
|
||
</CardTitle>
|
||
<CardDescription>Wichtige Bausteine im Alltag.</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
</div>
|
||
</>
|
||
}
|
||
right={
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Tipp</CardTitle>
|
||
<CardDescription>Deckungssumme nicht zu niedrig</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm text-gray-700">Heute sind 10–50 Mio. € häufig sinnvoll.</CardContent>
|
||
</Card>
|
||
}
|
||
/>
|
||
</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">Wir vergleichen passende Tarife für deine Familie.</p>
|
||
|
||
<div className="mt-4 flex flex-col sm:flex-row gap-3">
|
||
<Link to="/contact" className="inline-flex">
|
||
<Button className="bg-green-700 hover:bg-green-800">Kontaktformular öffnen</Button>
|
||
</Link>
|
||
<Button variant="outline" className="gap-2" onClick={() => window.print()}>
|
||
<Download className="w-4 h-4" />
|
||
Als PDF speichern
|
||
</Button>
|
||
</div>
|
||
</>
|
||
}
|
||
right={
|
||
<RightImageCard src={assetUrl('iStock-956005062.jpg')} alt="Anfrage">
|
||
<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-green-700" />
|
||
<span>Telefon: 0171 / 9864053</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Mail className="w-4 h-4 text-green-700" />
|
||
<span>E-Mail: info@finanzen-mizera.de</span>
|
||
</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">Kurz-Checkliste für den Schadenfall.</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-green-700 mt-0.5" />
|
||
<div>
|
||
<div className="font-semibold text-gray-900">Daten sichern</div>
|
||
<div className="text-gray-600 text-sm">Fotos, Zeugen, Ablauf notieren.</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-green-700 mt-0.5" />
|
||
<div>
|
||
<div className="font-semibold text-gray-900">Melden</div>
|
||
<div className="text-gray-600 text-sm">Wir helfen bei der Regulierung.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
}
|
||
right={
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Hinweis</CardTitle>
|
||
<CardDescription>Keine Schuldanerkenntnisse</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm text-gray-700">Keine Zusagen ohne Prüfung. Erst melden.</CardContent>
|
||
</Card>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="catalog" className="mt-0">
|
||
<TwoColumnTab
|
||
left={
|
||
<>
|
||
<h3 className="text-2xl font-bold text-gray-900">Ratgeber</h3>
|
||
<p className="mt-2 text-gray-600">Typische Fragen in Familien.</p>
|
||
|
||
<Card className="mt-6 border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Das Gröbste auf einen Blick</CardTitle>
|
||
<CardDescription>Beispiele – Details je nach Tarif.</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm">
|
||
<div className="space-y-2">
|
||
{[
|
||
'Sind Kinder deliktunfähig mitversichert?',
|
||
'Mietsachschäden enthalten?',
|
||
'Schlüsselverlust enthalten?',
|
||
'Forderungsausfalldeckung vorhanden?',
|
||
].map((row) => (
|
||
<div key={row} className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
|
||
<span className="text-gray-900">{row}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</>
|
||
}
|
||
right={
|
||
<RightImageCard src={assetUrl('iStock-956005062.jpg')} alt="Ratgeber">
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Frage?</CardTitle>
|
||
<CardDescription>Wir beraten persönlich.</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
</RightImageCard>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<GeneralNotice />
|
||
</div>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default FamilienHaftpflicht;
|