ui: Better hero demo text - natural sentences with few clear errors

src/index.html

@@ -204,23 +204,23 @@
           <div class="w-20"></div>
          </div><!-- Mock Editor Content -->
          <div class="p-8 editor-content text-right text-lg" dir="rtl" style="background: var(--surface-color); color: var(--text-color); min-height: 300px;">
-          <p class="mb-4"><span class="spelling-error">السمائ</span> صافيه <span class="grammar-error">والشمس</span> <span class="spelling-error">مشرقه</span> فى هذا <span class="spelling-error">اليو</span><span class="punctuation-suggestion">.</span></p>
-          <p class="mb-4">الطالبات <span class="grammar-error">حضروا</span> <span class="spelling-error">الئ</span> <span class="spelling-error">الامتحان</span> <span class="spelling-error">متاخرين</span><span class="punctuation-suggestion">.</span></p>
-          <p><span class="spelling-error">اكتشاف</span> الاخطأ <span class="grammar-error">الاملائيه</span> والنحويه <span class="spelling-error">تلقائين</span>!</p>
+          <p class="mb-4">تعتبر اللغة العربية من أجمل <span class="spelling-error">اللغاة</span> في العالم وأكثرها <span class="spelling-error">انتشاراً</span><span class="punctuation-suggestion">.</span></p>
+          <p class="mb-4">الطالبات <span class="grammar-error">ذهبوا</span> إلى المكتبة لأن <span class="spelling-error">الأمتحان</span> قريب جداً<span class="punctuation-suggestion">.</span></p>
+          <p>محرر بيان يساعدك على كتابة نصوص عربية <span class="spelling-error">صحيحه</span> بكل سهولة!</p>
          </div><!-- Mock Stats Bar -->
          <div class="flex items-center justify-between p-4 border-t" style="border-color: rgba(255, 255, 255, 0.1);">
           <div class="flex items-center gap-6">
            <div class="flex items-center gap-2">
-            <div class="w-3 h-3 rounded-full" style="background: #ef4444;"></div><span class="text-sm" style="color: var(--text-secondary);">٨ إملائي</span>
+            <div class="w-3 h-3 rounded-full" style="background: #ef4444;"></div><span class="text-sm" style="color: var(--text-secondary);">٣ إملائي</span>
            </div>
            <div class="flex items-center gap-2">
-            <div class="w-3 h-3 rounded-full" style="background: #fbbf24;"></div><span class="text-sm" style="color: var(--text-secondary);">٣ نحوي</span>
+            <div class="w-3 h-3 rounded-full" style="background: #fbbf24;"></div><span class="text-sm" style="color: var(--text-secondary);">١ نحوي</span>
            </div>
            <div class="flex items-center gap-2">
             <div class="w-3 h-3 rounded-full" style="background: #22c55e;"></div><span class="text-sm" style="color: var(--text-secondary);">٢ ترقيم</span>
            </div>
           </div>
-          <div class="flex items-center gap-2"><span class="text-2xl font-bold text-gradient">٤٥</span> <span class="text-sm" style="color: var(--text-secondary);">التقييم</span>
+          <div class="flex items-center gap-2"><span class="text-2xl font-bold text-gradient">٧٥</span> <span class="text-sm" style="color: var(--text-secondary);">التقييم</span>
           </div>
          </div>
         <div class="absolute -bottom-6 -left-6 p-4 rounded-2xl shadow-xl animate-fade-in" style="background: var(--surface-color); border: 1px solid rgba(34, 197, 94, 0.3); max-width: 280px;">