555 lines
31 KiB
TypeScript
555 lines
31 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
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';
|
||
import { CheckCircle, Download, Mail, Phone, Shield, Home, FileText, Calculator, Star, Search } from 'lucide-react';
|
||
|
||
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 BOLD_BULLET = 'Kieferorthopädie für Kinder und Jugendliche (bis zu 5.000 Euro)';
|
||
|
||
const WHATSAPP_URL = 'https://wa.me/491719864053';
|
||
const EMAIL = 'info@finanzen-mizera.de';
|
||
|
||
const HERO_SLOGAN =
|
||
'Wir sagen: beides. Dank ZahnPRIVAT müssen Sie sich nicht entscheiden. Kieferorthopädie inklusive.';
|
||
|
||
const BROCHURE_PDF = '/PDF/335961_DL_ZahnPRIVAT_VKB_05_2024.pdf';
|
||
|
||
const KinderGesundheitZahn = () => {
|
||
const navigate = useNavigate();
|
||
const location = useLocation();
|
||
const { t } = useTranslation('kinder_zahn');
|
||
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 === 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]);
|
||
|
||
const onTabChange = (tab: string) => {
|
||
setActiveTab(tab);
|
||
if (tab === TAB_OVERVIEW) {
|
||
navigate(location.pathname, { replace: true });
|
||
return;
|
||
}
|
||
navigate(`${location.pathname}#${tab}`, { replace: true });
|
||
};
|
||
|
||
return (
|
||
<Layout>
|
||
<div className="min-h-screen bg-gray-50">
|
||
<HeroSlider
|
||
slides={[
|
||
{
|
||
id: 'familien-kinder-gesundheit-zahn-1',
|
||
kicker: t('hero.kicker', 'ZahnPRIVAT 100'),
|
||
title: t('hero.title', 'Erste Zahnspange oder neues Smartphone?'),
|
||
subtitle: t('hero.subtitle', HERO_SLOGAN),
|
||
imageUrl: assetUrl('iStock-1094816100.jpg'),
|
||
imagePosition: 'center',
|
||
ctas: [
|
||
{ label: t('hero.cta1', 'Beratung'), 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">
|
||
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
||
<TabsList className="grid grid-cols-2 md:grid-cols-4 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"
|
||
>
|
||
<Home 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"
|
||
>
|
||
<Search 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>
|
||
|
||
<div className="p-4 md:p-6">
|
||
<TabsContent value={TAB_OVERVIEW} className="mt-0">
|
||
<TwoColumnTab
|
||
className="gap-8 items-start"
|
||
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">
|
||
<Shield className="w-4 h-4" />
|
||
<span>{t('overview.badge', 'Tarif')}</span>
|
||
</div>
|
||
|
||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||
{t('overview.product', 'ZahnPRIVAT 100')}
|
||
<span className="block text-green-700">{t('overview.productSub', 'erstattet 100 % für')}</span>
|
||
</h1>
|
||
|
||
<p className="mt-4 text-gray-600 text-lg">
|
||
{t('overview.sloganLine1', 'Erste Zahnspange oder neues Smartphone?')}{' '}
|
||
<span className="font-semibold text-gray-900">{t('overview.sloganLine2', 'Wir sagen: beides.')}</span>
|
||
<br />
|
||
{t('overview.sloganLine3', 'Dank ZahnPRIVAT müssen Sie sich nicht entscheiden. Kieferorthopädie inklusive.')}
|
||
</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.ctaOffer', 'Angebot anfordern')}
|
||
</Button>
|
||
<Button variant="outline" onClick={() => navigate('/kontakt')} className="border-gray-300">
|
||
{t('overview.ctaConsulting', 'Beratung')}
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="mt-6 rounded-lg border border-gray-200 bg-white p-4">
|
||
<ul className="space-y-2 text-gray-700">
|
||
{[
|
||
t('overview.bullets.prophylaxe', 'Zahnprophylaxe (inkl. professioneller Zahnreinigung – ohne Begrenzung)'),
|
||
t('overview.bullets.bleaching', 'Zahnaufhellung (bis zu 200 Euro in 2 Jahren)'),
|
||
BOLD_BULLET,
|
||
t(
|
||
'overview.bullets.kfoAdults',
|
||
'Kieferorthopädie für Erwachsene aufgrund eines Unfalls oder wenn die GKV leistet (bis zu 5.000 Euro)',
|
||
),
|
||
t(
|
||
'overview.bullets.treatment',
|
||
'Zahnbehandlung (z.B. hochwertige Füllungen, Parodontose- und Wurzelbehandlungen)',
|
||
),
|
||
t('overview.bullets.prosthetics', 'Zahnersatz (z.B. Implantate, Kronen und Brücken)'),
|
||
t(
|
||
'overview.bullets.anxiety',
|
||
'Angst- und Schmerzausschaltung (z. B. Akupunktur, Lachgas und Hypnose)',
|
||
),
|
||
].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={row === BOLD_BULLET ? 'font-semibold text-gray-900' : undefined}>{row}</span>
|
||
</div>
|
||
))}
|
||
</ul>
|
||
<div className="mt-4 text-sm text-gray-600">
|
||
{t(
|
||
'overview.disclaimer',
|
||
'Die jeweiligen Prozentsätze beziehen sich auf den erstattungsfähigen Rechnungsbetrag und enthalten die Vorleistungen der gesetzlichen Krankenkasse.',
|
||
)}
|
||
</div>
|
||
</div>
|
||
</>
|
||
}
|
||
right={
|
||
<RightImageCard src={assetUrl('iStock-1094816100.jpg')} alt="Zahn">
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Direktkontakt</CardTitle>
|
||
<CardDescription>Wenn es schnell gehen soll.</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>Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a></span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Mail className="w-4 h-4 text-green-700" />
|
||
<span>
|
||
E-Mail:{' '}
|
||
<a href={`mailto:${EMAIL}`} className="underline text-green-700 hover:text-green-800">
|
||
{EMAIL}
|
||
</a>
|
||
</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</RightImageCard>
|
||
}
|
||
/>
|
||
</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', 'Broschüre als PDF zum Download.')}</p>
|
||
|
||
<Card className="mt-6 border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('brochure.cardTitle', 'ZahnPRIVAT 100 (PDF)')}</CardTitle>
|
||
<CardDescription>{t('brochure.cardDescription', '335961_DL_ZahnPRIVAT_VKB_05_2024.pdf')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<a href={BROCHURE_PDF} download>
|
||
<Button className="bg-green-700 hover:bg-green-800 w-full">{t('brochure.download', 'PDF herunterladen')}</Button>
|
||
</a>
|
||
</CardContent>
|
||
</Card>
|
||
</>
|
||
}
|
||
right={
|
||
<RightImageCard src={assetUrl('iStock-1094816100.jpg')} alt="Kundenbroschüre">
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Hinweis</CardTitle>
|
||
<CardDescription>Bei Fragen beraten wir gerne.</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
</RightImageCard>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_DETAILS} className="mt-0">
|
||
<div id={TAB_DETAILS} />
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('details.leistungen.title', 'ZahnPRIVAT 100 – Leistungen')}</CardTitle>
|
||
<CardDescription>{t('details.leistungen.subtitle', '100 % Erstattung (Auszug)')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm">
|
||
<div className="space-y-2 text-gray-700">
|
||
{[
|
||
t('details.bullets.prophylaxe', 'Zahnprophylaxe (inkl. professioneller Zahnreinigung – ohne Begrenzung)'),
|
||
t('details.bullets.bleaching', 'Zahnaufhellung (bis zu 200 Euro in 2 Jahren)'),
|
||
BOLD_BULLET,
|
||
t(
|
||
'details.bullets.kfoAdults',
|
||
'Kieferorthopädie für Erwachsene aufgrund eines Unfalls oder wenn die GKV leistet (bis zu 5.000 Euro)',
|
||
),
|
||
t(
|
||
'details.bullets.treatment',
|
||
'Zahnbehandlung (z.B. hochwertige Füllungen, Parodontose- und Wurzelbehandlungen)',
|
||
),
|
||
t('details.bullets.prosthetics', 'Zahnersatz (z.B. Implantate, Kronen und Brücken)'),
|
||
t(
|
||
'details.bullets.anxiety',
|
||
'Angst- und Schmerzausschaltung (z. B. Akupunktur, Lachgas und Hypnose)',
|
||
),
|
||
].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={row === BOLD_BULLET ? 'font-semibold text-gray-900' : undefined}>{row}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="mt-4 text-sm text-gray-600">
|
||
{t(
|
||
'details.disclaimer',
|
||
'Die jeweiligen Prozentsätze beziehen sich auf den erstattungsfähigen Rechnungsbetrag und enthalten die Vorleistungen der gesetzlichen Krankenkasse.',
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('details.examples.title', 'Beispiele')}</CardTitle>
|
||
<CardDescription>{t('details.examples.subtitle', 'So wirkt sich ZahnPRIVAT 100 in der Praxis aus')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm text-gray-700">
|
||
<div className="space-y-4">
|
||
<div>
|
||
<div className="font-semibold text-gray-900">{t('details.examples.kfo.title', 'Kieferorthopädie (Beispiel)')}</div>
|
||
<div className="mt-1 text-gray-700">
|
||
{t('details.examples.kfo.invoice', 'Rechnungsbetrag: 8.000 Euro')}
|
||
<br />
|
||
{t('details.examples.kfo.gkv', 'Leistung GKV: 3.500 Euro')}
|
||
<br />
|
||
{t('details.examples.kfo.refund', 'Erstattung ZahnPRIVAT 100: 4.500 Euro')}
|
||
<br />
|
||
{t('details.examples.kfo.own', 'Eigenanteil: 0 Euro')}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="font-semibold text-gray-900">{t('details.examples.implant.title', 'Zahnimplantat (Beispiel)')}</div>
|
||
<div className="mt-1 text-gray-700">
|
||
{t('details.examples.implant.invoice', 'Rechnungsbetrag: 3.700 Euro')}
|
||
<br />
|
||
{t('details.examples.implant.gkv', 'Leistung GKV: 500 Euro')}
|
||
<br />
|
||
{t('details.examples.implant.ownNo', 'Eigenanteil ohne Zusatz: 3.200 Euro')}
|
||
<br />
|
||
{t('details.examples.implant.ownWith', 'Eigenanteil mit ZahnPRIVAT 100: 0 Euro')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-200 overflow-hidden">
|
||
<img
|
||
src={assetUrl('iStock-1094816100.jpg')}
|
||
alt="Zahn"
|
||
className="w-full h-44 object-cover"
|
||
loading="lazy"
|
||
/>
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">{t('details.contact.title', 'Kontakt & Hinweis')}</CardTitle>
|
||
<CardDescription>{t('details.contact.subtitle', 'Wir beraten schnell und unkompliziert.')}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4 text-sm">
|
||
<div className="space-y-2 text-gray-700">
|
||
<div className="flex items-center gap-2">
|
||
<Phone className="w-4 h-4 text-green-700" />
|
||
<span>
|
||
Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a>{' '}
|
||
<a
|
||
href={WHATSAPP_URL}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="text-green-600 hover:text-green-800 underline"
|
||
>
|
||
(WhatsApp)
|
||
</a>
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Mail className="w-4 h-4 text-green-700" />
|
||
<span>
|
||
E-Mail:{' '}
|
||
<a href={`mailto:${EMAIL}`} className="underline text-green-700 hover:text-green-800">
|
||
{EMAIL}
|
||
</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="text-gray-700">
|
||
{t('details.contact.text', 'Tarife unterscheiden sich. Wir prüfen Bedingungen, Summenbegrenzungen und Erstattungssätze.')}
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-2">
|
||
<Button onClick={() => onTabChange(TAB_FORM)} className="bg-green-700 hover:bg-green-800">
|
||
{t('details.contact.ctaOffer', 'Angebot anfordern')}
|
||
</Button>
|
||
<Link to="/contact" className="inline-flex">
|
||
<Button variant="outline" className="w-full">{t('details.contact.ctaContact', 'Kontakt')}</Button>
|
||
</Link>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value={TAB_CALCULATOR} className="mt-0">
|
||
<div id={TAB_CALCULATOR} />
|
||
<TwoColumnTab
|
||
left={
|
||
<>
|
||
<h3 className="text-2xl font-bold text-gray-900">Vergleichsrechner</h3>
|
||
<p className="mt-2 text-gray-600">Für ZahnPRIVAT 100 erstellen wir dir gerne ein konkretes Angebot.</p>
|
||
|
||
<Card className="mt-6 border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Angebot statt Schätzung</CardTitle>
|
||
<CardDescription>Wir rechnen mit den passenden Parametern.</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Button onClick={() => onTabChange(TAB_FORM)} className="w-full bg-green-700 hover:bg-green-800">
|
||
Angebot anfordern
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</>
|
||
}
|
||
right={
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Was wir brauchen</CardTitle>
|
||
<CardDescription>Für ein passgenaues Angebot</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>Alter / Geburtsdatum</span>
|
||
</div>
|
||
<div className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
|
||
<span>Gewünschter Leistungsumfang</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">Anfrageformular</h3>
|
||
<p className="mt-2 text-gray-600">Kurze Infos – wir melden uns schnell zurück.</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">Kontaktformular öffnen</Button>
|
||
</Link>
|
||
<Button variant="outline" className="gap-2" onClick={() => window.print()}>
|
||
<Download className="w-4 h-4" />
|
||
Als PDF speichern
|
||
</Button>
|
||
</div>
|
||
</>
|
||
}
|
||
right={
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Direktkontakt</CardTitle>
|
||
<CardDescription>Wenn es schnell gehen soll.</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>
|
||
Telefon: <a href="tel:01719864053" className="text-blue-600 hover:text-blue-800 underline">0171 / 9864053</a>{' '}
|
||
<a
|
||
href={WHATSAPP_URL}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="text-green-600 hover:text-green-800 underline"
|
||
>
|
||
(WhatsApp)
|
||
</a>
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Mail className="w-4 h-4 text-green-700" />
|
||
<span>
|
||
E-Mail:{' '}
|
||
<a href={`mailto:${EMAIL}`} className="underline text-green-700 hover:text-green-800">
|
||
{EMAIL}
|
||
</a>
|
||
</span>
|
||
</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">Ratgeber</h3>
|
||
<p className="mt-2 text-gray-600">Checkliste für Zahnzusatz – worauf achten?</p>
|
||
|
||
<Card className="mt-6 border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Checkliste</CardTitle>
|
||
<CardDescription>Kurzüberblick</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="text-sm">
|
||
<div className="space-y-2">
|
||
{[
|
||
'Wartezeiten & Summenbegrenzungen',
|
||
'Kieferorthopädie-Leistungen (Kinder/Erwachsene)',
|
||
'Prophylaxe & Bleaching',
|
||
'Erstattungssätze & Bedingungen',
|
||
].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('iStock-1094816100.jpg')} alt="Ratgeber">
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Tipp</CardTitle>
|
||
<CardDescription>Frühzeitig prüfen</CardDescription>
|
||
</CardHeader>
|
||
</Card>
|
||
</RightImageCard>
|
||
}
|
||
/>
|
||
</TabsContent>
|
||
|
||
<GeneralNotice />
|
||
</div>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default KinderGesundheitZahn;
|