666 lines
37 KiB
TypeScript
666 lines
37 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 } 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 Risikolebensversicherung = () => {
|
|
const { t } = useTranslation('risikolebensversicherung');
|
|
|
|
// Add SEO metadata for search
|
|
React.useEffect(() => {
|
|
document.title = t('title', 'Risikolebensversicherung') + ' - Agentur Mizera';
|
|
const metaDescription = document.querySelector('meta[name="description"]');
|
|
if (metaDescription) {
|
|
metaDescription.setAttribute('content', t('title', 'Risikolebensversicherung') + ': ' + t('subtitle', 'Optimaler Schutz für Ihre Familie im Todesfall') + '. Unabhängige Beratung und Tarifvergleich für Risikolebensversicherungen.');
|
|
}
|
|
}, []);
|
|
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: '',
|
|
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();
|
|
const subject = encodeURIComponent(`Anfrage Risikolebensversicherung - ${formData.name}`);
|
|
const body = encodeURIComponent(
|
|
`Name: ${formData.name}\nTelefon: ${formData.phone}\nE-Mail: ${formData.email}\nAlter: ${formData.age}\nVersicherungssumme: ${formData.coverageAmount}€\nLaufzeit: ${formData.duration} Jahre\nGesundheitszustand: ${formData.healthStatus}\n\nNachricht:\n${formData.message}`
|
|
);
|
|
window.location.href = `mailto:info@finanzen-mizera.de?subject=${subject}&body=${body}`;
|
|
};
|
|
|
|
const benefits = [
|
|
{
|
|
icon: Users,
|
|
title: t('benefits.family.title', 'Familienschutz'),
|
|
description: t('benefits.family.description', 'Sichert Ihre Familie finanziell ab')
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: t('benefits.death.title', 'Todesfallschutz'),
|
|
description: t('benefits.death.description', 'Zahlung bei Tod der versicherten Person')
|
|
},
|
|
{
|
|
icon: Calculator,
|
|
title: t('benefits.cheap.title', 'Günstige Beiträge'),
|
|
description: t('benefits.cheap.description', 'Reiner Risikoschutz ohne Sparanteil')
|
|
},
|
|
{
|
|
icon: FileCheck,
|
|
title: t('benefits.easy.title', 'Einfacher Abschluss'),
|
|
description: t('benefits.easy.description', 'Schnelle und unkomplizierte Beantragung')
|
|
}
|
|
];
|
|
|
|
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-975006448.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">
|
|
{t('title', 'Risikolebensversicherung')}
|
|
</h1>
|
|
<p className="text-xl text-white/90 mb-8 max-w-2xl">
|
|
{t('subtitle', 'Optimaler Schutz für Ihre Familie im Todesfall')}
|
|
</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">
|
|
{t('buttons.consultation', 'Jetzt beraten lassen')}
|
|
</Button>
|
|
<Button onClick={() => setActiveTab('calculator')} size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
|
|
{t('buttons.calculator', '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-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('title', 'Risikolebensversicherung')}
|
|
</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>
|
|
|
|
<TabsContent value="overview" className="mt-0">
|
|
<TwoColumnTab
|
|
left={
|
|
<>
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<Shield className="w-4 h-4 text-blue-700" />
|
|
</div>
|
|
<span className="text-lg font-semibold text-gray-900">{t('overview.subtitle', 'Ihre Familie optimal absichern')}</span>
|
|
</div>
|
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
|
{t('title', 'Risikolebensversicherung')}
|
|
<span className="block text-blue-700">{t('overview.tagline', 'Finanzielle Sicherheit für Ihre Liebsten')}</span>
|
|
</h1>
|
|
<p className="mt-4 text-gray-600 text-lg">
|
|
{t('overview.description', 'Eine Risikolebensversicherung bietet reinen Todesfallschutz zu günstigen Beiträgen. Im Todesfall der versicherten Person wird die vereinbarte Versicherungssumme an die Hinterbliebenen ausgezahlt.')}
|
|
</p>
|
|
|
|
<div className="mt-8 space-y-4">
|
|
<div className="flex items-start gap-3">
|
|
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900">{t('overview.benefit1.title', 'Reiner Risikoschutz')}</h3>
|
|
<p className="text-gray-600">{t('overview.benefit1.description', 'Kein Sparanteil - nur Schutz für den Todesfall')}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900">{t('overview.benefit2.title', 'Günstige Beiträge')}</h3>
|
|
<p className="text-gray-600">{t('overview.benefit2.description', 'Deutlich günstiger als kapitalbildende Lebensversicherung')}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-3">
|
|
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900">{t('overview.benefit3.title', 'Flexible Laufzeiten')}</h3>
|
|
<p className="text-gray-600">{t('overview.benefit3.description', 'Anpassbar an Ihre individuelle Situation')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
right={
|
|
<RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Risikolebensversicherung">
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold text-gray-900">{t('overview.features.title', 'Leistungen im Überblick')}</h3>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
|
<span className="text-sm">{t('overview.features.item1', 'Todesfallleistung')}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
|
<span className="text-sm">{t('overview.features.item2', 'Kreditabsicherung möglich')}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
|
<span className="text-sm">{t('overview.features.item3', 'Steuerfrei (§20 EStG)')}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
|
<span className="text-sm">{t('overview.features.item4', 'Unabhängige Tarifauswahl')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</RightImageCard>
|
|
}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="details" className="mt-0">
|
|
<TwoColumnTab
|
|
left={
|
|
<>
|
|
<h3 className="text-2xl font-bold text-gray-900">{t('details.title', 'Details zur Risikolebensversicherung')}</h3>
|
|
|
|
<div className="mt-6 space-y-6">
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.what.title', 'Was ist eine Risikolebensversicherung?')}</h4>
|
|
<p className="text-gray-600">
|
|
{t('details.what.description', 'Eine Risikolebensversicherung ist eine reine Risikoversicherung, die nur im Todesfall der versicherten Person leistet. Im Gegensatz zur kapitalbildenden Lebensversicherung enthält sie keinen Sparanteil und ist daher deutlich günstiger.')}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.features.title', 'Wichtigste Merkmale')}</h4>
|
|
<ul className="space-y-2 text-gray-600">
|
|
<li>• {t('details.features.item1', 'Reiner Todesfallschutz ohne Kapitalbildung')}</li>
|
|
<li>• {t('details.features.item2', 'Günstige monatliche Beiträge')}</li>
|
|
<li>• {t('details.features.item3', 'Flexible Versicherungssummen (typisch 100.000€ - 1.000.000€)')}</li>
|
|
<li>• {t('details.features.item4', 'Laufzeiten meist 10, 15, 20 oder 30 Jahre')}</li>
|
|
<li>• {t('details.features.item5', 'Steuerfreie Auszahlung an Hinterbliebene')}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-lg font-semibold text-gray-900 mb-3">{t('details.suitable.title', 'Für wen geeignet?')}</h4>
|
|
<ul className="space-y-2 text-gray-600">
|
|
<li>• {t('details.suitable.item1', 'Familien mit Kindern zur Absicherung des Einkommensverlusts')}</li>
|
|
<li>• {t('details.suitable.item2', 'Hausbesitzer zur Absicherung von Immobiliendarlehen')}</li>
|
|
<li>• {t('details.suitable.item3', 'Selbstständige zur Absicherung von Geschäftspartnern')}</li>
|
|
<li>• {t('details.suitable.item4', 'Alle, die Hinterbliebene finanziell absichern möchten')}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
right={
|
|
<RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Details">
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold text-gray-900">Beispielrechnung</h3>
|
|
<div className="bg-blue-50 rounded-lg p-4">
|
|
<div className="text-sm text-blue-900 font-semibold mb-2">Beispiel: 40-jähriger Mann, Nichtraucher</div>
|
|
<div className="space-y-2 text-sm text-blue-900">
|
|
<div>• Versicherungssumme: 250.000€</div>
|
|
<div>• Laufzeit: 20 Jahre</div>
|
|
<div>• Monatlicher Beitrag: ca. 15-25€</div>
|
|
</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?</h3>
|
|
|
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="rounded-lg bg-white/10 p-4">
|
|
<h4 className="font-semibold mb-2">Risikofaktoren</h4>
|
|
<ul className="text-sm space-y-1">
|
|
<li>• Alter bei Vertragsbeginn</li>
|
|
<li>• Gesundheitszustand</li>
|
|
<li>• Raucherstatus</li>
|
|
<li>• Berufliche Risiken</li>
|
|
</ul>
|
|
</div>
|
|
<div className="rounded-lg bg-white/10 p-4">
|
|
<h4 className="font-semibold mb-2">Vertragsdetails</h4>
|
|
<ul className="text-sm space-y-1">
|
|
<li>• Versicherungssumme</li>
|
|
<li>• Laufzeit</li>
|
|
<li>• Einschließungen</li>
|
|
<li>• Zahlweise (monatlich/jährlich)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</RightImageCard>
|
|
}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="calculator" className="mt-0">
|
|
<TwoColumnTab
|
|
left={
|
|
<>
|
|
<h3 className="text-2xl font-bold text-gray-900">Beitragsrechner</h3>
|
|
<p className="mt-2 text-gray-600">
|
|
Berechnen Sie grob den monatlichen Beitrag für Ihre Risikolebensversicherung.
|
|
</p>
|
|
|
|
<div className="mt-6 space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Alter</label>
|
|
<input
|
|
type="number"
|
|
placeholder="z.B. 35"
|
|
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Versicherungssumme (€)</label>
|
|
<input
|
|
type="number"
|
|
placeholder="z.B. 250000"
|
|
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Laufzeit (Jahre)</label>
|
|
<select className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm">
|
|
<option value="">Bitte wählen</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>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Raucherstatus</label>
|
|
<select className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm">
|
|
<option value="">Bitte wählen</option>
|
|
<option value="nein">Nichtraucher</option>
|
|
<option value="ja">Raucher</option>
|
|
</select>
|
|
</div>
|
|
|
|
<Button className="w-full bg-blue-700 hover:bg-blue-800">
|
|
Beitrag berechnen
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
|
|
<div className="text-sm text-blue-900 font-semibold">Unverbindliche Schätzung</div>
|
|
<div className="mt-1 text-sm text-blue-900">
|
|
Monatlicher Beitrag: <span className="font-bold">ca. 15-25 €</span>
|
|
</div>
|
|
<div className="text-xs text-blue-900/80 mt-2">
|
|
Dies ist eine grobe Schätzung. Der genaue Beitrag hängt von vielen Faktoren ab und wird vom Versicherer individuell berechnet.
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
right={
|
|
<RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Rechner">
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold text-gray-900">Beispielrechnungen</h3>
|
|
|
|
<div className="space-y-3">
|
|
<div className="border rounded-lg p-3">
|
|
<div className="text-sm font-semibold text-gray-900">Beispiel 1: Junge Familie</div>
|
|
<div className="text-xs text-gray-600 mt-1">
|
|
35 Jahre, Nichtraucher, 250.000€, 20 Jahre<br/>
|
|
<strong>Monatlich ca. 15-20 €</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border rounded-lg p-3">
|
|
<div className="text-sm font-semibold text-gray-900">Beispiel 2: Immobilienfinanzierung</div>
|
|
<div className="text-xs text-gray-600 mt-1">
|
|
40 Jahre, Nichtraucher, 200.000€, 15 Jahre<br/>
|
|
<strong>Monatlich ca. 20-30 €</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border rounded-lg p-3">
|
|
<div className="text-sm font-semibold text-gray-900">Beispiel 3: Ältere Person</div>
|
|
<div className="text-xs text-gray-600 mt-1">
|
|
50 Jahre, Raucher, 100.000€, 10 Jahre<br/>
|
|
<strong>Monatlich ca. 40-60 €</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 p-3 bg-yellow-50 rounded-lg border border-yellow-200">
|
|
<div className="text-xs text-yellow-900">
|
|
<strong>Hinweis:</strong> Dies sind nur Beispiele. Der tatsächliche Beitrag wird individuell berechnet.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</RightImageCard>
|
|
}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="form" className="mt-0">
|
|
<TwoColumnTab
|
|
left={
|
|
<>
|
|
<h3 className="text-2xl font-bold text-gray-900">Beratungsanfrage</h3>
|
|
<p className="mt-2 text-gray-600">
|
|
Füllen Sie das Formular aus und wir erstellen Ihnen ein unverbindliches Angebot.
|
|
</p>
|
|
|
|
<form onSubmit={handleSubmit} className="mt-6 space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">Name*</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleFormChange}
|
|
required
|
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
|
placeholder="Ihr vollständiger Name"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">Telefon*</label>
|
|
<input
|
|
type="tel"
|
|
name="phone"
|
|
value={formData.phone}
|
|
onChange={handleFormChange}
|
|
required
|
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
|
placeholder="Ihre Telefonnummer"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">E-Mail*</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleFormChange}
|
|
required
|
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
|
placeholder="Ihre E-Mail-Adresse"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">Alter*</label>
|
|
<input
|
|
type="number"
|
|
name="age"
|
|
value={formData.age}
|
|
onChange={handleFormChange}
|
|
required
|
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
|
placeholder="Ihr Alter in Jahren"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">Versicherungssumme (€)</label>
|
|
<input
|
|
type="number"
|
|
name="coverageAmount"
|
|
value={formData.coverageAmount}
|
|
onChange={handleFormChange}
|
|
className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
|
|
placeholder="z.B. 250000"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700">Laufzeit (Jahre)</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="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>
|
|
<label className="block 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="block 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="Zusätzliche Informationen oder Fragen..."
|
|
/>
|
|
</div>
|
|
|
|
<Button type="submit" className="bg-blue-700 hover:bg-blue-800">
|
|
Anfrage senden
|
|
</Button>
|
|
</form>
|
|
</>
|
|
}
|
|
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">Informationsmaterial</h3>
|
|
<p className="mt-2 text-gray-600">
|
|
Laden Sie unsere Informationsbroschüre zur Risikolebensversicherung herunter.
|
|
</p>
|
|
|
|
<Card className="mt-6 border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Risikolebensversicherung (PDF)</CardTitle>
|
|
<CardDescription>Informationsbroschüre zur Risikolebensversicherung</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<a href="/PDF/PR_DEGTP_PP_2DE.pdf" download>
|
|
<Button className="bg-blue-700 hover:bg-blue-800 w-full">PDF herunterladen</Button>
|
|
</a>
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
}
|
|
right={
|
|
<RightImageCard src={assetUrl('iStock-975006448.jpg')} alt="Informationsmaterial">
|
|
<Card className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Hinweis</CardTitle>
|
|
<CardDescription>Bei Fragen beraten wir gerne.</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></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>
|
|
</CardContent>
|
|
</Card>
|
|
</RightImageCard>
|
|
}
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
|
|
{/* Benefits Section */}
|
|
<div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{benefits.map((benefit, index) => {
|
|
const Icon = benefit.icon;
|
|
return (
|
|
<Card key={index} className="text-center">
|
|
<CardContent className="p-6">
|
|
<div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Icon className="w-6 h-6 text-blue-700" />
|
|
</div>
|
|
<h3 className="font-semibold text-gray-900 mb-2">{benefit.title}</h3>
|
|
<p className="text-sm text-gray-600">{benefit.description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* General Notice */}
|
|
<GeneralNotice />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default Risikolebensversicherung;
|