أنشئ موقع SaaS داكنًا وسريعًا بقصة منتج مثبّتة تتحرك مع التمرير باستخدام GSAP

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على خادم الاستضافة الخاص بي في Opus Growth [اسم الخادم]، ابنِ موقعًا داكنًا متعدد الصفحات للمنتج [اسم المنتج] يروي قصته أثناء تمرير الزائر للصفحة. المنتج: [ما يفعله، ولمن هو موجّه]. الخطوات الثلاث التي يتبعها المستخدم في المنتج: [ثلاث خطوات]. الميزات الرئيسية: [من 4 إلى 6 ميزات]. التواصل: [البريد الإلكتروني]، [الهاتف]، [رقم WhatsApp]، [العنوان إن وُجد]. النطاق: [النطاق]. تفضيل اللون: [اللون أو "اختر أنت"]. لقطات شاشة أو صور حقيقية للمنتج: [روابط أو "لا يوجد"]. الصفحات: الرئيسية (/)، المنتج (/urun/)، من نحن (/hakkimizda/)، اتصل بنا (/iletisim/)، الخصوصية (/gizlilik/) و404.html. أقسام الصفحة الرئيسية بالترتيب: القسم الرئيسي hero (h1، وصف من جملتين، زران، صورة المنتج)، قصة المنتج بوصفها العنصر المميّز، الميزات، لمن هو موجّه، الأسئلة الشائعة FAQ، ودعوة ختامية لاتخاذ إجراء. لا نموذج في صفحة اتصل بنا؛ استخدم البريد الإلكتروني والهاتف ورابط WhatsApp مع رسالة معبأة مسبقًا، لأن الخادم يقدّم الملفات الثابتة فقط. الأسلوب: حركة داكنة. خلفية داكنة، ولون تمييز واحد هادئ (ليس نيون)، وخط عناوين grotesk مضغوط من Fontshare (مثل Cabinet Grotesk) وخط نص هادئ (مثل Switzer). بلا تدرجات لونية وبلا WebGL؛ احتفظ بالجرأة لقصة المنتج. قواعد الحركة (الجزء الأصعب، اتبعها حرفيًا): 1. المكتبات: GSAP 3.13 core وScrollTrigger وSplitText وLenis. نزّلها من jsdelivr إلى `assets/vendor/` باستخدام site_fetch وثبّت الإصدار. حمّلها في الصفحتين الرئيسية والمنتج فقط؛ صفحات من نحن واتصل بنا والخصوصية لا تحمل أي سكربت إطلاقًا. لا تحمّل Swiper. 2. لا تضف هذه المكتبات بـ `<script defer>`. ضع محمّلًا صغيرًا في نهاية الصفحة: بعد حدث load ينتظر استدعاءين لـ requestAnimationFrame ثم requestIdleCallback، ويضيف السكربتات بالترتيب مع async=false، ولا ينزّل شيئًا إذا لم يكن في `<html>` الصنف `anim`. في العرض التجريبي، دفعت المكتبات المؤجلة LCP على الجوال إلى 3.2 ثانية وتركت الأداء عند 92؛ ومع هذا المحمّل وصل إلى 99. 3. سكربت من سطر واحد في `<head>` يضيف الصنف `js` إلى `<html>`، والصنف `anim` ما لم تكن قيمة prefers-reduced-motion هي "reduce". عرّف حالات البداية المخفية تحت `.anim` فقط، بحيث يكون المحتوى ظاهرًا من البداية عند تعطيل JS أو للزوار الذين يفضّلون حركة أقل، ولا تُنزَّل المكتبات لهم أبدًا. كشبكة أمان في حال فشل تحميل إحدى المكتبات، أضف حركة CSS تجعل كل عنصر مخفي ظاهرًا بعد 2.5 ثانية. إذا وصل JS بعد ذلك، فلا تُخفِ المحتوى الظاهر مرة أخرى؛ ابنِ القصة المثبتة فقط. 4. دخول العنوان بـ SplitText: العنوان h1 في الشاشة الأولى هو عنصر LCP، فلا تبدأه مخفيًا أبدًا. يبدأ h1 ظاهرًا بلون خافت ما زال يجتاز تباين AA، ويقوم SplitText بإحضار أسطره إلى اللون الكامل واحدًا تلو الآخر (مع تفعيل خياري mask وaria). أبقِ دخول الأسطر المقنّعة الصاعدة لعناوين h2 الأبعد في الصفحة وشغّله عند التمرير باستخدام ScrollTrigger. 5. العنصر المميّز: في قصة المنتج، استخدم pin وscrub من ScrollTrigger عبر gsap.matchMedia فقط عند عرض 768 بكسل فأكثر (scrub نحو 0.6، وend "+=180%"). في اليسار تصبح الخطوات الثلاث نشطة واحدة تلو الأخرى؛ وفي اليمين تمتلئ شاشة المنتج خطوة بخطوة. لا تُعتّم الخطوات غير النشطة بـ opacity؛ غيّر لون العنوان وخط الحد فقط. في العرض التجريبي، فشلت الخطوات المعتّمة بـ opacity في التباين على سطح المكتب وأنزلت إمكانية الوصول إلى 95. على الجوال لا يوجد pin؛ تظهر الخطوات في التدفق العادي. بدون JS، تعرض شاشة المنتج حالتها النهائية. 6. فعّل Lenis فقط على الأجهزة `(pointer: fine)` لتحتفظ أجهزة اللمس بالتمرير الأصلي. شغّل Lenis من gsap.ticker وانقل التركيز إلى الهدف بعد التمرير إلى رابط داخل الصفحة. 7. شاشة المنتج شكل زخرفي مع aria-hidden وfigcaption يوضح ما تعرضه. كل تفاعل يعمل بلوحة المفاتيح وتبقى حلقة التركيز ظاهرة. الإعداد والمزالق المعروفة (كل واحدة منها خفضت درجة في قياسات العرض التجريبي، فلا تتجاوزها): 1. إذا كان هناك موقع يعمل بالفعل على الخادم، فأخبرني أولًا، لأن الإعداد يستبدل index.html ومجلد assets. اعرض معاينة لـ scaffold_site مع confirm=false واستدعه مع confirm=true بعد موافقتي. ثم اقرأ site_design_guide وsite_seo_guide. قبل كتابة الكود، ضع اتجاه التصميم (الطباعة، اللون، الشبكة، العنصر المميّز، لغة الحركة والمكتبات التي لن تُحمَّل) في ملف ART.md قصير خارج assets وأره لي. 2. اعمل على ترجمة Tailwind إلى ملف جاهز بدلًا من تحميله من CDN. ثبّته باستخدام site_run_command مع background=true: `npm i -D tailwindcss@3`، ثم تابعه بـ site_command_status. يجب أن تغطي مسارات content في `tailwind.config.js` كل ملفات HTML والقوالب وأي ملف JS يكتب أسماء الأصناف. يحتوي `_src/tw.css` على السطر `@import "../assets/app.css";` وأسطر `@tailwind` الثلاثة؛ ترجمه إلى ملف واحد بالأمر `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. أزل سكربت cdn.tailwindcss.com وإعداد tailwind.config المضمّن من كل الصفحات واربط `/assets/site.css` فقط. أعد الترجمة بعد كل تغيير في HTML. 3. استضف الخطوط بنفسك. اقرأ CSS لعائلات Fontshare التي اخترتها، ونزّل ملف woff2 لكل وزن إلى `assets/fonts/` باستخدام site_fetch، واكتب قواعد @font-face مع `font-display: swap` في `assets/app.css`؛ فأداة design-check تبحث عن خط مخصص هناك. تحقق من اسم font-family في CSS الذي نزّلته، لأن Fontshare قد تعيد عائلة مختلفة عندما لا يوجد وزن معين. أضف preload لخط عنوان الشاشة الأولى وخط النص في كل صفحة بـ `<link rel="preload" as="font" type="font/woff2" crossorigin>`؛ في العرض التجريبي أزال هذا انزياح التخطيط الناتج عن تبديل الخط (CLS من 0.024 إلى 0). معظم خطوط Fontshare لا تحتوي على رمز ₺، لذا اكتب "TL" للأسعار. 4. اجعل القائمة والتذييل HTML ثابتًا. لا تحمّل chrome.js ولا site.config.js في الصفحات. اكتب `chrome-stamp.mjs` صغيرًا يقرأ قائمة التنقل في site.config.js ويختم `_src/header.tpl` و`_src/footer.tpl` بين علامتي `<!-- nav:start --><!-- nav:end -->` و`<!-- footer:start --><!-- footer:end -->` في كل صفحة، مع إضافة aria-current="page" إلى الرابط الحالي. لا تعطِ القوالب امتداد .html واستخدم عناصر نائبة مثل `[[NAV]]` بدل `{{...}}`، وإلا قرأتها design-check وseo-check كصفحات غير مكتملة. ابنِ قائمة الجوال بدون JS باستخدام `<details>`. أبقِ اسم النشاط والعنوان والهاتف في التذييل نصًا عاديًا. 5. حوّل الصور أثناء تنزيلها بـ site_fetch: اكتب الصورة نفسها في ملفات منفصلة مع resize="480x" و"800x" و"1200x"، وimage_format="webp"، وquality=65. أعطِ كل `<img>` الخصائص srcset وsizes وwidth وheight. تحصل الصورة الرئيسية في الشاشة الأولى على fetchpriority="high" ولا تكون lazy أبدًا؛ أما الباقي فتحصل على loading="lazy" decoding="async". إذا كانت الصورة الرئيسية تملأ شاشة الهاتف، فقدّم اقتطاعًا أعرض وأصغر على الجوال باستخدام `<picture>` (في العرض التجريبي انخفض حجم صورة hero على الجوال من 89 KB إلى 43 KB). 6. أنشئ favicon بصيغة PNG بحجم 48 بكسل من الشعار باستخدام site_fetch وأضف `<link rel="icon">` إلى كل صفحة. بدونه يسجّل المتصفح خطأ 404 وتنخفض أفضل الممارسات إلى 96. 7. قواعد مدقّق HTML: ابدأ كل مستند بـ `<!DOCTYPE html>` بأحرف كبيرة (ملفات البداية في الحزمة تستخدم أحرفًا صغيرة)، واستخدم `&nbsp;` للمسافات في النص المرئي لروابط tel:، ولا تستخدم أبدًا السمة style=""، وأعطِ كل زر type="button". SEO وAEO وGEO: 1. استخدم روابط المجلدات مع الشرطة المائلة في النهاية (/urun/، /hakkimizda/، /iletisim/، /gizlilik/). املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. اكتب schema الخاص بكل صفحة (الرئيسية WebPage وFAQPage؛ المنتج SoftwareApplication وFAQPage؛ من نحن AboutPage؛ اتصل بنا ContactPage؛ وBreadcrumbList في الصفحات الداخلية. وإذا كانت شركة برمجيات بلا متجر فعلي فاضبط localBusiness:false في site.config.js) في كتل `<script type="application/ld+json">` منفصلة واربطها بالرسم الأساسي عبر @id. لا تدفن BreadcrumbList داخل @graph؛ أعطه كتلته الخاصة، لأن هذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. العناوين من 48 إلى 60 حرفًا (يعدّ seo-check أي عنوان فوق 65 خطأ)، والأوصاف من 145 إلى 158 حرفًا، وh1 واحد في كل صفحة. كل صفحة تحتاج إلى 150 كلمة على الأقل من المحتوى الرئيسي؛ وصفحتا اتصل بنا والخصوصية غالبًا ما تقصران عن ذلك. 3. الفقرة الأولى في كل صفحة تجيب مباشرة عن سؤال الصفحة. اكتب أسئلة شائعة خاصة بالصفحة باستخدام `<details>` ووسمها بـ FAQPage. أظهر الجهة الناشرة وتاريخ "آخر تحديث" باستخدام `<time>`. 4. في robots.txt، اكتب قرارك مع سببه لكل من GPTBot وOAI-SearchBot وChatGPT-User وClaudeBot وClaude-User وClaude-SearchBot وPerplexityBot وPerplexity-User وGoogle-Extended وApplebot-Extended وBingbot وCCBot، وأشر إلى خريطة الموقع. يحمل sitemap.xml تواريخ lastmod حقيقية. ويحتوي llms.txt على ملخص دقيق للموقع من جملتين وقائمة بالصفحات الرئيسية. 5. لا تخترع شيئًا: لا مراجعات ولا تقييمات ولا جوائز ولا أعداد عملاء ولا شهادات ولا ساعات عمل ولا إحداثيات ولا أسعار ما لم أعطك إياها. اترك الحقول غير المعروفة خارج schema. بوابات القبول (بالترتيب؛ لا تعلن الانتهاء حتى تُجتاز جميعها): 1. باستخدام site_run_command نفّذ `node chrome-stamp.mjs` وبناء Tailwind و`node seo-stamp.mjs` و`node seo-check.mjs` (0 أخطاء، 0 تحذيرات) و`node design-check.mjs` (0 أخطاء؛ برّر أي تحذير متبقٍ) و`npx html-validate "**/*.html"` (0 أخطاء). 2. اعرض كل صفحة بـ site_preview مع view="mobile" وview="desktop". يلتقط site_preview الصفحة مع إيقاف الحركة (reduced-motion)، فإذا غاب محتوى في تلك الصورة فحالة عدم الحركة معطّلة. في اللقطات الكاملة للصفحة قد تظهر الصور lazy البعيدة فارغة؛ وهذا ليس خطأ، لكن تحقق من مساراتها. 3. نفّذ core_web_vitals لكل صفحة مع strategy="mobile" وstrategy="desktop". شرط النجاح: على الجوال أداء 95 على الأقل وإمكانية الوصول وأفضل الممارسات وSEO جميعها 100؛ وعلى سطح المكتب كل الأربعة 95 على الأقل. في الصفحة التي تفشل، استخدم resources=true لإيجاد الملف الذي يعطّلها، وأصلحه ثم قِس مجددًا. بعد ذلك نفّذ seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا تحتوي قائمة طلبات الشبكة على أي مضيف غير نطاقك. 4. لا تمرير أفقي عند عرض 360 و390 و768 و1440 بكسل، وأهداف اللمس 44 بكسل على الأقل، ولا أخطاء في وحدة التحكم. فحص الحركة: لا يستطيع site_preview عرض الحركة، لذا صِف القسم المثبت في الصفحة الرئيسية وأخبرني بما يجب أن أتحقق منه في متصفحي: على سطح المكتب يجب أن تلتصق قصة المنتج بالأعلى بينما تتقدم الخطوات مع التمرير، وعلى الهاتف يجب أن تنساب دون التصاق، ومع تفعيل تقليل الحركة في نظام التشغيل يجب ألا يتحرك شيء ويكون كل شيء ظاهرًا. بعد النشر: اعرض معاينة للقاعدة `/assets/* Cache-Control: public, max-age=31536000, immutable` باستخدام site_headers وطبّقها بعد موافقتي؛ ومن ذلك الحين غيّر أسماء ملفات CSS أو JS عند تغيّرها (site-v2.css وهكذا). أرسل sitemap.xml باستخدام gsc_submit_sitemap وافحص الصفحة الرئيسية بـ gsc_url_inspect. اختم بجدول درجات لكل صفحة (الصفحة، أربع درجات للجوال، أربع درجات لسطح المكتب، LCP، CLS)، ونتائج بوابات القبول، وقائمة الإصلاحات التي طبّقتها.