anycoder-aecb8cb2 / index.html
Ztronics's picture
Upload folder using huggingface_hub
d6e94b9 verified
Raw History Blame Contribute Delete
44 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nasher AI | ناشر - منصة النشر الذكية</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1e3a8a',
secondary: '#065f46',
accent: '#10b981',
dark: '#0f172a',
light: '#f8fafc'
},
fontFamily: {
sans: ['Tajawal', 'system-ui', 'sans-serif']
}
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<style>
* { font-family: 'Tajawal', sans-serif; }
.gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #065f46 100%); }
.glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.progress-ring { transform: rotate(-90deg); }
.fade-in { animation: fadeIn 0.5s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.slide-in { animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.pulse-glow { animation: pulseGlow 2s infinite; }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 5px #10b981; } 50% { box-shadow: 0 0 20px #10b981, 0 0 30px #10b981; } }
.typing::after { content: '|'; animation: blink 1s infinite; }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.platform-card { transition: all 0.3s ease; border: 2px solid transparent; }
.platform-card.selected { border-color: #10b981; background: rgba(16, 185, 129, 0.1); }
.sidebar-item { transition: all 0.2s ease; }
.sidebar-item:hover, .sidebar-item.active { background: rgba(16, 185, 129, 0.15); color: #10b981; border-right: 3px solid #10b981; }
.step-active { background: #10b981; color: white; }
.step-completed { background: #065f46; color: white; }
.step-pending { background: #e2e8f0; color: #64748b; }
.ai-thinking { background: linear-gradient(90deg, #1e3a8a, #065f46, #1e3a8a); background-size: 200% 100%; animation: shimmer 2s infinite; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
</style>
</head>
<body class="bg-slate-50 text-slate-800 overflow-x-hidden">
<!-- Landing Page -->
<div id="landingPage" class="min-h-screen">
<!-- Navigation -->
<nav class="fixed w-full z-50 glass border-b border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center">
<i class="fas fa-book-open text-white text-lg"></i>
</div>
<span class="text-2xl font-bold text-primary">ناشر <span class="text-accent">AI</span></span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-slate-600 hover:text-primary transition">المميزات</a>
<a href="#platforms" class="text-slate-600 hover:text-primary transition">المنصات</a>
<a href="#pricing" class="text-slate-600 hover:text-primary transition">الأسعار</a>
<a href="#academy" class="text-slate-600 hover:text-primary transition">الأكاديمية</a>
</div>
<div class="flex items-center gap-4">
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-slate-500 hover:text-accent transition hidden sm:block">
Built with <span class="font-semibold">anycoder</span>
</a>
<button onclick="showOnboarding()" class="gradient-bg text-white px-6 py-2.5 rounded-xl font-medium hover:shadow-lg hover:shadow-primary/30 transition">
ابدأ مجانًا
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative pt-32 pb-20 overflow-hidden">
<div class="absolute inset-0 gradient-bg opacity-5"></div>
<div class="absolute top-20 left-10 w-72 h-72 bg-accent/20 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 right-10 w-96 h-96 bg-primary/20 rounded-full blur-3xl"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
<div class="text-center max-w-4xl mx-auto">
<div class="inline-flex items-center gap-2 bg-accent/10 text-secondary px-4 py-2 rounded-full text-sm font-medium mb-6">
<span class="w-2 h-2 bg-accent rounded-full pulse-glow"></span>
منصة النشر العربية الأولى بالذكاء الاصطناعي
</div>
<h1 class="text-5xl md:text-7xl font-bold text-dark mb-6 leading-tight">
انشر كتابك الإلكتروني<br>
<span class="gradient-bg bg-clip-text text-transparent">باحتراف… في دقائق</span>
</h1>
<p class="text-xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
<span id="typingText" class="typing"></span> يجهّز كتابك تلقائيًا للنشر على Amazon وGoogle Play ومنصات أخرى من مكان واحد
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button onclick="showOnboarding()" class="gradient-bg text-white px-8 py-4 rounded-2xl font-bold text-lg hover:shadow-2xl hover:shadow-primary/30 transition flex items-center justify-center gap-3">
<i class="fas fa-rocket"></i>
ابدأ مجانًا
</button>
<button onclick="showDemo()" class="bg-white text-primary px-8 py-4 rounded-2xl font-bold text-lg border-2 border-primary/20 hover:border-primary hover:shadow-lg transition flex items-center justify-center gap-3">
<i class="fas fa-play-circle"></i>
شاهد كيف يعمل
</button>
</div>
<!-- Trust Badges -->
<div class="mt-16 flex flex-wrap justify-center gap-8 opacity-60">
<div class="flex items-center gap-2">
<i class="fas fa-shield-check text-accent text-2xl"></i>
<span class="text-sm">لا نحتفظ بملفات الكتب</span>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-check-circle text-accent text-2xl"></i>
<span class="text-sm">متوافق مع سياسات النشر</span>
</div>
<div class="flex items-center gap-2">
<i class="fas fa-lock text-accent text-2xl"></i>
<span class="text-sm">تشفير كامل للبيانات</span>
</div>
</div>
</div>
</div>
</section>
<!-- Value Proposition -->
<section id="features" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">لماذا ناشر AI؟</h2>
<p class="text-slate-600">كل ما تحتاجه لنشر كتابك بنجاح</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="card-hover bg-slate-50 p-6 rounded-2xl">
<div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-database text-primary text-2xl"></i>
</div>
<h3 class="font-bold text-lg mb-2">إدخال البيانات مرة واحدة</h3>
<p class="text-slate-600 text-sm">أدخل معلومات كتابك مرة واحدة ونشرها على جميع المنصات تلقائيًا</p>
</div>
<div class="card-hover bg-slate-50 p-6 rounded-2xl">
<div class="w-14 h-14 bg-secondary/10 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-brain text-secondary text-2xl"></i>
</div>
<h3 class="font-bold text-lg mb-2">تخصيص ذكي لكل منصة</h3>
<p class="text-slate-600 text-sm">الذكاء الاصطناعي يكيّف محتوى كتابك حتى متطلبات كل منصة نشر</p>
</div>
<div class="card-hover bg-slate-50 p-6 rounded-2xl">
<div class="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-clipboard-check text-accent text-2xl"></i>
</div>
<h3 class="font-bold text-lg mb-2">فحص سياسات النشر</h3>
<p class="text-slate-600 text-sm">تحقق مسبق من الالتزام بسياسات كل منصة قبل التصدير</p>
</div>
<div class="card-hover bg-slate-50 p-6 rounded-2xl">
<div class="w-14 h-14 bg-orange-500/10 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-chart-line text-orange-500 text-2xl"></i>
</div>
<h3 class="font-bold text-lg mb-2">زيادة فرص القبول</h3>
<p class="text-slate-600 text-sm">تحسينات مدروسة ترفع من فرص قبول كتابك وتحقيق المبيعات</p>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="py-20 bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">كيف يعمل ناشر AI؟</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="relative">
<div class="bg-white p-8 rounded-2xl shadow-lg text-center">
<div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6 text-white text-3xl font-bold">1</div>
<h3 class="font-bold text-xl mb-3">أدخل بيانات كتابك</h3>
<p class="text-slate-600">اكتب عنوان الكتاب والوصف والمعلومات الأساسية في نموذج ذكي بسيط</p>
</div>
<div class="hidden md:block absolute top-1/2 -left-4 w-8 h-0.5 bg-accent"></div>
</div>
<div class="relative">
<div class="bg-white p-8 rounded-2xl shadow-lg text-center">
<div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6 text-white text-3xl font-bold">2</div>
<h3 class="font-bold text-xl mb-3">الذكاء الاصطناعي يحسّن</h3>
<p class="text-slate-600">يقوم AI بتحسين الوصف، اقتراح الكلمات المفتاحية، وتخصيص المحتوى</p>
</div>
<div class="hidden md:block absolute top-1/2 -left-4 w-8 h-0.5 bg-accent"></div>
</div>
<div>
<div class="bg-white p-8 rounded-2xl shadow-lg text-center">
<div class="w-20 h-20 gradient-bg rounded-full flex items-center justify-center mx-auto mb-6 text-white text-3xl font-bold">3</div>
<h3 class="font-bold text-xl mb-3">تصدير جاهز للنشر</h3>
<p class="text-slate-600">احصل على ملفات جاهزة للرفع المباشر على كل منصة نشر</p>
</div>
</div>
</div>
</div>
</section>
<!-- Platforms -->
<section id="platforms" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">المنصات المدعومة</h2>
<p class="text-slate-600">انشر كتابك على أكثر من 15 منصة عالمية</p>
</div>
<!-- Platform Categories -->
<div class="space-y-8">
<!-- Core Platforms -->
<div>
<h3 class="font-bold text-lg text-primary mb-4 flex items-center gap-2">
<i class="fas fa-star text-accent"></i>
المنصات الأساسية
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
<div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center text-white">
<i class="fab fa-amazon text-xl"></i>
</div>
<div>
<p class="font-bold text-sm">Amazon KDP</p>
<p class="text-xs text-slate-500">أكبر منصة نشر</p>
</div>
</div>
<div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
<div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center text-white">
<i class="fab fa-google-play text-xl"></i>
</div>
<div>
<p class="font-bold text-sm">Google Play Books</p>
<p class="text-xs text-slate-500">مليار مستخدم</p>
</div>
</div>
<div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
<div class="w-12 h-12 bg-gray-800 rounded-lg flex items-center justify-center text-white">
<i class="fab fa-apple text-xl"></i>
</div>
<div>
<p class="font-bold text-sm">Apple Books</p>
<p class="text-xs text-slate-500">أجهزة Apple</p>
</div>
</div>
<div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
<div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center text-white">
<i class="fas fa-book text-xl"></i>
</div>
<div>
<p class="font-bold text-sm">Kobo Writing Life</p>
<p class="text-xs text-slate-500">عالمية</p>
</div>
</div>
</div>
</div>
<!-- Direct Selling -->
<div>
<h3 class="font-bold text-lg text-primary mb-4 flex items-center gap-2">
<i class="fas fa-shopping-cart text-accent"></i>
البيع المباشر
</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
<div class="w-12 h-12 bg-pink-500 rounded-lg flex items-center justify-center text-white">
<i class="fas fa-candy-cane text-xl"></i>
</div>
<div>
<p class="font-bold text-sm">Gumroad</p>
<p class="text-xs text-slate-500">بيع سهل</p>
</div>
</div>
<div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
<div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center text-white">
<i class="fas fa-credit-card text-xl"></i>
</div>
<div>
<p class="font-bold text-sm">Payhip</p>
<p class="text-xs text-slate-500">بدون عمولة</p>
</div>
</div>
<div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
<div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center text-white">
<i class="fab fa-shopify text-xl"></i>
</div>
<div>
<p class="font-bold text-sm">Shopify</p>
<p class="text-xs text-slate-500">متجرك الخاص</p>
</div>
</div>
<div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
<div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center text-white">
<i class="fas fa-bolt text-xl"></i>
</div>
<div>
<p class="font-bold text-sm">SellNow</p>
<p class="text-xs text-slate-500">سريع</p>
</div>
</div>
</div>
</div>
<!-- Educational -->
<div>
<h3 class="font-bold text-lg text-primary mb-4 flex items-center gap-2">
<i class="fas fa-graduation-cap text-accent"></i>
المنصات التعليمية
</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
<div class="w-12 h-12 bg-gray-600 rounded-lg flex items-center justify-center text-white">
<i class="fas fa-leanpub text-xl"></i>
</div>
<div>
<p class="font-bold text-sm">Leanpub</p>
<p class="text-xs text-slate-500">للناشرين التقنيين</p>
</div>
</div>
<div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
<div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center text-white">
<i class="fas fa-chalkboard-teacher text-xl"></i>
</div>
<div>
<p class="font-bold text-sm">Podia</p>
<p class="text-xs text-slate-500">دورات وكتب</p>
</div>
</div>
<div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
<div class="w-12 h-12 bg-teal-500 rounded-lg flex items-center justify-center text-white">
<i class="fas fa-graduation-cap text-xl"></i>
</div>
<div>
<p class="font-bold text-sm">Teachable</p>
<p class="text-xs text-slate-500">تعليم إلكتروني</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="py-20 bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">خطط الأسعار</h2>
<p class="text-slate-600">اختر الخطة المناسبة لاحتياجاتك</p>
</div>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Free -->
<div class="bg-white rounded-2xl p-8 shadow-lg">
<div class="text-center mb-6">
<h3 class="font-bold text-xl mb-2">مجاني</h3>
<p class="text-4xl font-bold text-primary">$0</p>
<p class="text-slate-500 text-sm">للتجربة</p>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كتاب واحد</li>
<li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> منصتين فقط</li>
<li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> تحسين أساسي</li>
<li class="flex items-center gap-2 text-sm text-slate-400"><i class="fas fa-times"></i> بدون تصدير</li>
</ul>
<button onclick="showOnboarding()" class="w-full py-3 border-2 border-primary text-primary rounded-xl font-bold hover:bg-primary hover:text-white transition">ابدأ مجانًا</button>
</div>
<!-- Pro -->
<div class="bg-white rounded-2xl p-8 shadow-2xl ring-2 ring-accent relative transform scale-105">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-accent text-white px-4 py-1 rounded-full text-sm font-bold">الأكثر شيوعاً</div>
<div class="text-center mb-6">
<h3 class="font-bold text-xl mb-2">احترافي</h3>
<p class="text-4xl font-bold text-primary">$19</p>
<p class="text-slate-500 text-sm">شهرياً</p>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> حتى 5 كتب</li>
<li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كل المنصات الأساسية</li>
<li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> تصدير كامل</li>
<li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> دعم بالبريد</li>
</ul>
<button onclick="showOnboarding()" class="w-full py-3 gradient-bg text-white rounded-xl font-bold hover:shadow-lg transition">اشترك الآن</button>
</div>
<!-- Publisher -->
<div class="bg-white rounded-2xl p-8 shadow-lg">
<div class="text-center mb-6">
<h3 class="font-bold text-xl mb-2">ناشر</h3>
<p class="text-4xl font-bold text-primary">$49</p>
<p class="text-slate-500 text-sm">شهرياً</p>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كتب غير محدودة</li>
<li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كل المنصات + Bulk Export</li>
<li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> AI متقدم</li>
<li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> دعم أولوية 24/7</li>
</ul>
<button onclick="showOnboarding()" class="w-full py-3 border-2 border-primary text-primary rounded-xl font-bold hover:bg-primary hover:text-white transition">تواصل مع المبيعات</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center">
<i class="fas fa-book-open text-white"></i>
</div>
<span class="text-xl font-bold">ناشر AI</span>
</div>
<p class="text-slate-400 text-sm">منصة النشر العربية الذكية الأولى لمساعدة المؤلفين على النشر العالمي</p>
</div>
<div>
<h4 class="font-bold mb-4">المنتج</h4>
<ul class="space-y-2 text-slate-400 text-sm">
<li><a href="#" class="hover:text-accent transition">المميزات</a></li>
<li><a href="#" class="hover:text-accent transition">الأسعار</a></li>
<li><a href="#" class="hover:text-accent transition">المنصات</a></li>
<li><a href="#" class="hover:text-accent transition">التحديثات</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">الموارد</h4>
<ul class="space-y-2 text-slate-400 text-sm">
<li><a href="#" class="hover:text-accent transition">الأكاديمية</a></li>
<li><a href="#" class="hover:text-accent transition">المدونة</a></li>
<li><a href="#" class="hover:text-accent transition">الدليل</a></li>
<li><a href="#" class="hover:text-accent transition">API</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">الشركة</h4>
<ul class="space-y-2 text-slate-400 text-sm">
<li><a href="#" class="hover:text-accent transition">من نحن</a></li>
<li><a href="#" class="hover:text-accent transition">الشروط</a></li>
<li><a href="#" class="hover:text-accent transition">الخصوصية</a></li>
<li><a href="#" class="hover:text-accent transition">تواصل معنا</a></li>
</ul>
</div>
</div>
<div class="border-t border-slate-700 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-slate-400 text-sm">© 2025 ناشر AI. جميع الحقوق محفوظة</p>
<div class="flex gap-4 mt-4 md:mt-0">
<a href="#" class="text-slate-400 hover:text-accent transition"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-slate-400 hover:text-accent transition"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-slate-400 hover:text-accent transition"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</footer>
</div>
<!-- Onboarding Modal -->
<div id="onboardingModal" class="fixed inset-0 z-50 hidden">
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeOnboarding()"></div>
<div class="absolute inset-4 md:inset-10 bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col">
<!-- Progress -->
<div class="bg-slate-50 px-6 py-4 border-b flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center">
<i class="fas fa-book-open text-white text-sm"></i>
</div>
<span class="font-bold">ناشر AI</span>
</div>
<div class="flex items-center gap-2">
<div class="w-32 h-2 bg-slate-200 rounded-full overflow-hidden">
<div id="onboardingProgress" class="h-full gradient-bg transition-all duration-300" style="width: 33%"></div>
</div>
<span id="stepIndicator" class="text-sm text-slate-500">1/3</span>
</div>
</div>
<!-- Content -->
<div id="onboardingContent" class="flex-1 overflow-auto p-6 md:p-10">
<!-- Step 1: Welcome -->
<div id="step1" class="fade-in">
<div class="text-center max-w-2xl mx-auto">
<div class="w-24 h-24 gradient-bg rounded-3xl flex items-center justify-center mx-auto mb-6">
<i class="fas fa-hand-sparkles text-white text-4xl"></i>
</div>
<h2 class="text-3xl font-bold mb-4">أهلاً بك في ناشر AI! 👋</h2>
<p class="text-slate-600 mb-8 text-lg">نحن سعداء بانضمامك. دعنا نجهّز تجربتك ببضعة أسئلة سريعة</p>
<button onclick="nextStep(2)" class="gradient-bg text-white px-8 py-4 rounded-xl font-bold text-lg hover:shadow-lg transition">
لنبدأ <i class="fas fa-arrow-left mr-2"></i>
</button>
</div>
</div>
<!-- Step 2: User Type -->
<div id="step2" class="hidden fade-in">
<div class="max-w-3xl mx-auto">
<h2 class="text-2xl font-bold mb-2 text-center">ما هو هدفك الرئيسي؟</h2>
<p class="text-slate-600 mb-8 text-center">سنخصص تجربتك بناءً على اختيارك</p>
<div class="grid md:grid-cols-2 gap-4">
<button onclick="selectUserType('author')" class="user-type-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-right">
<div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-pen-fancy text-primary text-2xl"></i>
</div>
<h3 class="font-bold text-lg mb-2">مؤلف مستقل</h3>
<p class="text-slate-600 text-sm">أكتب الكتب وأنشرها بنفسي</p>
</button>
<button onclick="selectUserType('creator')" class="user-type-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-right">
<div class="w-14 h-14 bg-secondary/10 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-video text-secondary text-2xl"></i>
</div>
<h3 class="font-bold text-lg mb-2">صانع محتوى / مدرّب</h3>
<p class="text-slate-600 text-sm">أحوّل محتواي لكتب إلكترونية</p>
</button>
<button onclick="selectUserType('publisher')" class="user-type-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-right">
<div class="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-building text-accent text-2xl"></i>
</div>
<h3 class="font-bold text-lg mb-2">ناشر محترف</h3>
<p class="text-slate-600 text-sm">أدير كتباً لعدة مؤلفين</p>
</button>
<button onclick="selectUserType('seller')" class="user-type-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-right">
<div class="w-14 h-14 bg-orange-500/10 rounded-xl flex items-center justify-center mb-4">
<i class="fas fa-store text-orange-500 text-2xl"></i>
</div>
<h3 class="font-bold text-lg mb-2">بيع مباشر</h3>
<p class="text-slate-600 text-sm">أبيع مباشرة لجمهوري</p>
</button>
</div>
</div>
</div>
<!-- Step 3: Primary Platform -->
<div id="step3" class="hidden fade-in">
<div class="max-w-3xl mx-auto">
<h2 class="text-2xl font-bold mb-2 text-center">ما هي منصتك الأساسية؟</h2>
<p class="text-slate-600 mb-8 text-center">سنرتب المنصات حسب أولويتك</p>
<div class="grid md:grid-cols-3 gap-4">
<button onclick="selectPlatform('amazon')" class="platform-select-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-center">
<div class="w-16 h-16 bg-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white">
<i class="fab fa-amazon text-3xl"></i>
</div>
<h3 class="font-bold">Amazon KDP</h3>
<p class="text-slate-500 text-sm">أكبر منصة</p>
</button>
<button onclick="selectPlatform('google')" class="platform-select-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-center">
<div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white">
<i class="fab fa-google-play text-3xl"></i>
</div>
<h3 class="font-bold">Google Play</h3>
<p class="text-slate-500 text-sm">وصول عالمي</p>
</button>
<button onclick="selectPlatform('apple')" class="platform-select-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-center">
<div class="w-16 h-16 bg-gray-800 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white">
<i class="fab fa-apple text-3xl"></i>
</div>
<h3 class="font-bold">Apple Books</h3>
<p class="text-slate-500 text-sm">جودة عالية</p>
</button>
<button onclick="selectPlatform('gumroad')" class="platform-select-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-center">
<div class="w-16 h-16 bg-pink-500 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white">
<i class="fas fa-candy-cane text-3xl"></i>
</div>
<h3 class="font-bold">Gumroad</h3>
<p class="text-slate-500 text-sm">بيع مباشر</p>
</button>
<button onclick="selectPlatform('all')" class="platform-select-btn p-6 border-2 border-slate-200 rounded-2xl hover:border-accent hover:bg-accent/5 transition text-center">
<div class="w-16 h-16 gradient-bg rounded-2xl flex items-center justify-center mx-auto mb-4 text-white">
<i class="fas fa-globe text-3xl"></i>
</div>
<h3 class="font-bold">جميع المنصات</h3>
<p class="text-slate-500 text-sm">أنشر في كل مكان</p>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Dashboard -->
<div id="dashboard" class="hidden min-h-screen bg-slate-50">
<!-- Sidebar -->
<aside id="sidebar" class="fixed right-0 top-0 h-full w-64 bg-white shadow-xl z-40 transform transition-transform duration-300 translate-x-0">
<div class="p-6 border-b">
<div class="flex items-center gap-3">
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center">
<i class="fas fa-book-open text-white"></i>
</div>
<span class="text-xl font-bold text-primary">ناشر AI</span>
</div>
</div>
<nav class="p-4 space-y-1">
<a href="#" onclick="showDashboardSection('home')" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl">
<i class="fas fa-home w-5"></i>
<span>لوحة التحكم</span>
</a>
<a href="#" onclick="showDashboardSection('books')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
<i class="fas fa-book w-5"></i>
<span>كتبي</span>
</a>
<a href="#" onclick="showAddBook()" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-accent">
<i class="fas fa-plus-circle w-5"></i>
<span>إضافة كتاب</span>
</a>
<a href="#" onclick="showDashboardSection('ai')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
<i class="fas fa-robot w-5"></i>
<span>تحسين بالذكاء الاصطناعي</span>
</a>
<a href="#" onclick="showDashboardSection('platforms')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
<i class="fas fa-layer-group w-5"></i>
<span>المنصات</span>
</a>
<a href="#" onclick="showDashboardSection('export')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
<i class="fas fa-file-export w-5"></i>
<span>مركز التصدير</span>
</a>
<div class="border-t my-4"></div>
<a href="#" onclick="showDashboardSection('academy')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
<i class="fas fa-graduation-cap w-5"></i>
<span>الأكاديمية</span>
</a>
<a href="#" onclick="showDashboardSection('support')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
<i class="fas fa-headset w-5"></i>
<span>الدعم والمساعدة</span>
</a>
<a href="#" onclick="showDashboardSection('settings')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
<i class="fas fa-cog w-5"></i>
<span>الإعدادات</span>
</a>
</nav>
<!-- User Profile -->
<div class="absolute bottom-0 left-0 right-0 p-4 border-t bg-slate-50">
<div class="flex items-center gap-3">
<div class="w-10 h