sterbegeld
This commit is contained in:
parent
96b6f6ec94
commit
dbe955e12b
@ -50,6 +50,7 @@ import BruttoNettoRechner from "./pages/BruttoNettoRechner";
|
|||||||
import SeniorenAltersvorsorge from "./pages/SeniorenAltersvorsorge";
|
import SeniorenAltersvorsorge from "./pages/SeniorenAltersvorsorge";
|
||||||
import SeniorenGesundheitsvorsorge from "./pages/SeniorenGesundheitsvorsorge";
|
import SeniorenGesundheitsvorsorge from "./pages/SeniorenGesundheitsvorsorge";
|
||||||
import SeniorenRisikoschutz from "./pages/SeniorenRisikoschutz";
|
import SeniorenRisikoschutz from "./pages/SeniorenRisikoschutz";
|
||||||
|
import SeniorenSterbegeldversicherung from "./pages/SeniorenSterbegeldversicherung";
|
||||||
import PrivateKrankenversicherung from "./pages/PrivateKrankenversicherung";
|
import PrivateKrankenversicherung from "./pages/PrivateKrankenversicherung";
|
||||||
import Zahnzusatzversicherung from "./pages/Zahnzusatzversicherung";
|
import Zahnzusatzversicherung from "./pages/Zahnzusatzversicherung";
|
||||||
import Auslandsreisekrankenversicherung from "./pages/Auslandsreisekrankenversicherung";
|
import Auslandsreisekrankenversicherung from "./pages/Auslandsreisekrankenversicherung";
|
||||||
@ -163,6 +164,7 @@ const App = () => {
|
|||||||
<Route path="/senioren-altersvorsorge" element={<SeniorenAltersvorsorge />} />
|
<Route path="/senioren-altersvorsorge" element={<SeniorenAltersvorsorge />} />
|
||||||
<Route path="/senioren-gesundheitsvorsorge" element={<SeniorenGesundheitsvorsorge />} />
|
<Route path="/senioren-gesundheitsvorsorge" element={<SeniorenGesundheitsvorsorge />} />
|
||||||
<Route path="/senioren-risikoschutz" element={<SeniorenRisikoschutz />} />
|
<Route path="/senioren-risikoschutz" element={<SeniorenRisikoschutz />} />
|
||||||
|
<Route path="/senioren-sterbegeldversicherung" element={<SeniorenSterbegeldversicherung />} />
|
||||||
<Route path="/private-krankenversicherung" element={<PrivateKrankenversicherung />} />
|
<Route path="/private-krankenversicherung" element={<PrivateKrankenversicherung />} />
|
||||||
<Route path="/zahnzusatzversicherung" element={<Zahnzusatzversicherung />} />
|
<Route path="/zahnzusatzversicherung" element={<Zahnzusatzversicherung />} />
|
||||||
<Route path="/auslandsreisekrankenversicherung" element={<Auslandsreisekrankenversicherung />} />
|
<Route path="/auslandsreisekrankenversicherung" element={<Auslandsreisekrankenversicherung />} />
|
||||||
|
|||||||
24
src/components/Disclaimer.tsx
Normal file
24
src/components/Disclaimer.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { AlertTriangle } from 'lucide-react';
|
||||||
|
|
||||||
|
const Disclaimer = () => {
|
||||||
|
return (
|
||||||
|
<div className="bg-amber-50/80 border border-amber-200/50">
|
||||||
|
<div className="container mx-auto px-4 py-6">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<AlertTriangle className="w-6 h-6 text-amber-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<div className="text-base text-amber-800">
|
||||||
|
<h4 className="font-semibold mb-2">Wichtiger Hinweis:</h4>
|
||||||
|
<p>
|
||||||
|
Die auf diesen Seiten enthaltenen Tipps und Informationen stellen allgemeine, unverbindliche Hinweise zu Versicherungen dar. Es handelt sich um eine private Meinungsäußerung ohne Anspruch auf Richtigkeit, Vollständigkeit oder Haftung und ersetzt keine individuelle Beratung. Maßgeblich sind ausschließlich die jeweiligen Versicherungsbedingungen des Versicherungsunternehmens.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Disclaimer;
|
||||||
@ -1,18 +1,20 @@
|
|||||||
import { AlertTriangle } from 'lucide-react';
|
import { AlertTriangle } from 'lucide-react';
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
className?: string;
|
className?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function GeneralNotice({ className }: Props) {
|
export default function GeneralNotice({ className }: Props) {
|
||||||
const { t } = useTranslation('common');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className ?? 'mt-8 rounded-md border border-gray-200 bg-white p-4'}>
|
<div className={className ?? 'mt-8 rounded-md border border-amber-200 bg-amber-50/80 p-4'}>
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<AlertTriangle className="w-5 h-5 text-[#7a0000] mt-0.5 flex-shrink-0" />
|
<AlertTriangle className="w-6 h-6 text-amber-600 mt-0.5 flex-shrink-0" />
|
||||||
<div className="text-sm text-gray-800 leading-relaxed whitespace-pre-line">{t('generalNotice.text')}</div>
|
<div className="text-base text-amber-800 leading-relaxed">
|
||||||
|
<h4 className="font-semibold mb-2">Wichtiger Hinweis:</h4>
|
||||||
|
<p>
|
||||||
|
Die auf diesen Seiten enthaltenen Tipps und Informationen stellen allgemeine, unverbindliche Hinweise zu Versicherungen dar. Es handelt sich um eine private Meinungsäußerung ohne Anspruch auf Richtigkeit, Vollständigkeit oder Haftung und ersetzt keine individuelle Beratung. Maßgeblich sind ausschließlich die jeweiligen Versicherungsbedingungen des Versicherungsunternehmens.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
|
|||||||
import { Heart, Shield, TrendingUp, PiggyBank, Home, Calculator } from 'lucide-react';
|
import { Heart, Shield, TrendingUp, PiggyBank, Home, Calculator } from 'lucide-react';
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import { Card } from '@/components/ui/card';
|
import { Card } from '@/components/ui/card';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Altersvorsorge = () => {
|
const Altersvorsorge = () => {
|
||||||
const baseUrl = import.meta.env.BASE_URL;
|
const baseUrl = import.meta.env.BASE_URL;
|
||||||
@ -83,6 +84,8 @@ const Altersvorsorge = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Disclaimer />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|||||||
import GeneralNotice from '@/components/GeneralNotice';
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||||
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Autoversicherung = () => {
|
const Autoversicherung = () => {
|
||||||
const { t } = useTranslation('autoversicherung');
|
const { t } = useTranslation('autoversicherung');
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
|
|||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import TenReasons from '@/components/TenReasons';
|
import TenReasons from '@/components/TenReasons';
|
||||||
import GeneralNotice from '@/components/GeneralNotice';
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
||||||
import { Mail, Phone, MapPin, Globe, TrendingUp, LineChart, CloudSun, Newspaper, ExternalLink, Star, FileText, Shield, Lock, HelpCircle, Send, User, MessageSquare, MessageCircle } from 'lucide-react';
|
import { Mail, Phone, MapPin, Globe, TrendingUp, LineChart, CloudSun, Newspaper, ExternalLink, Star, FileText, Shield, Lock, HelpCircle, Send, User, MessageSquare, MessageCircle } from 'lucide-react';
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import { useEffect } from 'react';
|
|||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Shield, AlertTriangle, Users, Activity, FileText, Clock, CheckCircle, Phone, Mail } from 'lucide-react';
|
import { Shield, AlertTriangle, Users, Activity, FileText, Clock, CheckCircle, Phone, Mail } from 'lucide-react';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Datenschutz = () => {
|
const Datenschutz = () => {
|
||||||
const { t } = useTranslation('privacy');
|
const { t } = useTranslation('privacy');
|
||||||
@ -272,6 +273,8 @@ const Datenschutz = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<Disclaimer />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import GeneralNotice from '@/components/GeneralNotice';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Finanzen = () => {
|
const Finanzen = () => {
|
||||||
const { t } = useTranslation('finanzen');
|
const { t } = useTranslation('finanzen');
|
||||||
@ -128,6 +129,8 @@ const Finanzen = () => {
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Disclaimer />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import { Heart, Shield, Plane, ArrowRight } from 'lucide-react';
|
|||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Gesundheitsvorsorge = () => {
|
const Gesundheitsvorsorge = () => {
|
||||||
const baseUrl = import.meta.env.BASE_URL;
|
const baseUrl = import.meta.env.BASE_URL;
|
||||||
@ -104,6 +105,8 @@ const Gesundheitsvorsorge = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Disclaimer />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import { Shield, Phone, Mail, CheckCircle, Star, Home, FileText, Calculator, Use
|
|||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Hausratversicherung = () => {
|
const Hausratversicherung = () => {
|
||||||
const { t } = useTranslation('hausrat');
|
const { t } = useTranslation('hausrat');
|
||||||
@ -157,6 +158,8 @@ const Hausratversicherung = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Disclaimer />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import React from 'react';
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Shield, Phone, Mail, MapPin, Building, User, Calendar, Globe, FileText } from 'lucide-react';
|
import { Shield, Phone, Mail, MapPin, Building, User, Calendar, Globe, FileText } from 'lucide-react';
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Impressum = () => {
|
const Impressum = () => {
|
||||||
const { t } = useTranslation('impressum');
|
const { t } = useTranslation('impressum');
|
||||||
@ -377,6 +378,8 @@ const Impressum = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Disclaimer />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
|
|||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Shield, Car, Phone, Users, Award, CheckCircle, ArrowRight, Star, FileText } from 'lucide-react';
|
import { Shield, Car, Phone, Users, Award, CheckCircle, ArrowRight, Star, FileText } from 'lucide-react';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
const { t } = useTranslation('home');
|
const { t } = useTranslation('home');
|
||||||
@ -40,6 +41,7 @@ const Index = () => {
|
|||||||
{ title: 'Zahnzusatzversicherung', href: '/zahnzusatzversicherung', image: import.meta.env.BASE_URL + encodeURI('Fotolia_45263348_S.jpg') },
|
{ title: 'Zahnzusatzversicherung', href: '/zahnzusatzversicherung', image: import.meta.env.BASE_URL + encodeURI('Fotolia_45263348_S.jpg') },
|
||||||
{ title: 'Auslandsreisekrankenversicherung', href: '/auslandsreisekrankenversicherung', image: import.meta.env.BASE_URL + encodeURI('iStock-637584740.jpg') },
|
{ title: 'Auslandsreisekrankenversicherung', href: '/auslandsreisekrankenversicherung', image: import.meta.env.BASE_URL + encodeURI('iStock-637584740.jpg') },
|
||||||
{ title: 'Gesundheitsvorsorge', href: '/gesundheitsvorsorge', image: import.meta.env.BASE_URL + encodeURI('iStock-819100588.jpg') },
|
{ title: 'Gesundheitsvorsorge', href: '/gesundheitsvorsorge', image: import.meta.env.BASE_URL + encodeURI('iStock-819100588.jpg') },
|
||||||
|
{ title: 'Sterbegeldversicherung', href: '/senioren-sterbegeldversicherung', image: import.meta.env.BASE_URL + encodeURI('iStock-939772870.jpg') },
|
||||||
];
|
];
|
||||||
|
|
||||||
setFocusTopics(
|
setFocusTopics(
|
||||||
@ -107,6 +109,7 @@ const Index = () => {
|
|||||||
{ label: 'Private Krankenversicherung', href: '/private-krankenversicherung' },
|
{ label: 'Private Krankenversicherung', href: '/private-krankenversicherung' },
|
||||||
{ label: 'Zahnzusatzversicherung', href: '/zahnzusatzversicherung' },
|
{ label: 'Zahnzusatzversicherung', href: '/zahnzusatzversicherung' },
|
||||||
{ label: t('topics.item6.title', 'Unfall – Was jetzt?'), href: '/unfall' },
|
{ label: t('topics.item6.title', 'Unfall – Was jetzt?'), href: '/unfall' },
|
||||||
|
{ label: 'Sterbegeldversicherung', href: '/senioren-sterbegeldversicherung' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -163,17 +166,20 @@ const Index = () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'home-5',
|
id: 'home-5',
|
||||||
kicker: t('hero.private.kicker', 'Privatkunden'),
|
kicker: 'Sterbegeldversicherung',
|
||||||
title: t('hero.private.title', 'Sicherheit für Ihre Familie und Ihr Zuhause.'),
|
title: 'Für Ihre Liebsten vorsorgen',
|
||||||
subtitle: t(
|
subtitle: 'Sichern Sie Ihre Familie mit einer Sterbegeldversicherung ab - finanzielle Sicherheit im Todesfall.',
|
||||||
'hero.private.subtitle',
|
imageUrl: import.meta.env.BASE_URL + encodeURI('iStock-939772870.jpg'),
|
||||||
'Individuelle Beratung für alle Lebensbereiche – von der Kfz-Versicherung bis zur Altersvorsorge.'
|
imagePosition: 'center 35%',
|
||||||
),
|
|
||||||
imageUrl: import.meta.env.BASE_URL + encodeURI('Fotolia_11700075_XS.jpg'),
|
|
||||||
imagePosition: 'center',
|
|
||||||
ctas: [
|
ctas: [
|
||||||
{ label: t('hero.private.primaryCta', 'Privatkunden'), href: '/privatkunden' },
|
{ label: 'Jetzt beraten lassen', href: '/senioren-sterbegeldversicherung' },
|
||||||
{ label: t('hero.private.secondaryCta', 'Beratung'), href: '/contact' },
|
{ label: 'Alle Senioren-Themen', href: '/senioren' },
|
||||||
|
],
|
||||||
|
topics: [
|
||||||
|
{ label: 'Sterbegeldversicherung', href: '/senioren-sterbegeldversicherung' },
|
||||||
|
{ label: 'Risikolebensversicherung', href: '/senioren-sterbegeldversicherung' },
|
||||||
|
{ label: 'Bestattungsvorsorge', href: '/senioren-sterbegeldversicherung' },
|
||||||
|
{ label: 'Senioren', href: '/senioren' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -449,6 +455,7 @@ const Index = () => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<Disclaimer />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const KFZ = () => {
|
const KFZ = () => {
|
||||||
const { t } = useTranslation('kfz');
|
const { t } = useTranslation('kfz');
|
||||||
@ -78,6 +79,8 @@ const KFZ = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<Disclaimer />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -24,6 +24,7 @@ import Layout from '@/components/Layout';
|
|||||||
import GeneralNotice from '@/components/GeneralNotice';
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||||
@ -278,12 +279,17 @@ const KinderGesundheit = () => {
|
|||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="text-sm">
|
<CardContent className="text-sm">
|
||||||
<div className="space-y-2">
|
<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">
|
const rows = t('details.leistung.rows', { returnObjects: true }) as unknown;
|
||||||
<CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
|
return Array.isArray(rows)
|
||||||
<span className="text-gray-900">{row}</span>
|
? (rows as string[]).map((row, index) => (
|
||||||
</div>
|
<div key={index} 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>
|
||||||
|
))
|
||||||
|
: null;
|
||||||
|
})()}
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
@ -296,12 +302,17 @@ const KinderGesundheit = () => {
|
|||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="text-sm">
|
<CardContent className="text-sm">
|
||||||
<div className="space-y-2">
|
<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">
|
const items = t('details.ueberblick.items', { returnObjects: true }) as unknown;
|
||||||
<CheckCircle className="w-4 h-4 text-green-700 mt-0.5" />
|
return Array.isArray(items)
|
||||||
<span className="text-gray-900">{row}</span>
|
? (items as string[]).map((row, index) => (
|
||||||
</div>
|
<div key={index} 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>
|
||||||
|
))
|
||||||
|
: null;
|
||||||
|
})()}
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-4 text-xs text-gray-500">{t('details.ueberblick.disclaimer')}</div>
|
<div className="mt-4 text-xs text-gray-500">{t('details.ueberblick.disclaimer')}</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
@ -326,14 +337,19 @@ const KinderGesundheit = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-4 space-y-2">
|
<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) => (
|
const rows = t('details.leistungsfall.rows', { returnObjects: true }) as unknown;
|
||||||
<div key={`${row.label}-${row.value}`} className="flex items-start justify-between gap-3">
|
return Array.isArray(rows)
|
||||||
<div className={row.strong ? 'font-semibold text-gray-900' : 'text-gray-700'}>{row.label}</div>
|
? (rows as Array<{ label: string; value: string; strong?: boolean }>).map(
|
||||||
<div className={row.strong ? 'font-semibold text-gray-900' : 'text-gray-700'}>{row.value}</div>
|
(row, index) => (
|
||||||
</div>
|
<div key={`${row.label}-${row.value}-${index}`} 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>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
: null;
|
||||||
|
})()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-4 rounded-lg border border-gray-200 bg-white p-4">
|
<div className="mt-4 rounded-lg border border-gray-200 bg-white p-4">
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|||||||
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||||
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||||||
import { CheckCircle, Download, Mail, Phone, Shield, Home, FileText, Calculator, Star, Search } from 'lucide-react';
|
import { CheckCircle, Download, Mail, Phone, Shield, Home, FileText, Calculator, Star, Search } from 'lucide-react';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const TAB_OVERVIEW = 'overview';
|
const TAB_OVERVIEW = 'overview';
|
||||||
const TAB_DETAILS = 'details';
|
const TAB_DETAILS = 'details';
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|||||||
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||||
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Kinderunfall = () => {
|
const Kinderunfall = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import React from 'react';
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Shield, Car, Home, Users, Briefcase, Heart, FileText, CheckCircle, Star, TrendingUp } from 'lucide-react';
|
import { Shield, Car, Home, Users, Briefcase, Heart, FileText, CheckCircle, Star, TrendingUp } from 'lucide-react';
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Leistungen = () => {
|
const Leistungen = () => {
|
||||||
const { t } = useTranslation('leistungen');
|
const { t } = useTranslation('leistungen');
|
||||||
@ -150,6 +151,8 @@ const Leistungen = () => {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Disclaimer />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
|
|||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||||
import { Phone, Shield, FileText, Link as LinkIcon } from 'lucide-react';
|
import { Phone, Shield, FileText, Link as LinkIcon } from 'lucide-react';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Links = () => {
|
const Links = () => {
|
||||||
const { t } = useTranslation('links');
|
const { t } = useTranslation('links');
|
||||||
@ -93,6 +94,8 @@ const Links = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Disclaimer />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -10,6 +10,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|||||||
import GeneralNotice from '@/components/GeneralNotice';
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||||
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const PrivateKrankenversicherung = () => {
|
const PrivateKrankenversicherung = () => {
|
||||||
const { t } = useTranslation('privateKrankenversicherung');
|
const { t } = useTranslation('privateKrankenversicherung');
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
|
|||||||
import { Shield, Heart, Car, Home, Briefcase, Users } from 'lucide-react';
|
import { Shield, Heart, Car, Home, Briefcase, Users } from 'lucide-react';
|
||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import { Card } from '@/components/ui/card';
|
import { Card } from '@/components/ui/card';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const Risikoschutz = () => {
|
const Risikoschutz = () => {
|
||||||
const baseUrl = import.meta.env.BASE_URL;
|
const baseUrl = import.meta.env.BASE_URL;
|
||||||
@ -83,6 +84,8 @@ const Risikoschutz = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Disclaimer />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -6,7 +6,7 @@ import { Shield, Users, TrendingUp, Clock, DollarSign, MapPin, Phone, Mail } fro
|
|||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
|
||||||
type FocusTopicId = 'health' | 'risk' | 'retirement';
|
type FocusTopicId = 'health' | 'risk' | 'retirement' | 'funeral';
|
||||||
|
|
||||||
const Senioren = () => {
|
const Senioren = () => {
|
||||||
const { t } = useTranslation('senioren');
|
const { t } = useTranslation('senioren');
|
||||||
@ -20,6 +20,7 @@ const Senioren = () => {
|
|||||||
{ id: 'health' as const, title: t('focus.items.health', 'Gesundheitsvorsorge'), href: '/senioren-gesundheitsvorsorge', image: assetUrl('iStock-957363908.jpg') },
|
{ id: 'health' as const, title: t('focus.items.health', 'Gesundheitsvorsorge'), href: '/senioren-gesundheitsvorsorge', image: assetUrl('iStock-957363908.jpg') },
|
||||||
{ id: 'risk' as const, title: t('focus.items.risk', 'Risikoschutz'), href: '/senioren-risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
{ id: 'risk' as const, title: t('focus.items.risk', 'Risikoschutz'), href: '/senioren-risikoschutz', image: assetUrl('iStock-970876204.jpg') },
|
||||||
{ id: 'retirement' as const, title: t('focus.items.retirement', 'Altersvorsorge'), href: '/senioren-altersvorsorge', image: assetUrl('Fotolia_67327775_XS.jpg') },
|
{ id: 'retirement' as const, title: t('focus.items.retirement', 'Altersvorsorge'), href: '/senioren-altersvorsorge', image: assetUrl('Fotolia_67327775_XS.jpg') },
|
||||||
|
{ id: 'funeral' as const, title: t('focus.items.funeral', 'Sterbegeldversicherung'), href: '/senioren-sterbegeldversicherung', image: assetUrl('iStock-939772870.jpg') },
|
||||||
];
|
];
|
||||||
|
|
||||||
setFocusTopics(
|
setFocusTopics(
|
||||||
@ -55,6 +56,15 @@ const Senioren = () => {
|
|||||||
{ title: 'Betriebliche Altersvorsorge', href: '/senioren-altersvorsorge' },
|
{ title: 'Betriebliche Altersvorsorge', href: '/senioren-altersvorsorge' },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const funeralLinksRaw = t('details.funeral.links', { returnObjects: true }) as unknown;
|
||||||
|
const funeralLinks = Array.isArray(funeralLinksRaw)
|
||||||
|
? (funeralLinksRaw as Array<{ title: string; href: string }>)
|
||||||
|
: [
|
||||||
|
{ title: 'Sterbegeldversicherung', href: '/senioren-sterbegeldversicherung' },
|
||||||
|
{ title: 'Bestattungsvorsorge', href: '/senioren-sterbegeldversicherung' },
|
||||||
|
{ title: 'Risikolebensversicherung', href: '/senioren-sterbegeldversicherung' },
|
||||||
|
];
|
||||||
|
|
||||||
const benefitsRaw = t('benefits.items', { returnObjects: true }) as unknown;
|
const benefitsRaw = t('benefits.items', { returnObjects: true }) as unknown;
|
||||||
const benefits = Array.isArray(benefitsRaw) ? (benefitsRaw as Array<{ title: string; desc: string }>) : [];
|
const benefits = Array.isArray(benefitsRaw) ? (benefitsRaw as Array<{ title: string; desc: string }>) : [];
|
||||||
const benefitIcons = [Shield, Users, TrendingUp, Clock, DollarSign, MapPin];
|
const benefitIcons = [Shield, Users, TrendingUp, Clock, DollarSign, MapPin];
|
||||||
@ -178,6 +188,26 @@ const Senioren = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Zusätzliche Links unter dem Bild für Sterbegeldversicherung */}
|
||||||
|
{item.id === 'funeral' && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-xs uppercase tracking-wide text-gray-500 font-semibold mb-3">{detailsLabel}</div>
|
||||||
|
<div className="grid grid-cols-1 gap-2">
|
||||||
|
{funeralLinks.map((link) => (
|
||||||
|
<Link
|
||||||
|
key={link.href}
|
||||||
|
to={link.href}
|
||||||
|
className="text-blue-600 hover:text-blue-800 hover:underline text-sm font-medium transition-colors duration-200 flex items-center group"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<span className="w-2 h-2 bg-blue-600 rounded-full mr-2 group-hover:bg-blue-800 transition-colors"></span>
|
||||||
|
{link.title}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@ -8,6 +8,7 @@ import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, Aler
|
|||||||
import Layout from '@/components/Layout';
|
import Layout from '@/components/Layout';
|
||||||
import HeroSlider from '@/components/HeroSlider';
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
import GeneralNotice from '@/components/GeneralNotice';
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
|
||||||
const SeniorenGesundheitsvorsorge = () => {
|
const SeniorenGesundheitsvorsorge = () => {
|
||||||
const { t } = useTranslation('seniorenGesundheitsvorsorge');
|
const { t } = useTranslation('seniorenGesundheitsvorsorge');
|
||||||
@ -405,23 +406,6 @@ const SeniorenGesundheitsvorsorge = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Haftungsausschluss */}
|
|
||||||
<div className="bg-amber-50 border border-amber-200">
|
|
||||||
<div className="container mx-auto px-4 py-6">
|
|
||||||
<div className="max-w-4xl mx-auto">
|
|
||||||
<div className="flex items-start gap-3">
|
|
||||||
<AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
|
|
||||||
<div className="text-sm text-amber-800">
|
|
||||||
<h4 className="font-semibold mb-2">Wichtiger Hinweis:</h4>
|
|
||||||
<p>
|
|
||||||
Bei den Tipps und Informationen auf diesen Seiten handelt es sich um allgemeine, unverbindliche Hinweise zu Versicherungen. Trotz meiner beruflichen Erfahrung handelt es sich hierbei um eine private Meinungsäußerung, ohne Anspruch auf Richtigkeit, ohne Haftung und ohne Ersatz für eine Beratung. Die rechtsverbindlichen Bestimmungen entnehmen Sie bitte den Versicherungsbedingungen des jeweiligen Versicherungsunternehmens.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -510,6 +510,8 @@ const SeniorenRisikoschutz = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
|
<GeneralNotice />
|
||||||
</div>
|
</div>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
858
src/pages/SeniorenSterbegeldversicherung.tsx
Normal file
858
src/pages/SeniorenSterbegeldversicherung.tsx
Normal file
@ -0,0 +1,858 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
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 { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Calculator, DollarSign, HandHeart, Home } from 'lucide-react';
|
||||||
|
import Layout from '@/components/Layout';
|
||||||
|
import HeroSlider from '@/components/HeroSlider';
|
||||||
|
import GeneralNotice from '@/components/GeneralNotice';
|
||||||
|
import Disclaimer from '@/components/Disclaimer';
|
||||||
|
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
||||||
|
|
||||||
|
const SeniorenSterbegeldversicherung = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const baseUrl = import.meta.env.BASE_URL;
|
||||||
|
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
||||||
|
const [activeTab, setActiveTab] = useState('overview');
|
||||||
|
|
||||||
|
const benefits = [
|
||||||
|
{
|
||||||
|
icon: HandHeart,
|
||||||
|
title: 'Absicherung im Todesfall',
|
||||||
|
description: 'Finanzielle Unterstützung für Ihre Hinterbliebenen'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: DollarSign,
|
||||||
|
title: 'Beitragsgünstig',
|
||||||
|
description: 'Günstige Beiträge mit hoher Auszahlungssumme'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Sofortauszahlung',
|
||||||
|
description: 'Schnelle Hilfe für Ihre Familie'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Heart,
|
||||||
|
title: 'Familienabsicherung',
|
||||||
|
description: 'Schutz für Ihre Liebsten'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Clock,
|
||||||
|
title: 'Lebenslang gültig',
|
||||||
|
description: 'Keine Altersbegrenzung'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: 'Ohne Gesundheitsprüfung',
|
||||||
|
description: 'Einfacher Abschluss möglich'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const processSteps = [
|
||||||
|
{
|
||||||
|
icon: FileText,
|
||||||
|
title: 'Beratung',
|
||||||
|
description: 'Persönliche Beratung zu Ihren Wünschen'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Calculator,
|
||||||
|
title: 'Berechnung',
|
||||||
|
description: 'Individuelle Tarifauswahl'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Abschluss',
|
||||||
|
description: 'Schneller und unkomplizierter Vertragsschluss'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: CheckCircle,
|
||||||
|
title: 'Schutz',
|
||||||
|
description: 'Sofortiger Versicherungsschutz'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const advantages = [
|
||||||
|
{
|
||||||
|
icon: Heart,
|
||||||
|
title: 'Finanzielle Entlastung',
|
||||||
|
description: 'Ihre Angehörigen müssen keine Kosten tragen'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Shield,
|
||||||
|
title: 'Schnelle Auszahlung',
|
||||||
|
description: 'Geld ist sofort nach dem Todesfall verfügbar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Home,
|
||||||
|
title: 'Freie Wahl',
|
||||||
|
description: 'Bestatter und Art der Bestattung frei wählbar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: DollarSign,
|
||||||
|
title: 'Beitragsgünstig',
|
||||||
|
description: 'Schon ab wenigen Euro im Monat absicherbar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: 'Ohne Gesundheitsprüfung',
|
||||||
|
description: 'Keine Gesundheitsfragen erforderlich'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Clock,
|
||||||
|
title: 'Lebenslang gültig',
|
||||||
|
description: 'Keine Altersgrenzen oder Laufzeiten'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout>
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Wichtiger Hinweis oben */}
|
||||||
|
<div className="container mx-auto px-4 py-4">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
<div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<div className="text-sm text-amber-800 leading-relaxed">
|
||||||
|
<h4 className="font-semibold mb-1">Wichtiger Hinweis:</h4>
|
||||||
|
<p>
|
||||||
|
Die auf diesen Seiten enthaltenen Tipps und Informationen stellen allgemeine, unverbindliche Hinweise zu Versicherungen dar. Es handelt sich um eine private Meinungsäußerung ohne Anspruch auf Richtigkeit, Vollständigkeit oder Haftung und ersetzt keine individuelle Beratung. Maßgeblich sind ausschließlich die jeweiligen Versicherungsbedingungen des Versicherungsunternehmens.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<HeroSlider
|
||||||
|
slides={[
|
||||||
|
{
|
||||||
|
id: 'senioren-sterbegeld-1',
|
||||||
|
title: 'Die Sterbegeldversicherung',
|
||||||
|
subtitle: 'Für Ihre Liebsten sorgen',
|
||||||
|
imageUrl: assetUrl('iStock-939772870.jpg'),
|
||||||
|
topics: [
|
||||||
|
{ label: 'Sterbegeld', href: '#overview' },
|
||||||
|
{ label: 'Vorsorge', href: '#benefits' }
|
||||||
|
],
|
||||||
|
ctas: [
|
||||||
|
{ label: 'Beratung anfordern', href: '#form', variant: 'default' as const },
|
||||||
|
{ label: 'Mehr erfahren', href: '#overview', variant: 'outline' as const }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="max-w-6xl mx-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||||
|
Die Sterbegeldversicherung
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-600 mb-6">
|
||||||
|
Für Ihre Liebsten sorgen
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs Navigation */}
|
||||||
|
<div className="bg-white rounded-lg border border-gray-200 shadow-sm mb-8">
|
||||||
|
<Tabs
|
||||||
|
value={activeTab}
|
||||||
|
onValueChange={(next) => {
|
||||||
|
setActiveTab(next);
|
||||||
|
}}
|
||||||
|
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-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
||||||
|
<TabsTrigger
|
||||||
|
value="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"
|
||||||
|
>
|
||||||
|
<Shield className="w-4 h-4 mr-1.5" />
|
||||||
|
Übersicht
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="products"
|
||||||
|
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" />
|
||||||
|
Produkte
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="benefits"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Star className="w-4 h-4 mr-1.5" />
|
||||||
|
Vorteile
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="process"
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<Clock className="w-4 h-4 mr-1.5" />
|
||||||
|
Prozess
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="costs"
|
||||||
|
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" />
|
||||||
|
Kosten
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="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"
|
||||||
|
>
|
||||||
|
<Mail className="w-4 h-4 mr-1.5" />
|
||||||
|
Anfrage
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 md:p-6">
|
||||||
|
<TabsContent value="overview" className="mt-0">
|
||||||
|
<TwoColumnTab
|
||||||
|
className="gap-8 items-center"
|
||||||
|
left={
|
||||||
|
<>
|
||||||
|
<div className="mb-4">
|
||||||
|
<span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||||
|
<Heart className="w-3 h-3 mr-1" />
|
||||||
|
Sterbegeldversicherung
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||||
|
Die Sterbegeldversicherung
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600 mb-6">
|
||||||
|
Für Ihre Liebsten sorgen
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-600 mb-8">
|
||||||
|
Eine Sterbegeldversicherung ist eine sinnvolle Vorsorge, die Ihre Angehörigen im Todesfall finanziell entlastet.
|
||||||
|
Mit einer monatlichen Prämie sichern Sie eine Auszahlungssumme, die für die Bestattungskosten verwendet werden kann.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 mb-8">
|
||||||
|
<Button
|
||||||
|
onClick={() => setActiveTab('form')}
|
||||||
|
className="bg-blue-700 hover:bg-blue-800 px-6 py-3 text-lg font-semibold"
|
||||||
|
>
|
||||||
|
Beratung anfordern
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => setActiveTab('form')}
|
||||||
|
variant="outline"
|
||||||
|
className="border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-6 py-3 text-lg font-semibold"
|
||||||
|
>
|
||||||
|
Kostenlos beraten lassen
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-4">
|
||||||
|
<Heart className="w-5 h-5 text-blue-700" />
|
||||||
|
<div className="text-sm">
|
||||||
|
<div className="font-semibold text-gray-900">Familienabsicherung</div>
|
||||||
|
<div className="text-gray-600">Schutz für Ihre Liebsten</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white p-4">
|
||||||
|
<DollarSign className="w-5 h-5 text-blue-700" />
|
||||||
|
<div className="text-sm">
|
||||||
|
<div className="font-semibold text-gray-900">Beitragsgünstig</div>
|
||||||
|
<div className="text-gray-600">Günstige Absicherung</div>
|
||||||
|
<div className="text-xs text-gray-500 mt-1">ab 40,75 €/mtl. für 12.500 €</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
right={
|
||||||
|
(
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-tr from-blue-100 to-white rounded-2xl" />
|
||||||
|
<div className="relative rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={assetUrl('iStock-939772870.jpg')}
|
||||||
|
alt="Sterbegeldversicherung"
|
||||||
|
className="w-full h-[400px] object-cover"
|
||||||
|
/>
|
||||||
|
<div className="p-5 bg-gradient-to-t from-white/90 to-white/60 backdrop-blur-sm">
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-700">
|
||||||
|
<Heart className="w-4 h-4 text-blue-700" />
|
||||||
|
<span>Finanzielle Absicherung, letzte Wünsche, Entlastung für Familie</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-700 mt-1">
|
||||||
|
<Star className="w-4 h-4 text-blue-700" />
|
||||||
|
<span>Tarifcheck – schnell, fair und passend zu Ihrer Vorsorge.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Wichtige Information */}
|
||||||
|
<div className="mt-8 bg-red-50 border border-red-200 rounded-xl p-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-8 h-8 bg-red-200 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<AlertTriangle className="w-4 h-4 text-red-800" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h6 className="font-medium text-red-900 mb-2">Wichtige Information zur gesetzlichen Regelung</h6>
|
||||||
|
<p className="text-red-800 text-sm">
|
||||||
|
Die Sterbegeldversicherung ist eine private Vorsorge, die gesetzlich nicht geregelt ist.
|
||||||
|
Die Leistungen und Bedingungen variieren je nach Anbieter. Eine sorgfältige Prüfung der Vertragsbedingungen ist empfehlenswert.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Vorteile */}
|
||||||
|
<div className="mt-8 bg-blue-50 border border-blue-200 rounded-xl p-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-8 h-8 bg-blue-200 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<CheckCircle className="w-4 h-4 text-blue-800" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h6 className="font-medium text-blue-900 mb-2">Ihre Garantierte Vorteile & Absicherung lebenslang</h6>
|
||||||
|
<p className="text-blue-800 text-sm">
|
||||||
|
Mit einer Sterbegeldversicherung sichern Sie sich und Ihre Familie finanziell ab.
|
||||||
|
Die Beiträge bleiben über die gesamte Vertragslaufzeit gleich und die Auszahlungssumme ist garantiert.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Beitragsbeispiel und Versicherungssummen */}
|
||||||
|
<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-blue-700 font-medium text-sm uppercase tracking-wide mb-3">Beitragsbeispiel</p>
|
||||||
|
<p className="text-4xl font-light text-blue-900 mb-2">ab 40,75 €</p>
|
||||||
|
<p className="text-blue-600 text-sm">pro Monat für 12.500 € Versicherungssumme</p>
|
||||||
|
<div className="mt-4 text-xs text-blue-700">
|
||||||
|
<p>• Männer/Frauen: ab 53 Jahre</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gradient-to-br from-slate-700 to-slate-800 rounded-xl p-6 border border-slate-600">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-slate-300 font-medium text-sm uppercase tracking-wide mb-3">Versicherungssummen</p>
|
||||||
|
<p className="text-4xl font-light text-white mb-2">1.500 € - bis 50.000 €</p>
|
||||||
|
<p className="text-slate-400 text-sm">Frei wählbare Absicherung</p>
|
||||||
|
<div className="mt-4 text-xs text-slate-300">
|
||||||
|
<p>• Sofortauszahlung bei Unfalltod</p>
|
||||||
|
<p>• Doppelte Leistung bei Unfalltod</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Wichtiger Hinweis unter der Tabelle */}
|
||||||
|
<div className="mt-6 bg-amber-50 border border-amber-200 rounded-xl p-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<div className="text-sm text-amber-800 leading-relaxed">
|
||||||
|
<h4 className="font-semibold mb-1">Wichtiger Hinweis:</h4>
|
||||||
|
<p>
|
||||||
|
Die auf diesen Seiten enthaltenen Tipps und Informationen stellen allgemeine, unverbindliche Hinweise zu Versicherungen dar. Es handelt sich um eine private Meinungsäußerung ohne Anspruch auf Richtigkeit, Vollständigkeit oder Haftung und ersetzt keine individuelle Beratung. Maßgeblich sind ausschließlich die jeweiligen Versicherungsbedingungen des Versicherungsunternehmens.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="products" className="mt-0">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900">Unsere Sterbegeldlösungen</h3>
|
||||||
|
<p className="text-gray-600 mt-2">
|
||||||
|
Wir bieten verschiedene Tarife an, die auf Ihre individuellen Bedürfnisse zugeschnitten sind.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-6 space-y-4">
|
||||||
|
<Card className="border-blue-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg flex items-center gap-2">
|
||||||
|
<Shield className="w-5 h-5 text-blue-700" />
|
||||||
|
Klassische Sterbegeldversicherung
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Die bewährte Lösung für Ihre finanzielle Absicherung
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ul className="space-y-2 text-sm text-gray-700">
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<span>Auszahlungssumme bis 50.000 €</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<span>Ohne Gesundheitsprüfung</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<span>Beitragskonstant über die gesamte Laufzeit</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="border-green-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg flex items-center gap-2">
|
||||||
|
<Heart className="w-5 h-5 text-green-700" />
|
||||||
|
Familien-Sterbegeldversicherung
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Gemeinsam für die ganze Familie vorsorgen
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ul className="space-y-2 text-sm text-gray-700">
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<span>Bis zu 5 Personen versicherbar</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<span>Separate Auszahlungssummen</span>
|
||||||
|
</li>
|
||||||
|
<li className="flex items-start gap-2">
|
||||||
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<span>Familienrabatt bis 15%</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Card className="border-orange-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg flex items-center gap-2">
|
||||||
|
<Calculator className="w-5 h-5 text-orange-700" />
|
||||||
|
Kosten berechnen
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm text-gray-600 mb-4">
|
||||||
|
Berechnen Sie jetzt Ihre individuellen Beiträge und finden Sie den passenden Tarif.
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
onClick={() => setActiveTab('calculator')}
|
||||||
|
className="w-full bg-orange-600 hover:bg-orange-700"
|
||||||
|
>
|
||||||
|
<Calculator className="mr-2 h-4 w-4" />
|
||||||
|
Rechner starten
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="benefits" className="mt-0">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||||
|
Ihre Vorteile
|
||||||
|
</h3>
|
||||||
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||||
|
Entdecken Sie die vielen Vorteile einer Sterbegeldversicherung und wie Sie Ihre Liebsten schützen können.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{advantages.map((advantage, index) => (
|
||||||
|
<Card key={index} className="border-gray-200 hover:shadow-lg transition-shadow">
|
||||||
|
<CardHeader className="text-center">
|
||||||
|
<div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<advantage.icon className="w-6 h-6 text-blue-700" />
|
||||||
|
</div>
|
||||||
|
<CardTitle className="text-lg">{advantage.title}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-center">
|
||||||
|
<p className="text-gray-600">{advantage.description}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="process" className="mt-0">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||||
|
So läuft die Beratung ab
|
||||||
|
</h3>
|
||||||
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||||
|
In nur wenigen Schritten zu Ihrer individuellen Sterbegeldversicherung
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{processSteps.map((step, index) => (
|
||||||
|
<div key={index} className="text-center">
|
||||||
|
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<step.icon className="w-8 h-8 text-blue-700" />
|
||||||
|
</div>
|
||||||
|
<h4 className="text-lg font-semibold text-gray-900 mb-2">{step.title}</h4>
|
||||||
|
<p className="text-gray-600">{step.description}</p>
|
||||||
|
{index < processSteps.length - 1 && (
|
||||||
|
<div className="hidden lg:block absolute top-8 left-full w-full">
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<div className="w-full border-t-2 border-dashed border-gray-300"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="calculator" className="mt-0">
|
||||||
|
<div className="text-center">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Sterbegeld-Rechner</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Berechnen Sie jetzt Ihre individuellen Beiträge
|
||||||
|
</p>
|
||||||
|
<Button className="bg-blue-700 hover:bg-blue-800">
|
||||||
|
<Calculator className="mr-2 h-4 w-4" />
|
||||||
|
Rechner starten
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="costs" className="mt-0">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Bestattungskosten im Überblick</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Typische Kosten für eine Bestattung in Deutschland
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
|
||||||
|
{/* Modern Header */}
|
||||||
|
<div className="bg-gradient-to-r from-slate-700 to-slate-900 text-white p-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<h4 className="text-3xl font-light tracking-wide mb-3">Bestattungskosten</h4>
|
||||||
|
<p className="text-slate-300 text-lg">Eine transparente Übersicht aller Kostenpositionen</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="p-8 bg-gradient-to-b from-white to-gray-50">
|
||||||
|
{/* Kostenübersicht Cards */}
|
||||||
|
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
||||||
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-6 border border-blue-200">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-blue-700 font-medium text-sm uppercase tracking-wide mb-3">Beitragsbeispiel</p>
|
||||||
|
<p className="text-4xl font-light text-blue-900 mb-2">ab 40,75 €</p>
|
||||||
|
<p className="text-blue-600 text-sm">pro Monat für 12.500 € Versicherungssumme</p>
|
||||||
|
<div className="mt-4 text-xs text-blue-700">
|
||||||
|
<p>• Männer/Frauen: ab 53 Jahre</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gradient-to-br from-slate-700 to-slate-800 rounded-xl p-6 border border-slate-600">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-slate-300 font-medium text-sm uppercase tracking-wide mb-3">Versicherungssummen</p>
|
||||||
|
<p className="text-4xl font-light text-white mb-2">1.500 € - bis 50.000 €</p>
|
||||||
|
<p className="text-slate-400 text-sm">Frei wählbare Absicherung</p>
|
||||||
|
<div className="mt-4 text-xs text-slate-300">
|
||||||
|
<p>• Sofortauszahlung bei Unfalltod</p>
|
||||||
|
<p>• Doppelte Leistung bei Unfalltod</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Detaillierte Kostenliste */}
|
||||||
|
<div className="bg-white rounded-xl border border-gray-200 shadow-sm">
|
||||||
|
<div className="p-3 border-b border-gray-200">
|
||||||
|
<h5 className="text-lg font-medium text-gray-900">Detaillierte Kostenübersicht</h5>
|
||||||
|
</div>
|
||||||
|
<div className="divide-y divide-gray-100">
|
||||||
|
{[
|
||||||
|
{ name: 'Bestatter', desc: 'Organisation, Überführung, Trauerfeier', min: 1500, max: 3500 },
|
||||||
|
{ name: 'Sarg', desc: 'Je nach Material und Ausführung', min: 800, max: 2500 },
|
||||||
|
{ name: 'Grabstelle', desc: 'Erwerb und Aushebung', min: 500, max: 1200 },
|
||||||
|
{ name: 'Grabpflege', desc: 'Je nach Wahl und Friedhof (pro Jahr)', min: 200, max: 400 },
|
||||||
|
{ name: 'Krankenhaus', desc: 'Kosten für Aufbahrung', min: 50, max: 100 },
|
||||||
|
{ name: 'Verwaltung', desc: 'Verwaltungsgebühren', min: 50, max: 150 },
|
||||||
|
{ name: 'Todesanzeige', desc: 'Je nach Zeitung und Auflage', min: 100, max: 500 },
|
||||||
|
{ name: 'Trauerfeier', desc: 'Kaffee und Kuchen, Musik', min: 300, max: 1000 },
|
||||||
|
{ name: 'Blumenschmuck', desc: 'Kranz und Sträuße', min: 200, max: 800 },
|
||||||
|
{ name: 'Danksagungskarten', desc: 'Druck und Versand', min: 50, max: 200 },
|
||||||
|
{ name: 'Steinmetz', desc: 'Grabstein und Inschrift', min: 2350, max: 8000 }
|
||||||
|
].map((item, index) => (
|
||||||
|
<div key={index} className="p-3 hover:bg-gray-50 transition-colors">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex-1 pr-3">
|
||||||
|
<h6 className="font-medium text-gray-900">{item.name}</h6>
|
||||||
|
<p className="text-gray-600 text-sm">{item.desc}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-16">
|
||||||
|
<div className="text-right min-w-[120px]">
|
||||||
|
<p className="text-xs text-gray-500 uppercase">ab</p>
|
||||||
|
<p className="text-lg font-medium text-gray-900">{item.min.toLocaleString()} €</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right min-w-[120px]">
|
||||||
|
<p className="text-xs text-gray-500 uppercase">bis</p>
|
||||||
|
<p className="text-lg font-medium text-gray-900">{item.max.toLocaleString()} €</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hinweisbereich */}
|
||||||
|
<div className="mt-8 bg-amber-50 border border-amber-200 rounded-xl p-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<AlertTriangle className="w-5 h-5 text-amber-600 mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<h6 className="font-medium text-amber-900 mb-2">Wichtige Hinweise</h6>
|
||||||
|
<ul className="text-amber-800 text-sm space-y-1">
|
||||||
|
<li>• Die Kosten variieren je nach Region, Friedhof und individuellen Wünschen</li>
|
||||||
|
<li>• Grabpflegekosten fallen jährlich zusätzlich an</li>
|
||||||
|
<li>• Eine Sterbegeldversicherung kann Ihre Angehörigen finanziell entlasten</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Verantwortungsbereich */}
|
||||||
|
<div className="mt-6 bg-blue-50 border border-blue-200 rounded-xl p-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-8 h-8 bg-blue-200 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
||||||
|
<CheckCircle className="w-4 h-4 text-blue-800" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h6 className="font-medium text-blue-900 mb-2">Verantwortung</h6>
|
||||||
|
<p className="text-blue-800 text-sm leading-relaxed">
|
||||||
|
Sie können Verantwortung vereinbaren durch:
|
||||||
|
</p>
|
||||||
|
<ul className="text-blue-800 text-sm space-y-2 mt-3">
|
||||||
|
<li>• <strong>Sterbegeldversicherungen</strong> - bieten gegen einen vergleichsweise geringen monatlichen Beitrag eine Lösung, welche ohne Gesundheitsprüfung bis ins hohe Alter von 85 Jahren - auch von Kindern oder Verwandten ohne das Wissen der zu versicherten Person - abgeschlossen werden kann.</li>
|
||||||
|
<li>• <strong>Bestattungsvorsorgeversicherung</strong> - ermöglicht Ihnen, alles Notwendige schon jetzt eigenverantwortlich zu regeln. Sie können sich darauf verlassen, dass später alles in Ihrem Sinne arrangiert ist und sämtliche Formalitäten zuverlässig erledigt werden. Gewähren Sie Ihnen und Ihren Angehörigen emotionale und finanzielle Entlastung.</li>
|
||||||
|
</ul>
|
||||||
|
<p className="text-blue-800 text-sm mt-3 leading-relaxed">
|
||||||
|
Ein persönliches Gespräch ist durch nichts zur ersetzen, deswegen Vereinbaren Sie einen Termin und wir werden gemeinsam für Sie oder Ihrer Angehörigen eine passende sichere und vertrauliche Lösung finden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="calculator" className="mt-0">
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Sterbegeld-Rechner</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
Berechnen Sie jetzt Ihre individuellen Beiträge und finden Sie den passenden Tarif
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<Card className="border-blue-200">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg flex items-center gap-2">
|
||||||
|
<Calculator className="w-5 h-5 text-blue-700" />
|
||||||
|
Beitrag berechnen
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Geben Sie Ihre Wünsche ein und erhalten Sie eine unverbindliche Kostenschätzung
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Versicherungssumme
|
||||||
|
</label>
|
||||||
|
<select className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option value="5000">5.000 €</option>
|
||||||
|
<option value="10000">10.000 €</option>
|
||||||
|
<option value="12500" selected>12.500 €</option>
|
||||||
|
<option value="15000">15.000 €</option>
|
||||||
|
<option value="20000">20.000 €</option>
|
||||||
|
<option value="25000">25.000 €</option>
|
||||||
|
<option value="30000">30.000 €</option>
|
||||||
|
<option value="50000">50.000 €</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Alter
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="z.B. 53"
|
||||||
|
defaultValue="53"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Geschlecht
|
||||||
|
</label>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<label className="flex items-center">
|
||||||
|
<input type="radio" name="gender" value="male" className="mr-2" defaultChecked />
|
||||||
|
Männlich
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center">
|
||||||
|
<input type="radio" name="gender" value="female" className="mr-2" />
|
||||||
|
Weiblich
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-sm text-blue-700 font-medium mb-2">Ihr geschätzter Beitrag</p>
|
||||||
|
<p className="text-3xl font-bold text-blue-900">ab 40,75 €</p>
|
||||||
|
<p className="text-sm text-blue-600">pro Monat</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<Button
|
||||||
|
onClick={() => setActiveTab('form')}
|
||||||
|
className="flex-1 bg-blue-700 hover:bg-blue-800"
|
||||||
|
>
|
||||||
|
<Phone className="mr-2 h-4 w-4" />
|
||||||
|
Beratung anfordern
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="flex-1">
|
||||||
|
<Download className="mr-2 h-4 w-4" />
|
||||||
|
Angebot herunterladen
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="form" className="mt-0">
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<Card className="border-blue-200">
|
||||||
|
<CardHeader className="text-center">
|
||||||
|
<CardTitle className="text-2xl">Beratungsanfrage</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Lassen Sie sich unverbindlich zu Ihrer Sterbegeldversicherung beraten
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Vorname *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="Ihr Vorname"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Nachname *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="Ihr Nachname"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
E-Mail *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="ihre@email.de"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Telefon
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
placeholder="0123 456789"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Ihre Nachricht
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
rows={4}
|
||||||
|
placeholder="Besondere Wünsche oder Fragen..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<input type="checkbox" id="privacy" className="mt-1" />
|
||||||
|
<label htmlFor="privacy" className="text-sm text-gray-600">
|
||||||
|
Ich stimme der <Link to="/datenschutz" className="text-blue-600 hover:underline">Datenschutzerklärung</Link> zu und bin damit einverstanden, dass meine Daten zur Bearbeitung meiner Anfrage verwendet werden.
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
<Button className="flex-1 bg-blue-700 hover:bg-blue-800">
|
||||||
|
<Mail className="mr-2 h-4 w-4" />
|
||||||
|
Anfrage senden
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" className="flex-1">
|
||||||
|
<Phone className="mr-2 h-4 w-4" />
|
||||||
|
Rückruf bitten
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center text-sm text-gray-600">
|
||||||
|
<p>Oder rufen Sie uns direkt an:</p>
|
||||||
|
<p className="font-semibold text-blue-700">+49 123 456789</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</div>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Additional Sections */}
|
||||||
|
<Disclaimer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SeniorenSterbegeldversicherung;
|
||||||
Loading…
x
Reference in New Issue
Block a user