96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Shield, Heart, Car, Home, Briefcase, Users } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import Layout from '@/components/Layout';
|
|
import { Card } from '@/components/ui/card';
|
|
import Disclaimer from '@/components/Disclaimer';
|
|
|
|
const Risikoschutz = () => {
|
|
const { t } = useTranslation('risikoschutz');
|
|
const baseUrl = import.meta.env.BASE_URL;
|
|
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
|
|
|
const topics = [
|
|
{
|
|
title: t('topics.unfall', 'Unfallversicherung'),
|
|
href: '/unfall',
|
|
image: assetUrl('iStock-970876204.jpg')
|
|
},
|
|
{
|
|
title: t('topics.bu', 'Berufsunfähigkeitsversicherung'),
|
|
href: '/berufsunfaehigkeitsversicherung',
|
|
image: assetUrl('iStock-957363908.jpg')
|
|
},
|
|
{
|
|
title: t('topics.haftpflicht', 'Haftpflichtversicherung'),
|
|
href: '/haftpflichtversicherung',
|
|
image: assetUrl('iStock-943842590.jpg')
|
|
},
|
|
{
|
|
title: t('topics.rechtsschutz', 'Rechtsschutzversicherung'),
|
|
href: '/rechtsschutzversicherung',
|
|
image: assetUrl('Fotolia_8654128_XS.jpg')
|
|
},
|
|
{
|
|
title: t('topics.tierhalter', 'Tierhalterhaftpflicht'),
|
|
href: '/tierhalterhaftpflicht',
|
|
image: assetUrl('iStock-495809266.jpg')
|
|
},
|
|
{
|
|
title: t('topics.dread', 'Dread-Disease Versicherung'),
|
|
href: '/dread-disease-versicherung',
|
|
image: assetUrl('Fotolia_67327775_XS.jpg')
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-white">
|
|
{/* Header */}
|
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 py-16">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-6">
|
|
{t('hero.title', 'Risikoschutz')}
|
|
</h1>
|
|
<p className="text-xl text-gray-600 mb-8">
|
|
{t('hero.subtitle', 'Umfassender Schutz für Sie und Ihre Familie bei unvorhergesehenen Ereignissen')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Kacheln */}
|
|
<div className="container mx-auto px-4 py-12">
|
|
<div className="max-w-6xl mx-auto">
|
|
<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-110"
|
|
/>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<Disclaimer />
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default Risikoschutz;
|