أنشئ موقع معرض أعمال لوكالتك مع معاينات تتبع المؤشر ومعرض صور بأسلوب Webflow، من دون Webflow

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على خادم الاستضافة الخاص بي في Opus Growth [اسم الخادم]، أنشئ موقع معرض أعمال ثابتًا وسريعًا لـ [اسم الاستوديو] يعطي إحساس مواقع الوكالات التفاعلية المبنية في Webflow، دون استخدام Webflow. الاستوديو: [ما يقدمه ولمن]، المدينة والحي: [المدينة، الحي]. الخدمات: [3 خدمات]. المشاريع: [لكل مشروع: الاسم، نوع العمل، السنة، جملة عن المشكلة، جملة عن الحل، رابط الصورة]. التواصل: [البريد الإلكتروني]، [الهاتف]، [رقم WhatsApp]، [العنوان]. النطاق: [النطاق]. الصفحات: الرئيسية (hero، فهرس الأعمال المختارة، ما نقدمه، آلية العمل، الأسئلة الشائعة، دعوة ختامية لاتخاذ إجراء)، الأعمال (/isler/: معرض صور مع المشكلة والعمل المنجز وملاحظة التسليم لكل مشروع)، الاستوديو (/hakkimizda/)، التواصل (/iletisim/، بدون نموذج؛ بريد إلكتروني وWhatsApp برسالة معبأة مسبقًا وهاتف)، الخصوصية (/gizlilik/) و404.html. بدون بيانات معتمدة من العميل، لا تكتب نسبًا مئوية ولا أرقام نمو لنتائج المشاريع؛ صف النتيجة بالكلمات. الأسلوب: بروتاليست حديث. زوايا حادة، وخطوط شبكة مرئية بسمك 1 px، وخط عناوين grotesk عريض بأحرف كبيرة (مثل Clash Grotesk) وخط نص هادئ (مثل Supreme)، ولون تمييز واحد فسفوري يُستخدم كخلفية فقط مع نص أسود عليه. حالات hover تغيّر اللون والخلفية؛ وحلقة التركيز سميكة وواضحة على أي خلفية. قواعد التفاعل (إحساس Webflow IX2 بدون مكتبة): 1. لا تحمّل GSAP ولا Lenis. اكتب التفاعلات في ملف JS خالص صغير واحد (IntersectionObserver وrequestAnimationFrame) وحمّله بـ defer في الصفحتين الرئيسية والأعمال فقط. لا سكربت في الصفحات الأخرى. 2. العنصر المميز، فهرس "الأعمال المختارة": كل صف هو رابط حقيقي إلى المشروع ويحمل مسار صورة المعاينة في خاصية data-img. افتراضيًا (بدون JS أو على جهاز لمس) يعرض كل صف صورة صغيرة ضمن التدفق. فقط على الأجهزة التي تطابق `(hover: hover) and (pointer: fine)` ولا تطلب تقليل الحركة، يضيف JS الفئة cursor-fx إلى `<html>`، ويخفي الصور المضمنة، ويعرض صندوق معاينة واحدًا يتبع المؤشر. حرّك الصندوق بمتغيرات CSS وtransform: translate3d بدلًا من left وtop، وأوقف حلقة requestAnimationFrame عندما يسكن المؤشر. عند التركيز بلوحة المفاتيح تُفتح المعاينة نفسها ثابتة بجانب الصف وتُغلق عندما يغادر التركيز. 3. أضف حلقة المؤشر المخصصة فقط تحت الشرط نفسه؛ لا تُخفِ المؤشر الأصلي أبدًا، وضع على الحلقة aria-hidden ودعها تكبر فوق الروابط. 4. انتقالات الأقسام: تنكشف عناوين الأقسام من اليسار إلى اليمين باستخدام clip-path عند التمرير. يمنح JS الحالة الابتدائية المخفية فقط للعناوين الواقعة أسفل الشاشة عند فتح الصفحة؛ ولا يُخفى أبدًا محتوى الشاشة الأولى. سمِّ الخاصية data-reveal؛ فـ design-check يتعرف على الحركة بهذا الاسم وإلا يحذر "no motion". 5. معرض Swiper في صفحة الأعمال فقط. بدون JS يكون HTML المعرض شريط CSS scroll-snap أفقيًا، وتبقى أزرار السابق والتالي مخفية حتى يبدأ Swiper. نزّل حزمة Swiper 14 (js وcss) إلى `assets/vendor/` باستخدام site_fetch. حمّلها عندما يدخل المؤشر المعرض، أو عند اللمس، أو عند التركيز، أو عند أول تمرير للصفحة. في العرض التجريبي، أدى تحميلها عندما اقترب المعرض من منطقة العرض إلى رفع LCP على الجوال إلى 3 ثوانٍ بسبب حزمة بحجم 150 KB (الأداء 94)؛ أما التحميل عند أول تفاعل فأعطى 99. فعّل وحدات Navigation وKeyboard وA11y برسائل بالتركية، واضبط سرعة الانتقال على 0 عند تقليل الحركة. 6. ابنِ الشرائح باستخدام div بدلًا من ul وli. يمنح Swiper الشرائح role="group"؛ وعلى li تسبب هذا الدور في أخطاء aria-allowed-role وأخطاء قوائم وخفّض إمكانية الوصول إلى 96. الإعداد والمصائد المعروفة (كل واحدة منها خفّضت درجة في قياسات العرض التجريبي، فلا تتجاوز أيًّا منها): 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 px من الشعار باستخدام site_fetch وأضف `<link rel="icon">` إلى كل الصفحات. بدونه يسجل المتصفح خطأ 404 وتنخفض أفضل الممارسات إلى 96. 7. قواعد مدقق HTML: ابدأ كل مستند بـ `<!DOCTYPE html>` بأحرف كبيرة (ملفات البداية في الحزمة تستخدم الأحرف الصغيرة)، واستخدم `&nbsp;` للمسافات في النص المرئي لروابط tel:، ولا تستخدم خاصية style="" أبدًا، وأعطِ كل زر type="button". SEO وAEO وGEO: 1. استخدم عناوين URL للمجلدات مع شرطة مائلة في النهاية (/isler/ و/hakkimizda/ و/iletisim/ و/gizlilik/). املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. اكتب schema الخاص بكل صفحة (الرئيسية WebPage وFAQPage؛ الأعمال CollectionPage مع CreativeWork واحد لكل مشروع ضمن hasPart؛ الاستوديو AboutPage؛ التواصل ContactPage؛ وBreadcrumbList في الصفحات الداخلية. لاستوديو له مكتب فعلي استخدم businessType ProfessionalService) في كتل `<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 px، وأهداف اللمس لا تقل عن 44 px، ولا أخطاء في وحدة التحكم. فحص التفاعل: لا يستطيع site_preview عرض hover أو تأثيرات المؤشر. أخبرني كيف أتحقق في متصفح سطح المكتب من أن المعاينة تتبع المؤشر فوق صفوف الفهرس، ومن أنها تُفتح بجانب الصف عند التنقل بمفتاح Tab، ومن أن الهاتف يعرض الصور المضمنة، ومن أن المعرض يتحرك بسحب الإصبع. بعد النشر: اعرض معاينة للقاعدة `/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)، ونتائج البوابات، وقائمة الإصلاحات التي طبقتها.