Ztronics commited on
Commit
d6e94b9
·
verified ·
1 Parent(s): 34a678d

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +637 -19
index.html CHANGED
@@ -1,19 +1,637 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nasher AI | ناشر - منصة النشر الذكية</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#1e3a8a',
15
+ secondary: '#065f46',
16
+ accent: '#10b981',
17
+ dark: '#0f172a',
18
+ light: '#f8fafc'
19
+ },
20
+ fontFamily: {
21
+ sans: ['Tajawal', 'system-ui', 'sans-serif']
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet">
28
+ <style>
29
+ * { font-family: 'Tajawal', sans-serif; }
30
+ .gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #065f46 100%); }
31
+ .glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); }
32
+ .card-hover { transition: all 0.3s ease; }
33
+ .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
34
+ .progress-ring { transform: rotate(-90deg); }
35
+ .fade-in { animation: fadeIn 0.5s ease-in; }
36
+ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
37
+ .slide-in { animation: slideIn 0.3s ease-out; }
38
+ @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
39
+ .pulse-glow { animation: pulseGlow 2s infinite; }
40
+ @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 5px #10b981; } 50% { box-shadow: 0 0 20px #10b981, 0 0 30px #10b981; } }
41
+ .typing::after { content: '|'; animation: blink 1s infinite; }
42
+ @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
43
+ .platform-card { transition: all 0.3s ease; border: 2px solid transparent; }
44
+ .platform-card.selected { border-color: #10b981; background: rgba(16, 185, 129, 0.1); }
45
+ .sidebar-item { transition: all 0.2s ease; }
46
+ .sidebar-item:hover, .sidebar-item.active { background: rgba(16, 185, 129, 0.15); color: #10b981; border-right: 3px solid #10b981; }
47
+ .step-active { background: #10b981; color: white; }
48
+ .step-completed { background: #065f46; color: white; }
49
+ .step-pending { background: #e2e8f0; color: #64748b; }
50
+ .ai-thinking { background: linear-gradient(90deg, #1e3a8a, #065f46, #1e3a8a); background-size: 200% 100%; animation: shimmer 2s infinite; }
51
+ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
52
+ </style>
53
+ </head>
54
+ <body class="bg-slate-50 text-slate-800 overflow-x-hidden">
55
+ <!-- Landing Page -->
56
+ <div id="landingPage" class="min-h-screen">
57
+ <!-- Navigation -->
58
+ <nav class="fixed w-full z-50 glass border-b border-white/10">
59
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
60
+ <div class="flex justify-between items-center h-16">
61
+ <div class="flex items-center gap-3">
62
+ <div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center">
63
+ <i class="fas fa-book-open text-white text-lg"></i>
64
+ </div>
65
+ <span class="text-2xl font-bold text-primary">ناشر <span class="text-accent">AI</span></span>
66
+ </div>
67
+ <div class="hidden md:flex items-center gap-8">
68
+ <a href="#features" class="text-slate-600 hover:text-primary transition">المميزات</a>
69
+ <a href="#platforms" class="text-slate-600 hover:text-primary transition">المنصات</a>
70
+ <a href="#pricing" class="text-slate-600 hover:text-primary transition">الأسعار</a>
71
+ <a href="#academy" class="text-slate-600 hover:text-primary transition">الأكاديمية</a>
72
+ </div>
73
+ <div class="flex items-center gap-4">
74
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-slate-500 hover:text-accent transition hidden sm:block">
75
+ Built with <span class="font-semibold">anycoder</span>
76
+ </a>
77
+ <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">
78
+ ابدأ مجانًا
79
+ </button>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </nav>
84
+
85
+ <!-- Hero Section -->
86
+ <section class="relative pt-32 pb-20 overflow-hidden">
87
+ <div class="absolute inset-0 gradient-bg opacity-5"></div>
88
+ <div class="absolute top-20 left-10 w-72 h-72 bg-accent/20 rounded-full blur-3xl"></div>
89
+ <div class="absolute bottom-20 right-10 w-96 h-96 bg-primary/20 rounded-full blur-3xl"></div>
90
+
91
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
92
+ <div class="text-center max-w-4xl mx-auto">
93
+ <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">
94
+ <span class="w-2 h-2 bg-accent rounded-full pulse-glow"></span>
95
+ منصة النشر العربية الأولى بالذكاء الاصطناعي
96
+ </div>
97
+ <h1 class="text-5xl md:text-7xl font-bold text-dark mb-6 leading-tight">
98
+ انشر كتابك الإلكتروني<br>
99
+ <span class="gradient-bg bg-clip-text text-transparent">باحتراف… في دقائق</span>
100
+ </h1>
101
+ <p class="text-xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
102
+ <span id="typingText" class="typing"></span> يجهّز كتابك تلقائيًا للنشر على Amazon وGoogle Play ومنصات أخرى من مكان واحد
103
+ </p>
104
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
105
+ <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">
106
+ <i class="fas fa-rocket"></i>
107
+ ابدأ مجانًا
108
+ </button>
109
+ <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">
110
+ <i class="fas fa-play-circle"></i>
111
+ شاهد كيف يعمل
112
+ </button>
113
+ </div>
114
+
115
+ <!-- Trust Badges -->
116
+ <div class="mt-16 flex flex-wrap justify-center gap-8 opacity-60">
117
+ <div class="flex items-center gap-2">
118
+ <i class="fas fa-shield-check text-accent text-2xl"></i>
119
+ <span class="text-sm">لا نحتفظ بملفات الكتب</span>
120
+ </div>
121
+ <div class="flex items-center gap-2">
122
+ <i class="fas fa-check-circle text-accent text-2xl"></i>
123
+ <span class="text-sm">متوافق مع سياسات النشر</span>
124
+ </div>
125
+ <div class="flex items-center gap-2">
126
+ <i class="fas fa-lock text-accent text-2xl"></i>
127
+ <span class="text-sm">تشفير كامل للبيانات</span>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- Value Proposition -->
135
+ <section id="features" class="py-20 bg-white">
136
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
137
+ <div class="text-center mb-16">
138
+ <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">لماذا ناشر AI؟</h2>
139
+ <p class="text-slate-600">كل ما تحتاجه لنشر كتابك بنجاح</p>
140
+ </div>
141
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
142
+ <div class="card-hover bg-slate-50 p-6 rounded-2xl">
143
+ <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
144
+ <i class="fas fa-database text-primary text-2xl"></i>
145
+ </div>
146
+ <h3 class="font-bold text-lg mb-2">إدخال البيانات مرة واحدة</h3>
147
+ <p class="text-slate-600 text-sm">أدخل معلومات كتابك مرة واحدة ونشرها على جميع المنصات تلقائيًا</p>
148
+ </div>
149
+ <div class="card-hover bg-slate-50 p-6 rounded-2xl">
150
+ <div class="w-14 h-14 bg-secondary/10 rounded-xl flex items-center justify-center mb-4">
151
+ <i class="fas fa-brain text-secondary text-2xl"></i>
152
+ </div>
153
+ <h3 class="font-bold text-lg mb-2">تخصيص ذكي لكل منصة</h3>
154
+ <p class="text-slate-600 text-sm">الذكاء الاصطناعي يكيّف محتوى كتابك حتى متطلبات كل منصة نشر</p>
155
+ </div>
156
+ <div class="card-hover bg-slate-50 p-6 rounded-2xl">
157
+ <div class="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center mb-4">
158
+ <i class="fas fa-clipboard-check text-accent text-2xl"></i>
159
+ </div>
160
+ <h3 class="font-bold text-lg mb-2">فحص سياسات النشر</h3>
161
+ <p class="text-slate-600 text-sm">تحقق مسبق من الالتزام بسياسات كل منصة قبل التصدير</p>
162
+ </div>
163
+ <div class="card-hover bg-slate-50 p-6 rounded-2xl">
164
+ <div class="w-14 h-14 bg-orange-500/10 rounded-xl flex items-center justify-center mb-4">
165
+ <i class="fas fa-chart-line text-orange-500 text-2xl"></i>
166
+ </div>
167
+ <h3 class="font-bold text-lg mb-2">زيادة فرص القبول</h3>
168
+ <p class="text-slate-600 text-sm">تحسينات مدروسة ترفع من فرص قبول كتابك وتحقيق المبيعات</p>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </section>
173
+
174
+ <!-- How It Works -->
175
+ <section class="py-20 bg-slate-50">
176
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
177
+ <div class="text-center mb-16">
178
+ <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">كيف يعمل ناشر AI؟</h2>
179
+ </div>
180
+ <div class="grid md:grid-cols-3 gap-8">
181
+ <div class="relative">
182
+ <div class="bg-white p-8 rounded-2xl shadow-lg text-center">
183
+ <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>
184
+ <h3 class="font-bold text-xl mb-3">أدخل بيانات كتابك</h3>
185
+ <p class="text-slate-600">اكتب عنوان الكتاب والوصف والمعلومات الأساسية في نموذج ذكي بسيط</p>
186
+ </div>
187
+ <div class="hidden md:block absolute top-1/2 -left-4 w-8 h-0.5 bg-accent"></div>
188
+ </div>
189
+ <div class="relative">
190
+ <div class="bg-white p-8 rounded-2xl shadow-lg text-center">
191
+ <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>
192
+ <h3 class="font-bold text-xl mb-3">الذكاء الاصطناعي يحسّن</h3>
193
+ <p class="text-slate-600">يقوم AI بتحسين الوصف، اقتراح الكلمات المفتاحية، وتخصيص المحتوى</p>
194
+ </div>
195
+ <div class="hidden md:block absolute top-1/2 -left-4 w-8 h-0.5 bg-accent"></div>
196
+ </div>
197
+ <div>
198
+ <div class="bg-white p-8 rounded-2xl shadow-lg text-center">
199
+ <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>
200
+ <h3 class="font-bold text-xl mb-3">تصدير جاهز للنشر</h3>
201
+ <p class="text-slate-600">احصل على ملفات جاهزة للرفع المباشر على كل منصة نشر</p>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </section>
207
+
208
+ <!-- Platforms -->
209
+ <section id="platforms" class="py-20 bg-white">
210
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
211
+ <div class="text-center mb-16">
212
+ <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">المنصات المدعومة</h2>
213
+ <p class="text-slate-600">انشر كتابك على أكثر من 15 منصة عالمية</p>
214
+ </div>
215
+
216
+ <!-- Platform Categories -->
217
+ <div class="space-y-8">
218
+ <!-- Core Platforms -->
219
+ <div>
220
+ <h3 class="font-bold text-lg text-primary mb-4 flex items-center gap-2">
221
+ <i class="fas fa-star text-accent"></i>
222
+ المنصات الأساسية
223
+ </h3>
224
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
225
+ <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
226
+ <div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center text-white">
227
+ <i class="fab fa-amazon text-xl"></i>
228
+ </div>
229
+ <div>
230
+ <p class="font-bold text-sm">Amazon KDP</p>
231
+ <p class="text-xs text-slate-500">أكبر منصة نشر</p>
232
+ </div>
233
+ </div>
234
+ <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
235
+ <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center text-white">
236
+ <i class="fab fa-google-play text-xl"></i>
237
+ </div>
238
+ <div>
239
+ <p class="font-bold text-sm">Google Play Books</p>
240
+ <p class="text-xs text-slate-500">مليار مستخدم</p>
241
+ </div>
242
+ </div>
243
+ <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
244
+ <div class="w-12 h-12 bg-gray-800 rounded-lg flex items-center justify-center text-white">
245
+ <i class="fab fa-apple text-xl"></i>
246
+ </div>
247
+ <div>
248
+ <p class="font-bold text-sm">Apple Books</p>
249
+ <p class="text-xs text-slate-500">أجهزة Apple</p>
250
+ </div>
251
+ </div>
252
+ <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
253
+ <div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center text-white">
254
+ <i class="fas fa-book text-xl"></i>
255
+ </div>
256
+ <div>
257
+ <p class="font-bold text-sm">Kobo Writing Life</p>
258
+ <p class="text-xs text-slate-500">عالمية</p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Direct Selling -->
265
+ <div>
266
+ <h3 class="font-bold text-lg text-primary mb-4 flex items-center gap-2">
267
+ <i class="fas fa-shopping-cart text-accent"></i>
268
+ البيع المباشر
269
+ </h3>
270
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
271
+ <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
272
+ <div class="w-12 h-12 bg-pink-500 rounded-lg flex items-center justify-center text-white">
273
+ <i class="fas fa-candy-cane text-xl"></i>
274
+ </div>
275
+ <div>
276
+ <p class="font-bold text-sm">Gumroad</p>
277
+ <p class="text-xs text-slate-500">بيع سهل</p>
278
+ </div>
279
+ </div>
280
+ <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
281
+ <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center text-white">
282
+ <i class="fas fa-credit-card text-xl"></i>
283
+ </div>
284
+ <div>
285
+ <p class="font-bold text-sm">Payhip</p>
286
+ <p class="text-xs text-slate-500">بدون عمولة</p>
287
+ </div>
288
+ </div>
289
+ <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
290
+ <div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center text-white">
291
+ <i class="fab fa-shopify text-xl"></i>
292
+ </div>
293
+ <div>
294
+ <p class="font-bold text-sm">Shopify</p>
295
+ <p class="text-xs text-slate-500">متجرك الخاص</p>
296
+ </div>
297
+ </div>
298
+ <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
299
+ <div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center text-white">
300
+ <i class="fas fa-bolt text-xl"></i>
301
+ </div>
302
+ <div>
303
+ <p class="font-bold text-sm">SellNow</p>
304
+ <p class="text-xs text-slate-500">سريع</p>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+
310
+ <!-- Educational -->
311
+ <div>
312
+ <h3 class="font-bold text-lg text-primary mb-4 flex items-center gap-2">
313
+ <i class="fas fa-graduation-cap text-accent"></i>
314
+ المنصات التعليمية
315
+ </h3>
316
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
317
+ <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
318
+ <div class="w-12 h-12 bg-gray-600 rounded-lg flex items-center justify-center text-white">
319
+ <i class="fas fa-leanpub text-xl"></i>
320
+ </div>
321
+ <div>
322
+ <p class="font-bold text-sm">Leanpub</p>
323
+ <p class="text-xs text-slate-500">للناشرين التقنيين</p>
324
+ </div>
325
+ </div>
326
+ <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
327
+ <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center text-white">
328
+ <i class="fas fa-chalkboard-teacher text-xl"></i>
329
+ </div>
330
+ <div>
331
+ <p class="font-bold text-sm">Podia</p>
332
+ <p class="text-xs text-slate-500">دورات وكتب</p>
333
+ </div>
334
+ </div>
335
+ <div class="platform-card bg-slate-50 p-4 rounded-xl flex items-center gap-3">
336
+ <div class="w-12 h-12 bg-teal-500 rounded-lg flex items-center justify-center text-white">
337
+ <i class="fas fa-graduation-cap text-xl"></i>
338
+ </div>
339
+ <div>
340
+ <p class="font-bold text-sm">Teachable</p>
341
+ <p class="text-xs text-slate-500">تعليم إلكتروني</p>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </section>
349
+
350
+ <!-- Pricing -->
351
+ <section id="pricing" class="py-20 bg-slate-50">
352
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
353
+ <div class="text-center mb-16">
354
+ <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4">خطط الأسعار</h2>
355
+ <p class="text-slate-600">اختر الخطة المناسبة لاحتياجاتك</p>
356
+ </div>
357
+ <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
358
+ <!-- Free -->
359
+ <div class="bg-white rounded-2xl p-8 shadow-lg">
360
+ <div class="text-center mb-6">
361
+ <h3 class="font-bold text-xl mb-2">مجاني</h3>
362
+ <p class="text-4xl font-bold text-primary">$0</p>
363
+ <p class="text-slate-500 text-sm">للتجربة</p>
364
+ </div>
365
+ <ul class="space-y-3 mb-8">
366
+ <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كتاب واحد</li>
367
+ <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> منصتين فقط</li>
368
+ <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> تحسين أساسي</li>
369
+ <li class="flex items-center gap-2 text-sm text-slate-400"><i class="fas fa-times"></i> بدون تصدير</li>
370
+ </ul>
371
+ <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>
372
+ </div>
373
+ <!-- Pro -->
374
+ <div class="bg-white rounded-2xl p-8 shadow-2xl ring-2 ring-accent relative transform scale-105">
375
+ <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>
376
+ <div class="text-center mb-6">
377
+ <h3 class="font-bold text-xl mb-2">احترافي</h3>
378
+ <p class="text-4xl font-bold text-primary">$19</p>
379
+ <p class="text-slate-500 text-sm">شهرياً</p>
380
+ </div>
381
+ <ul class="space-y-3 mb-8">
382
+ <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> حتى 5 كتب</li>
383
+ <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كل المنصات الأساسية</li>
384
+ <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> تصدير كامل</li>
385
+ <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> دعم بالبريد</li>
386
+ </ul>
387
+ <button onclick="showOnboarding()" class="w-full py-3 gradient-bg text-white rounded-xl font-bold hover:shadow-lg transition">اشترك الآن</button>
388
+ </div>
389
+ <!-- Publisher -->
390
+ <div class="bg-white rounded-2xl p-8 shadow-lg">
391
+ <div class="text-center mb-6">
392
+ <h3 class="font-bold text-xl mb-2">ناشر</h3>
393
+ <p class="text-4xl font-bold text-primary">$49</p>
394
+ <p class="text-slate-500 text-sm">شهرياً</p>
395
+ </div>
396
+ <ul class="space-y-3 mb-8">
397
+ <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كتب غير محدودة</li>
398
+ <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> كل المنصات + Bulk Export</li>
399
+ <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> AI متقدم</li>
400
+ <li class="flex items-center gap-2 text-sm"><i class="fas fa-check text-accent"></i> دعم أولوية 24/7</li>
401
+ </ul>
402
+ <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>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </section>
407
+
408
+ <!-- Footer -->
409
+ <footer class="bg-dark text-white py-16">
410
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
411
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
412
+ <div>
413
+ <div class="flex items-center gap-3 mb-4">
414
+ <div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center">
415
+ <i class="fas fa-book-open text-white"></i>
416
+ </div>
417
+ <span class="text-xl font-bold">ناشر AI</span>
418
+ </div>
419
+ <p class="text-slate-400 text-sm">منصة النشر العربية الذكية الأولى لمساعدة المؤلفين على النشر العالمي</p>
420
+ </div>
421
+ <div>
422
+ <h4 class="font-bold mb-4">المنتج</h4>
423
+ <ul class="space-y-2 text-slate-400 text-sm">
424
+ <li><a href="#" class="hover:text-accent transition">المميزات</a></li>
425
+ <li><a href="#" class="hover:text-accent transition">الأسعار</a></li>
426
+ <li><a href="#" class="hover:text-accent transition">المنصات</a></li>
427
+ <li><a href="#" class="hover:text-accent transition">التحديثات</a></li>
428
+ </ul>
429
+ </div>
430
+ <div>
431
+ <h4 class="font-bold mb-4">الموارد</h4>
432
+ <ul class="space-y-2 text-slate-400 text-sm">
433
+ <li><a href="#" class="hover:text-accent transition">الأكاديمية</a></li>
434
+ <li><a href="#" class="hover:text-accent transition">المدونة</a></li>
435
+ <li><a href="#" class="hover:text-accent transition">الدليل</a></li>
436
+ <li><a href="#" class="hover:text-accent transition">API</a></li>
437
+ </ul>
438
+ </div>
439
+ <div>
440
+ <h4 class="font-bold mb-4">الشركة</h4>
441
+ <ul class="space-y-2 text-slate-400 text-sm">
442
+ <li><a href="#" class="hover:text-accent transition">من نحن</a></li>
443
+ <li><a href="#" class="hover:text-accent transition">الشروط</a></li>
444
+ <li><a href="#" class="hover:text-accent transition">الخصوصية</a></li>
445
+ <li><a href="#" class="hover:text-accent transition">تواصل معنا</a></li>
446
+ </ul>
447
+ </div>
448
+ </div>
449
+ <div class="border-t border-slate-700 pt-8 flex flex-col md:flex-row justify-between items-center">
450
+ <p class="text-slate-400 text-sm">© 2025 ناشر AI. جميع الحقوق محفوظة</p>
451
+ <div class="flex gap-4 mt-4 md:mt-0">
452
+ <a href="#" class="text-slate-400 hover:text-accent transition"><i class="fab fa-twitter"></i></a>
453
+ <a href="#" class="text-slate-400 hover:text-accent transition"><i class="fab fa-linkedin"></i></a>
454
+ <a href="#" class="text-slate-400 hover:text-accent transition"><i class="fab fa-instagram"></i></a>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </footer>
459
+ </div>
460
+
461
+ <!-- Onboarding Modal -->
462
+ <div id="onboardingModal" class="fixed inset-0 z-50 hidden">
463
+ <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="closeOnboarding()"></div>
464
+ <div class="absolute inset-4 md:inset-10 bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col">
465
+ <!-- Progress -->
466
+ <div class="bg-slate-50 px-6 py-4 border-b flex items-center justify-between">
467
+ <div class="flex items-center gap-2">
468
+ <div class="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center">
469
+ <i class="fas fa-book-open text-white text-sm"></i>
470
+ </div>
471
+ <span class="font-bold">ناشر AI</span>
472
+ </div>
473
+ <div class="flex items-center gap-2">
474
+ <div class="w-32 h-2 bg-slate-200 rounded-full overflow-hidden">
475
+ <div id="onboardingProgress" class="h-full gradient-bg transition-all duration-300" style="width: 33%"></div>
476
+ </div>
477
+ <span id="stepIndicator" class="text-sm text-slate-500">1/3</span>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Content -->
482
+ <div id="onboardingContent" class="flex-1 overflow-auto p-6 md:p-10">
483
+ <!-- Step 1: Welcome -->
484
+ <div id="step1" class="fade-in">
485
+ <div class="text-center max-w-2xl mx-auto">
486
+ <div class="w-24 h-24 gradient-bg rounded-3xl flex items-center justify-center mx-auto mb-6">
487
+ <i class="fas fa-hand-sparkles text-white text-4xl"></i>
488
+ </div>
489
+ <h2 class="text-3xl font-bold mb-4">أهلاً بك في ناشر AI! 👋</h2>
490
+ <p class="text-slate-600 mb-8 text-lg">نحن سعداء بانضمامك. دعنا نجهّز تجربتك ببضعة أسئلة سريعة</p>
491
+ <button onclick="nextStep(2)" class="gradient-bg text-white px-8 py-4 rounded-xl font-bold text-lg hover:shadow-lg transition">
492
+ لنبدأ <i class="fas fa-arrow-left mr-2"></i>
493
+ </button>
494
+ </div>
495
+ </div>
496
+
497
+ <!-- Step 2: User Type -->
498
+ <div id="step2" class="hidden fade-in">
499
+ <div class="max-w-3xl mx-auto">
500
+ <h2 class="text-2xl font-bold mb-2 text-center">ما هو هدفك الرئيسي؟</h2>
501
+ <p class="text-slate-600 mb-8 text-center">سنخصص تجربتك بناءً على اختيارك</p>
502
+ <div class="grid md:grid-cols-2 gap-4">
503
+ <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">
504
+ <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-4">
505
+ <i class="fas fa-pen-fancy text-primary text-2xl"></i>
506
+ </div>
507
+ <h3 class="font-bold text-lg mb-2">مؤلف مستقل</h3>
508
+ <p class="text-slate-600 text-sm">أكتب الكتب وأنشرها بنفسي</p>
509
+ </button>
510
+ <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">
511
+ <div class="w-14 h-14 bg-secondary/10 rounded-xl flex items-center justify-center mb-4">
512
+ <i class="fas fa-video text-secondary text-2xl"></i>
513
+ </div>
514
+ <h3 class="font-bold text-lg mb-2">صانع محتوى / مدرّب</h3>
515
+ <p class="text-slate-600 text-sm">أحوّل محتواي لكتب إلكترونية</p>
516
+ </button>
517
+ <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">
518
+ <div class="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center mb-4">
519
+ <i class="fas fa-building text-accent text-2xl"></i>
520
+ </div>
521
+ <h3 class="font-bold text-lg mb-2">ناشر محترف</h3>
522
+ <p class="text-slate-600 text-sm">أدير كتباً لعدة مؤلفين</p>
523
+ </button>
524
+ <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">
525
+ <div class="w-14 h-14 bg-orange-500/10 rounded-xl flex items-center justify-center mb-4">
526
+ <i class="fas fa-store text-orange-500 text-2xl"></i>
527
+ </div>
528
+ <h3 class="font-bold text-lg mb-2">بيع مباشر</h3>
529
+ <p class="text-slate-600 text-sm">أبيع مباشرة لجمهوري</p>
530
+ </button>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <!-- Step 3: Primary Platform -->
536
+ <div id="step3" class="hidden fade-in">
537
+ <div class="max-w-3xl mx-auto">
538
+ <h2 class="text-2xl font-bold mb-2 text-center">ما هي منصتك الأساسية؟</h2>
539
+ <p class="text-slate-600 mb-8 text-center">سنرتب المنصات حسب أولويتك</p>
540
+ <div class="grid md:grid-cols-3 gap-4">
541
+ <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">
542
+ <div class="w-16 h-16 bg-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white">
543
+ <i class="fab fa-amazon text-3xl"></i>
544
+ </div>
545
+ <h3 class="font-bold">Amazon KDP</h3>
546
+ <p class="text-slate-500 text-sm">أكبر منصة</p>
547
+ </button>
548
+ <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">
549
+ <div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white">
550
+ <i class="fab fa-google-play text-3xl"></i>
551
+ </div>
552
+ <h3 class="font-bold">Google Play</h3>
553
+ <p class="text-slate-500 text-sm">وصول عالمي</p>
554
+ </button>
555
+ <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">
556
+ <div class="w-16 h-16 bg-gray-800 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white">
557
+ <i class="fab fa-apple text-3xl"></i>
558
+ </div>
559
+ <h3 class="font-bold">Apple Books</h3>
560
+ <p class="text-slate-500 text-sm">جودة عالية</p>
561
+ </button>
562
+ <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">
563
+ <div class="w-16 h-16 bg-pink-500 rounded-2xl flex items-center justify-center mx-auto mb-4 text-white">
564
+ <i class="fas fa-candy-cane text-3xl"></i>
565
+ </div>
566
+ <h3 class="font-bold">Gumroad</h3>
567
+ <p class="text-slate-500 text-sm">بيع مباشر</p>
568
+ </button>
569
+ <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">
570
+ <div class="w-16 h-16 gradient-bg rounded-2xl flex items-center justify-center mx-auto mb-4 text-white">
571
+ <i class="fas fa-globe text-3xl"></i>
572
+ </div>
573
+ <h3 class="font-bold">جميع المنصات</h3>
574
+ <p class="text-slate-500 text-sm">أنشر في كل مكان</p>
575
+ </button>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </div>
582
+
583
+ <!-- Dashboard -->
584
+ <div id="dashboard" class="hidden min-h-screen bg-slate-50">
585
+ <!-- Sidebar -->
586
+ <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">
587
+ <div class="p-6 border-b">
588
+ <div class="flex items-center gap-3">
589
+ <div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center">
590
+ <i class="fas fa-book-open text-white"></i>
591
+ </div>
592
+ <span class="text-xl font-bold text-primary">ناشر AI</span>
593
+ </div>
594
+ </div>
595
+ <nav class="p-4 space-y-1">
596
+ <a href="#" onclick="showDashboardSection('home')" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl">
597
+ <i class="fas fa-home w-5"></i>
598
+ <span>لوحة التحكم</span>
599
+ </a>
600
+ <a href="#" onclick="showDashboardSection('books')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
601
+ <i class="fas fa-book w-5"></i>
602
+ <span>كتبي</span>
603
+ </a>
604
+ <a href="#" onclick="showAddBook()" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-accent">
605
+ <i class="fas fa-plus-circle w-5"></i>
606
+ <span>إضافة كتاب</span>
607
+ </a>
608
+ <a href="#" onclick="showDashboardSection('ai')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
609
+ <i class="fas fa-robot w-5"></i>
610
+ <span>تحسين بالذكاء الاصطناعي</span>
611
+ </a>
612
+ <a href="#" onclick="showDashboardSection('platforms')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
613
+ <i class="fas fa-layer-group w-5"></i>
614
+ <span>المنصات</span>
615
+ </a>
616
+ <a href="#" onclick="showDashboardSection('export')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
617
+ <i class="fas fa-file-export w-5"></i>
618
+ <span>مركز التصدير</span>
619
+ </a>
620
+ <div class="border-t my-4"></div>
621
+ <a href="#" onclick="showDashboardSection('academy')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
622
+ <i class="fas fa-graduation-cap w-5"></i>
623
+ <span>الأكاديمية</span>
624
+ </a>
625
+ <a href="#" onclick="showDashboardSection('support')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
626
+ <i class="fas fa-headset w-5"></i>
627
+ <span>الدعم والمساعدة</span>
628
+ </a>
629
+ <a href="#" onclick="showDashboardSection('settings')" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
630
+ <i class="fas fa-cog w-5"></i>
631
+ <span>الإعدادات</span>
632
+ </a>
633
+ </nav>
634
+ <!-- User Profile -->
635
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t bg-slate-50">
636
+ <div class="flex items-center gap-3">
637
+ <div class="w-10 h