798 lines
45 KiB
TypeScript
798 lines
45 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, Heart, UserCheck, Pill, Stethoscope } 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 Krankheitsschutzbrief = () => {
|
||
const { t } = useTranslation('krankheitsschutzbrief');
|
||
|
||
// Add SEO metadata for search
|
||
React.useEffect(() => {
|
||
document.title = 'Krankheits-Schutzbrief - Agentur Mizera';
|
||
const metaDescription = document.querySelector('meta[name="description"]');
|
||
if (metaDescription) {
|
||
metaDescription.setAttribute('content', 'Krankheits-Schutzbrief: Umfassender Schutz bei schweren Krankheiten. Unabhängige Beratung und Tarifvergleich für Krankheits-Schutzbriefe.');
|
||
}
|
||
}, []);
|
||
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: '',
|
||
coverageAmount: '',
|
||
duration: '',
|
||
healthStatus: '',
|
||
smoker: '',
|
||
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: 'Krankheitsschutz',
|
||
description: 'Finanzielle Absicherung bei schweren Krankheiten',
|
||
},
|
||
{
|
||
icon: Heart,
|
||
title: 'Sofortleistung',
|
||
description: 'Schnelle Auszahlung bei Diagnosestellung',
|
||
},
|
||
{
|
||
icon: Calculator,
|
||
title: 'Günstige Beiträge',
|
||
description: 'Schutz zu fairen und transparenten Konditionen',
|
||
},
|
||
{
|
||
icon: UserCheck,
|
||
title: 'Einfacher Abschluss',
|
||
description: 'Unkomplizierte Vertragsaufnahme ohne Gesundheitsprüfungen',
|
||
},
|
||
{
|
||
icon: FileText,
|
||
title: 'Flexible Laufzeiten',
|
||
description: 'Anpassbar an Ihre persönliche Situation',
|
||
},
|
||
{
|
||
icon: Stethoscope,
|
||
title: 'Medizinische Vorsorge',
|
||
description: 'Zusätzlicher Schutz für Ihre Gesundheit',
|
||
},
|
||
];
|
||
|
||
const services = [
|
||
'Leistung bei Krebserkrankungen',
|
||
'Herz-Kreislauf-Erkrankungen',
|
||
'Schlaganfall-Versorgung',
|
||
'Organversagen-Schutz',
|
||
'Multiple Sklerose Abdeckung',
|
||
'Parkinson-Erkrankung',
|
||
'Sofortauszahlung ohne Wartezeit',
|
||
'Beratung bei Krankheitsfällen',
|
||
];
|
||
|
||
|
||
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_pillen.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">
|
||
Krankheits-Schutzbrief
|
||
</h1>
|
||
<p className="text-xl text-white/90 mb-8 max-w-2xl">
|
||
Umfassender Schutz bei schweren Krankheiten
|
||
</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">
|
||
Krankheits-Schutzbrief
|
||
</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>Schutz bei schweren Krankheiten</span>
|
||
</div>
|
||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||
Krankheits-Schutzbrief
|
||
<span className="block text-blue-700">Finanzielle Sicherheit in schweren Zeiten</span>
|
||
</h1>
|
||
<p className="mt-4 text-gray-600 text-lg">
|
||
Umfassender Schutz bei schweren Krankheiten – mit sofortiger Leistungsauszahlung und flexibler Gestaltung.
|
||
</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">Krankheitsschutz</div>
|
||
<div className="text-gray-600">Finanzielle Absicherung bei schweren Krankheiten</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||
<Heart className="w-5 h-5 text-blue-700" />
|
||
<div className="text-sm">
|
||
<div className="font-semibold text-gray-900">Sofortleistung</div>
|
||
<div className="text-gray-600">Schnelle Auszahlung bei Diagnosestellung</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_pillen.jpg')}
|
||
alt="Krankheits-Schutzbrief"
|
||
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">
|
||
<Pill className="w-4 h-4" />
|
||
<span>Krebserkrankungen, Herzinfarkt, Schlaganfall, Sofortleistung</span>
|
||
</div>
|
||
<div className="mt-2 text-sm text-gray-600">
|
||
Tarifcheck – schnell, fair und passend zu Ihrer Gesundheitssituation.
|
||
</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" />
|
||
Schwerkrankenschutz
|
||
</CardTitle>
|
||
<CardDescription>Finanzielle Sicherheit bei schweren Erkrankungen.</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" />
|
||
Sofortauszahlung
|
||
</CardTitle>
|
||
<CardDescription>Keine Wartezeit bei Diagnosestellung.</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>Wir finden den passenden Schutz für Sie.</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 des Krankheits-Schutzbriefs?</h3>
|
||
|
||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div className="rounded-lg bg-white/10 p-4">
|
||
<UserCheck className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||
<div className="mt-3 text-lg font-semibold">Alter und Gesundheitszustand</div>
|
||
<div className="mt-1 text-sm text-white/85">
|
||
Jüngere und gesündere Personen zahlen geringere Beiträge.
|
||
</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">Versicherungssumme</div>
|
||
<div className="mt-1 text-sm text-white/85">
|
||
Höhere Leistungen bei schweren Krankheiten kosten mehr.
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-lg bg-white/10 p-4">
|
||
<Clock className="w-10 h-10 text-white/90" strokeWidth={1.25} />
|
||
<div className="mt-3 text-lg font-semibold">Laufzeit</div>
|
||
<div className="mt-1 text-sm text-white/85">
|
||
Längere Laufzeiten können günstigere Konditionen ermöglichen.
|
||
</div>
|
||
</div>
|
||
|
||
<div className="rounded-lg bg-white/10 p-4">
|
||
<AlertTriangle 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">
|
||
Anzahl der versicherten Krankheiten beeinflusst 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 10 € 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 bei schweren Krankheiten – mit sofortiger Leistungsauszahlung und flexibler Gestaltung.
|
||
</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">Versicherte Krankheiten</h4>
|
||
<div className="rounded-lg border border-gray-200 bg-white overflow-hidden">
|
||
<table className="w-full">
|
||
<thead className="bg-gray-50 border-b border-gray-200">
|
||
<tr>
|
||
<th className="px-4 py-3 text-left text-sm font-medium text-gray-900">Krankheitsgruppe</th>
|
||
<th className="px-4 py-3 text-left text-sm font-medium text-gray-900">Beispiele</th>
|
||
<th className="px-4 py-3 text-left text-sm font-medium text-gray-900">Leistung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-gray-200">
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Krebserkrankungen</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">Brustkrebs, Lungenkrebs, Darmkrebs, Prostatakrebs</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">Sofortauszahlung bei Diagnose</td>
|
||
</tr>
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Herz-Kreislauf</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">Herzinfarkt, Herzinsuffizienz, Koronare Herzkrankheit</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">100% der vereinbarten Summe</td>
|
||
</tr>
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Schlaganfall</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">Ischämischer und hämorrhagischer Schlaganfall</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">Sofortleistung bei bleibenden Schäden</td>
|
||
</tr>
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Organversagen</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">Nierenversagen, Leberversagen, Pankreasversagen</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">Vollständige Auszahlung</td>
|
||
</tr>
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Nervensystem</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">Multiple Sklerose, Parkinson, ALS</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">Progressive Leistungsauszahlung</td>
|
||
</tr>
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="px-4 py-3 text-sm font-medium text-gray-900">Weitere Krankheiten</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">Blindheit, Taubheit, Verbrennungen, Koma</td>
|
||
<td className="px-4 py-3 text-sm text-gray-700">Je nach Schweregrad</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||
<p className="text-sm text-blue-900">
|
||
<strong>Hinweis:</strong> Die genauen Krankheiten und Bedingungen entnehmen Sie bitte der
|
||
<a href="/PDF/Kundenbroschüre.pdf" download className="text-blue-700 hover:text-blue-800 underline ml-1">Kundenbroschüre</a>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</>
|
||
}
|
||
right={
|
||
<RightImageCard src={assetUrl('head_pillen.jpg')} alt="Details & Vorteile">
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Tipp</CardTitle>
|
||
<CardDescription>Leistungsumfang sorgfältig prüfen.</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm text-gray-700">
|
||
Achten Sie auf welche Krankheiten versichert sind und ob Vorerkrankungen
|
||
ausgeschlossen sind. Prüfen Sie auch die Höhe der Sofortleistung.
|
||
</CardContent>
|
||
</Card>
|
||
</RightImageCard>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="calculator" className="mt-0">
|
||
<TwoColumnTab
|
||
left={
|
||
<>
|
||
<h3 className="text-2xl font-bold text-gray-900">Krankheits-Schutz-Vergleichsrechner</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 gewünschte Leistungssumme.
|
||
</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">Alter</label>
|
||
<select
|
||
name="age"
|
||
value={formData.age}
|
||
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="18-25">18-25 Jahre</option>
|
||
<option value="26-35">26-35 Jahre</option>
|
||
<option value="36-45">36-45 Jahre</option>
|
||
<option value="46-55">46-55 Jahre</option>
|
||
<option value="56-65">56-65 Jahre</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm font-medium text-gray-700">Leistungssumme</label>
|
||
<select
|
||
name="coverageAmount"
|
||
value={formData.coverageAmount}
|
||
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="25000">25.000 €</option>
|
||
<option value="50000">50.000 €</option>
|
||
<option value="75000">75.000 €</option>
|
||
<option value="100000">100.000 €</option>
|
||
<option value="200000">200.000 €</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">
|
||
Krankheits-Schutzbrief ab <span className="font-bold">ca. 10 €</span>/Monat
|
||
</div>
|
||
<div className="text-xs text-blue-900/80 mt-2">
|
||
Abhängig von Alter, Gesundheitszustand, Leistungssumme und Umfang.
|
||
</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_pillen.jpg')} alt="Krankheits-Schutz-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>Alter und Gesundheitszustand</span>
|
||
</div>
|
||
<div className="flex items-start gap-2">
|
||
<Search className="w-4 h-4 text-blue-700 mt-0.5" />
|
||
<span>Vorerkrankungen und Risikofaktoren</span>
|
||
</div>
|
||
<div className="flex items-start gap-2">
|
||
<AlertCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
||
<span>Gewünschte Leistungssumme und Krankheiten</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>
|
||
<select
|
||
name="age"
|
||
value={formData.age}
|
||
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="18-25">18-25 Jahre</option>
|
||
<option value="26-35">26-35 Jahre</option>
|
||
<option value="36-45">36-45 Jahre</option>
|
||
<option value="46-55">46-55 Jahre</option>
|
||
<option value="56-65">56-65 Jahre</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm font-medium text-gray-700">Leistungssumme</label>
|
||
<select
|
||
name="coverageAmount"
|
||
value={formData.coverageAmount}
|
||
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="25000">25.000 €</option>
|
||
<option value="50000">50.000 €</option>
|
||
<option value="75000">75.000 €</option>
|
||
<option value="100000">100.000 €</option>
|
||
<option value="200000">200.000 €</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm font-medium text-gray-700">Laufzeit</label>
|
||
<select
|
||
name="duration"
|
||
value={formData.duration}
|
||
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="5">5 Jahre</option>
|
||
<option value="10">10 Jahre</option>
|
||
<option value="15">15 Jahre</option>
|
||
<option value="20">20 Jahre</option>
|
||
<option value="30">30 Jahre</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-sm font-medium text-gray-700">Gesundheitszustand</label>
|
||
<select
|
||
name="healthStatus"
|
||
value={formData.healthStatus}
|
||
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="gesund">Gesund</option>
|
||
<option value="kleine-beschwerden">Kleine Beschwerden</option>
|
||
<option value="chronisch">Chronische Erkrankungen</option>
|
||
<option value="unbekannt">Möchte ich nicht angeben</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-sm font-medium text-gray-700">
|
||
Haben Sie in den letzten 12 Monaten, wenn auch nur gelegentlich, geraucht und/oder Nikotin konsumiert?*
|
||
</label>
|
||
<select
|
||
name="smoker"
|
||
value={formData.smoker}
|
||
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="ja">Ja</option>
|
||
<option value="nein">Nein</option>
|
||
</select>
|
||
<div className="mt-2 text-xs text-gray-600">
|
||
<p className="font-semibold">* Rauchen und/oder Nikotinkonsum ist:</p>
|
||
<p>a) Rauchen von Zigarette, Zigarillo, Zigarre, Pfeife, Tabak, Shisha oder Wasserpfeife,</p>
|
||
<p>b) Konsum von E-Zigarette, E-Pfeife, E-Zigarre, Schnupftabak, Kautabak, Nikotinersatzprodukte wie Nikotinpflaster oder Kaugummi.</p>
|
||
</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 Krankheiten sollen versichert sein?"
|
||
/>
|
||
</div>
|
||
|
||
<Button type="submit" className="bg-blue-700 hover:bg-blue-800">
|
||
Anfrage senden
|
||
</Button>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
</>
|
||
}
|
||
right={
|
||
<RightImageCard src="/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('/contact')}>
|
||
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">Krankheits-Schutzbrief (PDF)</CardTitle>
|
||
<CardDescription>Informationsbroschüre zur Krankheits-Schutzversicherung</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex flex-col md:flex-row gap-4 items-center">
|
||
<div className="flex-1">
|
||
<a href="/PDF/Kundenbroschüre.pdf" download className="block">
|
||
<Button className="bg-blue-700 hover:bg-blue-800 w-full">
|
||
<Download className="w-4 h-4 mr-2" />
|
||
PDF herunterladen
|
||
</Button>
|
||
</a>
|
||
</div>
|
||
<div className="flex flex-col items-center gap-1">
|
||
<div className="w-20 h-20 bg-white border-2 border-gray-300 rounded-lg p-1 flex items-center justify-center">
|
||
<div className="text-center">
|
||
<div className="w-16 h-16 bg-gray-100 rounded flex items-center justify-center">
|
||
<div className="text-xs text-gray-600 text-center font-semibold">
|
||
QR-Code
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p className="text-xs text-gray-600 text-center">
|
||
Scan für Zugriff
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</>
|
||
}
|
||
right={
|
||
<RightImageCard src={assetUrl('head_pillen.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 Krankheitsschutzbrief;
|