main repo

app/success/page.tsx

@@ -0,0 +1,103 @@
+"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>
+  );
+}