youssefreda9 commited on
Commit
7f6b95b
·
1 Parent(s): 9406c0b

fix: features page layout + update Bayyinah color to #14919b

Browse files
Files changed (1) hide show
  1. src/index.html +11 -10
src/index.html CHANGED
@@ -300,7 +300,7 @@
300
  <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">حوّل أي لهجة عربية إلى لغة عربية فصحى بذكاء اصطناعي</p>
301
  </div><!-- Feature 8: Bayyinah -->
302
  <div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
303
- <div class="feature-icon mb-6" style="background: rgba(16, 185, 129, 0.15); color: #10b981;">
304
  <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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
305
  </div>
306
  <h3 class="text-xl font-bold mb-3">بَيِّنَة</h3>
@@ -432,7 +432,7 @@
432
  </ul>
433
  </div>
434
  </div><!-- Feature 4: Summarization -->
435
- <div class="grid lg:grid-cols-2 gap-16 items-center">
436
  <div class="text-right">
437
  <div class="feature-icon mb-6" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6; width: 64px; height: 64px; font-size: 32px;">
438
  <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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
@@ -471,6 +471,7 @@
471
  </div>
472
  </div>
473
  </div>
 
474
  <div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
475
  <div class="order-2 lg:order-1">
476
  <div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
@@ -553,7 +554,7 @@
553
  <!-- Feature 8: Bayyinah RAG -->
554
  <div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
555
  <div class="text-right">
556
- <div class="feature-icon mb-6" style="background: rgba(16, 185, 129, 0.15); color: #10b981; 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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
557
  <h2 class="text-4xl font-bold mb-6">بَيِّنَة</h2>
558
  <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">بوابتك للقرآن والتفسير والسنة والمصادر السردية الموثقة — اسأل أي سؤال في الدين الإسلامي واحصل على إجابة مدعومة بالمصادر.</p>
559
  <ul class="space-y-4">
@@ -561,21 +562,21 @@
561
  <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>
562
  <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>
563
  </ul>
564
- <a href="https://bayyinah-alpha.vercel.app/" target="_blank" rel="noopener noreferrer" class="inline-block mt-8 px-6 py-3 rounded-xl text-base font-bold text-white transition-all hover:scale-105" style="background: linear-gradient(135deg, #10b981, #059669);">جرّب بَيِّنَة الآن ←</a>
565
  </div>
566
  <div>
567
  <div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
568
  <div class="text-right" dir="rtl">
569
- <div class="p-4 rounded-xl mb-4" style="background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2);">
570
- <div class="flex items-center gap-2 mb-3"><span style="font-size: 18px;">🕌</span><span class="text-sm font-bold" style="color: #10b981;">بَيِّنَة</span></div>
571
  <p class="text-base mb-2" style="color: var(--text-color);">ما حكم صلاة الضحى؟</p>
572
  </div>
573
- <div class="p-4 rounded-xl" style="background: rgba(16, 185, 129, 0.05); border-right: 4px solid #10b981; line-height: 2;">
574
- <div class="text-sm font-bold mb-3" style="color: #10b981;">📖 الإجابة من المصادر</div>
575
  <p class="text-base mb-3" style="color: var(--text-color);">صلاة الضحى سنة مؤكدة، وأقلها ركعتان وأكثرها ثمان ركعات.</p>
576
  <div class="space-y-2 mt-3">
577
- <div class="text-xs p-2 rounded-lg" style="background: rgba(16, 185, 129, 0.1);"><span style="color: #10b981; font-weight: 600;">📜 الحديث:</span> <span style="color: var(--text-secondary);">«يصبح على كل سُلامى من أحدكم صدقة...» رواه مسلم</span></div>
578
- <div class="text-xs p-2 rounded-lg" style="background: rgba(16, 185, 129, 0.1);"><span style="color: #10b981; font-weight: 600;">📖 التفسير:</span> <span style="color: var(--text-secondary);">تفسير ابن كثير — سورة ص: آية ١٨</span></div>
579
  </div>
580
  </div>
581
  </div>
 
300
  <p class="text-sm leading-relaxed" style="color: var(--text-secondary); line-height: 1.8;">حوّل أي لهجة عربية إلى لغة عربية فصحى بذكاء اصطناعي</p>
301
  </div><!-- Feature 8: Bayyinah -->
302
  <div class="card-hover p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
303
+ <div class="feature-icon mb-6" style="background: rgba(20, 145, 155, 0.15); color: #14919b;">
304
  <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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
305
  </div>
306
  <h3 class="text-xl font-bold mb-3">بَيِّنَة</h3>
 
432
  </ul>
433
  </div>
434
  </div><!-- Feature 4: Summarization -->
435
+ <div class="grid lg:grid-cols-2 gap-16 items-center mb-32">
436
  <div class="text-right">
437
  <div class="feature-icon mb-6" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6; width: 64px; height: 64px; font-size: 32px;">
438
  <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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
 
471
  </div>
472
  </div>
473
  </div>
474
+ </div><!-- End Feature 4 grid -->
475
  <div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
476
  <div class="order-2 lg:order-1">
477
  <div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
 
554
  <!-- Feature 8: Bayyinah RAG -->
555
  <div class="grid lg:grid-cols-2 gap-16 items-center mt-32">
556
  <div class="text-right">
557
+ <div class="feature-icon mb-6" style="background: rgba(20, 145, 155, 0.15); color: #14919b; 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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
558
  <h2 class="text-4xl font-bold mb-6">بَيِّنَة</h2>
559
  <p class="text-lg mb-8 leading-relaxed" style="color: var(--text-secondary); line-height: 2;">بوابتك للقرآن والتفسير والسنة والمصادر السردية الموثقة — اسأل أي سؤال في الدين الإسلامي واحصل على إجابة مدعومة بالمصادر.</p>
560
  <ul class="space-y-4">
 
562
  <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>
563
  <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>
564
  </ul>
565
+ <a href="https://bayyinah-alpha.vercel.app/" target="_blank" rel="noopener noreferrer" class="inline-block mt-8 px-6 py-3 rounded-xl text-base font-bold text-white transition-all hover:scale-105" style="background: linear-gradient(135deg, #14919b, #0e7c86);">جرّب بَيِّنَة الآن ←</a>
566
  </div>
567
  <div>
568
  <div class="p-8 rounded-3xl" style="background: var(--surface-color); border: 1px solid rgba(255, 255, 255, 0.08);">
569
  <div class="text-right" dir="rtl">
570
+ <div class="p-4 rounded-xl mb-4" style="background: rgba(20, 145, 155, 0.08); border: 1px solid rgba(20, 145, 155, 0.2);">
571
+ <div class="flex items-center gap-2 mb-3"><span style="font-size: 18px;">🕌</span><span class="text-sm font-bold" style="color: #14919b;">بَيِّنَة</span></div>
572
  <p class="text-base mb-2" style="color: var(--text-color);">ما حكم صلاة الضحى؟</p>
573
  </div>
574
+ <div class="p-4 rounded-xl" style="background: rgba(20, 145, 155, 0.05); border-right: 4px solid #14919b; line-height: 2;">
575
+ <div class="text-sm font-bold mb-3" style="color: #14919b;">📖 الإجابة من المصادر</div>
576
  <p class="text-base mb-3" style="color: var(--text-color);">صلاة الضحى سنة مؤكدة، وأقلها ركعتان وأكثرها ثمان ركعات.</p>
577
  <div class="space-y-2 mt-3">
578
+ <div class="text-xs p-2 rounded-lg" style="background: rgba(20, 145, 155, 0.1);"><span style="color: #14919b; font-weight: 600;">📜 الحديث:</span> <span style="color: var(--text-secondary);">«يصبح على كل سُلامى من أحدكم صدقة...» رواه مسلم</span></div>
579
+ <div class="text-xs p-2 rounded-lg" style="background: rgba(20, 145, 155, 0.1);"><span style="color: #14919b; font-weight: 600;">📖 التفسير:</span> <span style="color: var(--text-secondary);">تفسير ابن كثير — سورة ص: آية ١٨</span></div>
580
  </div>
581
  </div>
582
  </div>