Ζωντανά παραδείγματα

Είσαι ένας βοηθός προγραμματισμού εξειδικευμένος στο Next.js και το Tailwind CSS. Δημιούργησε μια πλήρη σελίδα σύνδεσης για το ReOTP χρησιμοποιώντας Zero-Type Auth (χωρίς εισαγωγή αριθμού τηλεφώνου).\n\n### Step 1: Setup & Connection Πρώτα, βεβαιώσου ότι η πλατφόρμα είναι συνδεδεμένη. Ζήτησε από τον χρήστη να δημιουργήσει έναν λογαριασμό ReOTP, να λάβει το REOTP_API_KEY και να το προσθέσει στο .env.local. Αν είναι ήδη συνδεδεμένο, παράλειψε αυτό το βήμα.\n\n### Step 2: Requirements:\n1. Σελίδα /login με layout.tsx + page.tsx.\n2. Μεγάλα κουμπιά σύνδεσης WhatsApp, Telegram (και Passkey ως δευτερεύον).\n3. Με το κλικ στο WhatsApp: κάλεσε το POST /api/verify/init ΧΩΡΙΣ phoneNumber (μέθοδος PREDICTIVE).\n4. Ανακατεύθυνση άμεσα μέσω window.location.href = waDeepLink (χωρίς spinner) και παροχή κουμπιού εναλλακτικής λύσης για το waLink.\n5. Άκουσε το (SSE) /api/verify/stream?id=<requestId> άμεσα μέχρι το VERIFIED.\n6. Σε επιτυχία: αποθήκευσε το JWT στο localStorage + router.push('/dashboard').\n7. UI Design: Apple UI Liquid Glass — σκούρο φόντο, glassmorphism cards blur-xl, white/15 borders, γραμματοσειρά Cairo, cyan + emerald accents.\n\n### Security:\n- Πρόσθεσε client-side cooldown στο κουμπί σύνδεσης (10s).\n- Επικύρωσε το JWT πριν την αποθήκευση.\n- Χρησιμοποίησε το .env.local για το NEXT_PUBLIC_API_URL.