385 lines
21 KiB
TypeScript
385 lines
21 KiB
TypeScript
import { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import Layout from '@/components/Layout';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Shield, Heart, Star, CheckCircle, Phone, Mail, FileText, Calculator, Download, TrendingUp, DollarSign, Building, Target, PiggyBank, Percent, BarChart3, Calculator as CalculatorIcon, Home } from 'lucide-react';
|
|
import HeroSlider from '@/components/HeroSlider';
|
|
import GeneralNotice from '@/components/GeneralNotice';
|
|
import TwoColumnTab from '@/components/tab-pages/TwoColumnTab';
|
|
import RightImageCard from '@/components/tab-pages/RightImageCard';
|
|
|
|
const KreditVergleichsrechner = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const baseUrl = import.meta.env.BASE_URL;
|
|
const assetUrl = (fileName: string) => `${baseUrl}${encodeURI(fileName)}`;
|
|
const [activeTab, setActiveTab] = useState('overview');
|
|
|
|
return (
|
|
<Layout>
|
|
<HeroSlider
|
|
slides={[
|
|
{
|
|
id: 'kreditvergleich-1',
|
|
kicker: 'Kredit Vergleichsrechner',
|
|
title: 'Den besten Kredit finden.',
|
|
subtitle: 'Vergleichen Sie Konditionen von über 50 Banken und finden Sie den günstigsten Kredit für Ihre Bedürfnisse.',
|
|
imageUrl: assetUrl('Finanzen/Fotolia_60240828_S.jpg'),
|
|
imagePosition: 'center 30%',
|
|
ctas: [
|
|
{ label: 'Jetzt vergleichen', href: '/contact' },
|
|
{ label: 'Zur Übersicht', href: '/finanzen' },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="bg-white rounded-lg border border-gray-200 shadow-sm">
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full" id="tab-section">
|
|
<div className="border-b border-gray-100 px-4 pt-6 pb-2 bg-gradient-to-r from-blue-50 to-white">
|
|
<TabsList className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 w-full h-auto bg-transparent border-0 shadow-none">
|
|
<TabsTrigger
|
|
value="overview"
|
|
className="relative px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-md data-[state=inactive]:bg-white data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-50 data-[state=inactive]:border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 !outline-none !ring-0"
|
|
>
|
|
<Home className="w-4 h-4 mr-1.5" />
|
|
Übersicht
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="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>
|
|
</div>
|
|
|
|
<div className="p-4 md:p-6">
|
|
<TabsContent value="overview" className="mt-0">
|
|
<TwoColumnTab
|
|
left={
|
|
<>
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Kreditvergleichsrechner im Überblick</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
Mit unserem Kreditvergleichsrechner finden Sie schnell und einfach den günstigsten Kredit.
|
|
Vergleichen Sie Zinsen, Gebühren und Konditionen von über 50 Banken und Sparkassen.
|
|
</p>
|
|
|
|
<Card className="border-green-200 bg-green-50">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg text-green-900">Hauptvorteile</CardTitle>
|
|
<CardDescription>Warum unser Vergleichsrechner?</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{[
|
|
{ title: 'Unabhängiger Vergleich', desc: 'Über 50 Banken und Finanzierer' },
|
|
{ title: 'Tagesaktuelle Zinsen', desc: 'Immer aktuelle Konditionen' },
|
|
{ title: 'Transparente Kosten', desc: 'Keine versteckten Gebühren' },
|
|
{ title: 'Schnelle Ergebnisse', desc: 'Vergleich in wenigen Minuten' },
|
|
].map((item) => (
|
|
<div key={item.title} className="flex items-start gap-3">
|
|
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
|
<div>
|
|
<div className="font-medium text-green-900">{item.title}</div>
|
|
<div className="text-sm text-green-700">{item.desc}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
}
|
|
right={
|
|
<RightImageCard src={assetUrl('Finanzen/Fotolia_60240828_S.jpg')} alt="Kreditvergleichsrechner">
|
|
<Card className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Ihre Vorteile</CardTitle>
|
|
<CardDescription>Warum wir der richtige Partner sind</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{[
|
|
'Kostenloser Kreditvergleich',
|
|
'Persönliche Beratung',
|
|
'Optimale Kreditstruktur',
|
|
'Unterstützung bei Antragstellung',
|
|
'Schnelle Auszahlung',
|
|
].map((benefit) => (
|
|
<div key={benefit} className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
|
<span className="text-gray-700">{benefit}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</RightImageCard>
|
|
}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="rechner" className="mt-0">
|
|
<div className="text-center py-12">
|
|
<CalculatorIcon className="h-12 w-12 text-blue-600 mx-auto mb-4" />
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Kreditrechner</h3>
|
|
<p className="text-gray-600 mb-8">
|
|
Berechnen Sie Ihre monatlichen Raten und Gesamtkosten für verschiedene Kreditbeträge und Laufzeiten.
|
|
</p>
|
|
<div className="max-w-md mx-auto space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Kreditbetrag</label>
|
|
<input type="number" className="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="10.000 €" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Laufzeit</label>
|
|
<select className="w-full px-3 py-2 border border-gray-300 rounded-md">
|
|
<option>12 Monate</option>
|
|
<option>24 Monate</option>
|
|
<option>36 Monate</option>
|
|
<option>48 Monate</option>
|
|
<option>60 Monate</option>
|
|
<option>84 Monate</option>
|
|
<option>120 Monate</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<Button size="lg" className="w-full" onClick={() => navigate('/contact')}>
|
|
<CalculatorIcon className="mr-2 h-5 w-5" />
|
|
Jetzt berechnen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="vergleich" className="mt-0">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<Card className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Kreditvergleich</CardTitle>
|
|
<CardDescription>Die besten Angebote finden</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="p-4 border rounded-lg bg-green-50">
|
|
<div className="font-medium text-green-900 mb-2">Vergleichskriterien</div>
|
|
<ul className="text-sm text-green-700 space-y-1">
|
|
<li>• Effektiver Jahreszins (eff. Zins)</li>
|
|
<li>• Monatliche Rate</li>
|
|
<li>• Gesamtkosten (Zins und Tilgung)</li>
|
|
<li>• Bearbeitungsgebühren</li>
|
|
<li>• Sondertilgungsmöglichkeiten</li>
|
|
</ul>
|
|
</div>
|
|
<div className="text-sm text-gray-600">
|
|
<strong>Wichtig:</strong> Achten Sie nicht nur auf den Nominalzins, sondern auf den effektiven Jahreszins!
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Aktuelle Zinsentwicklung</CardTitle>
|
|
<CardDescription>Markt-Übersicht</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-gray-600">Durchschnittlicher Zins</span>
|
|
<span className="text-sm font-bold text-blue-600">4,5%</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-gray-600">Günstigster Anbieter</span>
|
|
<span className="text-sm font-bold text-green-600">3,2%</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-sm text-gray-600">Teuerster Anbieter</span>
|
|
<span className="text-sm font-bold text-red-600">8,9%</span>
|
|
</div>
|
|
<div className="text-xs text-gray-500 mt-2">
|
|
* Durchschnittliche Werte für 10.000€ Kredit, 60 Monate Laufzeit
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="arten" className="mt-0">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<Card className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Kredit-Arten</CardTitle>
|
|
<CardDescription>Verschiedene Kreditformen</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{[
|
|
'Ratenkredit (Konsumentenkredit)',
|
|
'Autokredit und Fahrzeugfinanzierung',
|
|
'Wohnungsbaudarlehen',
|
|
'Kredit ohne SCHUFA',
|
|
'Kredit mit negativer SCHUFA',
|
|
'Umschuldungskredit',
|
|
].map((type) => (
|
|
<div key={type} className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-600 mt-0.5 flex-shrink-0" />
|
|
<span className="text-gray-700">{type}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Besondere Kreditformen</CardTitle>
|
|
<CardDescription>Spezialisierte Finanzierungen</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-3">
|
|
{[
|
|
'Studentenkredite',
|
|
'Selbstständigenkredite',
|
|
'Freiberuflerkredite',
|
|
'Beamtenkredite',
|
|
'Auswandererkredite',
|
|
'Sanierungskredite',
|
|
].map((type) => (
|
|
<div key={type} className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0" />
|
|
<span className="text-gray-700">{type}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="details" className="mt-0">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Card className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Wichtige Kriterien</CardTitle>
|
|
<CardDescription>Was Sie beachten sollten</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h4 className="font-medium text-gray-900 mb-2">Kreditwürdigkeit</h4>
|
|
<p className="text-sm text-gray-600">SCHUFA-Score, Einkommen, Beschäftigungsdauer</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-900 mb-2">Kreditbetrag</h4>
|
|
<p className="text-sm text-gray-600">Realistische Einschätzung der Rückzahlungsfähigkeit</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-900 mb-2">Laufzeit</h4>
|
|
<p className="text-sm text-gray-600">Kürzere Laufzeiten = günstigere Zinsen</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="border-gray-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Zusatzkosten</CardTitle>
|
|
<CardDescription>Was den Kredit verteuert</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h4 className="font-medium text-gray-900 mb-2">Bearbeitungsgebühren</h4>
|
|
<p className="text-sm text-gray-600">0% - 3% des Kreditbetrags</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-900 mb-2">Bereitstellungszinsen</h4>
|
|
<p className="text-sm text-gray-600">Vollständige oder teilweise Auszahlung</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-gray-900 mb-2">Restschuldversicherung</h4>
|
|
<p className="text-sm text-gray-600">Optional, aber oft empfohlen</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="form" className="mt-0">
|
|
<div className="text-center py-12">
|
|
<FileText className="h-12 w-12 text-blue-600 mx-auto mb-4" />
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Anfrageformular</h3>
|
|
<p className="text-gray-600 mb-8">
|
|
Füllen Sie unser einfaches Formular aus und erhalten Sie persönliche Kreditangebote von Top-Banken.
|
|
</p>
|
|
<Button size="lg" onClick={() => navigate('/contact')}>
|
|
<FileText className="mr-2 h-5 w-5" />
|
|
Zum Formular
|
|
</Button>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="brochure" className="mt-0">
|
|
<div className="text-center py-12">
|
|
<FileText className="h-12 w-12 text-blue-600 mx-auto mb-4" />
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">Kundenbroschüre</h3>
|
|
<p className="text-gray-600 mb-8">
|
|
Laden Sie unsere kostenlose Broschüre herunter und informieren Sie sich ausführlich über Kreditvergleich.
|
|
</p>
|
|
<Button size="lg" variant="outline">
|
|
<Download className="mr-2 h-5 w-5" />
|
|
Broschüre herunterladen
|
|
</Button>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<GeneralNotice />
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default KreditVergleichsrechner;
|