UX improvements: FAQ accordion, inline icons, contact form fields, single-col showcase

- Convert FAQ section to interactive accordion (details/summary)
- Add annual pricing heading for visibility
- Why-us icons aligned inline with text (flexbox start)
- Showcase screenshots in single column for full-width impact
- Add activity type + player count fields to contact form
- Add guidance text ("مش متأكد أي باقة تناسبك؟") to form
- Fix CTA wording: "نشوفك" → "نعرضلك"
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/contact.html

@@ -82,6 +82,28 @@
             <input type="text" id="academy" name="academy" required placeholder="مثال: أكاديمية النجوم الرياضية">
           </div>
 
+          <div class="form-group">
+            <label for="activity">نشاط الأكاديمية <span style="color: var(--brand-primary);">*</span></label>
+            <select id="activity" name="activity" required>
+              <option value="" disabled selected>اختر نوع النشاط</option>
+              <option value="football">كرة القدم</option>
+              <option value="swimming">السباحة</option>
+              <option value="martial-arts">الفنون القتالية</option>
+              <option value="gym">جيم / لياقة بدنية</option>
+              <option value="multi-sport">متعدد الأنشطة</option>
+              <option value="other">أخرى</option>
+            </select>
+          </div>
+
+          <div class="form-group">
+            <label for="players">متوسط عدد اللاعبين</label>
+            <input type="number" id="players" name="players" placeholder="مثال: 150" min="1">
+          </div>
+
+          <p style="font-size: var(--text-sm); color: var(--ink-secondary); line-height: 1.7; margin-bottom: var(--space-md);">
+            مش متأكد أي باقة تناسبك؟ احجز عرض تجريبي مجاني. نعرضلك بيانات مشابهة لأكاديميتك ونساعدك تختار الباقة الأنسب لحجمك.
+          </p>
+
           <button type="submit" class="btn btn--primary btn--large" style="width: 100%;">
             احجز العرض التجريبي
           </button>

public/css/home.css

@@ -159,11 +159,14 @@
 }
 
 .why-us__card {
-  padding: var(--space-xl);
+  padding: var(--space-lg) var(--space-xl);
   background: var(--bg-surface);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-sm);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
   transition: box-shadow var(--duration-normal) var(--ease-out),
               border-color var(--duration-normal) var(--ease-out),
               transform var(--duration-normal) var(--ease-out);
@@ -183,17 +186,17 @@
   color: var(--color-accent);
   display: grid;
   place-items: center;
-  margin-block-end: var(--space-md);
+  flex-shrink: 0;
 }
 
-.why-us__card h3 {
+.why-us__card-text h3 {
   font-size: var(--text-lg);
   font-weight: 700;
   color: var(--ink-primary);
-  margin-block-end: var(--space-xs);
+  margin-block-end: var(--space-2xs);
 }
 
-.why-us__card p {
+.why-us__card-text p {
   font-size: var(--text-sm);
   color: var(--ink-secondary);
   line-height: var(--leading-relaxed);
@@ -381,8 +384,10 @@
 
 .showcase__grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--space-md);
+  grid-template-columns: 1fr;
+  gap: var(--space-lg);
+  max-width: 900px;
+  margin-inline: auto;
 }
 
 .showcase__grid figure {
@@ -412,12 +417,6 @@
   border-top: 1px solid var(--border-subtle);
 }
 
-@media (max-width: 600px) {
-  .showcase__grid {
-    grid-template-columns: 1fr;
-  }
-}
-
 
 /* --- CTA --------------------------------------------------------- */
 

public/css/pages.css

@@ -1410,6 +1410,12 @@
 /* ─────────────────────────────────────────────
    FAQ ACCORDION
 ───────────────────────────────────────────── */
+.faq-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
 .faq-category {
   margin-bottom: var(--space-xl);
 }

public/index.html

@@ -107,39 +107,49 @@
             <div class="why-us__card-icon">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
             </div>
+            <div class="why-us__card-text">
               <h3>رؤية كاملة</h3>
               <p>اعرف ما يحدث في الأكاديمية لحظة بلحظة</p>
             </div>
+          </div>
           <div class="why-us__card">
             <div class="why-us__card-icon">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
             </div>
+            <div class="why-us__card-text">
               <h3>تحكم مالي</h3>
               <p>تابع التحصيلات والمصروفات والاشتراكات والمديونيات</p>
             </div>
+          </div>
           <div class="why-us__card">
             <div class="why-us__card-icon">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
             </div>
+            <div class="why-us__card-text">
               <h3>تجربة أفضل لولي الأمر</h3>
               <p>حضور، مدفوعات، جداول وإشعارات</p>
             </div>
+          </div>
           <div class="why-us__card">
             <div class="why-us__card-icon">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
             </div>
+            <div class="why-us__card-text">
               <h3>إدارة الموارد</h3>
               <p>ملاعب، حارات، منشآت وجداول بدون تعارض</p>
             </div>
+          </div>
           <div class="why-us__card">
             <div class="why-us__card-icon">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
             </div>
+            <div class="why-us__card-text">
               <h3>جاهز للنمو</h3>
               <p>إدارة أكثر من فرع من منصة واحدة</p>
             </div>
           </div>
         </div>
+      </div>
     </section>
 
     <!-- Before / After -->