241 lines
10 KiB
TypeScript
241 lines
10 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import Layout from '@/components/Layout';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import HeroSlider from '@/components/HeroSlider';
|
|
import { Shield, Clock, Users, DollarSign, TrendingUp, MapPin, Phone } from 'lucide-react';
|
|
import ChatbotHint from '@/components/ChatbotHint';
|
|
|
|
const Sachversicherung = () => {
|
|
const { t } = useTranslation('sachversicherung');
|
|
const baseUrl = import.meta.env.BASE_URL;
|
|
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
|
|
|
const topics = [
|
|
{
|
|
title: t('topics.hausrat', 'Hausratversicherung'),
|
|
href: '/hausratversicherung',
|
|
image: assetUrl('iStock-482694353.jpg')
|
|
},
|
|
{
|
|
title: t('topics.wohngebaeude', 'Wohngebäudeversicherung'),
|
|
href: '/wohngebaeudeversicherung',
|
|
image: assetUrl('iStock-928087944.jpg')
|
|
},
|
|
{
|
|
title: t('topics.haftpflicht', 'Haftpflichtversicherung'),
|
|
href: '/haftpflichtversicherung',
|
|
image: assetUrl('iStock-638637534.jpg')
|
|
},
|
|
{
|
|
title: t('topics.tiere', 'Tierversicherung'),
|
|
href: '/tierversicherung',
|
|
image: assetUrl('Kunden Fotos/Facebook- i_jasinski.png')
|
|
},
|
|
{
|
|
title: t('topics.rechtsschutz', 'Rechtsschutzversicherung'),
|
|
href: '/rechtsschutzversicherung',
|
|
image: assetUrl('iStock-1067720324.jpg')
|
|
},
|
|
{
|
|
title: t('topics.elektro', 'Elektrogeräteversicherung'),
|
|
href: '/elektrogeraeteversicherung',
|
|
image: assetUrl('Fotolia_8654128_XS.jpg')
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Layout>
|
|
<HeroSlider
|
|
persistKey="sachversicherung"
|
|
slides={[
|
|
{
|
|
id: 'sachversicherung-1',
|
|
kicker: t('hero.kicker', 'Haus & Wohnung'),
|
|
title: t('hero.title', 'Sachversicherung'),
|
|
subtitle: t('hero.subtitle', 'Schutz für Ihr Hab und Gut - von Hausrat bis Immobilie'),
|
|
imageUrl: assetUrl('iStock-897545934.jpg'),
|
|
imagePosition: 'center 70%',
|
|
ctas: [
|
|
{ label: t('hero.primaryCta', 'Beratung'), href: '/contact' },
|
|
{ label: t('hero.secondaryCta', 'Leistungen'), href: '/leistungen' },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<div className="bg-gray-50">
|
|
|
|
{/* Kacheln */}
|
|
<div className="container mx-auto px-4 py-12">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-10">
|
|
<div className="text-3xl md:text-4xl font-bold text-gray-900">
|
|
{t('tiles.title', 'Unsere Sachversicherungen')}
|
|
</div>
|
|
<div className="mt-3 text-gray-600">
|
|
{t('tiles.subtitle', 'Wählen Sie den passenden Schutz für Haus, Wohnung und Alltag.')}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{topics.map((topic, index) => (
|
|
<Link key={index} to={topic.href}>
|
|
<Card className="group hover:shadow-lg transition-shadow duration-300 cursor-pointer overflow-hidden">
|
|
<div className="relative h-44 md:h-50 overflow-hidden rounded-xl shadow-lg group-hover:shadow-2xl transition-shadow duration-300">
|
|
<img
|
|
src={topic.image}
|
|
alt={topic.title}
|
|
className="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-[1.081]"
|
|
/>
|
|
<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">{topic.title}</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-14">
|
|
<div className="text-center">
|
|
<div className="text-3xl md:text-4xl font-bold text-gray-900">
|
|
{t('benefits.title', 'Ihre Vorteile als Privatkunde')}
|
|
</div>
|
|
<div className="mt-3 text-gray-600">
|
|
{t(
|
|
'benefits.subtitle',
|
|
'Wir bieten Ihnen maßgeschneiderte Lösungen für Ihre persönliche Absicherung'
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 rounded-2xl border bg-gradient-to-r from-blue-50 to-indigo-50 shadow-sm">
|
|
<div className="grid gap-6 p-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div className="flex gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
|
<Shield className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-gray-900">
|
|
{t('benefits.items.protection.title', 'Umfassender Schutz')}
|
|
</div>
|
|
<div className="text-sm text-gray-600">
|
|
{t('benefits.items.protection.text', 'Für alle Lebensbereiche')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
|
<Users className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-gray-900">
|
|
{t('benefits.items.family.title', 'Familienfreundlich')}
|
|
</div>
|
|
<div className="text-sm text-gray-600">
|
|
{t('benefits.items.family.text', 'Optimale Lösungen für Familien')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
|
<TrendingUp className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-gray-900">
|
|
{t('benefits.items.optimization.title', 'Vertragsoptimierung')}
|
|
</div>
|
|
<div className="text-sm text-gray-600">
|
|
{t('benefits.items.optimization.text', 'Bestehende Verträge verbessern')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
|
<Clock className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-gray-900">
|
|
{t('benefits.items.fasthelp.title', 'Schnelle Hilfe')}
|
|
</div>
|
|
<div className="text-sm text-gray-600">
|
|
{t('benefits.items.fasthelp.text', 'Rasche Schadenabwicklung')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
|
<DollarSign className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-gray-900">
|
|
{t('benefits.items.costs.title', 'Transparente Kosten')}
|
|
</div>
|
|
<div className="text-sm text-gray-600">
|
|
{t('benefits.items.costs.text', 'Keine versteckten Gebühren')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-600 text-white">
|
|
<MapPin className="h-6 w-6" />
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-gray-900">
|
|
{t('benefits.items.local.title', 'Persönliche Betreuung')}
|
|
</div>
|
|
<div className="text-sm text-gray-600">
|
|
{t('benefits.items.local.text', 'Vor Ort in Ihrer Nähe')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-10 rounded-2xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-10 text-white shadow-lg">
|
|
<div className="mx-auto max-w-4xl text-center">
|
|
<div className="text-3xl md:text-4xl font-bold">
|
|
{t('cta.title', 'Kontaktieren Sie uns')}
|
|
</div>
|
|
<div className="mt-3 text-white/90">
|
|
{t(
|
|
'cta.subtitle',
|
|
'Lassen Sie sich unverbindlich zu Ihren Privatkunden-Lösungen beraten.'
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
|
|
<Button asChild variant="secondary" className="w-full sm:w-auto">
|
|
<a href="tel:+49">
|
|
<span className="inline-flex items-center gap-2">
|
|
<Phone className="h-4 w-4" />
|
|
{t('cta.call', 'Jetzt anrufen')}
|
|
</span>
|
|
</a>
|
|
</Button>
|
|
|
|
<Button asChild className="w-full sm:w-auto bg-white text-blue-700 hover:bg-white/90">
|
|
<Link to="/contact">{t('cta.contact', 'Kontaktformular')}</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default Sachversicherung;
|