Fustani Plus Web — Marketing Hub + Knowledge Center + Affiliate Platform (React 19 + Vite 7 + Supabase)

🎯 المشكلة: تطبيق محمول وحده مش كافي لاكتساب عملاء جدد — محتاج Landing قوي + مركز معرفة SEO-friendly + نظام Affiliate + لوحة تحكم Founder، كلهم متكاملين ومربوطين بقاعدة بيانات التطبيق.

💡 الحل: موقع فستاني بلس SPA كامل مبني كـ Marketing & Knowledge Hub، Supabase هو الـ Core المشترك مع التطبيق الموبايل، مع Admin Dashboard مؤمّن بالكامل، ونظام Affiliate متكامل، ومركز محتوى محسّن للـ SEO والـ AI Crawlers.

━━━━━━━━━━━━━━━━━━━━━

🏗️ مكونات الموقع (Main Pillars)

━━━━━━━━━━━━━━━━━━━━━

🚀 Landing Page تسويقي عالي التحويل

• Hero بالعربية RTL + نسخة EN.

• 8 أقسام مميزات + باقات أسعار (شهري/سنوي مع خصم 50%).

• CTA واضح: 14 يوم مجاني + نموذج تواصل + زر واتساب.

📚 Knowledge Center (مدونة المحتوى)

• محتوى تقني/تسويقي مكتوب للـ SEO + AI Crawlers (Gemini/ChatGPT).

• محرك Markdown كامل (react-markdown + remark-gfm + rehype-raw + @tailwindcss/typography).

• كل مقال له Meta ديناميكي + Schema.org JSON-LD (Article/FAQ/Organization/Product).

🤝 نظام Affiliate متكامل

• تسجيل المسوقين + كود إحالة خاص بكل واحد.

• Dashboard لكل مسوق فيه إحصائياته (Recharts) ومواده التسويقية.

• نظام عمولات وتتبع Conversions.

🔒 Admin Dashboard (Founder-only)

• لوحة تحكم سرية لا يمكن الوصول إليها أو اكتشافها إلا من قبلي (RLS + Hidden Routes + Role Gate).

• CRUD كامل + إحصائيات الموقع + المسوقين + المقالات + طلبات الاشتراك.

• Charts حية بـ Recharts.

━━━━━━━━━━━━━━━━━━━━━

⚙️ الـ Tech Stack

━━━━━━━━━━━━━━━━━━━━━

• Core: React 19.2 + TypeScript 5.9 + Vite 7 (HMR فائق السرعة).

• Routing: React Router 7 (History API).

• Styling: Tailwind CSS 3.4 + shadcn/ui فوق Radix UI Primitives (~25 Headless component).

• Icons: lucide-react.

• Forms: React Hook Form 7.70 + Zod 4.3 (Validation صارم).

• Auth & Backend: Supabase (PostgreSQL + RLS + Auth + Storage + Realtime).

• Fallback: Google Apps Script / Google Sheets (لطلبات قائمة الانتظار والـ Affiliate عند غياب Supabase).

• Charts: Recharts 2.15.

• Media: embla-carousel-react + Canva Particles Animation (Custom).

• i18n & RTL: IBM Plex Sans Arabic (ar/RTL) + Instrument Sans (en/LTR).

• SEO: react-helmet-async + Schema.org JSON-LD + GA4 (G-R2EXHM8QRV) + GTM.

• Security: CSP + HSTS + X-Frame-Options (XSS/Clickjacking Protection) عبر vercel.json.

• Tooling: ESLint 9 (Flat Config) + typescript-eslint.

• Hosting: Vercel (SPA rewrites + Asset caching).

━━━━━━━━━━━━━━━━━━━━━

🔗 التكامل مع التطبيق

━━━━━━━━━━━━━━━━━━━━━

• Supabase هو الـ Shared Core بين الموبايل والويب (نفس قاعدة البيانات + Storage + Auth + Realtime).

• أي تغيير في الموقع ينعكس فوريًا في التطبيق والعكس (Realtime Sync).

• نظام اشتراكات موحّد + نظام تسويق بالعمولة يعبر القناتين.

━━━━━━━━━━━━━━━━━━━━━

👷‍♂️ دوري في المشروع

━━━━━━━━━━━━━━━━━━━━━

Solo Founder & Full-Stack Developer — من تصميم الـ UI (Figma) → كتابة النصوص التسويقية → الـ Frontend (React + TS) → الـ Backend (Supabase RLS + Edge Functions) → الـ Admin Dashboard → الـ SEO Technical → النشر على Vercel.

━━━━━━━━━━━━━━━━━━━━━

📦 حالة المشروع

━━━━━━━━━━━━━━━━━━━━━

✅ Live على fustaniplus.com (Vercel).

🔄 قيد التطوير المستمر (محتوى + مزايا Affiliate + AI-powered SEO).