martin/marian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tabs Schön gemacht

Browse Source
This commit is contained in:
martin 2026-01-24 20:28:40 +01:00
parent eacfbf019e
commit 8ac093f2f9
9 changed files with 370 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/index.css
View File

@ -111,4 +111,32 @@
transform: translateY(0);
}
}
/* Modern Tabs Styling - Global for all tabs */
[data-radix-tabs-list] {
@apply bg-gradient-to-r from-blue-50 to-white border-b border-gray-100 px-4 pt-6 pb-2;
}
[data-radix-tabs-trigger] {
@apply relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200;
@apply 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;
@apply data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md;
@apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0;
}
/* Remove focus outlines completely */
button:focus,
button:focus-visible,
[data-radix-tabs-trigger]:focus,
[data-radix-tabs-trigger]:focus-visible {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
[data-state="active"] {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
}

20
src/pages/Agentur.tsx
View File

@ -73,17 +73,15 @@ const Agentur = () => {
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto">
<TabsTrigger value="overview" className="px-4 py-2">Philosophie</TabsTrigger>
<TabsTrigger value="leistungen" className="px-4 py-2">Leistungen der Agentur</TabsTrigger>
<TabsTrigger value="philosophie" className="px-4 py-2">Partnerversicherungen</TabsTrigger>
<TabsTrigger value="kontakt" className="px-4 py-2">Finanzdienstleistungen</TabsTrigger>
<TabsTrigger value="links" className="px-4 py-2">Links</TabsTrigger>
<TabsTrigger value="vermoegensverwaltung" className="px-4 py-2">Vermögensverwaltung</TabsTrigger>
<TabsTrigger value="investmentbanken" className="px-4 py-2">Investment-Banken</TabsTrigger>
</TabsList>
</div>
<TabsList className="grid grid-cols-1 md:grid-cols-3 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-3 py-2.5 text-sm font-medium">Philosophie</TabsTrigger>
<TabsTrigger value="leistungen" className="px-3 py-2.5 text-sm font-medium">Leistungen der Agentur</TabsTrigger>
<TabsTrigger value="philosophie" className="px-3 py-2.5 text-sm font-medium">Partnerversicherungen</TabsTrigger>
<TabsTrigger value="kontakt" className="px-3 py-2.5 text-sm font-medium">Finanzdienstleistungen</TabsTrigger>
<TabsTrigger value="links" className="px-3 py-2.5 text-sm font-medium">Links</TabsTrigger>
<TabsTrigger value="vermoegensverwaltung" className="px-3 py-2.5 text-sm font-medium">Vermögensverwaltung</TabsTrigger>
<TabsTrigger value="investmentbanken" className="px-3 py-2.5 text-sm font-medium">Investment-Banken</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="p-4 md:p-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">

85
src/pages/Autoversicherung.tsx
View File

@ -87,6 +87,23 @@ const Autoversicherung = () => {
return (
<Layout>
<div className="min-h-screen bg-gray-50">
<style>{`
[data-state="active"] {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
button:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
button:focus-visible {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
`}</style>
<div className="container mx-auto px-4 md:px-6 py-8">
<div className="max-w-screen-2xl mx-auto">
<h2 className="text-2xl font-bold text-gray-900 mb-6 text-center">
@ -102,16 +119,64 @@ const Autoversicherung = () => {
className="w-full"
id="tab-section"
>
<div className="border-b border-gray-200 px-4 pt-4">
<TabsList className="justify-start flex-wrap h-auto">
<TabsTrigger value="overview" className="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger>
<TabsTrigger value="details" className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger>
<TabsTrigger value="statistics" className="px-6 py-2">{t('tabs.statistics', 'Unfallstatistik')}</TabsTrigger>
<TabsTrigger value="calculator" className="px-6 py-2">{t('tabs.calculator', 'KFZ-Vergleichsrechner')}</TabsTrigger>
<TabsTrigger value="form" className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger>
<TabsTrigger value="claims" className="px-6 py-2">{t('tabs.claims', 'Schadenmeldung!')}</TabsTrigger>
<TabsTrigger value="catalog" className="px-6 py-2">{t('tabs.catalog', 'Bußgeldkatalog')}</TabsTrigger>
<TabsTrigger value="brochure" className="px-6 py-2">{t('tabs.brochure', 'Kundenbroschüre (PDF)')}</TabsTrigger>
<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-8 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" />
{t('tabs.overview', 'Übersicht')}
</TabsTrigger>
<TabsTrigger
value="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="statistics"
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.statistics', 'Statistik')}
</TabsTrigger>
<TabsTrigger
value="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"
>
<Gauge className="w-4 h-4 mr-1.5" />
{t('tabs.calculator', 'Rechner')}
</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"
>
<Phone className="w-4 h-4 mr-1.5" />
{t('tabs.form', 'Anfrage')}
</TabsTrigger>
<TabsTrigger
value="claims"
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"
>
<AlertCircle className="w-4 h-4 mr-1.5" />
{t('tabs.claims', 'Schaden')}
</TabsTrigger>
<TabsTrigger
value="catalog"
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<FileCheck className="w-4 h-4 mr-1.5" />
{t('tabs.catalog', 'Katalog')}
</TabsTrigger>
<TabsTrigger
value="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>

26
src/pages/Contact.tsx
View File

@ -175,19 +175,19 @@ export default function ContactPage() {
}}
className="w-full"
>
<div id="contact-tabs" className="border-b border-gray-200 px-4 pt-4">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto">
<TabsTrigger value="contact" className="px-4 py-2">{t('tabs.contact', 'Kontakt und Adressen')}</TabsTrigger>
<TabsTrigger value="card" className="px-4 py-2">{t('tabs.card', 'Visitenkarte')}</TabsTrigger>
<TabsTrigger value="reasons" className="px-4 py-2">{t('tabs.reasons', '10 gute Gründe')}</TabsTrigger>
<TabsTrigger value="service" className="px-4 py-2">{t('tabs.service', 'Service')}</TabsTrigger>
<TabsTrigger value="impressum" className="px-4 py-2">{t('tabs.impressum', 'Impressum')}</TabsTrigger>
<TabsTrigger value="leistungen" className="px-4 py-2">{t('tabs.leistungen', 'Leistungen')}</TabsTrigger>
<TabsTrigger value="datenschutz" className="px-4 py-2">{t('tabs.datenschutz', 'Datenschutz')}</TabsTrigger>
<TabsTrigger value="links" className="px-4 py-2">{t('tabs.links', 'Links')}</TabsTrigger>
<TabsTrigger value="news" className="px-4 py-2">{t('tabs.news', 'Aktuelles/News')}</TabsTrigger>
<TabsTrigger value="daily-info" className="px-4 py-2">{t('tabs.dailyInfo', 'Tägliche Info')}</TabsTrigger>
<TabsTrigger value="faq" className="px-4 py-2">{t('tabs.faq', 'FAQ')}</TabsTrigger>
<div id="contact-tabs">
<TabsList className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-11 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="contact" className="px-3 py-2.5 text-sm font-medium">{t('tabs.contact', 'Kontakt')}</TabsTrigger>
<TabsTrigger value="card" className="px-3 py-2.5 text-sm font-medium">{t('tabs.card', 'Karte')}</TabsTrigger>
<TabsTrigger value="reasons" className="px-3 py-2.5 text-sm font-medium">{t('tabs.reasons', 'Gründe')}</TabsTrigger>
<TabsTrigger value="service" className="px-3 py-2.5 text-sm font-medium">{t('tabs.service', 'Service')}</TabsTrigger>
<TabsTrigger value="impressum" className="px-3 py-2.5 text-sm font-medium">{t('tabs.impressum', 'Impressum')}</TabsTrigger>
<TabsTrigger value="leistungen" className="px-3 py-2.5 text-sm font-medium">{t('tabs.leistungen', 'Leistungen')}</TabsTrigger>
<TabsTrigger value="datenschutz" className="px-3 py-2.5 text-sm font-medium">{t('tabs.datenschutz', 'Datenschutz')}</TabsTrigger>
<TabsTrigger value="links" className="px-3 py-2.5 text-sm font-medium">{t('tabs.links', 'Links')}</TabsTrigger>
<TabsTrigger value="news" className="px-3 py-2.5 text-sm font-medium">{t('tabs.news', 'News')}</TabsTrigger>
<TabsTrigger value="daily-info" className="px-3 py-2.5 text-sm font-medium">{t('tabs.dailyInfo', 'Info')}</TabsTrigger>
<TabsTrigger value="faq" className="px-3 py-2.5 text-sm font-medium">{t('tabs.faq', 'FAQ')}</TabsTrigger>
</TabsList>
</div>

62
src/pages/Finanzierung.tsx
View File

@ -5,7 +5,7 @@ import Layout from '@/components/Layout';
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, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Home, Key, FileCheck } from 'lucide-react';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Home, Key, FileCheck, PhoneCall, MapPin, Gauge } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@ -40,17 +40,57 @@ const Finanzierung = () => {
<div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto gap-1">
<TabsTrigger value="overview" className="px-4 py-2">Übersicht</TabsTrigger>
<TabsTrigger value="arten" className="px-4 py-2">Finanzierungs-Arten</TabsTrigger>
<TabsTrigger value="immobilien" className="px-4 py-2">Immobilienfinanzierung</TabsTrigger>
<TabsTrigger value="details" className="px-4 py-2">Details & Konditionen</TabsTrigger>
<TabsTrigger value="calculator" className="px-4 py-2">Kreditrechner</TabsTrigger>
<TabsTrigger value="form" className="px-4 py-2">Anfrageformular</TabsTrigger>
<TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger>
<TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 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"
>
<Home className="w-4 h-4 mr-1.5" />
Übersicht
</TabsTrigger>
<TabsTrigger
value="arten"
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"
>
<PiggyBank className="w-4 h-4 mr-1.5" />
Arten
</TabsTrigger>
<TabsTrigger
value="immobilien"
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"
>
<Building className="w-4 h-4 mr-1.5" />
Immobilien
</TabsTrigger>
<TabsTrigger
value="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" />
Details
</TabsTrigger>
<TabsTrigger
value="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" />
Rechner
</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"
>
<Phone className="w-4 h-4 mr-1.5" />
Anfrage
</TabsTrigger>
<TabsTrigger
value="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" />
PDF
</TabsTrigger>
</TabsList>
</div>
<div className="p-4 md:p-6">
<TabsContent value="overview" className="mt-0">

63
src/pages/KinderGesundheit.tsx
View File

@ -10,6 +10,15 @@ import {
Mail,
Phone,
Shield,
FileText,
Calculator,
Users,
Star,
Home,
Activity,
Baby,
Heart,
FileCheck
} from 'lucide-react';
import Layout from '@/components/Layout';
import GeneralNotice from '@/components/GeneralNotice';
@ -98,28 +107,50 @@ const KinderGesundheit = () => {
<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-200 px-4 pt-4">
<TabsList className="justify-start flex-wrap h-auto gap-2">
<TabsTrigger value={TAB_OVERVIEW} className="px-6 py-2">
{t('tabs.overview', 'Übersicht')}
<TabsList className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger
value={TAB_OVERVIEW}
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<HeartPulse className="w-4 h-4 mr-1.5" />
{t('tabs.overview', 'Übersicht')}
</TabsTrigger>
<TabsTrigger
value={TAB_DETAILS}
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<FileText className="w-4 h-4 mr-1.5" />
{t('tabs.details', 'Details')}
</TabsTrigger>
<TabsTrigger value={TAB_DETAILS} className="px-6 py-2">
{t('tabs.details', 'Details & Vorteile')}
<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_CALCULATOR} className="px-6 py-2">
{t('tabs.calculator', 'Vergleichsrechner')}
<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_FORM} className="px-6 py-2">
{t('tabs.form', 'Anfrageformular')}
</TabsTrigger>
<TabsTrigger value={TAB_CATALOG} className="px-6 py-2">
<TabsTrigger
value={TAB_CATALOG}
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<FileCheck className="w-4 h-4 mr-1.5" />
{t('tabs.catalog', 'Ratgeber')}
</TabsTrigger>
<TabsTrigger value={TAB_BROCHURE} className="px-6 py-2">
{t('tabs.brochure', 'Kundenbroschüre (PDF)')}
<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>
</TabsList>
<div className="p-4 md:p-6">
<TabsContent value={TAB_OVERVIEW} className="mt-0">

57
src/pages/haftpflicht.tsx
View File

@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import GeneralNotice from '@/components/GeneralNotice';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Shield, Star, AlertTriangle, Calculator, Users, CheckCircle, PhoneCall, Clock, Search, AlertCircle, Phone, Mail, FileCheck } from 'lucide-react';
import { Shield, Star, AlertTriangle, Calculator, Users, CheckCircle, PhoneCall, Clock, Search, AlertCircle, Phone, Mail, FileCheck, FileText, Download, Home, Heart } from 'lucide-react';
import Layout from '@/components/Layout';
import HeroSlider from '@/components/HeroSlider';
@ -84,17 +84,50 @@ const Haftpflicht = () => {
</h2>
<Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto">
<TabsTrigger value="overview" className="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger>
<TabsTrigger value="details" className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger>
<TabsTrigger value="statistics" className="px-6 py-2">{t('tabs.statistics', 'Schadensstatistik')}</TabsTrigger>
<TabsTrigger value="calculator" className="px-6 py-2">{t('tabs.calculator', 'Haftpflicht-Rechner')}</TabsTrigger>
<TabsTrigger value="form" className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger>
<TabsTrigger value="claims" className="px-6 py-2">{t('tabs.claims', 'Schadenmeldung!')}</TabsTrigger>
<TabsTrigger value="catalog" className="px-6 py-2">{t('tabs.catalog', 'Infothek')}</TabsTrigger>
</TabsList>
</div>
<TabsList className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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"
>
<Home className="w-4 h-4 mr-1.5" />
{t('tabs.overview', 'Übersicht')}
</TabsTrigger>
<TabsTrigger
value="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="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="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', 'Haftpflicht-Rechner')}
</TabsTrigger>
<TabsTrigger
value="claims"
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"
>
<AlertCircle className="w-4 h-4 mr-1.5" />
{t('tabs.claims', 'Schadenmeldung!')}
</TabsTrigger>
<TabsTrigger
value="catalog"
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<FileCheck className="w-4 h-4 mr-1.5" />
{t('tabs.catalog', 'Infothek')}
</TabsTrigger>
</TabsList>
<div className="p-4 md:p-6">
<TabsContent value="overview" className="mt-0">

62
src/pages/hausrat.tsx
View File

@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import GeneralNotice from '@/components/GeneralNotice';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Shield, Star, AlertTriangle, Calculator, Users, CheckCircle, PhoneCall, Clock, Search, AlertCircle, Phone, Mail, FileCheck, Home } from 'lucide-react';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, Home, FileCheck, AlertCircle, Users, Building } from 'lucide-react';
import Layout from '@/components/Layout';
import HeroSlider from '@/components/HeroSlider';
@ -84,17 +84,57 @@ const Hausrat = () => {
</h2>
<Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4">
<TabsList className="justify-start flex-wrap h-auto gap-2">
<TabsTrigger value="overview" className="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger>
<TabsTrigger value="details" className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger>
<TabsTrigger value="statistics" className="px-6 py-2">{t('tabs.statistics', 'Schadensstatistik')}</TabsTrigger>
<TabsTrigger value="calculator" className="px-6 py-2">{t('tabs.calculator', 'Hausrat-Rechner')}</TabsTrigger>
<TabsTrigger value="form" className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger>
<TabsTrigger value="claims" className="px-6 py-2">{t('tabs.claims', 'Schadenmeldung!')}</TabsTrigger>
<TabsTrigger value="catalog" className="px-6 py-2">{t('tabs.catalog', 'Infothek')}</TabsTrigger>
<TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 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"
>
<Home className="w-4 h-4 mr-1.5" />
{t('tabs.overview', 'Übersicht')}
</TabsTrigger>
<TabsTrigger
value="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="statistics"
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.statistics', 'Statistik')}
</TabsTrigger>
<TabsTrigger
value="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="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="claims"
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"
>
<AlertCircle className="w-4 h-4 mr-1.5" />
{t('tabs.claims', 'Schaden')}
</TabsTrigger>
<TabsTrigger
value="catalog"
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<FileCheck className="w-4 h-4 mr-1.5" />
{t('tabs.catalog', 'Infothek')}
</TabsTrigger>
</TabsList>
</div>
<div className="p-4 md:p-6">
<TabsContent value="overview" className="mt-0">

62
src/pages/unfall.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Shield, Heart, CheckCircle, Star, Phone, Mail, AlertTriangle, Clock, FileCheck, PhoneCall, Calculator, Search, AlertCircle } from 'lucide-react';
import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, MapPin, Gauge, Heart, Ambulance, Activity } from 'lucide-react';
import Layout from '@/components/Layout';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@ -186,17 +186,57 @@ const Unfall = () => {
</div>
<Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4">
<TabsList className="justify-start flex-wrap h-auto gap-2">
<TabsTrigger value="overview" className="px-6 py-2">Übersicht</TabsTrigger>
<TabsTrigger value="details" className="px-6 py-2">Details & Vorteile</TabsTrigger>
<TabsTrigger value="statistics" className="px-6 py-2">Unfallstatistik</TabsTrigger>
<TabsTrigger value="calculator" className="px-6 py-2">Unfall-Rechner</TabsTrigger>
<TabsTrigger value="form" className="px-6 py-2">Anfrageformular</TabsTrigger>
<TabsTrigger value="claims" className="px-6 py-2">Unfallmitteilung</TabsTrigger>
<TabsTrigger value="catalog" className="px-6 py-2">Infothek</TabsTrigger>
<TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 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="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" />
Details
</TabsTrigger>
<TabsTrigger
value="statistics"
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" />
Statistik
</TabsTrigger>
<TabsTrigger
value="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"
>
<Gauge className="w-4 h-4 mr-1.5" />
Rechner
</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"
>
<Phone className="w-4 h-4 mr-1.5" />
Anfrage
</TabsTrigger>
<TabsTrigger
value="claims"
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"
>
<AlertCircle className="w-4 h-4 mr-1.5" />
Mitteilung
</TabsTrigger>
<TabsTrigger
value="catalog"
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<FileCheck className="w-4 h-4 mr-1.5" />
Infothek
</TabsTrigger>
</TabsList>
</div>
<div className="p-4 md:p-6">
<TabsContent value="overview" className="mt-0">