395 lines
17 KiB
TypeScript
395 lines
17 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { Link, useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Heart, Building, Truck, Shield, Briefcase, TrendingUp, Clock, DollarSign, Users, Phone, Mail, MapPin } from 'lucide-react';
|
||
import Layout from '@/components/Layout';
|
||
import HeroSlider from '@/components/HeroSlider';
|
||
|
||
const Geschaeftskunden = () => {
|
||
const { t } = useTranslation('geschaeftskunden');
|
||
const navigate = useNavigate();
|
||
const baseUrl = import.meta.env.BASE_URL;
|
||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||
const [focusTopics, setFocusTopics] = useState<
|
||
Array<{
|
||
id: string;
|
||
title: string;
|
||
subtitle?: string;
|
||
href: string;
|
||
image: string;
|
||
links: Array<{ title: string; href: string }>;
|
||
}>
|
||
>([]);
|
||
const [showContactForm, setShowContactForm] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const pool = [
|
||
{
|
||
id: 'flottenversicherung',
|
||
title: t('topics.flotten.title', 'Flottenversicherung'),
|
||
subtitle: t('topics.flotten.subtitle', 'Optimaler Schutz für Ihren Fuhrpark\nSicher und wirtschaftlich.'),
|
||
href: '/geschaeftskunden/flottenversicherung',
|
||
image: assetUrl('Geascheaftskunden/iStock-637230106.jpg'),
|
||
links: [
|
||
{ title: t('topics.flotten.links.management', 'Flottenmanagement'), href: '/geschaeftskunden/flottenversicherung' },
|
||
],
|
||
},
|
||
{
|
||
id: 'betriebsrente',
|
||
title: t('topics.betriebsrente.title', 'Betriebsrente (BAV)'),
|
||
subtitle: 'Altersvorsorge für Ihre Mitarbeiter\nZukunftssichere Lösungen.',
|
||
href: '/geschaeftskunden/betriebsrente',
|
||
image: assetUrl('Geascheaftskunden/iStock-917884956.jpg'),
|
||
links: [
|
||
{ title: 'Mitarbeiter-Vorsorge', href: '/geschaeftskunden/betriebsrente' },
|
||
],
|
||
},
|
||
{
|
||
id: 'betriebskrankenversicherung',
|
||
title: 'Betriebskrankenversicherung',
|
||
subtitle: 'Gesundheitsschutz für Ihre Mitarbeiter\nZukunftssicher investieren.',
|
||
href: '/geschaeftskunden/betriebskrankenversicherung',
|
||
image: assetUrl('Geascheaftskunden/iStock-1134003031.jpg'),
|
||
links: [
|
||
{ title: 'Mitarbeiter schützen', href: '/geschaeftskunden/betriebskrankenversicherung' },
|
||
],
|
||
},
|
||
{
|
||
id: 'vermoegen',
|
||
title: t('focus.items.assets', 'Vermögenssicherung'),
|
||
subtitle: 'Schützen Sie Ihr Unternehmensvermögen\nZukunftssicher handeln.',
|
||
href: '/geschaeftskunden/vermoegen',
|
||
image: assetUrl('Geascheaftskunden/iStock-948602744.jpg'),
|
||
links: [
|
||
{ title: 'Unternehmensvermögen', href: '/geschaeftskunden/vermoegen' },
|
||
],
|
||
},
|
||
{
|
||
id: 'gebaeudeversicherung',
|
||
title: 'Gebäudeversicherung',
|
||
subtitle: 'Schutz für Ihre Unternehmensgebäude\nSicher und umfassend.',
|
||
href: '/geschaeftskunden/gebaeudeversicherung',
|
||
image: assetUrl('Geascheaftskunden/iStock-115948634.jpg'),
|
||
links: [
|
||
{ title: 'Gebäude schützen', href: '/geschaeftskunden/gebaeudeversicherung' },
|
||
],
|
||
},
|
||
{
|
||
id: 'betriebshaftpflicht',
|
||
title: 'Betriebshaftpflicht',
|
||
subtitle: 'Schutz vor Haftungsansprüchen\nSicher für Ihr Business.',
|
||
href: '/geschaeftskunden/betriebshaftpflicht',
|
||
image: assetUrl('Geascheaftskunden/Fotolia_3984526_XS.jpg'),
|
||
links: [
|
||
{ title: 'Haftpflicht schützen', href: '/geschaeftskunden/betriebshaftpflicht' },
|
||
],
|
||
},
|
||
{
|
||
id: 'betriebsunterbrechung',
|
||
title: 'Betriebsunterbrechung',
|
||
subtitle: 'Absicherung bei Stillstand\nFinanzielle Sicherheit.',
|
||
href: '/geschaeftskunden/betriebsunterbrechung',
|
||
image: assetUrl('Geascheaftskunden/iStock-940251778.jpg'),
|
||
links: [
|
||
{ title: 'Stillstand absichern', href: '/geschaeftskunden/betriebsunterbrechung' },
|
||
],
|
||
},
|
||
{
|
||
id: 'sachversicherung',
|
||
title: t('focus.items.property', 'Sachversicherung'),
|
||
subtitle: 'Comprehensive protection for your business assets\nInsure what matters most.',
|
||
href: '/geschaeftskunden/sachversicherung',
|
||
image: assetUrl('iStock-943842590.jpg'),
|
||
links: [
|
||
{ title: 'Business property', href: '/geschaeftskunden/sachversicherung' },
|
||
],
|
||
},
|
||
{
|
||
id: 'risikoschutz',
|
||
title: t('focus.items.risk', 'Risikoschutz'),
|
||
subtitle: 'Umfassender Schutz für alle Unternehmensrisiken\nSicher in die Zukunft.',
|
||
href: '/geschaeftskunden/risikoschutz',
|
||
image: assetUrl('Geascheaftskunden/iStock-694835984.jpg'),
|
||
links: [
|
||
{ title: 'Risikoanalyse', href: '/geschaeftskunden/risikoschutz' },
|
||
],
|
||
},
|
||
{
|
||
id: 'rechtsschutz',
|
||
title: 'Rechtsschutz',
|
||
subtitle: 'Juristische Absicherung für Ihr Unternehmen\nRechtssicherheit gewähren.',
|
||
href: '/geschaeftskunden/rechtsschutz',
|
||
image: assetUrl('Geascheaftskunden/iStock-1079882856.jpg'),
|
||
links: [
|
||
{ title: 'Unternehmens-Rechtsschutz', href: '/geschaeftskunden/rechtsschutz' },
|
||
],
|
||
},
|
||
{
|
||
id: 'cyber',
|
||
title: 'Cyber-Versicherung',
|
||
subtitle: 'Schutz vor digitalen Risiken\nIT-Sicherheit für Ihr Business.',
|
||
href: '/geschaeftskunden/cyber',
|
||
image: assetUrl('Geascheaftskunden/iStock-922758092.jpg'),
|
||
links: [
|
||
{ title: 'Details', href: '/geschaeftskunden/cyber' },
|
||
{ title: 'Cyber-Schutz', href: '/geschaeftskunden/cyber' },
|
||
],
|
||
},
|
||
{
|
||
id: 'umwelt',
|
||
title: 'Umwelthaftpflicht',
|
||
subtitle: 'Umweltrechtliche Absicherung\nNachhaltig und sicher.',
|
||
href: '/geschaeftskunden/umwelt',
|
||
image: assetUrl('Geascheaftskunden/iStock-1039705312.jpg'),
|
||
links: [
|
||
{ title: 'Umweltrisiken', href: '/geschaeftskunden/umwelt' },
|
||
{ title: 'Umwelt-Schutz', href: '/geschaeftskunden/umwelt' },
|
||
],
|
||
},
|
||
];
|
||
|
||
setFocusTopics(
|
||
[...pool].sort((a, b) => a.title.localeCompare(b.title, 'de', { sensitivity: 'base' }))
|
||
);
|
||
}, [t]);
|
||
|
||
return (
|
||
<Layout>
|
||
<HeroSlider
|
||
slides={[
|
||
{
|
||
id: 'geschaeftskunden-1',
|
||
kicker: t('hero.kicker', 'Versicherungen für Geschäftskunden'),
|
||
title: t('hero.title', 'Sicherheit für Ihr Unternehmen.'),
|
||
subtitle: t(
|
||
'hero.subtitle',
|
||
'Professionelle Versicherungsberatung für Unternehmen und Selbstständige – individuell, transparent und zuverlässig.'
|
||
),
|
||
imageUrl: assetUrl('iStock-943842590.jpg'),
|
||
imagePosition: 'center',
|
||
ctas: [
|
||
{ label: t('hero.primaryCta', 'Jetzt beraten lassen'), href: '/contact' },
|
||
{ label: t('hero.secondaryCta', 'Alle Leistungen'), href: '/leistungen' },
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
|
||
<section className="py-16 bg-gradient-to-br from-gray-50 to-blue-50">
|
||
<div className="container mx-auto px-4">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||
Themen für Geschäftskunden
|
||
</h2>
|
||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
Die wichtigsten Lösungen für Ihr Unternehmen
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||
{focusTopics.map((item) => (
|
||
<div
|
||
key={`${item.id}-${item.title}`}
|
||
className="group cursor-pointer transform transition-all duration-300 hover:scale-[1.04]"
|
||
role="link"
|
||
tabIndex={0}
|
||
onClick={() => navigate(item.href)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') navigate(item.href);
|
||
}}
|
||
>
|
||
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
||
<div
|
||
className="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 group-hover:scale-[1.08]"
|
||
style={{ backgroundImage: `url(${item.image})` }}
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
||
|
||
<div className="absolute bottom-0 left-0 right-0 p-4 text-white">
|
||
<div className="text-xl font-bold">{item.title}</div>
|
||
{item.subtitle ? (
|
||
<div className="mt-1 text-sm text-white/90 whitespace-pre-line">{item.subtitle}</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 p-4 bg-white rounded-lg shadow-md">
|
||
<div className="space-y-2">
|
||
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-3">Details:</div>
|
||
<div className="grid grid-cols-1 gap-2">
|
||
{item.links.map((link) => (
|
||
<Link
|
||
key={`${item.id}-${link.href}-${link.title}`}
|
||
to={link.href}
|
||
className="text-blue-700 hover:text-blue-900 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
if (link.href.includes('#')) {
|
||
e.preventDefault();
|
||
navigate(link.href);
|
||
}
|
||
}}
|
||
>
|
||
<span className="w-2 h-2 bg-blue-700 rounded-full mr-2 group-hover:bg-blue-900 transition-colors" />
|
||
{link.title}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Benefits Section */}
|
||
<section className="py-16 bg-white">
|
||
<div className="container mx-auto px-4">
|
||
<h2 className="text-3xl font-bold text-center mb-12">
|
||
Ihre Vorteile als Geschäftskunde
|
||
</h2>
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div className="text-center">
|
||
<TrendingUp className="w-16 h-16 text-blue-600 mx-auto mb-4" />
|
||
<h3 className="text-xl font-semibold mb-3">Wettbewerbsvorteil</h3>
|
||
<p className="text-gray-600">Stärken Sie Ihre Marktposition durch optimierten Versicherungsschutz</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<Clock className="w-16 h-16 text-blue-600 mx-auto mb-4" />
|
||
<h3 className="text-xl font-semibold mb-3">Zeitersparnis</h3>
|
||
<p className="text-gray-600">Effiziente Beratung und Verwaltung aller Versicherungsanliegen</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<DollarSign className="w-16 h-16 text-blue-600 mx-auto mb-4" />
|
||
<h3 className="text-xl font-semibold mb-3">Kostenoptimierung</h3>
|
||
<p className="text-gray-600">Maßgeschneiderte Lösungen zu besten Konditionen für Ihr Unternehmen</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<Users className="w-16 h-16 text-blue-600 mx-auto mb-4" />
|
||
<h3 className="text-xl font-semibold mb-3">Persönliche Beratung</h3>
|
||
<p className="text-gray-600">Individuelle Betreuung durch erfahrene Versicherungsexperten</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Geschäftskunden Kontakt Section */}
|
||
<div className="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-10 text-center text-white shadow-2xl max-w-6xl mx-auto mb-12">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||
Kontaktieren Sie uns
|
||
</h2>
|
||
<p className="text-lg text-blue-100 mb-8 max-w-2xl mx-auto">
|
||
Lassen Sie sich unverbindlich zu Ihren Geschäftskunden-Lösungen beraten.
|
||
</p>
|
||
|
||
{/* Buttons - immer sichtbar */}
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button
|
||
className="bg-white text-blue-600 hover:bg-gray-100 px-8 py-3 text-lg font-semibold shadow-lg"
|
||
onClick={() => window.location.href = 'tel:01719864053'}
|
||
>
|
||
<Phone className="h-5 w-5 mr-2" />
|
||
Jetzt anrufen
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
className="border-white text-white hover:bg-white hover:text-blue-600 px-8 py-3 text-lg font-semibold"
|
||
onClick={() => setShowContactForm(!showContactForm)}
|
||
>
|
||
<Mail className="h-5 w-5 mr-2" />
|
||
Angebot anfordern
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Kontaktformular - erst sichtbar beim Klick auf "Angebot anfordern" */}
|
||
{showContactForm && (
|
||
<div className="mt-8 bg-white/10 backdrop-blur-sm rounded-xl p-6 max-w-2xl mx-auto animate-fade-in">
|
||
<h3 className="text-2xl font-bold mb-4">Angebot anfordern</h3>
|
||
<form className="space-y-4">
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2">Firma*</label>
|
||
<input
|
||
type="text"
|
||
className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||
placeholder="Ihr Firmenname"
|
||
required
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2">Name*</label>
|
||
<input
|
||
type="text"
|
||
className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||
placeholder="Ihr Name"
|
||
required
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2">E-Mail*</label>
|
||
<input
|
||
type="email"
|
||
className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||
placeholder="ihre@email.de"
|
||
required
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2">Telefon</label>
|
||
<input
|
||
type="tel"
|
||
className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
|
||
placeholder="0123 456789"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2">Interessierte Leistungen</label>
|
||
<select className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-white/50">
|
||
<option value="">Bitte wählen...</option>
|
||
<option value="flottenversicherung">Flottenversicherung</option>
|
||
<option value="vermoegenssicherung">Vermögenssicherung</option>
|
||
<option value="sachversicherung">Sachversicherung</option>
|
||
<option value="risikoschutz">Risikoschutz</option>
|
||
<option value="betriebshaftpflicht">Betriebshaftpflicht</option>
|
||
<option value="betriebsunterbrechung">Betriebsunterbrechung</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-2">Nachricht</label>
|
||
<textarea
|
||
className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50 h-32 resize-none"
|
||
placeholder="Ihre Nachricht an uns..."
|
||
></textarea>
|
||
</div>
|
||
<div className="flex gap-4">
|
||
<Button
|
||
type="submit"
|
||
className="bg-white text-blue-600 hover:bg-gray-100 px-6 py-2 font-semibold"
|
||
>
|
||
Anfrage senden
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
className="border-white text-white hover:bg-white hover:text-blue-600 px-6 py-2 font-semibold"
|
||
onClick={() => setShowContactForm(false)}
|
||
>
|
||
Abbrechen
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default Geschaeftskunden;
|