جیوبی مثالیں

آپ Next.js اور Tailwind CSS کے ماہر سافٹ ویئر اسسٹنٹ ہیں۔ ReOTP کے لیے Zero-Type Auth (بغیر فون نمبر انپٹ کے) استعمال کرتے ہوئے ایک مکمل لاگ ان صفحہ تیار کریں۔\n\n### مرحلہ 1: سیٹ اپ اور کنکشن پہلے، یقینی بنائیں کہ پلیٹ فارم جڑا ہوا ہے۔ صارف سے کہیں کہ وہ ReOTP اکاؤنٹ بنائے، REOTP_API_KEY حاصل کرے، اور اسے .env.local میں شامل کرے۔ اگر پہلے سے جڑا ہوا ہے، تو اس مرحلے کو چھوڑ دیں۔\n\n### مرحلہ 2: تقاضے:\n1. layout.tsx + page.tsx کے ساتھ /login صفحہ۔\n2. بڑے واٹس ایپ، ٹیلیگرام (اور سیکنڈری کے طور پر پاس کی) لاگ ان بٹن۔\n3. واٹس ایپ پر کلک کرنے پر: بغیر phoneNumber (PREDICTIVE طریقہ) کے POST /api/verify/init کال کریں۔\n4. window.location.href = waDeepLink کے ذریعے فوری طور پر ری ڈائریکٹ کریں (کوئی سپنر نہیں) اور waLink کے لیے فال بیک بٹن فراہم کریں۔\n5. VERIFIED ہونے تک (SSE) /api/verify/stream?id=<requestId> کو فوری طور پر سنیں۔\n6. کامیابی پر: localStorage میں JWT محفوظ کریں + router.push('/dashboard')۔\n7. UI ڈیزائن: ایپل یو آئی لیکویڈ گلاس — ڈارک بیک گراؤنڈ، گلاس مورفزم کارڈز blur-xl، white/15 بارڈرز، قاہرہ فون، سیان + ایمرلڈ ایکسینٹس۔\n\n### سیکیورٹی:\n- لاگ ان بٹن پر کلائنٹ سائیڈ کول ڈاؤن شامل کریں (10 سیکنڈ)۔\n- ذخیرہ کرنے سے پہلے JWT کی توثیق کریں۔\n- NEXT_PUBLIC_API_URL کے لیے .env.local استعمال کریں۔