test #deploy
This commit is contained in:
parent
dbe955e12b
commit
16e00659aa
@ -42,7 +42,7 @@ const SeniorenSterbegeldversicherung = () => {
|
|||||||
{
|
{
|
||||||
icon: Clock,
|
icon: Clock,
|
||||||
title: 'Lebenslang gültig',
|
title: 'Lebenslang gültig',
|
||||||
description: 'Keine Altersbegrenzung'
|
description: 'Keine Altersgrenzen oder Laufzeiten'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Users,
|
icon: Users,
|
||||||
@ -110,23 +110,6 @@ const SeniorenSterbegeldversicherung = () => {
|
|||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-gray-50">
|
||||||
{/* Wichtiger Hinweis oben */}
|
|
||||||
<div className="container mx-auto px-4 py-4">
|
|
||||||
<div className="max-w-6xl mx-auto">
|
|
||||||
<div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
|
|
||||||
<div className="text-sm text-amber-800 leading-relaxed">
|
|
||||||
<h4 className="font-semibold mb-1">Wichtiger Hinweis:</h4>
|
|
||||||
<p>
|
|
||||||
Die auf diesen Seiten enthaltenen Tipps und Informationen stellen allgemeine, unverbindliche Hinweise zu Versicherungen dar. Es handelt sich um eine private Meinungsäußerung ohne Anspruch auf Richtigkeit, Vollständigkeit oder Haftung und ersetzt keine individuelle Beratung. Maßgeblich sind ausschließlich die jeweiligen Versicherungsbedingungen des Versicherungsunternehmens.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<HeroSlider
|
<HeroSlider
|
||||||
slides={[
|
slides={[
|
||||||
@ -301,38 +284,6 @@ const SeniorenSterbegeldversicherung = () => {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Wichtige Information */}
|
|
||||||
<div className="mt-8 bg-red-50 border border-red-200 rounded-xl p-6">
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="w-8 h-8 bg-red-200 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<AlertTriangle className="w-4 h-4 text-red-800" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 className="font-medium text-red-900 mb-2">Wichtige Information zur gesetzlichen Regelung</h6>
|
|
||||||
<p className="text-red-800 text-sm">
|
|
||||||
Die Sterbegeldversicherung ist eine private Vorsorge, die gesetzlich nicht geregelt ist.
|
|
||||||
Die Leistungen und Bedingungen variieren je nach Anbieter. Eine sorgfältige Prüfung der Vertragsbedingungen ist empfehlenswert.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Vorteile */}
|
|
||||||
<div className="mt-8 bg-blue-50 border border-blue-200 rounded-xl p-6">
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="w-8 h-8 bg-blue-200 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<CheckCircle className="w-4 h-4 text-blue-800" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 className="font-medium text-blue-900 mb-2">Ihre Garantierte Vorteile & Absicherung lebenslang</h6>
|
|
||||||
<p className="text-blue-800 text-sm">
|
|
||||||
Mit einer Sterbegeldversicherung sichern Sie sich und Ihre Familie finanziell ab.
|
|
||||||
Die Beiträge bleiben über die gesamte Vertragslaufzeit gleich und die Auszahlungssumme ist garantiert.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Beitragsbeispiel und Versicherungssummen */}
|
{/* Beitragsbeispiel und Versicherungssummen */}
|
||||||
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
|
||||||
@ -357,110 +308,12 @@ const SeniorenSterbegeldversicherung = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Wichtiger Hinweis unter der Tabelle */}
|
|
||||||
<div className="mt-6 bg-amber-50 border border-amber-200 rounded-xl p-4">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
|
|
||||||
<div className="text-sm text-amber-800 leading-relaxed">
|
|
||||||
<h4 className="font-semibold mb-1">Wichtiger Hinweis:</h4>
|
|
||||||
<p>
|
|
||||||
Die auf diesen Seiten enthaltenen Tipps und Informationen stellen allgemeine, unverbindliche Hinweise zu Versicherungen dar. Es handelt sich um eine private Meinungsäußerung ohne Anspruch auf Richtigkeit, Vollständigkeit oder Haftung und ersetzt keine individuelle Beratung. Maßgeblich sind ausschließlich die jeweiligen Versicherungsbedingungen des Versicherungsunternehmens.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="products" className="mt-0">
|
<TabsContent value="products" className="mt-0">
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
<div className="text-center">
|
||||||
<div className="lg:col-span-2">
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Unsere Sterbegeldlösungen</h3>
|
||||||
<h3 className="text-2xl font-bold text-gray-900">Unsere Sterbegeldlösungen</h3>
|
<p className="text-gray-600">Wir bieten verschiedene Tarife an, die auf Ihre individuellen Bedürfnisse zugeschnitten sind.</p>
|
||||||
<p className="text-gray-600 mt-2">
|
|
||||||
Wir bieten verschiedene Tarife an, die auf Ihre individuellen Bedürfnisse zugeschnitten sind.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mt-6 space-y-4">
|
|
||||||
<Card className="border-blue-200">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-lg flex items-center gap-2">
|
|
||||||
<Shield className="w-5 h-5 text-blue-700" />
|
|
||||||
Klassische Sterbegeldversicherung
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Die bewährte Lösung für Ihre finanzielle Absicherung
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ul className="space-y-2 text-sm text-gray-700">
|
|
||||||
<li className="flex items-start gap-2">
|
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
|
||||||
<span>Auszahlungssumme bis 50.000 €</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-start gap-2">
|
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
|
||||||
<span>Ohne Gesundheitsprüfung</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-start gap-2">
|
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
|
||||||
<span>Beitragskonstant über die gesamte Laufzeit</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="border-green-200">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-lg flex items-center gap-2">
|
|
||||||
<Heart className="w-5 h-5 text-green-700" />
|
|
||||||
Familien-Sterbegeldversicherung
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Gemeinsam für die ganze Familie vorsorgen
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<ul className="space-y-2 text-sm text-gray-700">
|
|
||||||
<li className="flex items-start gap-2">
|
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
|
||||||
<span>Bis zu 5 Personen versicherbar</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-start gap-2">
|
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
|
||||||
<span>Separate Auszahlungssummen</span>
|
|
||||||
</li>
|
|
||||||
<li className="flex items-start gap-2">
|
|
||||||
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
|
||||||
<span>Familienrabatt bis 15%</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Card className="border-orange-200">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-lg flex items-center gap-2">
|
|
||||||
<Calculator className="w-5 h-5 text-orange-700" />
|
|
||||||
Kosten berechnen
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<p className="text-sm text-gray-600 mb-4">
|
|
||||||
Berechnen Sie jetzt Ihre individuellen Beiträge und finden Sie den passenden Tarif.
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
onClick={() => setActiveTab('calculator')}
|
|
||||||
className="w-full bg-orange-600 hover:bg-orange-700"
|
|
||||||
>
|
|
||||||
<Calculator className="mr-2 h-4 w-4" />
|
|
||||||
Rechner starten
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
@ -509,31 +362,11 @@ const SeniorenSterbegeldversicherung = () => {
|
|||||||
</div>
|
</div>
|
||||||
<h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
|
<h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
|
||||||
<p className="text-gray-600">{step.description}</p>
|
<p className="text-gray-600">{step.description}</p>
|
||||||
{index < processSteps.length - 1 && (
|
|
||||||
<div className="hidden lg:block absolute top-8 left-full w-full">
|
|
||||||
<div className="flex items-center justify-center">
|
|
||||||
<div className="w-full border-t-2 border-dashed border-gray-300"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="calculator" className="mt-0">
|
|
||||||
<div className="text-center">
|
|
||||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Sterbegeld-Rechner</h3>
|
|
||||||
<p className="text-gray-600 mb-6">
|
|
||||||
Berechnen Sie jetzt Ihre individuellen Beiträge
|
|
||||||
</p>
|
|
||||||
<Button className="bg-blue-700 hover:bg-blue-800">
|
|
||||||
<Calculator className="mr-2 h-4 w-4" />
|
|
||||||
Rechner starten
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
|
|
||||||
<TabsContent value="costs" className="mt-0">
|
<TabsContent value="costs" className="mt-0">
|
||||||
<div className="text-center mb-8">
|
<div className="text-center mb-8">
|
||||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Bestattungskosten im Überblick</h3>
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Bestattungskosten im Überblick</h3>
|
||||||
@ -618,228 +451,26 @@ const SeniorenSterbegeldversicherung = () => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Hinweisbereich */}
|
|
||||||
<div className="mt-8 bg-amber-50 border border-amber-200 rounded-xl p-4">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
|
|
||||||
<div>
|
|
||||||
<h6 className="font-medium text-amber-900 mb-2">Wichtige Hinweise</h6>
|
|
||||||
<ul className="text-amber-800 text-sm space-y-1">
|
|
||||||
<li>• Die Kosten variieren je nach Region, Friedhof und individuellen Wünschen</li>
|
|
||||||
<li>• Grabpflegekosten fallen jährlich zusätzlich an</li>
|
|
||||||
<li>• Eine Sterbegeldversicherung kann Ihre Angehörigen finanziell entlasten</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Verantwortungsbereich */}
|
|
||||||
<div className="mt-6 bg-blue-50 border border-blue-200 rounded-xl p-6">
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="w-8 h-8 bg-blue-200 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
||||||
<CheckCircle className="w-4 h-4 text-blue-800" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6 className="font-medium text-blue-900 mb-2">Verantwortung</h6>
|
|
||||||
<p className="text-blue-800 text-sm leading-relaxed">
|
|
||||||
Sie können Verantwortung vereinbaren durch:
|
|
||||||
</p>
|
|
||||||
<ul className="text-blue-800 text-sm space-y-2 mt-3">
|
|
||||||
<li>• <strong>Sterbegeldversicherungen</strong> - bieten gegen einen vergleichsweise geringen monatlichen Beitrag eine Lösung, welche ohne Gesundheitsprüfung bis ins hohe Alter von 85 Jahren - auch von Kindern oder Verwandten ohne das Wissen der zu versicherten Person - abgeschlossen werden kann.</li>
|
|
||||||
<li>• <strong>Bestattungsvorsorgeversicherung</strong> - ermöglicht Ihnen, alles Notwendige schon jetzt eigenverantwortlich zu regeln. Sie können sich darauf verlassen, dass später alles in Ihrem Sinne arrangiert ist und sämtliche Formalitäten zuverlässig erledigt werden. Gewähren Sie Ihnen und Ihren Angehörigen emotionale und finanzielle Entlastung.</li>
|
|
||||||
</ul>
|
|
||||||
<p className="text-blue-800 text-sm mt-3 leading-relaxed">
|
|
||||||
Ein persönliches Gespräch ist durch nichts zur ersetzen, deswegen Vereinbaren Sie einen Termin und wir werden gemeinsam für Sie oder Ihrer Angehörigen eine passende sichere und vertrauliche Lösung finden.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
|
||||||
|
|
||||||
<TabsContent value="calculator" className="mt-0">
|
|
||||||
<div className="text-center mb-8">
|
|
||||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Sterbegeld-Rechner</h3>
|
|
||||||
<p className="text-gray-600 mb-6">
|
|
||||||
Berechnen Sie jetzt Ihre individuellen Beiträge und finden Sie den passenden Tarif
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="max-w-2xl mx-auto">
|
|
||||||
<Card className="border-blue-200">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-lg flex items-center gap-2">
|
|
||||||
<Calculator className="w-5 h-5 text-blue-700" />
|
|
||||||
Beitrag berechnen
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Geben Sie Ihre Wünsche ein und erhalten Sie eine unverbindliche Kostenschätzung
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-6">
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Versicherungssumme
|
|
||||||
</label>
|
|
||||||
<select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
||||||
<option value="5000">5.000 €</option>
|
|
||||||
<option value="10000">10.000 €</option>
|
|
||||||
<option value="12500" selected>12.500 €</option>
|
|
||||||
<option value="15000">15.000 €</option>
|
|
||||||
<option value="20000">20.000 €</option>
|
|
||||||
<option value="25000">25.000 €</option>
|
|
||||||
<option value="30000">30.000 €</option>
|
|
||||||
<option value="50000">50.000 €</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Alter
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
placeholder="z.B. 53"
|
|
||||||
defaultValue="53"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Geschlecht
|
|
||||||
</label>
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input type="radio" name="gender" value="male" className="mr-2" defaultChecked />
|
|
||||||
Männlich
|
|
||||||
</label>
|
|
||||||
<label className="flex items-center">
|
|
||||||
<input type="radio" name="gender" value="female" className="mr-2" />
|
|
||||||
Weiblich
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-sm text-blue-700 font-medium mb-2">Ihr geschätzter Beitrag</p>
|
|
||||||
<p className="text-3xl font-bold text-blue-900">ab 40,75 €</p>
|
|
||||||
<p className="text-sm text-blue-600">pro Monat</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<Button
|
|
||||||
onClick={() => setActiveTab('form')}
|
|
||||||
className="flex-1 bg-blue-700 hover:bg-blue-800"
|
|
||||||
>
|
|
||||||
<Phone className="mr-2 h-4 w-4" />
|
|
||||||
Beratung anfordern
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" className="flex-1">
|
|
||||||
<Download className="mr-2 h-4 w-4" />
|
|
||||||
Angebot herunterladen
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="form" className="mt-0">
|
<TabsContent value="form" className="mt-0">
|
||||||
<div className="max-w-2xl mx-auto">
|
<div className="text-center">
|
||||||
<Card className="border-blue-200">
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
|
||||||
<CardHeader className="text-center">
|
<p className="text-gray-600 mb-6">
|
||||||
<CardTitle className="text-2xl">Beratungsanfrage</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Lassen Sie sich unverbindlich zu Ihrer Sterbegeldversicherung beraten
|
Lassen Sie sich unverbindlich zu Ihrer Sterbegeldversicherung beraten
|
||||||
</CardDescription>
|
</p>
|
||||||
</CardHeader>
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
<CardContent className="space-y-6">
|
<Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<Phone className="h-5 w-5 mr-2" />
|
||||||
<div>
|
Jetzt anrufen
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Vorname *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
placeholder="Ihr Vorname"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Nachname *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
placeholder="Ihr Nachname"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
E-Mail *
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
placeholder="ihre@email.de"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Telefon
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="tel"
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
placeholder="0123 456789"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Ihre Nachricht
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
rows={4}
|
|
||||||
placeholder="Besondere Wünsche oder Fragen..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-start gap-2">
|
|
||||||
<input type="checkbox" id="privacy" className="mt-1" />
|
|
||||||
<label htmlFor="privacy" className="text-sm text-gray-600">
|
|
||||||
Ich stimme der <Link to="/datenschutz" className="text-blue-600 hover:underline">Datenschutzerklärung</Link> zu und bin damit einverstanden, dass meine Daten zur Bearbeitung meiner Anfrage verwendet werden.
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row gap-4">
|
|
||||||
<Button className="flex-1 bg-blue-700 hover:bg-blue-800">
|
|
||||||
<Mail className="mr-2 h-4 w-4" />
|
|
||||||
Anfrage senden
|
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" className="flex-1">
|
<Button variant="outline" className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 text-lg font-semibold">
|
||||||
<Phone className="mr-2 h-4 w-4" />
|
<Mail className="h-5 w-5 mr-2" />
|
||||||
Rückruf bitten
|
Kontakt aufnehmen
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="text-center text-sm text-gray-600">
|
|
||||||
<p>Oder rufen Sie uns direkt an:</p>
|
|
||||||
<p className="font-semibold text-blue-700">+49 123 456789</p>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user