طبيق VPN حديث وسلس
تفاصيل العمل
North Slayer VPN
مقدمة:
تطبيق VPN حديث وسلس وتفاعلي مبني باستخدام React, TypeScript, TailwindCSS, و Framer Motion.
يتميز بأزرار اتصال متحركة، حالة VPN في الوقت الفعلي، اختيار الدولة، وإدارة الخطط المميزة.
مميزات:
الصفحة الرئيسية:
* حالة VPN في الوقت الفعلي مع مؤشرات ألوان (أخضر، كهرماني، برتقالي)
* زر بدء/إيقاف متحرك مع تأثيرات النبض والدوران والتدرج
* مؤقت اتصال حي (يبدأ عند الاتصال ويُعاد ضبطه عند الانفصال)
* مؤشرات سرعة ديناميكية
* انتقالات سلسة بين جميع الحالات
صفحة البريميوم (Premium):
* بطاقات مميزات متحركة تسلط الضوء على الفوائد
* خطط تسعير مع إبراز الخطة الأكثر شعبية
* انتقالات سلسة بين الصفحات مع أنيميشن متدرج
* زر دعوة للتجربة المجانية
اختيار الدولة:
* قائمة قابلة للبحث مع فلترة لحظية
* عرض أعلام الدول كرموز
* عرض زمن الاستجابة (Ping) وقوة الإشارة
* تمييز بين السيرفرات المجانية والمميزة
* اختيار الدولة بشكل تفاعلي مع تغذية بصرية
الحركات والتفاعلات:
* انتقالات سلسة عند الاتصال والتنقل بين الصفحات
* تأثيرات عند الضغط والتمرير والتحميل
* خلفيات متدرجة وتأثيرات نبض للأزرار الرئيسية
تقنيًا:
* استخدام React Router للتنقل بين الصفحات
* Framer Motion للأنيميشن
* هوك مخصص لإدارة حالة الـ VPN
* TypeScript للسلامة في الأنواع
* تصميم متجاوب بالكامل
التثبيت:
1. استنساخ المستودع:
cd north-slayer-vpn
2. تثبيت الاعتمادات:
npm install
أو
yarn install
3. تشغيل خادم التطوير:
npm start
أو
yarn start
الاستخدام:
* اضغط على زر Start في الصفحة الرئيسية للاتصال بالـ VPN
* راقب حالة الاتصال، السرعة، والمؤقت في الوقت الفعلي
* استخدم اختيار الدولة للتبديل إلى خادم مجاني
* ادخل إلى صفحة Premium للوصول إلى الميزات المدفوعة
* استمتع بانتقالات سلسة وحركات أنيميشن داخل التطبيق
هيكل المشروع:
src/
├─ hooks/
│ └─ useVPN.ts # إدارة حالة VPN
├─ screens/
│ ├─ MainDefault/ # الواجهة الرئيسية للـ VPN
│ ├─ CountrySelector/ # صفحة اختيار الدولة
│ └─ Premium/ # صفحة الاشتراك المميز
├─ assets/ # صور وأيقونات وملفات GIF
├─ components/ # مكونات قابلة لإعادة الاستخدام
├─ App.tsx # المكون الجذري + الروابط
└─ tailwind.css # تنسيقات Tailwind CSS
التخصيص:
* إضافة/إزالة الدول: عدل المصفوفة countries داخل useVPN.ts
* الخطط المميزة: قم بتعديل الأسعار والميزات في صفحة Premium
* الحركات: غيّر إعدادات Framer Motion في الأزرار والصفحات
* زر البدء/الإيقاف (GIF): استبدل ملف الـ GIF الموجود في assets/ وعدل مسار الاستيراد
الاعتمادات:
* React 18+
* TypeScript
* TailwindCSS
* Framer Motion
* React Router DOM
المساهمة:
1. قم بعمل Fork للمستودع
2. أنشئ فرع جديد: git checkout -b feature-name
3. نفّذ تغييراتك: git commit -m 'إضافة ميزة جديدة'
4. ادفع التغييرات: git push origin feature-name
5. افتح Pull Request
الرخصة:
هذا المشروع مرخص تحت رخصة MIT. راجع ملف LICENSE لمزيد من التفاصيل.