406 lines
23 KiB
TypeScript
406 lines
23 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, BarChart3, Briefcase, ArrowUpRight, Home, AlertCircle } 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 Depots = () => {
|
||
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: 'depots-1',
|
||
kicker: 'Wertpapierdepots',
|
||
title: 'Professionelle Vermögensverwaltung.',
|
||
subtitle: 'Das richtige Depot für Ihre Anlageziele – von Einsteiger-Depots bis professionellen Trading-Konten.',
|
||
imageUrl: assetUrl('Finanzen/Fotolia_3486018_XS.jpg'),
|
||
imagePosition: 'center 30%',
|
||
ctas: [
|
||
{ label: 'Jetzt beraten lassen', 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="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 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">Wertpapierdepots im Überblick</h3>
|
||
<p className="text-gray-600 mb-6">
|
||
Ein Wertpapierdepot ist Ihr Konto für den Kauf und Verkauf von Wertpapieren.
|
||
Wir helfen Ihnen das passende Depot zu finden – von kostengünstigen Einsteiger-Depots
|
||
bis hin zu professionellen Trading-Konten.
|
||
</p>
|
||
|
||
<Card className="border-green-200 bg-green-50">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg text-green-900">Hauptvorteile</CardTitle>
|
||
<CardDescription>Warum ein Wertpapierdepot?</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
{[
|
||
{ title: 'Breite Anlagemöglichkeiten', desc: 'Aktien, ETFs, Fonds, Anleihen und mehr' },
|
||
{ title: 'Transparente Kostenstruktur', desc: 'Keine versteckten Gebühren' },
|
||
{ title: 'Professionelle Beratung', desc: 'Wir finden das passende Depot' },
|
||
{ title: 'Sichere Verwahrung', desc: 'Einlagensicherung bis 100.000€' },
|
||
].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_3486018_XS.jpg')} alt="Wertpapierdepots">
|
||
<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">
|
||
{[
|
||
'Vergleich von 50+ Depot-Anbietern',
|
||
'Unabhängige Beratung ohne Verkaufsdruck',
|
||
'Transparente Kostenanalyse',
|
||
'Schnelle Depot-Eröffnung',
|
||
'Langfristige Betreuung',
|
||
].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="depotarten" 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">Einsteiger-Depots</CardTitle>
|
||
<CardDescription>Perfekt für Anfänger</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div className="flex items-start gap-3">
|
||
<Target className="w-6 h-6 text-green-600 mt-0.5 flex-shrink-0" />
|
||
<div>
|
||
<div className="font-medium text-gray-900">Kostengünstig</div>
|
||
<div className="text-sm text-gray-600">Niedrige Ordergebühren, oft kostenlose Depotführung</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<BarChart3 className="w-6 h-6 text-blue-600 mt-0.5 flex-shrink-0" />
|
||
<div>
|
||
<div className="font-medium text-gray-900">Einfach verständlich</div>
|
||
<div className="text-sm text-gray-600">Klare Oberfläche, einfache Handhabung</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<Shield className="w-6 h-6 text-purple-600 mt-0.5 flex-shrink-0" />
|
||
<div>
|
||
<div className="font-medium text-gray-900">Sichere Startanlage</div>
|
||
<div className="text-sm text-gray-600">ETF-Sparpläne und Fondsanlagen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Aktiv-Depots</CardTitle>
|
||
<CardDescription>Für erfahrene Anleger</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div className="flex items-start gap-3">
|
||
<TrendingUp className="w-6 h-6 text-green-600 mt-0.5 flex-shrink-0" />
|
||
<div>
|
||
<div className="font-medium text-gray-900">Trading-Funktionen</div>
|
||
<div className="text-sm text-gray-600">Leverage, Derivate, Short-Selling</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<ArrowUpRight className="w-6 h-6 text-blue-600 mt-0.5 flex-shrink-0" />
|
||
<div>
|
||
<div className="font-medium text-gray-900">Schnelle Ausführung</div>
|
||
<div className="text-sm text-gray-600">Realtime-Kurse, direkter Marktzugang</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<Briefcase className="w-6 h-6 text-purple-600 mt-0.5 flex-shrink-0" />
|
||
<div>
|
||
<div className="font-medium text-gray-900">Professionelle Tools</div>
|
||
<div className="text-sm text-gray-600">Chart-Analyse, Trading-Desk, API</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="kosten" 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">Depot-Kosten</CardTitle>
|
||
<CardDescription>Was kostet ein Depot?</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<h4 className="font-medium text-gray-900 mb-2">Depotführung</h4>
|
||
<p className="text-sm text-gray-600">0€ - 5€ monatlich (oft kostenlos bei Sparplänen)</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-gray-900 mb-2">Ordergebühren</h4>
|
||
<p className="text-sm text-gray-600">0,99% - 4,90€ pro Trade (abhängig vom Volumen)</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-gray-900 mb-2">Spread-Kosten</h4>
|
||
<p className="text-sm text-gray-600">0,1% - 0,5% bei Kauf/Verkauf</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Kosten-Spartipps</CardTitle>
|
||
<CardDescription>Wie Sie sparen können</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
{[
|
||
'ETF-Sparpläne statt Einzelkäufe',
|
||
'Kostenfreie Depotführung nutzen',
|
||
'Günstige Ordergebühren vergleichen',
|
||
'Sparplan-Rabatte von Brokern',
|
||
'Kostenoptimierte Handelsstrategien',
|
||
].map((tip) => (
|
||
<div key={tip} 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">{tip}</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 Konditionen</CardTitle>
|
||
<CardDescription>Was Sie beachten sollten</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<h4 className="font-medium text-gray-900 mb-2">Mindestanlage</h4>
|
||
<p className="text-sm text-gray-600">Meist ab 1€ bei Sparplänen, ab 50€ bei Einzelkäufen</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-gray-900 mb-2">Handelszeiten</h4>
|
||
<p className="text-sm text-gray-600">Börsenzeiten: 9:00-17:30 Uhr (deutsche Zeit)</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-gray-900 mb-2">Verfügbarkeit</h4>
|
||
<p className="text-sm text-gray-600">24/7 Trading bei bestimmten Brokern möglich</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-200">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">Sicherheit & Schutz</CardTitle>
|
||
<CardDescription>Wichtige Sicherheitsaspekte</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<h4 className="font-medium text-gray-900 mb-2">Einlagensicherung</h4>
|
||
<p className="text-sm text-gray-600">Bis 100.000€ pro Kunde und Institut</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-gray-900 mb-2">Regulierung</h4>
|
||
<p className="text-sm text-gray-600">BaFin-Überwachung, EU-Richtlinien</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium text-gray-900 mb-2">Investorenschutz</h4>
|
||
<p className="text-sm text-gray-600">Entschädigungseinrichtung der Wertpapierhäuser</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="calculator" className="mt-0">
|
||
<div className="text-center py-12">
|
||
<Calculator className="h-12 w-12 text-blue-600 mx-auto mb-4" />
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Depot-Kostenrechner</h3>
|
||
<p className="text-gray-600 mb-8">
|
||
Berechnen Sie Ihre potenziellen Depot-Kosten und finden Sie den kostengünstigsten Anbieter.
|
||
</p>
|
||
<Button size="lg" onClick={() => navigate('/contact')}>
|
||
<Calculator className="mr-2 h-5 w-5" />
|
||
Jetzt berechnen
|
||
</Button>
|
||
</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 ein individuelles Depot-Angebot.
|
||
</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 Wertpapierdepots.
|
||
</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 Depots;
|