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,36 +107,46 @@
             <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>
-            <h3>رؤية كاملة</h3>
-            <p>اعرف ما يحدث في الأكاديمية لحظة بلحظة</p>
+            <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>
-            <h3>تحكم مالي</h3>
-            <p>تابع التحصيلات والمصروفات والاشتراكات والمديونيات</p>
+            <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>
-            <h3>تجربة أفضل لولي الأمر</h3>
-            <p>حضور، مدفوعات، جداول وإشعارات</p>
+            <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>
-            <h3>إدارة الموارد</h3>
-            <p>ملاعب، حارات، منشآت وجداول بدون تعارض</p>
+            <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>
-            <h3>جاهز للنمو</h3>
-            <p>إدارة أكثر من فرع من منصة واحدة</p>
+            <div class="why-us__card-text">
+              <h3>جاهز للنمو</h3>
+              <p>إدارة أكثر من فرع من منصة واحدة</p>
+            </div>
           </div>
         </div>
       </div>

public/pricing.html

@@ -617,8 +617,9 @@
 
       </div>
 
-      <!-- Website note -->
+      <!-- Annual Pricing -->
       <div class="pricing-website-note" data-reveal="100">
+        <div style="font-size: var(--text-xl); font-weight: 800; color: var(--ink-primary); margin-bottom: var(--space-xs);">مزايا الاشتراك السنوي</div>
         <div class="pricing-website-note__text">موقع إلكتروني لأكاديميتك مجاناً + دومين خاص مع الاشتراك السنوي</div>
         <div class="pricing-website-note__sub">النظام ينشئ موقع احترافي لأكاديميتك تلقائياً عند التفعيل</div>
 
@@ -862,63 +863,63 @@
         <h2 class="section-header__title">أسئلة شائعة</h2>
       </div>
 
-      <div style="display: flex; flex-direction: column; gap: var(--space-md);" data-reveal="200">
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كيف يمكنني نقل بيانات الأكاديمية الحالية إلى النظام؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">يمكنكم تزويدنا بالبيانات الحالية بأي صيغة إلكترونية متاحة، مثل Excel أو CSV، وسيقوم فريقنا بمراجعتها وتجهيزها ورفعها إلى النظام. نحن نحرص على تقديم الدعم الكامل خلال مرحلة الانتقال.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كيف يتم تقديم الدعم الفني؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">يوفر فريق الدعم الفني المساندة المستمرة، مع إعطاء الأولوية للمشكلات التي تؤثر بشكل مباشر على العمليات الأساسية للأكاديمية.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كم يستغرق تجهيز وتشغيل حساب الأكاديمية؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">عند توفر البيانات بصورة إلكترونية ومنظمة، يمكن تجهيز الحساب خلال ساعة. وتختلف المدة بحسب حجم البيانات ومدى جاهزيتها.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل أحصل على تحديثات النظام الجديدة؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. يتم تطوير النظام بصورة مستمرة، وعند إطلاق تحديثات عامة يتم إتاحتها للمشتركين وفقًا لشروط الباقة.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكنني طلب تطوير أو تخصيص خاص للنظام؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. المشتركون في الباقات السنوية مثل Professional يمكنهم طلب تحسينات ضمن نطاق الوظائف الأساسية. التخصيصات الخاصة يتم تقييمها فنيًا وتجاريًا بشكل مستقل.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يوجد حد أقصى لعدد اللاعبين؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">لا نضع حدًا مصطنعًا لعدد اللاعبين. يتم تحديد حدود الاستخدام وفقًا للبنية التحتية والباقة المتعاقد عليها. النظام ينمو مع نمو الأكاديمية.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كم عدد الفروع التي يمكنني إدارتها؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">يمكن للنظام دعم إدارة عدة فروع من خلال منصة واحدة، مع متابعة البيانات والعمليات وفق الصلاحيات المعتمدة.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل بيانات الأكاديمية ملك لنا؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. بيانات الأكاديمية تظل تحت ملكيتها وفقًا للعقد. يمكن تصدير البيانات بصيغ متعددة في أي وقت.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكن تحديد صلاحيات مختلفة لكل مستخدم؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. يمكن إنشاء مستخدمين متعددين وتحديد الصلاحيات لكل دور: مدير الأكاديمية، مدير الفرع، المحاسب، المدرب، موظف الاستقبال.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يتم تدريب فريق الأكاديمية على استخدام النظام؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. نساعد فريق الأكاديمية خلال مرحلة التشغيل على فهم النظام واستخدام الوظائف الأساسية مع تقديم الدعم خلال فترة الانتقال.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ماذا يحدث إذا أردنا التوسع مستقبلًا؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">النظام مصمم ليواكب نمو الأكاديمية. يمكنكم إضافة لاعبين وفروع وعمليات جديدة دون الحاجة لتغيير النظام.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">هل يمكن ربط النظام بأجهزة أخرى؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعم. النظام قابل للتكامل مع أجهزة البصمة والبوابات الإلكترونية وفق الإمكانيات المتاحة.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">كيف يتم تأمين بيانات الأكاديمية؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">نعتمد على إدارة صلاحيات الوصول، حماية حسابات المستخدمين، تشفير البيانات، النسخ الاحتياطي اليومي، ومراقبة العمليات. يتم تطوير إجراءات الحماية بصورة مستمرة.</p>
-        </div>
-        <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg);">
-          <h4 style="margin-bottom: var(--space-xs); color: var(--ink-primary);">ماذا يحدث إذا قررنا إيقاف الاشتراك؟</h4>
-          <p style="color: var(--ink-secondary); font-size: var(--text-sm); line-height: 1.8;">تتم إجراءات إنهاء الاشتراك وفق الشروط المتفق عليها. بياناتكم تبقى متاحة للتصدير. العلاقة واضحة وشفافة منذ البداية.</p>
-        </div>
+      <div class="faq-accordion" data-reveal="200">
+        <details class="faq-item">
+          <summary>كيف يمكنني نقل بيانات الأكاديمية الحالية إلى النظام؟</summary>
+          <p>يمكنكم تزويدنا بالبيانات الحالية بأي صيغة إلكترونية متاحة، مثل Excel أو CSV، وسيقوم فريقنا بمراجعتها وتجهيزها ورفعها إلى النظام. نحن نحرص على تقديم الدعم الكامل خلال مرحلة الانتقال.</p>
+        </details>
+        <details class="faq-item">
+          <summary>كيف يتم تقديم الدعم الفني؟</summary>
+          <p>يوفر فريق الدعم الفني المساندة المستمرة، مع إعطاء الأولوية للمشكلات التي تؤثر بشكل مباشر على العمليات الأساسية للأكاديمية.</p>
+        </details>
+        <details class="faq-item">
+          <summary>كم يستغرق تجهيز وتشغيل حساب الأكاديمية؟</summary>
+          <p>عند توفر البيانات بصورة إلكترونية ومنظمة، يمكن تجهيز الحساب خلال ساعة. وتختلف المدة بحسب حجم البيانات ومدى جاهزيتها.</p>
+        </details>
+        <details class="faq-item">
+          <summary>هل أحصل على تحديثات النظام الجديدة؟</summary>
+          <p>نعم. يتم تطوير النظام بصورة مستمرة، وعند إطلاق تحديثات عامة يتم إتاحتها للمشتركين وفقًا لشروط الباقة.</p>
+        </details>
+        <details class="faq-item">
+          <summary>هل يمكنني طلب تطوير أو تخصيص خاص للنظام؟</summary>
+          <p>نعم. المشتركون في الباقات السنوية مثل Professional يمكنهم طلب تحسينات ضمن نطاق الوظائف الأساسية. التخصيصات الخاصة يتم تقييمها فنيًا وتجاريًا بشكل مستقل.</p>
+        </details>
+        <details class="faq-item">
+          <summary>هل يوجد حد أقصى لعدد اللاعبين؟</summary>
+          <p>لا نضع حدًا مصطنعًا لعدد اللاعبين. يتم تحديد حدود الاستخدام وفقًا للبنية التحتية والباقة المتعاقد عليها. النظام ينمو مع نمو الأكاديمية.</p>
+        </details>
+        <details class="faq-item">
+          <summary>كم عدد الفروع التي يمكنني إدارتها؟</summary>
+          <p>يمكن للنظام دعم إدارة عدة فروع من خلال منصة واحدة، مع متابعة البيانات والعمليات وفق الصلاحيات المعتمدة.</p>
+        </details>
+        <details class="faq-item">
+          <summary>هل بيانات الأكاديمية ملك لنا؟</summary>
+          <p>نعم. بيانات الأكاديمية تظل تحت ملكيتها وفقًا للعقد. يمكن تصدير البيانات بصيغ متعددة في أي وقت.</p>
+        </details>
+        <details class="faq-item">
+          <summary>هل يمكن تحديد صلاحيات مختلفة لكل مستخدم؟</summary>
+          <p>نعم. يمكن إنشاء مستخدمين متعددين وتحديد الصلاحيات لكل دور: مدير الأكاديمية، مدير الفرع، المحاسب، المدرب، موظف الاستقبال.</p>
+        </details>
+        <details class="faq-item">
+          <summary>هل يتم تدريب فريق الأكاديمية على استخدام النظام؟</summary>
+          <p>نعم. نساعد فريق الأكاديمية خلال مرحلة التشغيل على فهم النظام واستخدام الوظائف الأساسية مع تقديم الدعم خلال فترة الانتقال.</p>
+        </details>
+        <details class="faq-item">
+          <summary>ماذا يحدث إذا أردنا التوسع مستقبلًا؟</summary>
+          <p>النظام مصمم ليواكب نمو الأكاديمية. يمكنكم إضافة لاعبين وفروع وعمليات جديدة دون الحاجة لتغيير النظام.</p>
+        </details>
+        <details class="faq-item">
+          <summary>هل يمكن ربط النظام بأجهزة أخرى؟</summary>
+          <p>نعم. النظام قابل للتكامل مع أجهزة البصمة والبوابات الإلكترونية وفق الإمكانيات المتاحة.</p>
+        </details>
+        <details class="faq-item">
+          <summary>كيف يتم تأمين بيانات الأكاديمية؟</summary>
+          <p>نعتمد على إدارة صلاحيات الوصول، حماية حسابات المستخدمين، تشفير البيانات، النسخ الاحتياطي اليومي، ومراقبة العمليات. يتم تطوير إجراءات الحماية بصورة مستمرة.</p>
+        </details>
+        <details class="faq-item">
+          <summary>ماذا يحدث إذا قررنا إيقاف الاشتراك؟</summary>
+          <p>تتم إجراءات إنهاء الاشتراك وفق الشروط المتفق عليها. بياناتكم تبقى متاحة للتصدير. العلاقة واضحة وشفافة منذ البداية.</p>
+        </details>
       </div>
     </div>
   </section>
@@ -927,7 +928,7 @@
   <section class="section">
     <div class="container" style="text-align: center; max-width: 650px;">
       <h2 style="margin-bottom: var(--space-md); font-size: var(--text-2xl);" data-reveal>مش متأكد أي باقة تناسبك؟</h2>
-      <p style="color: var(--ink-secondary); margin-bottom: var(--space-xl); font-size: var(--text-lg); line-height: 1.8;" data-reveal="100">احجز عرض تجريبي مجاني. نشوفك بيانات مشابهة لأكاديميتك ونساعدك تختار الباقة الأنسب لحجمك.</p>
+      <p style="color: var(--ink-secondary); margin-bottom: var(--space-xl); font-size: var(--text-lg); line-height: 1.8;" data-reveal="100">احجز عرض تجريبي مجاني. نعرضلك بيانات مشابهة لأكاديميتك ونساعدك تختار الباقة الأنسب لحجمك.</p>
       <div style="display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap;" data-reveal="200">
         <a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي</a>
         <a href="https://wa.me/201000000000" target="_blank" class="btn btn--secondary btn--large" style="display: inline-flex; align-items: center; gap: 8px;">