UI: add Quran verse translation to 14 languages feature in home + features page

src/index.html

@@ -290,7 +290,7 @@
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
          </div>
          <h3 class="text-xl font-bold mb-3">تدقيق النص القرآني</h3>
-         <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">تحقق من النص القرآني وعرضه بالتشكيل مع اسم السورة ورقم الآية</p>
+         <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">تحقق من النص القرآني وعرضه بالتشكيل مع اسم السورة ورقم الآية وترجمته إلى ١٤ لغة</p>
         </div><!-- Feature 7: Dialect Conversion -->
         <div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
          <div class="feature-icon mb-6" style="background: rgba(249, 115, 22, 0.15); color: #f97316;">
@@ -545,12 +545,12 @@
         <div class="text-right">
          <div class="feature-icon mb-6" style="background: rgba(6, 182, 212, 0.15); color: #06b6d4; width: 64px; height: 64px; font-size: 32px;"><svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg></div>
          <h2 class="text-4xl font-bold mb-6">تدقيق النص القرآني</h2>
-         <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">علّم على أي نص قرآني واضغط زر التدقيق — يتحول تلقائيًا للرسم العثماني بالتشكيل الكامل مع اسم السورة ورقم الآية، مع ترجمة الآية إلى ١٤ لغة عالمية.</p>
+         <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">علّم على أي نص قرآني واضغط زر التدقيق — يتحول تلقائيًا للرسم العثماني بالتشكيل الكامل مع اسم السورة ورقم الآية، مع إمكانية ترجمته إلى ١٤ لغة عالمية.</p>
          <ul class="space-y-4">
           <li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">تشكيل كامل بالرسم العثماني</span></li>
           <li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">اسم السورة ورقم الآية تلقائيًا</span></li>
-          <li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">ترجمة الآيات إلى ١٤ لغة عالمية</span></li>
-           <li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">زر في شريط الأدوات — علّم واضغط</span></li>
+          <li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">ترجمة الآيات إلى ١٤ لغة (الإنجليزية، الفرنسية، التركية، الأردية...)</span></li>
+          <li class="flex items-center gap-4"><div class="w-6 h-6 rounded-full flex items-center justify-center" style="background: rgba(34, 197, 94, 0.2);"><span style="color: #22c55e; font-size: 14px;">✓</span></div><span class="text-base">زر في شريط الأدوات — علّم واضغط</span></li>
          </ul>
         </div>
         <div>
@@ -562,15 +562,13 @@
             <div class="text-sm font-bold mb-3" style="color: #06b6d4;">✓ النص القرآني المدقق</div>
             <p style="color: var(--text-color); font-size: 22px; font-family: 'Traditional Arabic', serif;">﴿إِنَّا أَنزَلْنَاهُ قُرْآنًا عَرَبِيًّا لَّعَلَّكُمْ تَعْقِلُونَ﴾</p>
             <p class="mt-2" style="color: var(--text-secondary); font-size: 14px;">[يوسف: آية ٢]</p>
-            <div class="mt-4 p-4 rounded-xl" style="background: rgba(6, 182, 212, 0.05); border: 1px solid rgba(6, 182, 212, 0.15);">
-             <div class="text-sm font-bold mb-3" style="color: #06b6d4;">🌍 الترجمة إلى ١٤ لغة</div>
-             <div class="space-y-2">
-              <div class="text-sm p-2 rounded-lg" style="background: rgba(6, 182, 212, 0.08);"><span style="color: #06b6d4; font-weight: 600;">🇬🇧 English:</span> <span style="color: var(--text-secondary);">Indeed, We have sent it down as an Arabic Quran that you might understand.</span></div>
-              <div class="text-sm p-2 rounded-lg" style="background: rgba(6, 182, 212, 0.08);"><span style="color: #06b6d4; font-weight: 600;">🇫🇷 Français:</span> <span style="color: var(--text-secondary);">Nous l'avons fait descendre, un Coran en arabe, afin que vous raisonniez.</span></div>
-              <div class="text-sm p-2 rounded-lg" style="background: rgba(6, 182, 212, 0.08);"><span style="color: #06b6d4; font-weight: 600;">🇹🇷 Türkçe:</span> <span style="color: var(--text-secondary);">Biz onu Arapça bir Kur'an olarak indirdik ki anlayasınız.</span></div>
-              <div class="text-xs mt-2" style="color: var(--text-secondary);">+ ١١ لغة أخرى: الأردو، الفارسية، الماليزية، الإندونيسية، الألمانية، الإسبانية، الروسية، الصينية، اليابانية، الكورية، الهندية</div>
+            <div class="mt-4 pt-3" style="border-top: 1px solid rgba(6, 182, 212, 0.2);">
+              <div class="flex items-center gap-2 mb-2">
+               <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: #06b6d4;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"/></svg>
+               <span class="text-xs font-bold" style="color: #06b6d4;">English Translation</span>
+              </div>
+              <p style="color: var(--text-secondary); font-size: 13px; font-style: italic; line-height: 1.7;">Indeed, We have sent it down as an Arabic Quran that you might understand.</p>
              </div>
-            </div>
            </div>
           </div>
          </div>