115 lines
4.7 KiB
TypeScript
115 lines
4.7 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Heart, Shield, Plane, ArrowRight } from 'lucide-react';
|
|
import Layout from '@/components/Layout';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import Disclaimer from '@/components/Disclaimer';
|
|
|
|
const Gesundheitsvorsorge = () => {
|
|
const baseUrl = import.meta.env.BASE_URL;
|
|
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
|
|
|
// Add SEO metadata for search
|
|
useEffect(() => {
|
|
document.title = 'Gesundheitsvorsorge - Agentur Mizera';
|
|
const metaDescription = document.querySelector('meta[name="description"]');
|
|
if (metaDescription) {
|
|
metaDescription.setAttribute('content', 'Gesundheitsvorsorge: Umfassende Vorsorge und Prävention für Ihre Gesundheit. Unabhängige Beratung für alle Bereiche der Gesundheitsvorsorge.');
|
|
}
|
|
}, []);
|
|
|
|
const healthTopics = [
|
|
{
|
|
title: 'Private Krankenversicherung',
|
|
href: '/private-krankenversicherung',
|
|
image: assetUrl('head_kranken.jpg')
|
|
},
|
|
{
|
|
title: 'Zahnzusatzversicherung',
|
|
href: '/zahnzusatzversicherung',
|
|
image: assetUrl('Fotolia_45263348_S.jpg')
|
|
},
|
|
{
|
|
title: 'Auslandsreisekrankenversicherung',
|
|
href: '/auslandsreisekrankenversicherung',
|
|
image: assetUrl('iStock-637584740.jpg')
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-white">
|
|
{/* Hero Section wie bei anderen Seiten */}
|
|
<div className="relative">
|
|
<div
|
|
className="h-96 bg-cover bg-center relative"
|
|
style={{ backgroundImage: `url(${assetUrl('iStock-819100588.jpg')})` }}
|
|
>
|
|
<div className="absolute inset-0 bg-gray-900/20" />
|
|
<div className="relative container mx-auto px-4 h-full flex items-center">
|
|
<div className="max-w-3xl">
|
|
<div className="bg-black/40 text-white px-8 py-6 md:px-10 md:py-8 shadow-lg">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
|
Gesundheitsvorsorge
|
|
</h1>
|
|
<p className="text-xl text-white/90 mb-8 max-w-2xl">
|
|
Umfassender Schutz für Ihre Gesundheit - im In- und Ausland
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white">
|
|
Jetzt beraten lassen
|
|
<ArrowRight className="ml-2 w-5 h-5" />
|
|
</Button>
|
|
<Button size="lg" variant="outline" className="bg-white/10 border-white text-white hover:bg-white/20">
|
|
Vergleich starten
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Kacheln */}
|
|
<div className="container mx-auto px-4 py-12">
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
|
Wählen Sie Ihren Versicherungsschutz
|
|
</h2>
|
|
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
|
Wir bieten Ihnen maßgeschneiderte Lösungen für alle Bereiche der Gesundheitsvorsorge
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{healthTopics.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 Gesundheitsvorsorge;
|