411 lines
21 KiB
TypeScript
411 lines
21 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
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 { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Package, Box, Calculator } from 'lucide-react';
|
|
import Layout from '@/components/Layout';
|
|
import HeroSlider from '@/components/HeroSlider';
|
|
|
|
const GeschaeftskundenSachversicherung = () => {
|
|
const { t } = useTranslation('geschaeftskundenSachversicherung');
|
|
const navigate = useNavigate();
|
|
const baseUrl = import.meta.env.BASE_URL;
|
|
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
|
const [activeTab, setActiveTab] = useState('overview');
|
|
|
|
const benefits = [
|
|
{
|
|
icon: Shield,
|
|
title: 'Wert-Erhalt',
|
|
description: 'Schutz für Ihr Unternehmensvermögen'
|
|
},
|
|
{
|
|
icon: Package,
|
|
title: 'Umfassender Schutz',
|
|
description: 'Alle Sachwerte abgedeckt'
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: 'Business-Kontinuität',
|
|
description: 'Schnelle Wiederherstellung nach Schäden'
|
|
},
|
|
{
|
|
icon: Activity,
|
|
title: 'Wert-Erhalt',
|
|
description: 'Erhaltung Ihrer Investitionen'
|
|
}
|
|
];
|
|
|
|
const products = [
|
|
{
|
|
title: 'Gebäude-Versicherung',
|
|
description: 'Schutz für Immobilien',
|
|
details: 'Deckung für Feuer, Leitungswasser, Sturm, Hagel, Blitzschlag'
|
|
},
|
|
{
|
|
title: 'Maschinen-Versicherung',
|
|
description: 'Schutz für Produktionsanlagen',
|
|
details: 'Deckung für Maschinenschäden, Ausfallkosten, Reparaturen'
|
|
},
|
|
{
|
|
title: 'Lager-Versicherung',
|
|
description: 'Schutz für Waren und Material',
|
|
details: 'Deckung für Diebstahl, Beschädigung, Verlust von Lagergütern'
|
|
},
|
|
{
|
|
title: 'Elektronik-Versicherung',
|
|
description: 'Schutz für IT-Systeme',
|
|
details: 'Deckung für Computer, Server, Netzwerk, Peripheriegeräte'
|
|
},
|
|
{
|
|
title: 'Fuhrpark-Versicherung',
|
|
description: 'Schutz für Fahrzeuge',
|
|
details: 'Deckung für Diebstahl, Beschädigung, Unfallschäden'
|
|
},
|
|
{
|
|
title: 'Betriebs- und Anlagenversicherung',
|
|
description: 'Schutz für gewerbliche Anlagen',
|
|
details: 'Deckung für Maschinen, Anlagen, Einrichtungen, Betriebsstätten'
|
|
}
|
|
];
|
|
|
|
const steps = [
|
|
{
|
|
step: '1',
|
|
title: 'Inventur',
|
|
description: 'Ermittlung Ihrer Sachwerte und Risiken'
|
|
},
|
|
{
|
|
step: '2',
|
|
title: 'Wert-Ermittlung',
|
|
description: 'Bewertung der Versicherungssummen'
|
|
},
|
|
{
|
|
step: '3',
|
|
title: 'Tarif-Vergleich',
|
|
description: 'Analyse der passenden Versicherungsanbieter'
|
|
},
|
|
{
|
|
step: '4',
|
|
title: 'Vertragsabschluss',
|
|
description: 'Schnelle und unkomplizierte Abwicklung'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Layout>
|
|
<HeroSlider
|
|
slides={[
|
|
{
|
|
id: 'geschaeftskunden-sach-1',
|
|
kicker: 'Sachversicherung für Geschäftskunden',
|
|
title: 'Comprehensive protection for your business assets',
|
|
subtitle: 'Umfassende Absicherung für alle Sachwerte, Maschinen, Lager und Betriebsstätten',
|
|
imageUrl: assetUrl('iStock-943842590.jpg'),
|
|
imagePosition: 'center 35%',
|
|
ctas: [
|
|
{ label: 'Beratung anfordern', href: '#form' },
|
|
{ label: 'Wert-Rechner', href: '#calculator' },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<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">
|
|
Sachversicherung für Geschäftskunden
|
|
</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-2 md:grid-cols-4 lg:grid-cols-6 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"
|
|
>
|
|
<Phone className="w-4 h-4 mr-1.5" />
|
|
Anfrage
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="products"
|
|
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"
|
|
>
|
|
<Package className="w-4 h-4 mr-1.5" />
|
|
Übersicht
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="benefits"
|
|
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"
|
|
>
|
|
<Star className="w-4 h-4 mr-1.5" />
|
|
Vorteile
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="process"
|
|
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" />
|
|
Prozess
|
|
</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" />
|
|
Rechner
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
|
|
<div className="p-4 md:p-6">
|
|
<TabsContent value="overview" className="mt-0">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
|
|
<div>
|
|
<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">
|
|
<Package className="w-4 h-4" />
|
|
<span>Sachwerte-Schutz</span>
|
|
</div>
|
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
|
Sachversicherung für Geschäftskunden
|
|
<span className="block text-blue-700">Wert-Erhalt</span>
|
|
</h1>
|
|
<p className="mt-4 text-gray-600 text-lg">
|
|
Mit einer Sachversicherung schützen Sie Ihr Unternehmensvermögen vor den größten Risiken wie
|
|
Feuer, Diebstahl und Beschädigung. Wir finden die passende Lösung für Ihre spezifischen Sachwerte.
|
|
</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">
|
|
Beratung anfordern
|
|
</Button>
|
|
<Button variant="outline" onClick={() => navigate('/contact')} className="border-gray-300">
|
|
Kostenlos beraten lassen
|
|
</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">Wert-Erhalt</div>
|
|
<div className="text-gray-600">Schutz für Vermögen</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
|
<Package className="w-5 h-5 text-blue-700" />
|
|
<div className="text-sm">
|
|
<div className="font-semibold text-gray-900">Umfassender Schutz</div>
|
|
<div className="text-gray-600">Alle Sachwerte</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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('iStock-943842590.jpg')}
|
|
alt="Sachversicherung"
|
|
className="w-full h-[320px] 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">
|
|
<Box className="w-4 h-4" />
|
|
<span>Schutz für alle Sachwerte</span>
|
|
</div>
|
|
<div className="mt-2 text-sm text-gray-600">
|
|
Wir finden den optimalen Schutz für Ihr Vermögen.
|
|
</div>
|
|
</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" />
|
|
Nicht gesetzlich vorgeschrieben
|
|
</CardTitle>
|
|
<CardDescription>Aber oft empfohlen.</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<AlertTriangle className="w-4 h-4 text-blue-700" />
|
|
Hohe Schadensummen
|
|
</CardTitle>
|
|
<CardDescription>Können existenzbedrohend sein.</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
<Card className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<Clock className="w-4 h-4 text-blue-700" />
|
|
Schnelle Regulierung
|
|
</CardTitle>
|
|
<CardDescription>Sofortige Schadenregulierung.</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="products" className="mt-0">
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2">
|
|
<h3 className="text-2xl font-bold text-gray-900">Unsere Sach-Lösungen</h3>
|
|
<p className="mt-2 text-gray-600">
|
|
Wir bieten verschiedene Sachversicherungen, die perfekt auf Ihre
|
|
Unternehmensgröße und Sachwerte zugeschnitten sind.
|
|
</p>
|
|
|
|
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{products.map((product, index) => (
|
|
<Card key={index} className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">{product.title}</CardTitle>
|
|
<CardDescription>{product.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="text-sm text-gray-700">
|
|
{product.details}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Card className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Welcher Schutz passt?</CardTitle>
|
|
<CardDescription>Abhängig von Ihren Sachwerten</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 text-sm text-gray-700">
|
|
<div className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
|
<span><strong>Gebäude:</strong> Für Immobilien</span>
|
|
</div>
|
|
<div className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
|
<span><strong>Maschinen:</strong> Für Produktionsanlagen</span>
|
|
</div>
|
|
<div className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
|
<span><strong>Lager:</strong> Für Waren und Material</span>
|
|
</div>
|
|
<div className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-blue-700 mt-0.5" />
|
|
<span><strong>Elektronik:</strong> Für IT-Systeme</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="benefits" className="mt-0">
|
|
<div className="text-center mb-12">
|
|
<h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
Ihre Vorteile
|
|
</h3>
|
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
Warum eine Sachversicherung für Ihr Unternehmen wichtig ist
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{benefits.map((benefit, index) => {
|
|
const Icon = benefit.icon;
|
|
return (
|
|
<div key={index} className="text-center">
|
|
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Icon className="h-8 w-8 text-blue-700" />
|
|
</div>
|
|
<h4 className="text-lg font-semibold text-gray-900 mb-2">{benefit.title}</h4>
|
|
<p className="text-gray-600 text-sm">{benefit.description}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="process" className="mt-0">
|
|
<div className="text-center mb-12">
|
|
<h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
So läuft die Beratung ab
|
|
</h3>
|
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
Schritt für Schritt zu Ihrer optimalen Sachversicherung
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-4 gap-6">
|
|
{steps.map((step) => (
|
|
<div key={step.step} className="text-center">
|
|
<div className="w-14 h-14 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">
|
|
{step.step}
|
|
</div>
|
|
<h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
|
|
<p className="text-gray-600 text-sm">{step.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="calculator" className="mt-0">
|
|
<div className="text-center">
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Sachwert-Rechner</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
Berechnen Sie Ihre Versicherungssummen und den optimalen Schutz
|
|
</p>
|
|
<Button onClick={() => setActiveTab('form')} className="bg-blue-700 hover:bg-blue-800">
|
|
<Package className="mr-2 h-4 w-4" />
|
|
Rechner starten
|
|
</Button>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="form" className="mt-0">
|
|
<div className="text-center">
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Beratungsanfrage</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
Lassen Sie sich unverbindlich zu Ihrer Sachversicherung beraten
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button className="bg-blue-700 hover:bg-blue-800 px-8 py-3 text-lg font-semibold">
|
|
<Phone className="h-5 w-5 mr-2" />
|
|
Jetzt anrufen
|
|
</Button>
|
|
<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">
|
|
<Mail className="h-5 w-5 mr-2" />
|
|
Kontakt aufnehmen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default GeschaeftskundenSachversicherung;
|