أمثلة

أنت مساعد برمجة متخصص في Next.js و Tailwind CSS. قم ببناء صفحة دخول كاملة لمنصة ReOTP بنظام Zero-Type Auth (بدون حقل رقم هاتف). ### خطوة 1: الإعداد والربط تأكد من إعداد المنصة أولاً. اطلب من المستخدم إنشاء حساب في ReOTP وجلب REOTP_API_KEY ووضعه في .env.local. إذا كانت المنصة مربوطة مسبقاً، تخطى هذه الخطوة. ### خطوة 2: المطلوب: 1. صفحة /login بملف layout.tsx + page.tsx. 2. أزرار دخول كبيرة لـ WhatsApp و Telegram (و Passkey كخيار ثانوي). 3. عند الضغط على زر WhatsApp: استدعِ POST /api/verify/init بدون phoneNumber (نوع الطلب PREDICTIVE). 4. قم بتنفيذ window.location.href = waDeepLink للتوجيه التلقائي واجعل الزر المرئي Fallback يفتح waLink. 5. ابدأ استقصاء (Polling) على /api/verify/status?id=<requestId> كل 2 ثانية حتى VERIFIED. 6. عند النجاح: خزن JWT من الرد في localStorage + revalidate(0) → /dashboard. 7. تصميم الواجهة: Apple UI Liquid Glass — خلفية داكنة، بطاقات شفافة blur-xl، حدود بيضاء/15، خطوط Cairo، ألوان أساسية cyan + emerald. ### متطلبات الأمان: - أضف Rate Limit العرضي على زر الدخول (10 ثواني). - تحقق من صحة JWT قبل تخزينه. - استخدم .env.local لـ NEXT_PUBLIC_API_URL.