103 lines
3.5 KiB
TypeScript
103 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Button } from "@/components/ui/button";
|
|
import { CheckCircle, ArrowRight, Mail } from "lucide-react";
|
|
import { colors } from '@/lib/colors';
|
|
|
|
export default function SuccessPage() {
|
|
const router = useRouter();
|
|
const [countdown, setCountdown] = useState(5);
|
|
|
|
useEffect(() => {
|
|
// Auto-redirect after 5 seconds
|
|
const timer = setInterval(() => {
|
|
setCountdown((prev) => {
|
|
if (prev <= 1) {
|
|
clearInterval(timer);
|
|
router.push('/');
|
|
return 0;
|
|
}
|
|
return prev - 1;
|
|
});
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [router]);
|
|
|
|
const handleContinue = () => {
|
|
router.push('/');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center px-4">
|
|
<div className="w-full max-w-md">
|
|
<div
|
|
className="p-8 rounded-3xl shadow-lg backdrop-blur-sm text-center"
|
|
style={{ backgroundColor: `${colors.background}F0` }}
|
|
>
|
|
{/* Success Icon */}
|
|
<div className="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"
|
|
style={{ backgroundColor: `${colors.primary}20` }}>
|
|
<CheckCircle className="w-12 h-12" style={{ color: colors.primary }} />
|
|
</div>
|
|
|
|
{/* Success Message */}
|
|
<h1 className="text-2xl font-bold mb-4" style={{ color: colors.primary }}>
|
|
E-Mail erfolgreich bestätigt!
|
|
</h1>
|
|
|
|
<p className="text-lg mb-6" style={{ color: colors.secondary }}>
|
|
Ihre E-Mail-Adresse wurde erfolgreich verifiziert.
|
|
Ihr Termin ist jetzt bestätigt.
|
|
</p>
|
|
|
|
{/* Additional Info */}
|
|
<div className="p-4 rounded-xl border-2 mb-6"
|
|
style={{
|
|
backgroundColor: `${colors.primary}10`,
|
|
borderColor: colors.primary
|
|
}}>
|
|
<div className="flex items-center space-x-2 mb-2">
|
|
<Mail className="w-5 h-5" style={{ color: colors.primary }} />
|
|
<span className="text-sm font-semibold" style={{ color: colors.primary }}>
|
|
Automatische Bestätigung
|
|
</span>
|
|
</div>
|
|
<p className="text-xs" style={{ color: colors.secondary }}>
|
|
Sie wurden automatisch angemeldet und Ihr Termin wurde bestätigt.
|
|
Keine weiteren Schritte erforderlich.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="space-y-3">
|
|
<Button
|
|
onClick={handleContinue}
|
|
className="w-full py-3 rounded-xl text-lg font-semibold flex items-center justify-center space-x-2"
|
|
style={{
|
|
backgroundColor: colors.primary,
|
|
color: colors.background
|
|
}}
|
|
>
|
|
<ArrowRight className="w-5 h-5" />
|
|
<span>Weiter zur Startseite</span>
|
|
</Button>
|
|
|
|
<p className="text-xs" style={{ color: colors.secondary }}>
|
|
Automatische Weiterleitung in {countdown} Sekunden...
|
|
</p>
|
|
</div>
|
|
|
|
{/* Additional Info */}
|
|
<div className="mt-6 text-xs" style={{ color: colors.secondary }}>
|
|
<p>• Sie erhalten eine Bestätigungs-E-Mail</p>
|
|
<p>• Unser Team wird sich bald bei Ihnen melden</p>
|
|
<p>• Vielen Dank für Ihr Vertrauen!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|