# خطة تعديلات الموقع التعريفي (Landing Revamp Plan) > **الغرض:** خطة تنفيذية لمجموعة تعديلات على الموقع التعريفي (`موقع تعريفي`) بناءً على > ملاحظات العميل. كل بند يوضّح: الوضع الحالي → التغيير المطلوب → الملفات المتأثرة → ملاحظات. > راجع [`landing-site.md`](./landing-site.md) لمعمارية الموقع ومصدر المحتوى قبل التنفيذ. > **مبدأ عام:** الموقع كله مبني على CSS متغيّرات (`--safe-*`) + partials Blade + helper > `landing_content()`. كل تغيير «شكلي» يكون في `public/landing/css/landing.css`، وكل تغيير > «بنية/عناصر» في `resources/views/landing/partials/*`، وكل تغيير «سلوك/أنميشن JS» في > `public/landing/js/landing.js`، وأي نص جديد في `lang/{ar,en}/landing.php` (+ مفتاح في > `LandingContentService`). **لا نكتب نصوصًا مباشرة في Blade.** --- ## 0) تقليل عرض الـ container (عام) - **الوضع الحالي:** `.container { width: min(var(--container), 100%); }` في [`landing.css:68`](../../public/landing/css/landing.css). قيمة `--container` معرّفة في `:root`. - **التغيير:** تقليل `--container` (مثلاً من القيمة الحالية إلى `~1120px`) لتضييق المحتوى وتجميعه. التعديل في مكان واحد (`:root`) ينعكس على كل الأقسام. - **ملفات:** `public/landing/css/landing.css` (متغيّر `--container` في `:root` فقط). - **ملاحظة:** بعد التضييق راجع الهيرو و«كيف نعمل» لأن الأعمدة قد تحتاج تعديل `gap`/`grid`. --- ## 1) Hero section ### 1.أ — الموبايل يلف حول نفسه لفة كاملة كل 40 ثانية - **الوضع الحالي:** الموبايل في `phone-stage--podium` ويتحرك بأنميشن `floatTiltPodium` ([`landing.css:1152-1177`](../../public/landing/css/landing.css)) — حركة تمايل بسيطة فقط، لا دوران كامل. - **التغيير:** إضافة دوران `rotateY(360deg)` على عنصر الموبايل بدورة `40s linear infinite`. يُفضّل فصل الدوران عن التمايل في طبقة wrapper مستقلة حتى لا يتعارض مع `floatTilt` ومع الـ `data-tilt` (الماوس) القائم في JS. - **ملفات:** `public/landing/css/landing.css` (keyframe جديد `phoneSpin` + تطبيقه على `.app-mock--hero` أو wrapper)، واحترام `prefers-reduced-motion` (إيقاف الدوران). - **ملاحظة:** الدوران الكامل سيُظهر «ظهر» الموبايل — تأكد أن المظهر مقبول أثناء نصف اللفة، أو اجعلها لفة محور رأسي مع `backface-visibility` مضبوط. ### 1.ب — دخول الموبايل من الأعلى لينزل على القاعدة عند فتح الصفحة - **الوضع الحالي:** الهيرو عليه `hero-entrance` فقط (دخول عام). لا يوجد سقوط للموبايل. - **التغيير:** أنميشن دخول لمرة واحدة (`from translateY(-120%) opacity:0` → `to` موضعه على القاعدة `phone-podium`) مع `ease` ارتداد بسيط عند الهبوط. يعمل مرة عند التحميل (`animation` وليس loop)، ثم يبدأ أنميشن الدوران/التمايل بعده. - **ملفات:** `public/landing/css/landing.css` (keyframe `phoneDrop` + تنسيق التتابع مع 1.أ)، واحترام `prefers-reduced-motion`. - **ملاحظة:** تنسيق التوقيت: السقوط أولًا (≈1s)، ثم بدء الدوران بعد انتهائه (`animation-delay`). ### 1.ج — إضافة أيقونتي تحميل التطبيق (Android + Google Play) في الهيرو - **الوضع الحالي:** أزرار الهيرو في [`hero.blade.php:14-17`](../../resources/views/landing/partials/hero.blade.php) هي `cta_primary` (تشير لـ `#download`) و `cta_secondary`. أيقونات المتجرين موجودة حاليًا فقط داخل قسم `download` ([`download.blade.php:8-31`](../../resources/views/landing/partials/download.blade.php)). - **التغيير:** إضافة بلوك متجرين (App Store + Google Play) في `hero__actions`، بإعادة استخدام نفس مكوّن `btn-store` والـ SVG والروابط من بيانات `download` (`app_store_url` / `google_play_url`). بما أننا سنحذف قسم download (بند 8)، تصبح هذه هي نقطة التحميل الأساسية في الهيرو. - **ملفات:** `resources/views/landing/partials/hero.blade.php` (إضافة الأزرار)، `public/landing/css/landing.css` (تنسيق `btn-store` داخل الهيرو إن لزم). - **ملاحظة:** الروابط والنصوص موجودة مسبقًا في `landing_content()['download']` — نعيد استخدامها بلا تكرار. حدّث `hero_cta_*` أو استبدلها بأزرار المتجرين حسب التصميم النهائي. --- ## 2) Navbar — روابط الصفحات - **الوضع الحالي:** الـ nav فيه 3 روابط فقط (about / how / download) في [`header.blade.php:10-14`](../../resources/views/landing/partials/header.blade.php) و نسخة الموبايل [`:40-43`](../../resources/views/landing/partials/header.blade.php). الروابط مأخوذة من `nav.*` في `LandingContentService` ([`:41-46`](../../app/Services/LandingContentService.php)). - **التغيير:** إضافة روابط: **الشروط والأحكام** (`route('landing.terms')`)، **الخصوصية** (`route('landing.privacy')`)، **الأسئلة المتكررة** (`#faq`)، **كيف نعمل** (`#how`). - terms/privacy لهما routes فعلية ([`web.php:12-19`](../../routes/web.php)). - faq/how أقسام في نفس الصفحة (anchors `#faq` / `#how`). - **ملفات:** - `resources/views/landing/partials/header.blade.php` (الديسكتوب + الموبايل). - `app/Services/LandingContentService.php` — إضافة مفاتيح `nav.terms` / `nav.privacy` / `nav.faq` (`nav.how` موجود). - `lang/ar/landing.php` + `lang/en/landing.php` — `nav_terms` / `nav_privacy` / `nav_faq`. - **ملاحظة:** عند الدخول من صفحة قانونية (`$home=false`) دالة `$hash()` تحوّل anchors إلى `route('landing.index').'#id'` تلقائيًا — يعمل من أي صفحة. راجع تحديث `sectionIds` في JS (بند 8). --- ## 3) Statistics bar — أرفع وأطول - **الوضع الحالي:** `stats__card` ([`landing.css:1498`](../../public/landing/css/landing.css)) داخل قسم `stats` ([`stats.blade.php`](../../resources/views/landing/partials/stats.blade.php)). - **التغيير:** رفع الكرت للأعلى (overlap على نهاية الهيرو عبر `margin-block-start` سالب أو `transform: translateY(-...)`) وزيادة الارتفاع (`padding-block` أكبر للكرت والـ `.stat`). - **ملفات:** `public/landing/css/landing.css` فقط (`.stats`, `.stats__card`, `.stat`). - **ملاحظة:** مع رفع الكرت احذر التداخل مع شيبس الهيرو؛ اضبط `z-index` و`margin` للقسم التالي. --- ## 4) Success partners — نقلها أسفل الـ FAQ + إصلاح السلايدر ### 4.أ — نقل القسم - **الوضع الحالي:** ترتيب الأقسام في [`index.blade.php:11-17`](../../resources/views/landing/index.blade.php): hero → stats → **partners** → about → how → faq → download. - **التغيير:** نقل `@include('landing.partials.partners')` ليصبح **بعد** `faq` (وقبل/داخل الفوتر بعد دمج download). الترتيب الجديد: hero → stats → about → how → faq → **partners** → footer. - **ملفات:** `resources/views/landing/index.blade.php` (إعادة ترتيب سطر الـ include فقط). ### 4.ب — إصلاح السلايدر (لا يكمل اللفة، يرجع من النص) - **الوضع الحالي:** `partners__track` يتحرك `partnersMarquee 32s linear infinite` ([`landing.css:1932-1937`](../../public/landing/css/landing.css)) والمسار مُكرَّر مرتين في Blade ([`partners.blade.php:12`](../../resources/views/landing/partials/partners.blade.php)). المشكلة الكلاسيكية: الـ keyframe يترجم بنسبة `-100%` بينما المحتوى مكرر مرتين، فيقفز عند المنتصف. - **التغيير:** ضبط `@keyframes partnersMarquee` ليكون `to { transform: translateX(-50%) }` (لأن المحتوى نسختان: تحريك بمقدار نصف العرض = لفة سلسة)، أو ضمان أن النسخة المكررة كافية لملء الشاشة. اختبر باتجاهي RTL/LTR (التحريك يعتمد الاتجاه). - **ملفات:** `public/landing/css/landing.css` (تعريف `@keyframes partnersMarquee`)، واحترام `prefers-reduced-motion` (موجود: `animation: none`). --- ## 5) About section — تنزيل الصورة لتقابل الكروت - **الوضع الحالي:** `about__grid` عمودان: عمود (eyebrow+title+lead+features) وعمود `about__visual` (الرسمة) ([`about.blade.php`](../../resources/views/landing/partials/about.blade.php), [`landing.css:549-629`](../../public/landing/css/landing.css)). الرسمة محاذاة للأعلى. - **التغيير:** إنزال `about__visual` لأسفل لتحاذي بطاقات `about__features` (مثلاً `align-self: end` أو `margin-block-start` / `align-items` على الـ grid، أو `justify-content/align-self: center` يميل للأسفل). - **ملفات:** `public/landing/css/landing.css` (`.about__grid` / `.about__visual`). - **ملاحظة:** راجع breakpoint الموبايل ([`landing.css:614-628`](../../public/landing/css/landing.css)) حتى لا يختل الترتيب عند انهيار العمودين. --- ## 6) How it works — إصلاح كسر التصميم عند إضافة كرت - **الوضع الحالي:** `how__steps` شبكة `grid` ([`landing.css:630`](../../public/landing/css/landing.css))، والأسهم عناصر `how-arrow` منفصلة تُحقن بين الخطوات ([`how-it-works.blade.php:15-22`](../../resources/views/landing/partials/how-it-works.blade.php)). المشاكل المبلّغ عنها عند زيادة كرت: 1. التصميم «يبوظ» — الشبكة غالبًا بأعمدة ثابتة لا تتكيّف مع عدد العناصر. 2. رقم الكرت (`how-step__badge`) ليس في المنتصف. 3. الأسهم معكوسة الاتجاه/شكلها غير مرتب (تعامل RTL/LTR في [`landing.css:763-829`](../../public/landing/css/landing.css)). - **التغيير:** - جعل الشبكة متكيّفة: `grid-template-columns: repeat(auto-fit, minmax(...))` أو حساب الأعمدة ديناميكيًا، بحيث تنتظم مع أي عدد steps. - توسيط `how-step__badge` (مراجعة `position`/`inset`/`margin` للرقم). - مراجعة منطق الأسهم: إمّا الاستغناء عن عناصر `how-arrow` المنفصلة واستبدالها بـ connector عبر `::before/::after` على الخطوة (أسهل للتكيّف)، أو إصلاح اتجاه `rotate` للسهم في RTL/LTR بدقّة. الأنظف: connector تلقائي لا يعتمد على عناصر مُقحمة. - **ملفات:** `public/landing/css/landing.css` (`.how__steps`, `.how-step`, `.how-step__badge`, `.how-arrow`, وقواعد `[dir]`)، واحتمال تبسيط [`how-it-works.blade.php`](../../resources/views/landing/partials/how-it-works.blade.php) بإزالة عناصر الأسهم المُقحمة. - **ملاحظة:** اختبر بعدد steps = 3 و4 و5 للتأكد من المرونة (المصدر `repeatable('steps')`). --- ## 7) FAQ — دمج في كرت واحد + فورم تواصل + تحسين الشكل ### 7.أ — دمج الأسئلة في كرت واحد وتحسين الشكل - **الوضع الحالي:** كل سؤال `details.faq__item` منفصل داخل `faq__list` ([`faq.blade.php:7-19`](../../resources/views/landing/partials/faq.blade.php)). - **التغيير:** لفّ القائمة في كرت واحد (حاوية بخلفية `surface` + حدود + ظل) والأسئلة كصفوف accordion بفواصل بينها، وتحسين المظهر (padding، chevron، حالة `open`). - **ملفات:** `resources/views/landing/partials/faq.blade.php` (بنية الكرت)، `public/landing/css/landing.css` (`.faq`, `.faq__list`, `.faq__item`). ### 7.ب — فورم رسالة تواصل في نفس السكشن ⚠️ يحتاج باك-إند - **الوضع الحالي:** لا يوجد فورم تواصل في الموقع التعريفي إطلاقًا (لا route ولا controller ولا جدول). المشروع فيه نظام «الشكاوى/Complaints» يمكن الاستفادة من بنيته. - **التغيير المقترح (واجهة):** إضافة فورم (الاسم/البريد أو الجوال/الرسالة) بجانب كرت الـ FAQ في نفس السكشن (تخطيط عمودين: FAQ + Form). - **التغيير المقترح (باك-إند) — قرار مطلوب من المطوّر:** - **route POST** عام (مثلاً `contact.store`) تحت `site.locale` في [`web.php`](../../routes/web.php). - **Form Request** للتحقق (`app/Http/Requests/...`) — لا `validate()` inline (قاعدة CLAUDE.md). - **Service** لمعالجة الإرسال (`app/Services/...`): إمّا (1) تخزين في جدول جديد `contact_messages`، أو (2) إعادة استخدام موديل الشكاوى الموجود، أو (3) إرسال إيميل فقط (Mailable) دون تخزين. **هذا قرار يحتاج موافقة قبل التنفيذ.** - حماية: `throttle` + `honeypot`/captcha بسيط ضد السبام. - رسائل النجاح/الفشل في `lang/{ar,en}/api|landing`. - **ملفات:** `faq.blade.php` (الفورم) + route + Request + Service (+ Migration/Model إن اخترنا التخزين) + lang. - **ملاحظة:** إن اخترنا التخزين، يمرّ تعريف الجدول عبر **بوابة مراجعة الـ schema** (`database/schema/.json` ثم موافقة المطوّر) حسب CLAUDE.md قبل أي توليد. --- ## 8) Download app — حذف القسم ودمجه مع الفوتر - **الوضع الحالي:** - قسم `download` مستقل ([`download.blade.php`](../../resources/views/landing/partials/download.blade.php)) مُضمَّن في [`index.blade.php:17`](../../resources/views/landing/index.blade.php). - الفوتر ([`footer.blade.php`](../../resources/views/landing/partials/footer.blade.php)) فيه بالفعل عمود CTA يشير لـ `#download`. - anchors `#download` مستخدمة في: header (×2)، footer CTA، hero `cta_primary`. - JS `sectionIds = ['about', 'how', 'download']` ([`landing.js:104`](../../public/landing/js/landing.js)) لتفعيل الـ nav النشط. - **التغيير:** 1. حذف `@include('landing.partials.download')` من `index.blade.php` (وحذف/أرشفة الـ partial). 2. نقل أزرار المتجرين (`btn-store`) إلى عمود التحميل في الفوتر بدل CTA الحالي (وقد تكون مكررة في الهيرو من بند 1.ج — مقبول). 3. تنظيف كل مراجع `#download`: - header: استبدال رابط/زر `#download` بزر متجر أو توجيهه للهيرو/الفوتر. - hero `cta_primary`: لم يعد يشير لقسم محذوف. - footer CTA: يصبح أزرار المتجرين. 4. تحديث JS: إزالة `'download'` من `sectionIds` (وإلا observer يراقب عنصرًا غير موجود — غير ضار لكن غير نظيف)؛ وإضافة `'faq'`/`'partners'` إن أردنا تفعيل الـ nav لها. - **ملفات:** `resources/views/landing/index.blade.php`، `resources/views/landing/partials/footer.blade.php`، `resources/views/landing/partials/header.blade.php`، `resources/views/landing/partials/hero.blade.php`، `public/landing/js/landing.js`، وحذف `resources/views/landing/partials/download.blade.php`، + تنظيف CSS الخاص بـ `.download*` في `landing.css`. - **ملاحظة:** بيانات `download.*` في `LandingContentService` تبقى (الأزرار في الهيرو/الفوتر تقرأ منها) — لا نحذف المفاتيح، فقط القسم البصري. --- ## ملخص الملفات المتأثرة | الملف | البنود | |------|--------| | `public/landing/css/landing.css` | 0, 1أ, 1ب, 1ج, 3, 4ب, 5, 6, 7أ, 8 | | `resources/views/landing/index.blade.php` | 4أ, 8 | | `resources/views/landing/partials/hero.blade.php` | 1ج, 8 | | `resources/views/landing/partials/header.blade.php` | 2, 8 | | `resources/views/landing/partials/footer.blade.php` | 8 | | `resources/views/landing/partials/faq.blade.php` | 7أ, 7ب | | `resources/views/landing/partials/how-it-works.blade.php` | 6 | | `resources/views/landing/partials/download.blade.php` | 8 (حذف) | | `public/landing/js/landing.js` | 1أ/1ب (reduced-motion), 8 | | `app/Services/LandingContentService.php` | 2 (مفاتيح nav) | | `lang/{ar,en}/landing.php` | 2, 7 | | `routes/web.php` + Request + Service (+ DB) | 7ب (فورم التواصل) | ## نقاط تحتاج قرار قبل التنفيذ 1. **فورم التواصل (7ب):** التخزين في جدول جديد، أم إعادة استخدام الشكاوى، أم إيميل فقط؟ (لو جدول جديد → بوابة مراجعة الـ schema). 2. **دوران الموبايل (1أ):** لفة محور رأسي كاملة (يظهر الظهر) أم تأرجح/نصف لفة فقط؟ 3. **قيمة `--container`** المستهدفة بعد التضييق. ## حالة التنفيذ (تم — 2026-06-30) نُفِّذت كل البنود الواجهية (frontend). تم التحقق برندرة `landing.index` في اللغتين بنجاح (AR ≈ 35.8KB، EN ≈ 34.3KB) مع مشاركة `ViewErrorBag` فارغ كما يفعل middleware الـ `web`. - [x] **0** تقليل `--container` (1180 → 1080px). - [x] **1أ** دوران الموبايل لفة كاملة كل 40s (`phoneSpin` على `.app-mock--hero`). - [x] **1ب** سقوط الموبايل من الأعلى على القاعدة عند التحميل (`phoneDropPodium` + LTR variant). - [x] **1ج** أيقونتا المتجرين في الهيرو (`btn-store--solid`). - [x] **2** روابط navbar (faq/terms/privacy + how) ديسكتوب وموبايل + مفاتيح `nav_*` في الخدمة واللغتين. - [x] **3** رفع الإحصائيات (overlap بـ margin سالب + `padding-block-end` للهيرو) وتطويل `.stat`. - [x] **4أ** نقل الشركاء أسفل الـ FAQ. **4ب** إصلاح الماركيه (مسافات على العناصر بدل `gap` → `-50%` سلس). - [x] **5** إنزال صورة الـ about (`align-self: end` + `translateY(56px)`). - [x] **6** «كيف نعمل» متكيّف (`auto-fit minmax`) + توسيط الرقم (`left:50%`) + إزالة عناصر الأسهم المكسورة. - [x] **7أ** دمج الـ FAQ في كرت واحد + تحسين الشكل + تخطيط عمودين مع الفورم. - [x] **7ب (واجهة فقط)** فورم التواصل في سكشن الـ FAQ (name/email/message + honeypot + `Route::has` آمن + مفاتيح `contact_*`). - [x] **8** حذف قسم download ودمجه في الفوتر (أزرار المتجرين في `#get-app`) + تنظيف header/footer/JS/CSS وحذف الـ partial. ## جولة تعديلات ثانية (تم — 2026-06-30) بناءً على ملاحظات إضافية: - [x] **اسكرول فاضي:** `overflow-x: clip` على `body` + `overflow: clip` على `.hero` (يمنع سكرول أفقي من دوران الموبايل/الميلان) + تخفيف تباعد الهيرو/الإحصائيات. - [x] **الـ container:** توسعة `--container` (1080 → **1320px**) وتصغير الحشو الجانبي (`padding-inline: clamp(14px, 2vw, 22px)`) → فراغ جانبي صغير. - [x] **شريط الإحصائيات:** تقليل الـ height (حشو `.stat` أصغر) وزيادة الـ width (`min(1180px,100%)`) ورفع أخف (`margin-block-start: clamp(-56px,-4vw,-32px)`). - [x] **كيف نعمل:** صف منتظم بـ flexbox (كل كرت `flex: 1 1 0`) + **أسهم بين الكاردات** أعيدت باتجاه صحيح (RTL يسار / LTR يمين، وللموبايل تتحول لأسهم لأسفل). منتظم لأي عدد (3/4/5). - [x] **الأسئلة الشائعة + الفورم:** دُمجا في **بانل واحد** (`.faq__panel`) — الأسئلة في عمود والفورم في عمود بخلفية مميزة وفاصل بينهما + تحسين الشكل. ## باك-إند فورم التواصل (تم — AJAX) تم بناء المسار الكامل (الجدول والموديل والأدمن كانوا موجودين مسبقًا): - **migration إضافية** [`2026_06_30_000010_make_contactable_nullable_on_contact_messages_table.php`](../../database/migrations/2026_06_30_000010_make_contactable_nullable_on_contact_messages_table.php) — جعل `contactable_type/id` تقبل `null` (فورم عام بلا موديل مرتبط). **تم تشغيلها** بنجاح. - **Form Request** [`StoreContactRequest`](../../app/Http/Requests/Landing/StoreContactRequest.php) — تحقق name/email/message (+phone/subject اختياري). - **Service** [`Landing\ContactMessageService`](../../app/Services/Landing/ContactMessageService.php) — `storeFromLanding()`. - **Controller** [`ContactController@store`](../../app/Http/Controllers/ContactController.php) — رد JSON + honeypot صامت. - **Route** `POST /contact` (`contact.store`) تحت `site.locale` + `throttle:6,1`. - **AJAX (vanilla fetch)** في [`landing.js`](../../public/landing/js/landing.js) — يعرض رسالة نجاح/خطأ inline ويُبرز أخطاء التحقق (422) على الحقول، مع تعطيل الزر أثناء الإرسال. الفورم يرسل `_token` عبر FormData (CSRF). **تم التحقق:** التحقق يرفض المدخلات الناقصة، يقبل الصحيحة، والخدمة تخزّن صفًّا بـ `contactable = NULL` (يؤكد نجاح الـ migration)، ثم نُظّف صف الاختبار. ## التحقق بعد التنفيذ - `GET /` يعرض الترتيب الجديد (partners أسفل faq، لا قسم download). - اختبار RTL (`/lang/ar`) و LTR (`/lang/en`) للسلايدر والأسهم والموبايل. - اختبار `prefers-reduced-motion` (إيقاف الدوران/السقوط/الماركيه). - اختبار «كيف نعمل» بعدد steps = 3/4/5. - إرسال فورم التواصل (نجاح + فشل تحقق) إن نُفّذ 7ب. - `php artisan optimize:clear` بعد تعديلات routes/config.