525 lines
29 KiB
TypeScript
525 lines
29 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import {
|
||
CheckCircle,
|
||
ClipboardList,
|
||
Download,
|
||
HeartPulse,
|
||
Hospital,
|
||
Mail,
|
||
Phone,
|
||
Shield,
|
||
FileText,
|
||
Calculator,
|
||
Users,
|
||
Star,
|
||
Home,
|
||
Activity,
|
||
Baby,
|
||
Heart,
|
||
FileCheck
|
||
} from 'lucide-react';
|
||
import Layout from '@/components/Layout';
|
||
import GeneralNotice from '@/components/GeneralNotice';
|
||
import HeroSlider from '@/components/HeroSlider';
|
||
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 TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||
|
||
const TAB_OVERVIEW = 'overview';
|
||
const TAB_DETAILS = 'details';
|
||
const TAB_CALCULATOR = 'calculator';
|
||
const TAB_FORM = 'form';
|
||
const TAB_CATALOG = 'catalog';
|
||
const TAB_BROCHURE = 'brochure';
|
||
|
||
const KinderGesundheit = () => {
|
||
const navigate = useNavigate();
|
||
const location = useLocation();
|
||
const { t } = useTranslation('kinder_gesundheit');
|
||
|
||
const baseUrl = import.meta.env.BASE_URL;
|
||
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||
|
||
const [activeTab, setActiveTab] = useState<string>(TAB_OVERVIEW);
|
||
|
||
useEffect(() => {
|
||
const hash = (location.hash || '').replace('#', '').toLowerCase();
|
||
if (hash === 'zahn') {
|
||
navigate('/familien-kinder/gesundheit/zahn', { replace: true });
|
||
return;
|
||
}
|
||
|
||
if (hash === TAB_DETAILS) setActiveTab(TAB_DETAILS);
|
||
else if (hash === TAB_CALCULATOR) setActiveTab(TAB_CALCULATOR);
|
||
else if (hash === TAB_FORM) setActiveTab(TAB_FORM);
|
||
else if (hash === TAB_CATALOG) setActiveTab(TAB_CATALOG);
|
||
else if (hash === TAB_BROCHURE) setActiveTab(TAB_BROCHURE);
|
||
else setActiveTab(TAB_OVERVIEW);
|
||
|
||
if (!hash) return;
|
||
|
||
window.setTimeout(() => {
|
||
const tabSection = document.getElementById('tab-section');
|
||
if (tabSection) {
|
||
tabSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
}, 100);
|
||
}, [location.hash, navigate]);
|
||
|
||
const onTabChange = (tab: string) => {
|
||
setActiveTab(tab);
|
||
if (tab === TAB_OVERVIEW) {
|
||
navigate(location.pathname, { replace: true });
|
||
return;
|
||
}
|
||
navigate(`${location.pathname}#${tab}`, { replace: true });
|
||
};
|
||
|
||
const phoneLabel = t('form.phoneNumber', 'Telefon: 0171 / 9864053');
|
||
const WHATSAPP_URL = 'https://wa.me/491719864053';
|
||
const EMAIL = 'info@finanzen-mizera.de';
|
||
|
||
return (
|
||
<Layout>
|
||
<div className="min-h-screen bg-gray-50">
|
||
<HeroSlider
|
||
slides={[
|
||
{
|
||
id: 'familien-kinder-gesundheit-1',
|
||
kicker: t('hero.kicker', 'Gesundheit'),
|
||
title: t('hero.title', 'Nur das Beste für Ihr Kind?'),
|
||
subtitle: t('hero.subtitle', 'Eine sehr gesunde Entscheidung.'),
|
||
imageUrl: assetUrl('Fotolia_59162559_S.jpg'),
|
||
imagePosition: 'center',
|
||
ctas: [
|
||
{ label: t('hero.cta1', 'Jetzt beraten lassen'), href: '/contact#contact' },
|
||
{ label: t('hero.cta2', 'Zur Übersicht'), href: '/familien-kinder' },
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
|
||
<div className="container mx-auto px-4 md:px-6 py-8">
|
||
<div className="max-w-screen-2xl mx-auto">
|
||
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
||
<Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section">
|
||
<TabsList className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
||
<TabsTrigger
|
||
value={TAB_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"
|
||
>
|
||
<HeartPulse className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.overview', 'Übersicht')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value={TAB_DETAILS}
|
||
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" />
|
||
{t('tabs.details', 'Details')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value={TAB_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" />
|
||
{t('tabs.calculator', 'Rechner')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value={TAB_FORM}
|
||
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" />
|
||
{t('tabs.form', 'Anfrage')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value={TAB_CATALOG}
|
||
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"
|
||
>
|
||
<FileCheck className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.catalog', 'Ratgeber')}
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value={TAB_BROCHURE}
|
||
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"
|
||
>
|
||
<Download className="w-4 h-4 mr-1.5" />
|
||
{t('tabs.brochure', 'PDF')}
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<div className="p-4 md:p-6">
|
||
<TabsContent value={TAB_OVERVIEW} className="mt-0">
|
||
<TwoColumnTab
|
||
className="gap-8 items-center"
|
||
left={
|
||
<>
|
||
<div className="inline-flex items-center gap-2 rounded-full bg-green-50 border border-green-200 px-3 py-1 text-sm text-green-800 mb-4">
|
||
<HeartPulse className="w-4 h-4" />
|
||
<span>{t('overview.badge', 'Nur das Beste für Ihr Kind?')}</span>
|
||
</div>
|
||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||
{t('overview.title', 'Nur das Beste für Ihr Kind?')}
|
||
<span className="block text-green-700">{t('overview.subtitle', 'Eine sehr gesunde Entscheidung.')}</span>
|
||
</h1>
|
||
<p className="mt-4 text-gray-600 text-lg">{t('overview.description')}</p>
|
||
|
||
<div className="mt-6 flex flex-col sm:flex-row gap-3">
|
||
<Button onClick={() => onTabChange(TAB_FORM)} className="bg-green-700 hover:bg-green-800">
|
||
{t('overview.cta1', 'Angebot anfordern')}
|
||
</Button>
|
||
<Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
|
||
{t('overview.cta2', 'Beratung')}
|
||
</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-green-700" />
|
||
<div className="text-sm">
|
||
<div className="font-semibold text-gray-900">{t('overview.feature1Title', 'Planbar')}</div>
|
||
<div className="text-gray-600">{t('overview.feature1Desc', 'bessere Leistungen')}</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-3">
|
||
<ClipboardList className="w-5 h-5 text-green-700" />
|
||
<div className="text-sm">
|
||
<div className="font-semibold text-gray-900">{t('overview.feature2Title', 'Flexibel')}</div>
|
||
<div className="text-gray-600">{t('overview.feature2Desc', 'Bausteine wählen')}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
}
|
||
right={
|
||
<div className="relative">
|
||
<div className="absolute inset-0 bg-gradient-to-tr from-green-100 to-white rounded-2xl" />
|
||
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||
<img
|
||
src={assetUrl('Fotolia_59162559_S.jpg')}
|
||
alt="Kinder Gesundheit"
|
||
className="w-full h-[240px] 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">
|
||
<HeartPulse className="w-4 h-4" />
|
||
<span>{t('overview.imageCaption', 'Zahn, Brille, Klinik')}</span>
|
||
</div>
|
||
<div className="mt-2 text-sm text-gray-600">{t('overview.imageSubtext')}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_BROCHURE} className="mt-0">
|
||
<div id={TAB_BROCHURE} />
|
||
<TwoColumnTab
|
||
left={
|
||
<>
|
||
<h3 className="text-2xl font-bold text-gray-900">{t('brochure.title', 'Kundenbroschüre (PDF)')}</h3>
|
||
<p className="mt-2 text-gray-600">{t('brochure.subtitle', 'PDF zum Download – auf Anfrage.')}</p>
|
||
|
||
<Card className="mt-6 border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('brochure.cardTitle', 'Broschüre')}</CardTitle>
|
||
<CardDescription>{t('brochure.cardDescription', 'Gerne senden wir dir die passende Broschüre zu.')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Link to="/contact" className="inline-flex w-full">
|
||
<Button className="w-full bg-green-700 hover:bg-green-800">{t('brochure.cta', 'Broschüre anfragen')}</Button>
|
||
</Link>
|
||
</CardContent>
|
||
</Card>
|
||
</>
|
||
}
|
||
right={
|
||
<RightImageCard src={assetUrl('Fotolia_59162559_S.jpg')} alt="Kundenbroschüre">
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('brochure.tipTitle', 'Tipp')}</CardTitle>
|
||
<CardDescription>{t('brochure.tipDescription', 'Wir helfen bei der Auswahl der richtigen Leistungen.')}</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
</RightImageCard>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_DETAILS} className="mt-0">
|
||
<div id={TAB_DETAILS} />
|
||
<div className="mb-6">
|
||
<div className="inline-flex items-center gap-2 rounded-full bg-green-50 border border-green-200 px-3 py-1 text-sm text-green-800 mb-4">
|
||
<Hospital className="w-4 h-4" />
|
||
<span>{t('details.kicker')}</span>
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-gray-900">{t('details.title')}</h3>
|
||
<p className="mt-2 text-gray-600">{t('details.description')}</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg flex items-center gap-2">
|
||
<Shield className="w-5 h-5 text-green-700" />
|
||
{t('details.leistung.title', 'Leistung')}
|
||
</CardTitle>
|
||
<CardDescription>{t('details.leistung.badge', 'clinic+')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm">
|
||
<div className="space-y-2">
|
||
{(t('details.leistung.rows', { returnObjects: true }) as unknown as string[]).map((row) => (
|
||
<div key={row} className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
|
||
<span className="text-gray-900">{row}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<RightImageCard src={assetUrl('iStock-819100588.jpg')} alt="clinic+">
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('details.ueberblick.title')}</CardTitle>
|
||
<CardDescription>{t('details.ueberblick.badge')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm">
|
||
<div className="space-y-2">
|
||
{(t('details.ueberblick.items', { returnObjects: true }) as unknown as string[]).map((row) => (
|
||
<div key={row} className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
|
||
<span className="text-gray-900">{row}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="mt-4 text-xs text-gray-500">{t('details.ueberblick.disclaimer')}</div>
|
||
</CardContent>
|
||
</Card>
|
||
</RightImageCard>
|
||
|
||
<div className="space-y-6">
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('details.leistungsfall.title')}</CardTitle>
|
||
<CardDescription>{t('details.leistungsfall.description')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm">
|
||
<div className="rounded-lg border border-green-200 bg-green-50 p-4">
|
||
<div className="text-sm text-green-900 font-semibold">
|
||
{t('details.leistungsfall.priceSticker.prefix')}
|
||
</div>
|
||
<div className="mt-1 text-sm text-green-900">
|
||
<span className="font-bold">{t('details.leistungsfall.priceSticker.price')}</span>
|
||
<span className="ml-1">{t('details.leistungsfall.priceSticker.suffix')}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4 space-y-2">
|
||
{(t('details.leistungsfall.rows', { returnObjects: true }) as unknown as Array<{ label: string; value: string; strong?: boolean }>).map(
|
||
(row) => (
|
||
<div key={`${row.label}-${row.value}`} className="flex items-start justify-between gap-3">
|
||
<div className={row.strong ? 'font-semibold text-gray-900' : 'text-gray-700'}>{row.label}</div>
|
||
<div className={row.strong ? 'font-semibold text-gray-900' : 'text-gray-700'}>{row.value}</div>
|
||
</div>
|
||
),
|
||
)}
|
||
</div>
|
||
|
||
<div className="mt-4 rounded-lg border border-gray-200 bg-white p-4">
|
||
<div className="text-sm text-gray-900 font-semibold">{t('details.leistungsfall.clinicPlusTitle')}</div>
|
||
<div className="mt-2 flex items-center justify-between gap-3">
|
||
<div className="text-sm text-gray-700">{t('details.leistungsfall.clinicPlusLabel')}</div>
|
||
<div className="text-sm font-bold text-green-800">{t('details.leistungsfall.clinicPlusValue')}</div>
|
||
</div>
|
||
<Button
|
||
onClick={() => onTabChange(TAB_FORM)}
|
||
className="mt-4 w-full bg-green-700 hover:bg-green-800"
|
||
>
|
||
{t('details.leistungsfall.cta')}
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('details.hinweis.title')}</CardTitle>
|
||
<CardDescription>{t('details.hinweis.subtitle')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm text-gray-700">{t('details.hinweis.text')}</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_CALCULATOR} className="mt-0">
|
||
<div id={TAB_CALCULATOR} />
|
||
<TwoColumnTab
|
||
left={
|
||
<>
|
||
<h3 className="text-2xl font-bold text-gray-900">{t('calculator.title')}</h3>
|
||
<p className="mt-2 text-gray-600">{t('calculator.description')}</p>
|
||
|
||
<Card className="mt-6 border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('calculator.example')}</CardTitle>
|
||
<CardDescription>{t('calculator.exampleDescription')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="rounded-lg border border-green-200 bg-green-50 p-4">
|
||
<div className="text-sm text-green-900 font-semibold">{t('calculator.exampleValueDescription')}</div>
|
||
<div className="mt-1 text-sm text-green-900">
|
||
<span className="font-bold">{t('calculator.exampleValue')}</span>
|
||
</div>
|
||
<div className="text-xs text-green-900/80 mt-2">{t('calculator.exampleDisclaimer')}</div>
|
||
</div>
|
||
|
||
<Button onClick={() => onTabChange(TAB_FORM)} className="mt-4 w-full bg-green-700 hover:bg-green-800">
|
||
{t('calculator.cta', 'Poproś o ofertę')}
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</>
|
||
}
|
||
right={
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('calculator.requirements')}</CardTitle>
|
||
<CardDescription>{t('calculator.requirementsDescription')}</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-green-700 mt-0.5" />
|
||
<span>{t('calculator.requirement1')}</span>
|
||
</div>
|
||
<div className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
|
||
<span>{t('calculator.requirement2')}</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_FORM} className="mt-0">
|
||
<div id={TAB_FORM} />
|
||
<TwoColumnTab
|
||
left={
|
||
<>
|
||
<h3 className="text-2xl font-bold text-gray-900">{t('form.title')}</h3>
|
||
<p className="mt-2 text-gray-600">{t('form.description')}</p>
|
||
|
||
<div className="mt-4 flex flex-col sm:flex-row gap-3">
|
||
<Link to="/contact" className="inline-flex">
|
||
<Button className="bg-green-700 hover:bg-green-800">{t('hero.cta1', 'Jetzt beraten lassen')}</Button>
|
||
</Link>
|
||
<Button variant="outline" className="gap-2" onClick={() => window.print()}>
|
||
<Download className="w-4 h-4" />
|
||
{t('catalog.download', 'Als PDF speichern')}
|
||
</Button>
|
||
</div>
|
||
</>
|
||
}
|
||
right={
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('form.directContact')}</CardTitle>
|
||
<CardDescription>{t('form.directContactDescription')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-3 text-sm text-gray-700">
|
||
<div className="flex items-center gap-2">
|
||
<Phone className="w-4 h-4 text-green-700" />
|
||
<span>
|
||
{phoneLabel}{' '}
|
||
<a
|
||
href={WHATSAPP_URL}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="underline text-green-700 hover:text-green-800"
|
||
>
|
||
(auch WhatsApp)
|
||
</a>
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Mail className="w-4 h-4 text-green-700" />
|
||
<a
|
||
href={`mailto:${EMAIL}`}
|
||
className="text-gray-700 hover:text-green-800 underline"
|
||
>
|
||
{t('form.email', 'E-Mail: info@finanzen-mizera.de')}
|
||
</a>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_CATALOG} className="mt-0">
|
||
<div id={TAB_CATALOG} />
|
||
<TwoColumnTab
|
||
left={
|
||
<>
|
||
<h3 className="text-2xl font-bold text-gray-900">{t('catalog.title')}</h3>
|
||
<p className="mt-2 text-gray-600">{t('catalog.description')}</p>
|
||
|
||
<Card className="mt-6 border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('catalog.checklist')}</CardTitle>
|
||
<CardDescription>{t('catalog.checklistDescription')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm">
|
||
<div className="space-y-2">
|
||
{[
|
||
'Leistungsumfang (KFO, Prophylaxe, Wahlleistungen)',
|
||
'Wartezeiten & Summenbegrenzungen',
|
||
'Erstattungssätze & Bedingungen',
|
||
'Beitragsentwicklung im Blick behalten',
|
||
].map((row) => (
|
||
<div key={row} className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
|
||
<span className="text-gray-900">{row}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</>
|
||
}
|
||
right={
|
||
<RightImageCard src={assetUrl('Fotolia_59162559_S.jpg')} alt="Ratgeber">
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Frage?</CardTitle>
|
||
<CardDescription>Wir beraten persönlich.</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
</RightImageCard>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<GeneralNotice />
|
||
</div>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default KinderGesundheit;
|