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

Große eingrif in buttons

Browse Source
This commit is contained in:
martin 2026-01-25 01:42:29 +01:00
parent 646550d496
commit 6e77ad7bb1
41 changed files with 1937 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.env
View File

@ -1,3 +1,9 @@
VITE_SUPABASE_PROJECT_ID="pwltkduuvidvnoiyijpo" VITE_SUPABASE_PROJECT_ID="pwltkduuvidvnoiyijpo"
VITE_SUPABASE_PUBLISHABLE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InB3bHRrZHV1dmlkdm5vaXlpanBvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjU5ODE3NzksImV4cCI6MjA4MTU1Nzc3OX0.OQGDu1ATF6zAjBanKyMJ5PthEFURxamVgUXFvuYg3lE" VITE_SUPABASE_PUBLISHABLE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InB3bHRrZHV1dmlkdm5vaXlpanBvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjU5ODE3NzksImV4cCI6MjA4MTU1Nzc3OX0.OQGDu1ATF6zAjBanKyMJ5PthEFURxamVgUXFvuYg3lE"
VITE_SUPABASE_URL="https://pwltkduuvidvnoiyijpo.supabase.co" VITE_SUPABASE_URL="https://pwltkduuvidvnoiyijpo.supabase.co"
VITE_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InB3bHRrZHV1dmlkdm5vaXlpanBvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjU5ODE3NzksImV4cCI6MjA4MTU1Nzc3OX0.OQGDu1ATF6zAjBanKyMJ5PthEFURxamVgUXFvuYg3lE"
# ==================== RESEND EMAIL SERVICE ====================
# Ersetzen Sie 're_xxxxxxxxxxxx' mit Ihrem echten Resend API Key
# API Key von https://resend.com -> API Keys -> Create API Key
VITE_RESEND_API_KEY="re_xxxxxxxxxxxx"

25
deploy-function.sh Normal file
View File

@ -0,0 +1,25 @@
#!/bin/bash
# Supabase Function Deployment Script
echo "Supabase Edge Function Deployment"
echo "=================================="
# Check if supabase CLI is available
if ! command -v supabase &> /dev/null; then
echo "❌ Supabase CLI nicht gefunden. Bitte installieren Sie zuerst:"
echo " npm install -g supabase"
echo " Oder: https://github.com/supabase/cli/releases"
exit 1
fi
# Login to Supabase
echo "🔐 Login zu Supabase..."
supabase login
# Deploy the function
echo "📤 Deploye send-contact-email Funktion..."
supabase functions deploy send-contact-email
echo "✅ Funktion deployed!"
echo ""
echo "📧 Testen Sie das Kontaktformular auf der Website."

16
public/locales/de/contact.json
View File

@ -147,9 +147,23 @@
"name": "Name", "name": "Name",
"email": "E-Mail", "email": "E-Mail",
"phone": "Telefon", "phone": "Telefon",
"subject": "Betreff",
"message": "Nachricht", "message": "Nachricht",
"send": "Nachricht senden", "send": "Nachricht senden",
"success": "Nachricht erfolgreich gesendet!" "sending": "Wird gesendet...",
"clear": "Leeren",
"success": "Ihre Nachricht wurde erfolgreich gesendet! Wir melden uns bald bei Ihnen.",
"error": "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut oder rufen Sie uns direkt an.",
"formTitle": "Kontaktformular",
"formDescription": "Senden Sie uns eine Nachricht und wir melden uns so schnell wie möglich bei Ihnen zurück.",
"namePlaceholder": "Ihr Name",
"emailPlaceholder": "ihre@email.de",
"phonePlaceholder": "0123 456789",
"subjectPlaceholder": "Ihr Anliegen",
"messagePlaceholder": "Ihre Nachricht an uns...",
"required": "*",
"qrClickHint": "Klicken Sie zum Vergrößern",
"whatsapp": "WhatsApp"
}, },
"about": { "about": {
"title": "Über mich", "title": "Über mich",

23
public/locales/pl/contact.json
View File

@ -104,6 +104,29 @@
"contactForm": { "contactForm": {
"title": "Szybkie zapytanie" "title": "Szybkie zapytanie"
}, },
"contact": {
"title": "Skontaktuj się z nami",
"name": "Imię",
"email": "E-mail",
"phone": "Telefon",
"subject": "Temat",
"message": "Wiadomość",
"send": "Wyślij wiadomość",
"sending": "Wysyłanie...",
"clear": "Wyczyść",
"success": "Wiadomość została wysłana pomyślnie! Skontaktujemy się z Tobą wkrótce.",
"error": "Wystąpił błąd. Spróbuj ponownie później lub zadzwoń do nas bezpośrednio.",
"formTitle": "Formularz kontaktowy",
"formDescription": "Wyślij nam wiadomość, a my skontaktujemy się z Tobą tak szybko jak to możliwe.",
"namePlaceholder": "Twoje imię",
"emailPlaceholder": "twoj@email.pl",
"phonePlaceholder": "0123 456789",
"subjectPlaceholder": "Twoja sprawa",
"messagePlaceholder": "Twoja wiadomość do nas...",
"required": "*",
"qrClickHint": "Kliknij aby powiększyć",
"whatsapp": "WhatsApp"
},
"contactInfo": { "contactInfo": {
"title": "Kontakt", "title": "Kontakt",
"mobile": "Komórka" "mobile": "Komórka"

2
src/components/Layout.tsx
View File

@ -116,7 +116,7 @@ const Layout = ({ children }: LayoutProps) => {
</Button> </Button>
)} )}
<Button asChild className="h-12 rounded-full px-6 bg-blue-600 hover:bg-blue-700 shadow-lg sm:h-9 sm:px-4 sm:text-xs"> <Button asChild className="h-12 rounded-full px-4 bg-blue-600 hover:bg-blue-700 shadow-lg sm:h-9 sm:px-3 sm:text-xs">
<Link to="/contact#contact"> <Link to="/contact#contact">
<Phone className="h-5 w-5 mr-2 sm:h-4 sm:w-4 sm:mr-1" /> <Phone className="h-5 w-5 mr-2 sm:h-4 sm:w-4 sm:mr-1" />
<span className="sm:hidden">{tNav('contact', 'Kontakt')}</span> <span className="sm:hidden">{tNav('contact', 'Kontakt')}</span>

223
src/pages/Agentur.tsx
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Shield, Users, TrendingUp, Clock, DollarSign, MapPin, Phone, Mail, Building, Briefcase, Truck, Star, Car, Home, CheckCircle, HeartPulse, LineChart } from 'lucide-react'; import { Shield, Users, TrendingUp, Clock, DollarSign, MapPin, Phone, Mail, Building, Briefcase, Truck, Star, Car, Home, CheckCircle, HeartPulse, LineChart, Globe, Calendar } from 'lucide-react';
import Layout from '@/components/Layout'; import Layout from '@/components/Layout';
import HeroSlider from '@/components/HeroSlider'; import HeroSlider from '@/components/HeroSlider';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@ -73,15 +73,66 @@ const Agentur = () => {
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<TabsList className="grid grid-cols-1 md:grid-cols-3 gap-2 w-full h-auto bg-transparent border-0 shadow-none"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsTrigger value="overview" className="px-3 py-2.5 text-sm font-medium">Philosophie</TabsTrigger> <TabsList className="grid grid-cols-8 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="leistungen" className="px-3 py-2.5 text-sm font-medium">Leistungen der Agentur</TabsTrigger> <TabsTrigger
<TabsTrigger value="philosophie" className="px-3 py-2.5 text-sm font-medium">Partnerversicherungen</TabsTrigger> value="overview"
<TabsTrigger value="kontakt" className="px-3 py-2.5 text-sm font-medium">Finanzdienstleistungen</TabsTrigger> className="relative px-2 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"
<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> <Home className="w-4 h-4 mr-1" />
<TabsTrigger value="investmentbanken" className="px-3 py-2.5 text-sm font-medium">Investment-Banken</TabsTrigger> Philosophie
</TabsTrigger>
<TabsTrigger
value="leistungen"
className="relative px-2 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" />
Leistungen
</TabsTrigger>
<TabsTrigger
value="philosophie"
className="relative px-2 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"
>
<Users className="w-4 h-4 mr-1" />
Partner
</TabsTrigger>
<TabsTrigger
value="events"
className="relative px-2 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"
>
<Calendar className="w-4 h-4 mr-1" />
Events
</TabsTrigger>
<TabsTrigger
value="kontakt"
className="relative px-2 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"
>
<TrendingUp className="w-4 h-4 mr-1" />
Finanz
</TabsTrigger>
<TabsTrigger
value="links"
className="relative px-2 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"
>
<Globe className="w-4 h-4 mr-1" />
Links
</TabsTrigger>
<TabsTrigger
value="vermoegensverwaltung"
className="relative px-2 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"
>
<DollarSign className="w-4 h-4 mr-1" />
Vermögen
</TabsTrigger>
<TabsTrigger
value="investmentbanken"
className="relative px-2 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" />
Banken
</TabsTrigger>
</TabsList> </TabsList>
</div>
<TabsContent value="overview" className="p-4 md:p-6"> <TabsContent value="overview" className="p-4 md:p-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
@ -514,6 +565,160 @@ const Agentur = () => {
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="events" className="p-4 md:p-6">
<div className="space-y-8">
<div className="text-center">
<Calendar className="h-12 w-12 text-blue-600 mx-auto mb-4" />
<h3 className="text-2xl font-bold text-gray-900 mb-4">Schulungen & Events</h3>
<p className="text-gray-600 mb-8">
Besuchen Sie unsere exklusiven Schulungen und Events an historischen Orten wie dem SCHLOSS Hotel Fleesensee
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow bg-white">
<div className="aspect-video bg-gray-100">
<img
src={assetUrl('iStock-928087944.jpg')}
alt="SCHLOSS Hotel Fleesensee 2026"
className="w-full h-full object-cover"
/>
</div>
<div className="p-4">
<div className="flex items-center gap-2 text-sm text-blue-600 font-semibold mb-2">
<MapPin className="w-4 h-4" />
SCHLOSS Hotel Fleesensee
</div>
<h4 className="text-lg font-semibold text-gray-900 mb-1">Apella Jahresauftaktkongress 2026</h4>
<p className="text-sm text-gray-600 mb-4">12. - 17. Januar 2026 • 6 Tage</p>
<p className="text-gray-600 mb-4">
Exklusiver Jahresauftaktkongress der Apella-Gruppe im eleganten SCHLOSS Hotel Fleesensee mit FoFo-Präsentationen und Netzwerk-Events
</p>
<div className="space-y-2 mb-4">
<div className="flex items-center gap-2 text-sm text-gray-600">
<Users className="w-4 h-4" />
<span>Max. 150 Teilnehmer</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<Clock className="w-4 h-4" />
<span>9:00 - 20:00 Uhr</span>
</div>
</div>
<Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
Jetzt anmelden
</Button>
</div>
</div>
<div className="rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow bg-white">
<div className="aspect-video bg-gray-100">
<img
src={assetUrl('iStock-957363908.jpg')}
alt="FoFo Presentation"
className="w-full h-full object-cover"
/>
</div>
<div className="p-4">
<div className="flex items-center gap-2 text-sm text-blue-600 font-semibold mb-2">
<MapPin className="w-4 h-4" />
SCHLOSS Hotel Fleesensee
</div>
<h4 className="text-lg font-semibold text-gray-900 mb-1">FoFo-Präsentation</h4>
<p className="text-sm text-gray-600 mb-4">13. Januar 2026 • 1 Tag</p>
<p className="text-gray-600 mb-4">
Professionelle FoFo-Präsentationen (Follow-up/Follow-on) mit neuesten Markteinblicken und Strategien
</p>
<div className="space-y-2 mb-4">
<div className="flex items-center gap-2 text-sm text-gray-600">
<Users className="w-4 h-4" />
<span>Max. 50 Teilnehmer</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<Clock className="w-4 h-4" />
<span>14:00 - 18:00 Uhr</span>
</div>
</div>
<Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
Jetzt anmelden
</Button>
</div>
</div>
<div className="rounded-lg border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow bg-white">
<div className="aspect-video bg-gray-100">
<img
src={assetUrl('iStock-948602744.jpg')}
alt="Networking Event"
className="w-full h-full object-cover"
/>
</div>
<div className="p-4">
<div className="flex items-center gap-2 text-sm text-blue-600 font-semibold mb-2">
<MapPin className="w-4 h-4" />
SCHLOSS Hotel Fleesensee
</div>
<h4 className="text-lg font-semibold text-gray-900 mb-1">Networking-Event</h4>
<p className="text-sm text-gray-600 mb-4">15. Januar 2026 • 1 Abend</p>
<p className="text-gray-600 mb-4">
Exklusives Networking-Event mit Partnern und Kunden im eleganten Ambiente des SCHLOSS Hotels Fleesensee
</p>
<div className="space-y-2 mb-4">
<div className="flex items-center gap-2 text-sm text-gray-600">
<Users className="w-4 h-4" />
<span>Max. 80 Teilnehmer</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<Clock className="w-4 h-4" />
<span>18:00 - 22:00 Uhr</span>
</div>
</div>
<Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
Jetzt anmelden
</Button>
</div>
</div>
</div>
<div className="bg-white rounded-xl border border-gray-200 p-6">
<h4 className="text-xl font-bold text-gray-900 mb-4">Warum SCHLOSS Hotel Fleesensee?</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<p className="text-gray-600 mb-4">
Das elegante SCHLOSS Hotel Fleesensee bietet die perfekte Kulisse für unsere Apella Jahresauftaktkongresse:
</p>
<ul className="space-y-2 text-gray-600">
<li className="flex items-start gap-2">
<CheckCircle className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
<span>Exklusive Location am Fleesensee</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
<span>Professionelle FoFo-Präsentationen</span>
</li>
<li className="flex items-start gap-2">
<CheckCircle className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
<span>High-Level Networking</span>
</li>
</ul>
</div>
<div>
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
<div className="flex items-center gap-2 text-sm font-semibold text-gray-900 mb-2">
<Calendar className="w-4 h-4 text-blue-600" />
Nächster Termin
</div>
<p className="text-gray-600">
<strong>12. - 17. Januar 2026</strong><br />
Apella Jahresauftaktkongress 2026<br />
<span className="text-blue-600">Noch 45 Plätze frei</span>
</p>
</div>
</div>
</div>
</div>
</div>
</TabsContent>
<div className="p-4 md:p-6"> <div className="p-4 md:p-6">
<GeneralNotice className="rounded-md border border-gray-200 bg-white p-4" /> <GeneralNotice className="rounded-md border border-gray-200 bg-white p-4" />
</div> </div>

2
src/pages/Autoversicherung.tsx
View File

@ -121,7 +121,7 @@ const Autoversicherung = () => {
id="tab-section" 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"> <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"> <TabsList className="grid grid-cols-8 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger <TabsTrigger
value="overview" 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" 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"

71
src/pages/Beteiligungen.tsx
View File

@ -5,7 +5,7 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Users, Handshake, Award } from 'lucide-react'; import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Users, Handshake, Award, Home, AlertCircle } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider'; import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab'; import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@ -40,16 +40,65 @@ const Beteiligungen = () => {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto"> <TabsList className="grid grid-cols-4 md:grid-cols-7 lg:grid-cols-7 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-4 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="arten" className="px-4 py-2">Beteiligungs-Arten</TabsTrigger> value="overview"
<TabsTrigger value="chancen" className="px-4 py-2">Chancen & Risiken</TabsTrigger> 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"
<TabsTrigger value="details" className="px-4 py-2">Details & Konditionen</TabsTrigger> >
<TabsTrigger value="calculator" className="px-4 py-2">Rendite-Rechner</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="form" className="px-4 py-2">Anfrageformular</TabsTrigger> Übersicht
<TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger> </TabsTrigger>
</TabsList> <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"
>
<Handshake className="w-4 h-4 mr-1.5" />
Arten
</TabsTrigger>
<TabsTrigger
value="chancen"
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"
>
<TrendingUp className="w-4 h-4 mr-1.5" />
Chancen
</TabsTrigger>
<TabsTrigger
value="risiken"
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" />
Risiken
</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>
<div className="p-4 md:p-6"> <div className="p-4 md:p-6">

63
src/pages/BruttoNettoRechner.tsx
View File

@ -5,7 +5,7 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Percent, BarChart3, Receipt, Calculator as CalculatorIcon } from 'lucide-react'; import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Percent, BarChart3, Receipt, Calculator as CalculatorIcon, Home, AlertCircle } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider'; import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab'; import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@ -41,15 +41,58 @@ const BruttoNettoRechner = () => {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto"> <TabsList className="grid grid-cols-4 md:grid-cols-7 lg:grid-cols-7 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-4 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="rechner" className="px-4 py-2">Gehaltsrechner</TabsTrigger> value="overview"
<TabsTrigger value="steuern" className="px-4 py-2">Steuern optimieren</TabsTrigger> 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"
<TabsTrigger value="details" className="px-4 py-2">Details & Abzüge</TabsTrigger> >
<TabsTrigger value="form" className="px-4 py-2">Beratungsanfrage</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger> Übersicht
</TabsList> </TabsTrigger>
<TabsTrigger
value="rechner"
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"
>
<CalculatorIcon className="w-4 h-4 mr-1.5" />
Rechner
</TabsTrigger>
<TabsTrigger
value="steuern"
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"
>
<Receipt className="w-4 h-4 mr-1.5" />
Steuern
</TabsTrigger>
<TabsTrigger
value="tipps"
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" />
Tipps
</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="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>
<div className="p-4 md:p-6"> <div className="p-4 md:p-6">

306
src/pages/Contact.tsx
View File

@ -4,9 +4,10 @@ import TenReasons from '@/components/TenReasons';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
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 } 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';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { sendEmail } from '@/services/emailService';
export default function ContactPage() { export default function ContactPage() {
const baseUrl = import.meta.env.BASE_URL; const baseUrl = import.meta.env.BASE_URL;
@ -14,6 +15,51 @@ export default function ContactPage() {
const { t } = useTranslation('contact'); const { t } = useTranslation('contact');
const [yearsOfExperience, setYearsOfExperience] = useState(0); const [yearsOfExperience, setYearsOfExperience] = useState(0);
const [activeTab, setActiveTab] = useState('contact'); const [activeTab, setActiveTab] = useState('contact');
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
subject: '',
message: ''
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
setSubmitStatus('idle');
try {
// Sende E-Mail direkt über Resend API
const result = await sendEmail({
name: formData.name,
email: formData.email,
phone: formData.phone || 'Keine Angabe',
subject: formData.subject,
message: formData.message,
to: 'info@finanzen-mizera.de'
});
if (result.success) {
setSubmitStatus('success');
// Formular nach kurzer Zeit zurücksetzen
setTimeout(() => {
setFormData({ name: '', email: '', phone: '', subject: '', message: '' });
setSubmitStatus('idle');
}, 2000);
} else {
setSubmitStatus('error');
}
} catch (error) {
console.error('Fehler beim Senden:', error);
setSubmitStatus('error');
} finally {
setIsSubmitting(false);
}
};
const [weather, setWeather] = useState<{ temp?: number; wind?: number; time?: string; isLoading: boolean }>({ const [weather, setWeather] = useState<{ temp?: number; wind?: number; time?: string; isLoading: boolean }>({
isLoading: true, isLoading: true,
}); });
@ -175,27 +221,94 @@ export default function ContactPage() {
}} }}
className="w-full" className="w-full"
> >
<div id="contact-tabs"> <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-5 lg:grid-cols-11 gap-2 w-full h-auto bg-transparent border-0 shadow-none"> <TabsList className="grid 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
<TabsTrigger value="card" className="px-3 py-2.5 text-sm font-medium">{t('tabs.card', 'Karte')}</TabsTrigger> value="contact"
<TabsTrigger value="reasons" className="px-3 py-2.5 text-sm font-medium">{t('tabs.reasons', 'Gründe')}</TabsTrigger> 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"
<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> <Phone className="w-4 h-4 mr-1.5" />
<TabsTrigger value="leistungen" className="px-3 py-2.5 text-sm font-medium">{t('tabs.leistungen', 'Leistungen')}</TabsTrigger> {t('tabs.contact', 'Kontakt')}
<TabsTrigger value="datenschutz" className="px-3 py-2.5 text-sm font-medium">{t('tabs.datenschutz', 'Datenschutz')}</TabsTrigger> </TabsTrigger>
<TabsTrigger value="links" className="px-3 py-2.5 text-sm font-medium">{t('tabs.links', 'Links')}</TabsTrigger> <TabsTrigger
<TabsTrigger value="news" className="px-3 py-2.5 text-sm font-medium">{t('tabs.news', 'News')}</TabsTrigger> value="card"
<TabsTrigger value="daily-info" className="px-3 py-2.5 text-sm font-medium">{t('tabs.dailyInfo', 'Info')}</TabsTrigger> 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"
<TabsTrigger value="faq" className="px-3 py-2.5 text-sm font-medium">{t('tabs.faq', 'FAQ')}</TabsTrigger> >
<MapPin className="w-4 h-4 mr-1.5" />
{t('tabs.card', 'Karte')}
</TabsTrigger>
<TabsTrigger
value="reasons"
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" />
{t('tabs.reasons', 'Gründe')}
</TabsTrigger>
<TabsTrigger
value="service"
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"
>
<TrendingUp className="w-4 h-4 mr-1.5" />
{t('tabs.service', 'Service')}
</TabsTrigger>
<TabsTrigger
value="impressum"
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.impressum', 'Impressum')}
</TabsTrigger>
<TabsTrigger
value="leistungen"
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.leistungen', 'Leistungen')}
</TabsTrigger>
<TabsTrigger
value="datenschutz"
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"
>
<Lock className="w-4 h-4 mr-1.5" />
{t('tabs.datenschutz', 'Datenschutz')}
</TabsTrigger>
<TabsTrigger
value="links"
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"
>
<Globe className="w-4 h-4 mr-1.5" />
{t('tabs.links', 'Links')}
</TabsTrigger>
<TabsTrigger
value="news"
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"
>
<Newspaper className="w-4 h-4 mr-1.5" />
{t('tabs.news', 'News')}
</TabsTrigger>
<TabsTrigger
value="daily-info"
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"
>
<CloudSun className="w-4 h-4 mr-1.5" />
{t('tabs.dailyInfo', 'Info')}
</TabsTrigger>
<TabsTrigger
value="faq"
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"
>
<HelpCircle className="w-4 h-4 mr-1.5" />
{t('tabs.faq', 'FAQ')}
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>
<TabsContent id="contact" value="contact" className="p-4 md:p-6 h-[75vh] overflow-y-auto"> <TabsContent id="contact" value="contact" className="p-4 md:p-6">
<div className="grid md:grid-cols-3 gap-6"> <div className="grid lg:grid-cols-2 gap-8">
<div className="md:col-span-2"> {/* Linke Seite - Kontaktinformationen */}
<div className="space-y-6">
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
<div className="sm:w-56 md:w-64"> <div className="sm:w-48 md:w-56">
<div className="w-full aspect-[3/4] overflow-hidden rounded-xl shadow-lg border-2 border-blue-100 bg-gray-100"> <div className="w-full aspect-[3/4] overflow-hidden rounded-xl shadow-lg border-2 border-blue-100 bg-gray-100">
<img <img
src={assetUrl('Fotolia_1171371_XS.jpg')} src={assetUrl('Fotolia_1171371_XS.jpg')}
@ -223,7 +336,7 @@ export default function ContactPage() {
</div> </div>
</div> </div>
<div className="mt-8 space-y-2 text-sm text-gray-800"> <div className="space-y-2 text-sm text-gray-800">
<div className="flex gap-2 items-start"> <div className="flex gap-2 items-start">
<span className="text-blue-700 font-semibold">//</span> <span className="text-blue-700 font-semibold">//</span>
<div> <div>
@ -235,7 +348,7 @@ export default function ContactPage() {
</div> </div>
</div> </div>
<div className="mt-8 grid sm:grid-cols-2 gap-3"> <div className="grid sm:grid-cols-2 gap-3">
<a <a
href="tel:021197629355" href="tel:021197629355"
className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors" className="flex items-center gap-3 rounded-md border border-gray-200 p-3 hover:bg-gray-50 transition-colors"
@ -280,22 +393,160 @@ export default function ContactPage() {
</a> </a>
</div> </div>
<div className="mt-6 text-sm text-gray-600 flex items-start gap-2"> <div className="text-sm text-gray-600 flex items-start gap-2">
<MapPin className="h-4 w-4 text-blue-600 mt-0.5" /> <MapPin className="h-4 w-4 text-blue-600 mt-0.5" />
<span>{t('appointmentNote', 'Termine nach vorheriger telefonischer Vereinbarung.')}</span> <span>{t('appointmentNote', 'Termine nach vorheriger telefonischer Vereinbarung.')}</span>
</div> </div>
</div> </div>
<div className="md:col-span-1"> {/* Rechte Seite - Kontaktformular und QR-Code */}
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3"> <div className="space-y-6">
<div className="text-sm font-semibold text-gray-900 mb-2">{t('qr.title', 'QR-Code')}</div> <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
<div className="text-center mb-6">
<Send className="h-8 w-8 text-blue-600 mx-auto mb-3" />
<h3 className="text-xl font-bold text-gray-900 mb-2">{t('contact.formTitle', 'Kontaktformular')}</h3>
<p className="text-gray-600 text-sm">
{t('contact.formDescription', 'Senden Sie uns eine Nachricht und wir melden uns so schnell wie möglich bei Ihnen zurück.')}
</p>
</div>
<form className="space-y-4" onSubmit={handleSubmit}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<User className="w-4 h-4 inline mr-1" />
{t('contact.name', 'Name')} {t('contact.required', '*')}
</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({...formData, name: e.target.value})}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder={t('contact.namePlaceholder', 'Ihr Name')}
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<Mail className="w-4 h-4 inline mr-1" />
{t('contact.email', 'E-Mail')} {t('contact.required', '*')}
</label>
<input
type="email"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder={t('contact.emailPlaceholder', 'ihre@email.de')}
required
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<Phone className="w-4 h-4 inline mr-1" />
{t('contact.phone', 'Telefon')}
</label>
<input
type="tel"
value={formData.phone}
onChange={(e) => setFormData({...formData, phone: e.target.value})}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder={t('contact.phonePlaceholder', '0123 456789')}
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<MessageSquare className="w-4 h-4 inline mr-1" />
{t('contact.subject', 'Betreff')} {t('contact.required', '*')}
</label>
<input
type="text"
value={formData.subject}
onChange={(e) => setFormData({...formData, subject: e.target.value})}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder={t('contact.subjectPlaceholder', 'Ihr Anliegen')}
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<MessageSquare className="w-4 h-4 inline mr-1" />
{t('contact.message', 'Nachricht')} {t('contact.required', '*')}
</label>
<textarea
value={formData.message}
onChange={(e) => setFormData({...formData, message: e.target.value})}
rows={4}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
placeholder={t('contact.messagePlaceholder', 'Ihre Nachricht an uns...')}
required
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Button
type="submit"
className="bg-blue-600 hover:bg-blue-700 text-white text-base h-14 px-2"
disabled={isSubmitting}
>
<Send className="w-5 h-5 mr-1" />
{isSubmitting ? t('contact.sending', 'Wird gesendet...') : t('contact.send', 'Nachricht senden')}
</Button>
<Button
type="button"
variant="outline"
className="border-gray-300 text-base h-14 px-2"
onClick={() => setFormData({ name: '', email: '', phone: '', subject: '', message: '' })}
disabled={isSubmitting}
>
{t('contact.clear', 'Leeren')}
</Button>
<Button
type="button"
variant="outline"
className="border-green-500 text-green-600 hover:bg-green-50 text-base h-14 px-2"
onClick={() => window.open('https://wa.me/491719864053', '_blank')}
>
<MessageCircle className="w-5 h-5 mr-1" />
{t('contact.whatsapp', 'WhatsApp')}
</Button>
</div>
{/* Status-Meldungen */}
{submitStatus === 'success' && (
<div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-md">
<div className="flex items-center gap-2 text-green-800 text-sm">
<Mail className="w-4 h-4" />
<span>{t('contact.success', 'Ihre Nachricht wurde erfolgreich gesendet! Wir melden uns bald bei Ihnen.')}</span>
</div>
</div>
)}
{submitStatus === 'error' && (
<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-md">
<div className="flex items-center gap-2 text-red-800 text-sm">
<Mail className="w-4 h-4" />
<span>{t('contact.error', 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut oder rufen Sie uns direkt an.')}</span>
</div>
</div>
)}
</form>
</div>
{/* QR-Code - kleiner und platziert wie Musterbild */}
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
<div className="text-sm font-semibold text-gray-900 mb-3 text-center">{t('qr.title', 'QR-Code')}</div>
<a <a
href={assetUrl('head_kontakt_agentur_mizera.jpg')} href={assetUrl('head_kontakt_agentur_mizera.jpg')}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="block" className="block mx-auto"
style={{maxWidth: '40%'}}
> >
<div className="w-full aspect-square bg-white border border-gray-200 p-2"> <div className="w-full aspect-[3/4] overflow-hidden rounded-lg bg-white border border-gray-200">
<img <img
src={assetUrl('head_kontakt_agentur_mizera.jpg')} src={assetUrl('head_kontakt_agentur_mizera.jpg')}
alt={t('images.qrAlt', 'Agentur Mizera QR-Code')} alt={t('images.qrAlt', 'Agentur Mizera QR-Code')}
@ -304,6 +555,9 @@ export default function ContactPage() {
/> />
</div> </div>
</a> </a>
<p className="text-xs text-gray-600 text-center mt-2">
{t('contact.qrClickHint', 'Klicken Sie zum Vergrößern')}
</p>
</div> </div>
</div> </div>
</div> </div>

85
src/pages/Depots.tsx
View File

@ -5,7 +5,7 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, BarChart3, Briefcase, ArrowUpRight } from 'lucide-react'; import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, BarChart3, Briefcase, ArrowUpRight, Home, AlertCircle } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider'; import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab'; import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@ -40,16 +40,79 @@ const Depots = () => {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto"> <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-4 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="depotarten" className="px-4 py-2">Depot-Arten</TabsTrigger> value="overview"
<TabsTrigger value="kosten" className="px-4 py-2">Kosten & Gebühren</TabsTrigger> 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"
<TabsTrigger value="details" className="px-4 py-2">Details & Konditionen</TabsTrigger> >
<TabsTrigger value="calculator" className="px-4 py-2">Depot-Rechner</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="form" className="px-4 py-2">Anfrageformular</TabsTrigger> Übersicht
<TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger> </TabsTrigger>
</TabsList> <TabsTrigger
value="depotarten"
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"
>
<Briefcase className="w-4 h-4 mr-1.5" />
Arten
</TabsTrigger>
<TabsTrigger
value="kosten"
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="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="rechner"
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"
>
<BarChart3 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="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" />
Konditionen
</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"
>
<BarChart3 className="w-4 h-4 mr-1.5" />
Depot-Rechner
</TabsTrigger>
<TabsTrigger
value="formular"
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" />
Formular
</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>
<div className="p-4 md:p-6"> <div className="p-4 md:p-6">

84
src/pages/DrittfahrerSchutz.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Shield, Phone, Mail, CheckCircle, Star, Users, FileText, Calculator, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall } from 'lucide-react'; import { Shield, Phone, Mail, CheckCircle, Star, Users, FileText, Calculator, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, Home } 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';
@ -91,16 +91,78 @@ const DrittfahrerSchutz = () => {
}} }}
className="w-full" className="w-full"
> >
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto"> <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger> <TabsTrigger
<TabsTrigger value="details" className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger> value="overview"
<TabsTrigger value="statistics" className="px-6 py-2">{t('tabs.statistics', 'Unfallstatistik')}</TabsTrigger> 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"
<TabsTrigger value="calculator" className="px-6 py-2">{t('tabs.calculator', 'Vergleichsrechner')}</TabsTrigger> >
<TabsTrigger value="form" className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="claims" className="px-6 py-2">{t('tabs.claims', 'Schadenmeldung!')}</TabsTrigger> {t('tabs.overview', 'Übersicht')}
<TabsTrigger value="catalog" className="px-6 py-2">{t('tabs.catalog', 'Bußgeldkatalog')}</TabsTrigger> </TabsTrigger>
<TabsTrigger value="brochure" className="px-6 py-2">{t('tabs.brochure', 'Kundenbroschüre (PDF)')}</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="rechner"
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', 'Vergleich')}
</TabsTrigger>
<TabsTrigger
value="formular"
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', 'Formular')}
</TabsTrigger>
<TabsTrigger
value="katalog"
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> </TabsList>
</div> </div>

70
src/pages/FairMobil.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall } from 'lucide-react'; import { Shield, Phone, Mail, CheckCircle, Star, Car, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, Home } 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';
@ -90,16 +90,64 @@ const FairMobil = () => {
}} }}
className="w-full" className="w-full"
> >
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto"> <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="px-6 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="details" className="px-6 py-2">Details & Vorteile</TabsTrigger> value="overview"
<TabsTrigger value="statistics" className="px-6 py-2">Unfallstatistik</TabsTrigger> 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"
<TabsTrigger value="calculator" className="px-6 py-2">FairMobil-Rechner</TabsTrigger> >
<TabsTrigger value="form" className="px-6 py-2">Anfrageformular</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="claims" className="px-6 py-2">Schadenmeldung!</TabsTrigger> Übersicht
<TabsTrigger value="catalog" className="px-6 py-2">Bußgeldkatalog</TabsTrigger> </TabsTrigger>
<TabsTrigger value="brochure" className="px-6 py-2">Kundenbroschüre (PDF)</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"
>
<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="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" />
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"
>
<Search className="w-4 h-4 mr-1.5" />
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" />
PDF
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

46
src/pages/FamilienHaftpflicht.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Shield, Users, Phone, Mail, CheckCircle, Download, AlertTriangle, FileCheck } from 'lucide-react'; import { Shield, Users, Phone, Mail, CheckCircle, Download, AlertTriangle, FileCheck, Home, FileText, Calculator } from 'lucide-react';
import Layout from '@/components/Layout'; import Layout from '@/components/Layout';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -24,13 +24,43 @@ const FamilienHaftpflicht = () => {
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto"> <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="px-6 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="details" className="px-6 py-2">Details & Vorteile</TabsTrigger> value="overview"
<TabsTrigger value="form" className="px-6 py-2">Anfrageformular</TabsTrigger> 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"
<TabsTrigger value="claims" className="px-6 py-2">Schadenmeldung</TabsTrigger> >
<TabsTrigger value="catalog" className="px-6 py-2">Ratgeber</TabsTrigger> <Home 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="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"
>
<AlertTriangle className="w-4 h-4 mr-1.5" />
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" />
Ratgeber
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

38
src/pages/FamilienReise.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Plane, Shield, Phone, Mail, CheckCircle, Download, AlertTriangle } from 'lucide-react'; import { Plane, Shield, Phone, Mail, CheckCircle, Download, AlertTriangle, Home, FileText, Calculator } from 'lucide-react';
import Layout from '@/components/Layout'; import Layout from '@/components/Layout';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -39,12 +39,36 @@ const FamilienReise = () => {
<div className="max-w-screen-2xl mx-auto"> <div className="max-w-screen-2xl mx-auto">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="justify-start flex-wrap h-auto gap-2"> <TabsList className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-6 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="details" className="px-6 py-2">Details & Vorteile</TabsTrigger> value="overview"
<TabsTrigger value="form" className="px-6 py-2">Anfrageformular</TabsTrigger> 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"
<TabsTrigger value="catalog" className="px-6 py-2">Ratgeber</TabsTrigger> >
<Home 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="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="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"
>
<Plane className="w-4 h-4 mr-1.5" />
Ratgeber
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

38
src/pages/FamilienVorsorge.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Shield, Heart, Phone, Mail, CheckCircle, Download, FileText } from 'lucide-react'; import { Shield, Heart, Phone, Mail, CheckCircle, Download, FileText, Home, Calculator } from 'lucide-react';
import Layout from '@/components/Layout'; import Layout from '@/components/Layout';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -39,12 +39,36 @@ const FamilienVorsorge = () => {
<div className="max-w-screen-2xl mx-auto"> <div className="max-w-screen-2xl mx-auto">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="justify-start flex-wrap h-auto gap-2"> <TabsList className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-6 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="details" className="px-6 py-2">Details & Vorteile</TabsTrigger> value="overview"
<TabsTrigger value="form" className="px-6 py-2">Anfrageformular</TabsTrigger> 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"
<TabsTrigger value="catalog" className="px-6 py-2">Ratgeber</TabsTrigger> >
<Home 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="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="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"
>
<Calculator className="w-4 h-4 mr-1.5" />
Ratgeber
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

38
src/pages/Familienpakete.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { Users, Shield, Phone, Mail, CheckCircle, Download } from 'lucide-react'; import { Users, Shield, Phone, Mail, CheckCircle, Download, Home, FileText, Calculator } from 'lucide-react';
import Layout from '@/components/Layout'; import Layout from '@/components/Layout';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -24,12 +24,36 @@ const Familienpakete = () => {
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="justify-start flex-wrap h-auto gap-2"> <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="px-6 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="details" className="px-6 py-2">Details & Vorteile</TabsTrigger> value="overview"
<TabsTrigger value="form" className="px-6 py-2">Anfrageformular</TabsTrigger> 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"
<TabsTrigger value="catalog" className="px-6 py-2">Ratgeber</TabsTrigger> >
<Home 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="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="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"
>
<Shield className="w-4 h-4 mr-1.5" />
Ratgeber
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

4
src/pages/Finanzierung.tsx
View File

@ -40,7 +40,8 @@ const Finanzierung = () => {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<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"> <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-7 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger <TabsTrigger
value="overview" 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" 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"
@ -91,6 +92,7 @@ const Finanzierung = () => {
PDF PDF
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</div>
<div className="p-4 md:p-6"> <div className="p-4 md:p-6">
<TabsContent value="overview" className="mt-0"> <TabsContent value="overview" className="mt-0">

62
src/pages/Flottenversicherung.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Shield, Phone, Mail, CheckCircle, Star, Truck, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall } from 'lucide-react'; import { Shield, Phone, Mail, CheckCircle, Star, Truck, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, Home } 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';
@ -92,15 +92,57 @@ const Flottenversicherung = () => {
}} }}
className="w-full" className="w-full"
> >
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="justify-start flex-wrap h-auto gap-2"> <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="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger> <TabsTrigger
<TabsTrigger value="details" className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger> value="overview"
<TabsTrigger value="statistics" className="px-6 py-2">{t('tabs.statistics', 'Unfallstatistik')}</TabsTrigger> 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"
<TabsTrigger value="calculator" className="px-6 py-2">{t('tabs.calculator', 'Vergleichsrechner')}</TabsTrigger> >
<TabsTrigger value="form" className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="claims" className="px-6 py-2">{t('tabs.claims', 'Schadenmeldung!')}</TabsTrigger> {t('tabs.overview', 'Übersicht')}
<TabsTrigger value="catalog" className="px-6 py-2">{t('tabs.catalog', 'Bußgeldkatalog')}</TabsTrigger> </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"
>
<Search className="w-4 h-4 mr-1.5" />
{t('tabs.catalog', 'Katalog')}
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

62
src/pages/Hundeversicherung.tsx
View File

@ -5,7 +5,7 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Dog, Star, CheckCircle, Phone, Mail, FileText, Activity, Stethoscope } from 'lucide-react'; import { Shield, Heart, Dog, Star, CheckCircle, Phone, Mail, FileText, Activity, Stethoscope, Home, Calculator } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider'; import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab'; import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@ -40,15 +40,57 @@ const Hundeversicherung = () => {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto gap-1"> <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="px-4 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="krankenversicherung" className="px-4 py-2">Tierkrankenversicherung</TabsTrigger> value="overview"
<TabsTrigger value="haftpflicht" className="px-4 py-2">Tierhalterhaftpflicht</TabsTrigger> 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"
<TabsTrigger value="details" className="px-4 py-2">Details & Vorteile</TabsTrigger> >
<TabsTrigger value="calculator" className="px-4 py-2">Vergleichsrechner</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="form" className="px-4 py-2">Anfrageformular</TabsTrigger> Übersicht
<TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger> </TabsTrigger>
<TabsTrigger
value="krankenversicherung"
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"
>
<Stethoscope className="w-4 h-4 mr-1.5" />
Tierkranken
</TabsTrigger>
<TabsTrigger
value="haftpflicht"
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" />
Haftpflicht
</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"
>
<FileText className="w-4 h-4 mr-1.5" />
PDF
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

62
src/pages/Investmentsparplan.tsx
View File

@ -5,7 +5,7 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Calendar } from 'lucide-react'; import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Calendar, Home } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider'; import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab'; import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@ -40,15 +40,57 @@ const Investmentsparplan = () => {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto gap-1"> <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="px-4 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="vorteile" className="px-4 py-2">Vorteile</TabsTrigger> value="overview"
<TabsTrigger value="typen" className="px-4 py-2">Plan-Typen</TabsTrigger> 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"
<TabsTrigger value="details" className="px-4 py-2">Details & Konditionen</TabsTrigger> >
<TabsTrigger value="calculator" className="px-4 py-2">Sparrechner</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="form" className="px-4 py-2">Anfrageformular</TabsTrigger> Übersicht
<TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger> </TabsTrigger>
<TabsTrigger
value="vorteile"
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="typen"
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" />
Plan-Typen
</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> </TabsList>
</div> </div>

62
src/pages/Katzenversicherung.tsx
View File

@ -5,7 +5,7 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Cat, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download } from 'lucide-react'; import { Shield, Heart, Cat, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, Home } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider'; import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab'; import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@ -40,15 +40,57 @@ const Katzenversicherung = () => {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto gap-1"> <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="px-4 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="krankenversicherung" className="px-4 py-2">Katzenkrankenversicherung</TabsTrigger> value="overview"
<TabsTrigger value="haftpflicht" className="px-4 py-2">Katzenhaftpflicht</TabsTrigger> 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"
<TabsTrigger value="details" className="px-4 py-2">Details & Vorteile</TabsTrigger> >
<TabsTrigger value="calculator" className="px-4 py-2">Vergleichsrechner</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="form" className="px-4 py-2">Anfrageformular</TabsTrigger> Übersicht
<TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger> </TabsTrigger>
<TabsTrigger
value="krankenversicherung"
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"
>
<Heart className="w-4 h-4 mr-1.5" />
Katzenkranken
</TabsTrigger>
<TabsTrigger
value="haftpflicht"
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" />
Katzenhaftpflicht
</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> </TabsList>
</div> </div>

4
src/pages/KinderGesundheit.tsx
View File

@ -107,7 +107,8 @@ const KinderGesundheit = () => {
<div className="max-w-screen-2xl mx-auto"> <div className="max-w-screen-2xl mx-auto">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section">
<TabsList className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none"> <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-3 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger <TabsTrigger
value={TAB_OVERVIEW} 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" 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"
@ -151,6 +152,7 @@ const KinderGesundheit = () => {
{t('tabs.brochure', 'PDF')} {t('tabs.brochure', 'PDF')}
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</div>
<div className="p-4 md:p-6"> <div className="p-4 md:p-6">
<TabsContent value={TAB_OVERVIEW} className="mt-0"> <TabsContent value={TAB_OVERVIEW} className="mt-0">

54
src/pages/KinderGesundheitZahn.tsx
View File

@ -9,7 +9,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
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';
import RightImageCard from '@/components/tab-pages/RightImageCard'; import RightImageCard from '@/components/tab-pages/RightImageCard';
import { CheckCircle, Download, Mail, Phone, Shield } from 'lucide-react'; import { CheckCircle, Download, Mail, Phone, Shield, Home, FileText, Calculator, Star, Search } from 'lucide-react';
const TAB_OVERVIEW = 'overview'; const TAB_OVERVIEW = 'overview';
const TAB_DETAILS = 'details'; const TAB_DETAILS = 'details';
@ -89,14 +89,50 @@ const KinderGesundheitZahn = () => {
<div className="max-w-screen-2xl mx-auto"> <div className="max-w-screen-2xl mx-auto">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={onTabChange} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="justify-start flex-wrap h-auto gap-2"> <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value={TAB_OVERVIEW} className="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger> <TabsTrigger
<TabsTrigger value={TAB_DETAILS} className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger> value={TAB_OVERVIEW}
<TabsTrigger value={TAB_CALCULATOR} className="px-6 py-2">{t('tabs.calculator', 'Vergleichsrechner')}</TabsTrigger> 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"
<TabsTrigger value={TAB_FORM} className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger> >
<TabsTrigger value={TAB_CATALOG} className="px-6 py-2">{t('tabs.catalog', 'Ratgeber')}</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value={TAB_BROCHURE} className="px-6 py-2">{t('tabs.brochure', 'Kundenbroschüre (PDF)')}</TabsTrigger> {t('tabs.overview', 'Übersicht')}
</TabsTrigger>
<TabsTrigger
value={TAB_DETAILS}
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<FileText className="w-4 h-4 mr-1.5" />
{t('tabs.details', 'Details')}
</TabsTrigger>
<TabsTrigger
value={TAB_CALCULATOR}
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<Calculator className="w-4 h-4 mr-1.5" />
{t('tabs.calculator', 'Rechner')}
</TabsTrigger>
<TabsTrigger
value={TAB_FORM}
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<Phone className="w-4 h-4 mr-1.5" />
{t('tabs.form', 'Anfrage')}
</TabsTrigger>
<TabsTrigger
value={TAB_CATALOG}
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<Search className="w-4 h-4 mr-1.5" />
{t('tabs.catalog', 'Ratgeber')}
</TabsTrigger>
<TabsTrigger
value={TAB_BROCHURE}
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
>
<Download className="w-4 h-4 mr-1.5" />
{t('tabs.brochure', 'PDF')}
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

62
src/pages/Kinderunfall.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Shield, Heart, Phone, Mail, CheckCircle, Calculator, AlertTriangle, Download, FileCheck, Star } from 'lucide-react'; import { Shield, Heart, Phone, Mail, CheckCircle, Calculator, AlertTriangle, Download, FileCheck, Star, Home, FileText, AlertCircle, Search } from 'lucide-react';
import Layout from '@/components/Layout'; import Layout from '@/components/Layout';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -44,15 +44,57 @@ const Kinderunfall = () => {
<div className="max-w-screen-2xl mx-auto"> <div className="max-w-screen-2xl mx-auto">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="justify-start flex-wrap h-auto gap-2"> <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger> <TabsTrigger
<TabsTrigger value="details" className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger> value="overview"
<TabsTrigger value="calculator" className="px-6 py-2">{t('tabs.calculator', 'Vergleichsrechner')}</TabsTrigger> 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"
<TabsTrigger value="form" className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger> >
<TabsTrigger value="claims" className="px-6 py-2">{t('tabs.claims', 'Leistungsfall')}</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="catalog" className="px-6 py-2">{t('tabs.catalog', 'Ratgeber')}</TabsTrigger> {t('tabs.overview', 'Übersicht')}
<TabsTrigger value="brochure" className="px-6 py-2">{t('tabs.brochure', 'Kundenbroschüre (PDF)')}</TabsTrigger> </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="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', 'Leistungsfall')}
</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"
>
<Search className="w-4 h-4 mr-1.5" />
{t('tabs.catalog', 'Ratgeber')}
</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> </TabsList>
</div> </div>

55
src/pages/KreditVergleichsrechner.tsx
View File

@ -5,7 +5,7 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Percent, BarChart3, Calculator as CalculatorIcon } from 'lucide-react'; import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Percent, BarChart3, Calculator as CalculatorIcon, Home } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider'; import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab'; import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@ -40,15 +40,50 @@ const KreditVergleichsrechner = () => {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto gap-1"> <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-4 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="rechner" className="px-4 py-2">Kreditrechner</TabsTrigger> value="overview"
<TabsTrigger value="vergleich" className="px-4 py-2">Kreditvergleich</TabsTrigger> 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"
<TabsTrigger value="arten" className="px-4 py-2">Kredit-Arten</TabsTrigger> >
<TabsTrigger value="details" className="px-4 py-2">Details & Konditionen</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="form" className="px-4 py-2">Anfrageformular</TabsTrigger> Übersicht
<TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger> </TabsTrigger>
<TabsTrigger
value="rechner"
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"
>
<CalculatorIcon className="w-4 h-4 mr-1.5" />
Rechner
</TabsTrigger>
<TabsTrigger
value="vergleich"
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"
>
<BarChart3 className="w-4 h-4 mr-1.5" />
Vergleich
</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="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> </TabsList>
</div> </div>

55
src/pages/Kreditabsicherung.tsx
View File

@ -5,7 +5,7 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Shield as ShieldIcon, Umbrella, Users } from 'lucide-react'; import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Shield as ShieldIcon, Umbrella, Users, Home } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider'; import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab'; import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@ -40,15 +40,50 @@ const Kreditabsicherung = () => {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto gap-1"> <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-4 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="arten" className="px-4 py-2">Absicherungs-Arten</TabsTrigger> value="overview"
<TabsTrigger value="schutz" className="px-4 py-2">Schutzumfang</TabsTrigger> 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"
<TabsTrigger value="details" className="px-4 py-2">Details & Konditionen</TabsTrigger> >
<TabsTrigger value="calculator" className="px-4 py-2">Beitragsrechner</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="form" className="px-4 py-2">Anfrageformular</TabsTrigger> Übersicht
<TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger> </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"
>
<FileText className="w-4 h-4 mr-1.5" />
Arten
</TabsTrigger>
<TabsTrigger
value="schutz"
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" />
Schutz
</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> </TabsList>
</div> </div>

60
src/pages/Motorradversicherung.tsx
View File

@ -109,15 +109,57 @@ const Motorradversicherung = () => {
}} }}
className="w-full" className="w-full"
> >
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto"> <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="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger> <TabsTrigger
<TabsTrigger value="details" className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger> value="overview"
<TabsTrigger value="statistics" className="px-6 py-2">{t('tabs.statistics', 'Unfallstatistik')}</TabsTrigger> 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"
<TabsTrigger value="calculator" className="px-6 py-2">{t('tabs.calculator', 'Motorrad-Vergleichsrechner')}</TabsTrigger> >
<TabsTrigger value="form" className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="claims" className="px-6 py-2">{t('tabs.claims', 'Schadenmeldung!')}</TabsTrigger> {t('tabs.overview', 'Übersicht')}
<TabsTrigger value="catalog" className="px-6 py-2">{t('tabs.catalog', 'Bußgeldkatalog')}</TabsTrigger> </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"
>
<Search className="w-4 h-4 mr-1.5" />
{t('tabs.catalog', 'Katalog')}
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

70
src/pages/Pferdeversicherung.tsx
View File

@ -5,7 +5,7 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Activity, Stethoscope, Truck } from 'lucide-react'; import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Activity, Stethoscope, Truck, Home, Calculator } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider'; import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab'; import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@ -40,16 +40,64 @@ const Pferdeversicherung = () => {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto gap-1"> <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="px-4 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="krankenversicherung" className="px-4 py-2">Pferdekrankenversicherung</TabsTrigger> value="overview"
<TabsTrigger value="haftpflicht" className="px-4 py-2">Pferdehaftpflicht</TabsTrigger> 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"
<TabsTrigger value="transport" className="px-4 py-2">Transportversicherung</TabsTrigger> >
<TabsTrigger value="details" className="px-4 py-2">Details & Vorteile</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="calculator" className="px-4 py-2">Vergleichsrechner</TabsTrigger> Übersicht
<TabsTrigger value="form" className="px-4 py-2">Anfrageformular</TabsTrigger> </TabsTrigger>
<TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger> <TabsTrigger
value="krankenversicherung"
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"
>
<Stethoscope className="w-4 h-4 mr-1.5" />
Pferdekranken
</TabsTrigger>
<TabsTrigger
value="haftpflicht"
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" />
Pferdehaftpflicht
</TabsTrigger>
<TabsTrigger
value="transport"
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"
>
<Truck className="w-4 h-4 mr-1.5" />
Transport
</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"
>
<FileText className="w-4 h-4 mr-1.5" />
PDF
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

62
src/pages/Quadversicherung.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Shield, Phone, Mail, CheckCircle, Star, Square, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall } from 'lucide-react'; import { Shield, Phone, Mail, CheckCircle, Star, Square, FileText, Calculator, Users, Download, Search, AlertCircle, AlertTriangle, Clock, FileCheck, PhoneCall, Home } 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';
@ -91,15 +91,57 @@ const Quadversicherung = () => {
}} }}
className="w-full" className="w-full"
> >
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="justify-start flex-wrap h-auto gap-2"> <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="px-6 py-2">{t('tabs.overview', 'Übersicht')}</TabsTrigger> <TabsTrigger
<TabsTrigger value="details" className="px-6 py-2">{t('tabs.details', 'Details & Vorteile')}</TabsTrigger> value="overview"
<TabsTrigger value="statistics" className="px-6 py-2">{t('tabs.statistics', 'Unfallstatistik')}</TabsTrigger> 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"
<TabsTrigger value="calculator" className="px-6 py-2">{t('tabs.calculator', 'Quad-Vergleichsrechner')}</TabsTrigger> >
<TabsTrigger value="form" className="px-6 py-2">{t('tabs.form', 'Anfrageformular')}</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="claims" className="px-6 py-2">{t('tabs.claims', 'Schadenmeldung!')}</TabsTrigger> {t('tabs.overview', 'Übersicht')}
<TabsTrigger value="catalog" className="px-6 py-2">{t('tabs.catalog', 'Bußgeldkatalog')}</TabsTrigger> </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"
>
<Search className="w-4 h-4 mr-1.5" />
{t('tabs.catalog', 'Katalog')}
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

23
src/pages/Rechtsschutzversicherung.tsx
View File

@ -1,10 +1,10 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { AlertTriangle, CheckCircle, FileText, Gavel, Mail, Phone, Scale, ShieldCheck, Users } from 'lucide-react'; import { AlertCircle, AlertTriangle, Calculator, Calendar, CheckCircle, Clock, FileText, Gavel, Mail, MapPin as MapPinIcon, Phone, Scale, Shield, ShieldCheck, Users } 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, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
@ -122,36 +122,41 @@ const Rechtsschutzversicherung = () => {
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="justify-start flex-wrap h-auto gap-2"> <TabsList className="grid grid-cols-5 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger <TabsTrigger
value="overview" value="overview"
className="px-6 py-2 data-[state=active]:bg-[#7a0000] data-[state=active]:text-white" 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')} {t('tabs.overview')}
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="processCosts" value="processCosts"
className="px-6 py-2 data-[state=active]:bg-[#7a0000] data-[state=active]:text-white" 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.processCosts')} {t('tabs.processCosts')}
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="details" value="details"
className="px-6 py-2 data-[state=active]:bg-[#7a0000] data-[state=active]:text-white" 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')} {t('tabs.details')}
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="faq" value="faq"
className="px-6 py-2 data-[state=active]:bg-[#7a0000] data-[state=active]:text-white" 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.faq')} {t('tabs.faq')}
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="form" value="form"
className="px-6 py-2 data-[state=active]:bg-[#7a0000] data-[state=active]:text-white" 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')} {t('tabs.form')}
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>

44
src/pages/SeniorenAltersvorsorge.tsx
View File

@ -123,13 +123,43 @@ const SeniorenAltersvorsorge = () => {
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto"> <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-6 py-2">Anfrage</TabsTrigger> <TabsTrigger
<TabsTrigger value="products" className="px-6 py-2">Übersicht</TabsTrigger> value="overview"
<TabsTrigger value="benefits" className="px-6 py-2">Vorteile</TabsTrigger> 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"
<TabsTrigger value="process" className="px-6 py-2">Prozess</TabsTrigger> >
<TabsTrigger value="calculator" className="px-6 py-2">Rechner</TabsTrigger> <Phone className="w-4 h-4 mr-1.5" />
Anfrage
</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"
>
<Home className="w-4 h-4 mr-1.5" />
Übersicht
</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"
>
<FileText className="w-4 h-4 mr-1.5" />
Prozess
</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>
</TabsList> </TabsList>
</div> </div>

46
src/pages/SeniorenGesundheitsvorsorge.tsx
View File

@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Pill } from 'lucide-react'; import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Activity, Pill, Home, Calculator } from 'lucide-react';
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';
@ -123,13 +123,43 @@ const SeniorenGesundheitsvorsorge = () => {
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto"> <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-6 py-2">Anfrage</TabsTrigger> <TabsTrigger
<TabsTrigger value="products" className="px-6 py-2">Übersicht</TabsTrigger> value="overview"
<TabsTrigger value="benefits" className="px-6 py-2">Vorteile</TabsTrigger> 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"
<TabsTrigger value="process" className="px-6 py-2">Prozess</TabsTrigger> >
<TabsTrigger value="calculator" className="px-6 py-2">Rechner</TabsTrigger> <Phone className="w-4 h-4 mr-1.5" />
Anfrage
</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"
>
<Home className="w-4 h-4 mr-1.5" />
Übersicht
</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"
>
<FileText className="w-4 h-4 mr-1.5" />
Prozess
</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>
</TabsList> </TabsList>
</div> </div>

54
src/pages/SeniorenRisikoschutz.tsx
View File

@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Home, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Umbrella, Key, Heart } from 'lucide-react'; import { Shield, Home, Star, CheckCircle, Phone, Mail, FileText, Download, AlertTriangle, Clock, Users, Umbrella, Key, Heart, Calculator } from 'lucide-react';
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';
@ -140,14 +140,50 @@ const SeniorenRisikoschutz = () => {
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto"> <TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
<TabsTrigger value="overview" className="px-6 py-2">Anfrage</TabsTrigger> <TabsTrigger
<TabsTrigger value="products" className="px-6 py-2">Übersicht</TabsTrigger> value="overview"
<TabsTrigger value="benefits" className="px-6 py-2">Vorteile</TabsTrigger> 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"
<TabsTrigger value="process" className="px-6 py-2">Prozess</TabsTrigger> >
<TabsTrigger value="calculator" className="px-6 py-2">Rechner</TabsTrigger> <Phone className="w-4 h-4 mr-1.5" />
<TabsTrigger value="sterbegeld" className="px-6 py-2">Sterbegeld</TabsTrigger> Anfrage
</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"
>
<Home className="w-4 h-4 mr-1.5" />
Übersicht
</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"
>
<FileText className="w-4 h-4 mr-1.5" />
Prozess
</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="sterbegeld"
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"
>
<Heart className="w-4 h-4 mr-1.5" />
Sterbegeld
</TabsTrigger>
</TabsList> </TabsList>
</div> </div>

62
src/pages/Tagesgeld.tsx
View File

@ -5,7 +5,7 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, HandCoins, Percent } from 'lucide-react'; import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, HandCoins, Percent, Home } from 'lucide-react';
import HeroSlider from '@/components/HeroSlider'; import HeroSlider from '@/components/HeroSlider';
import GeneralNotice from '@/components/GeneralNotice'; import GeneralNotice from '@/components/GeneralNotice';
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab'; import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
@ -40,15 +40,57 @@ const Tagesgeld = () => {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="bg-white rounded-lg border border-gray-200 shadow-sm"> <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
<div className="border-b border-gray-200 px-4 pt-4"> <div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
<TabsList className="w-full max-w-full justify-start flex-nowrap whitespace-nowrap overflow-x-auto h-auto gap-1"> <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="px-4 py-2">Übersicht</TabsTrigger> <TabsTrigger
<TabsTrigger value="vorteile" className="px-4 py-2">Vorteile</TabsTrigger> value="overview"
<TabsTrigger value="vergleich" className="px-4 py-2">Vergleich</TabsTrigger> 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"
<TabsTrigger value="details" className="px-4 py-2">Details & Konditionen</TabsTrigger> >
<TabsTrigger value="calculator" className="px-4 py-2">Zinsrechner</TabsTrigger> <Home className="w-4 h-4 mr-1.5" />
<TabsTrigger value="form" className="px-4 py-2">Anfrageformular</TabsTrigger> Übersicht
<TabsTrigger value="brochure" className="px-4 py-2">Kundenbroschüre (PDF)</TabsTrigger> </TabsTrigger>
<TabsTrigger
value="vorteile"
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="vergleich"
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" />
Vergleich
</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> </TabsList>
</div> </div>

2
src/pages/haftpflicht.tsx
View File

@ -84,6 +84,7 @@ const Haftpflicht = () => {
</h2> </h2>
<Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full"> <Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
<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-1 md:grid-cols-2 lg:grid-cols-3 gap-2 w-full h-auto bg-transparent border-0 shadow-none"> <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 <TabsTrigger
value="overview" value="overview"
@ -128,6 +129,7 @@ const Haftpflicht = () => {
{t('tabs.catalog', 'Infothek')} {t('tabs.catalog', 'Infothek')}
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</div>
<div className="p-4 md:p-6"> <div className="p-4 md:p-6">
<TabsContent value="overview" className="mt-0"> <TabsContent value="overview" className="mt-0">

2
src/pages/hausrat.tsx
View File

@ -84,6 +84,7 @@ const Hausrat = () => {
</h2> </h2>
<Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full"> <Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
<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-7 gap-2 w-full h-auto bg-transparent border-0 shadow-none"> <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 <TabsTrigger
value="overview" value="overview"
@ -135,6 +136,7 @@ const Hausrat = () => {
{t('tabs.catalog', 'Infothek')} {t('tabs.catalog', 'Infothek')}
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</div>
<div className="p-4 md:p-6"> <div className="p-4 md:p-6">
<TabsContent value="overview" className="mt-0"> <TabsContent value="overview" className="mt-0">

2
src/pages/unfall.tsx
View File

@ -186,6 +186,7 @@ const Unfall = () => {
</div> </div>
<Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full"> <Tabs value={activeTab} onValueChange={(next) => setActiveTab(next)} className="w-full">
<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-7 gap-2 w-full h-auto bg-transparent border-0 shadow-none"> <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 <TabsTrigger
value="overview" value="overview"
@ -237,6 +238,7 @@ const Unfall = () => {
Infothek Infothek
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</div>
<div className="p-4 md:p-6"> <div className="p-4 md:p-6">
<TabsContent value="overview" className="mt-0"> <TabsContent value="overview" className="mt-0">

75
src/services/emailService.ts Normal file
View File

@ -0,0 +1,75 @@
// E-Mail Service für direkten Versand über Resend API
export interface EmailData {
name: string;
email: string;
phone?: string;
subject: string;
message: string;
to: string;
}
export const sendEmail = async (data: EmailData): Promise<{ success: boolean; error?: string }> => {
try {
const response = await fetch('https://api.resend.com/emails', {
method: 'POST',
headers: {
'Authorization': `Bearer ${import.meta.env.VITE_RESEND_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
from: 'kontakt@finanzen-mizera.de',
to: [data.to],
subject: `Kontaktanfrage: ${data.subject}`,
html: `
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
<h2 style="color: #1a365d; border-bottom: 2px solid #3b82f6; padding-bottom: 10px;">Neue Kontaktanfrage</h2>
<div style="background: #f8fafc; padding: 15px; border-radius: 8px; margin: 20px 0;">
<p><strong>Von:</strong> ${data.name}</p>
<p><strong>E-Mail:</strong> <a href="mailto:${data.email}">${data.email}</a></p>
<p><strong>Telefon:</strong> ${data.phone || 'Keine Angabe'}</p>
<p><strong>Betreff:</strong> ${data.subject}</p>
</div>
<div style="margin: 20px 0;">
<h3 style="color: #1a365d;">Nachricht:</h3>
<div style="background: #f1f5f9; padding: 15px; border-radius: 8px; white-space: pre-wrap;">${data.message}</div>
</div>
<hr style="border: none; border-top: 1px solid #e2e8f0; margin: 30px 0;">
<p style="color: #64748b; font-size: 12px;">
Gesendet über das Kontaktformular auf <a href="https://www.finanzen-mizera.de">finanzen-mizera.de</a>
</p>
</div>
`,
text: `
Neue Kontaktanfrage von: ${data.name}
E-Mail: ${data.email}
Telefon: ${data.phone || 'Keine Angabe'}
Betreff: ${data.subject}
Nachricht:
${data.message}
---
Gesendet über das Kontaktformular auf finanzen-mizera.de
`,
}),
});
if (!response.ok) {
const errorData = await response.text();
console.error('Resend API Error:', errorData);
return { success: false, error: 'Fehler beim Senden der E-Mail' };
}
const result = await response.json();
console.log('E-Mail gesendet:', result);
return { success: true };
} catch (error) {
console.error('Email Service Error:', error);
return { success: false, error: 'Serverfehler beim E-Mail-Versand' };
}
};

6
supabase/functions/.env Normal file
View File

@ -0,0 +1,6 @@
# Resend API Key für E-Mail-Versand
RESEND_API_KEY=your_resend_api_key_here
# Supabase Umgebungsvariablen
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key_here

86
supabase/functions/send-contact-email/index.ts Normal file
View File

@ -0,0 +1,86 @@
import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
const corsHeaders = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
};
serve(async (req) => {
// Handle CORS preflight requests
if (req.method === 'OPTIONS') {
return new Response('ok', { headers: corsHeaders });
}
try {
const { name, email, phone, subject, message, to } = await req.json();
// Validierung
if (!name || !email || !subject || !message || !to) {
return new Response(
JSON.stringify({ error: 'Missing required fields' }),
{ status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
// E-Mail-Inhalt erstellen
const emailContent = `
Neue Kontaktanfrage von: ${name}
E-Mail: ${email}
Telefon: ${phone || 'Keine Angabe'}
Betreff: ${subject}
Nachricht:
${message}
`.trim();
// E-Mail über Resend API senden (oder einen anderen E-Mail-Dienst)
const resendResponse = await fetch('https://api.resend.com/emails', {
method: 'POST',
headers: {
'Authorization': `Bearer ${Deno.env.get('RESEND_API_KEY')}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
from: 'kontakt@finanzen-mizera.de',
to: [to],
subject: `Kontaktanfrage: ${subject}`,
html: `
<h2>Neue Kontaktanfrage</h2>
<p><strong>Von:</strong> ${name} (${email})</p>
<p><strong>Telefon:</strong> ${phone || 'Keine Angabe'}</p>
<p><strong>Betreff:</strong> ${subject}</p>
<hr>
<h3>Nachricht:</h3>
<p>${message.replace(/\n/g, '<br>')}</p>
<hr>
<p><small>Gesendet über das Kontaktformular auf finanzen-mizera.de</small></p>
`,
text: emailContent,
}),
});
if (!resendResponse.ok) {
const errorData = await resendResponse.text();
console.error('Resend API Error:', errorData);
return new Response(
JSON.stringify({ error: 'Failed to send email' }),
{ status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
const responseData = await resendResponse.json();
return new Response(
JSON.stringify({ success: true, data: responseData }),
{ status: 200, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
} catch (error) {
console.error('Function error:', error);
return new Response(
JSON.stringify({ error: error.message }),
{ status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
);
}
});