أنشئ موقع استوديو إبداعي بأسلوب Awwwards: خطوط ضخمة وشريط متحرك متواصل وأثر صور خلف المؤشر

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على خادم الاستضافة الخاص بي في Opus Growth [اسم الخادم]، ابنِ موقعًا سريعًا متعدد الصفحات لـ [اسم الاستوديو] بطابع مواقع الاستوديوهات الإبداعية المعروضة على Awwwards. الاستوديو: [ما الذي يصممه ولمن]، المدينة والحي: [المدينة، الحي]، الفريق: [العدد، الأسماء والأدوار]. الخدمات: [3 خدمات]. الأعمال: [لكل عمل: اسم العميل، نوع العمل، السنة، جملة عن المشكلة، جملة عن الحل، الأجزاء المسلّمة، رابط الصورة]. التواصل: [البريد الإلكتروني]، [الهاتف]، [رقم WhatsApp]، [العنوان]. النطاق: [النطاق]. تفضيل اللون: [اللون أو "اختر أنت"]. الصفحات: الرئيسية (/: قسم hero بعنوان ضخم، شريط marquee متحرك للخدمات، أعمال مختارة، ما نقوم به، العملية، الأسئلة الشائعة، دعوة ختامية لاتخاذ إجراء)، الأعمال (/isler/: المشكلة وما فعلناه وما سلّمناه لكل مشروع)، الاستوديو (/studyo/: الفريق وقواعد العمل)، التواصل (/iletisim/)، الخصوصية وKVKK (/gizlilik/) و404.html. لا نموذج في صفحة التواصل؛ اعرض البريد الإلكتروني والهاتف ورابط WhatsApp برسالة معبأة مسبقًا، مع قائمة بما يجب تضمينه في الرسالة الأولى. في غياب أرقام يعتمدها العميل، صف النتائج وصفًا نوعيًا ولا تكتب نسبًا مئوية ولا أرقام نمو. الأسلوب: استوديو إبداعي بطابع Awwwards. خلفية بيضاء مائلة للرمادي، نص أسود ولون إشارة واحد يُستخدم كخلفية فقط (مع نص أسود فوقه، بتباين لا يقل عن 4.5:1). خط عرض من Fontshare يصمد في الأحجام الكبيرة جدًا (مثل Clash Display 600) وخط نص هادئ (مثل Ranade). عنوان قسم hero يملأ الشاشة باستخدام clamp بين 3.2rem و12.5rem مع تباعد أحرف ضيق، دون أن يفيض عند 360 px. قائمة الأعمال مجموعة صفوف بصور كبيرة وعناوين كبيرة في شبكة غير متماثلة تتبادل الأعمدة 7/5 و5/7. قواعد الحركة (الجزء الأصعب، اتبعها حرفيًا): 1. المكتبات: GSAP 3.13 core وScrollTrigger وSplitText وLenis، في صفحتي الرئيسية والأعمال فقط. لا نصوص برمجية إطلاقًا في صفحات الاستوديو والتواصل والخصوصية. لا تحمّل Swiper ولا WebGL ولا فيديو. 2. SplitText: عنصر h1 أعلى الصفحة هو عنصر LCP، لذا لا تبدأه مخفيًا أو منزلقًا للأعلى أبدًا. يبدأ h1 ظاهرًا بلون باهت يجتاز تباين AA، ويحوّل SplitText أسطره إلى اللون الكامل سطرًا بعد سطر (type "lines"، mask "lines"، aria "auto"). احتفظ بدخول الأسطر المقنّعة بانزلاق للأعلى لعناوين h2 أسفل الصفحة وشغّله بـ ScrollTrigger once:true. قسّم النص بعد document.fonts.ready لتكون فواصل الأسطر صحيحة. 3. شريط marquee لا نهائي: اكتب أسماء الخدمات مرة واحدة في HTML. بدون JS ومع تقليل الحركة، تظهر القائمة كمجموعة ثابتة تلتف على أسطر؛ صغّر هذه الحالة الثابتة على الهواتف، لأنها في العرض التجريبي ملأت الشاشة كجدار من ستة أسطر. يكرر JS المجموعة مرة واحدة، ويضع aria-hidden على النسخة، ويحرك x في حلقة لا تنتهي؛ يتسارع لوهلة مع سرعة التمرير ويتوقف عندما يكون الشريط خارج الشاشة. الحركة التي تتجاوز خمس ثوانٍ تحتاج زر "إيقاف مؤقت" ظاهرًا بموجب WCAG 2.2.2 (type="button"، aria-pressed)، يظهر فقط عندما يتحرك الشريط فعلًا. التركيز داخل الشريط يوقفه مؤقتًا أيضًا. 4. أزرار مغناطيسية: فقط على الأجهزة المطابقة لـ `(hover: hover) and (pointer: fine)`، استخدم gsap.quickTo لتحريك تحويل x وy بنسبة 30 إلى 40 بالمئة من مسافة المؤشر عن مركز الزر، مع عودة مرنة عند مغادرة المؤشر. يجب ألا تتغير المنطقة القابلة للنقر في الزر. 5. أثر صور المؤشر: على سطح المكتب فقط، بنفس شرط المؤشر الدقيق، في منطقة hero. يضيف JS طبقة إلى hero تحمل aria-hidden وpointer-events:none وتقع تحت العنوان (z-index). يجب ألا تُحمَّل صور الأثر عند تحميل الصفحة؛ تُحمَّل الصور المصغرة WebP بحجم 280 px عند أول حركة للمؤشر. مع كل 90 px من حركة المؤشر تظهر الصورة التالية من المجموعة عند المؤشر وتكبر من حجم صغير، ثم تنزلق للأسفل وتتلاشى؛ حركها بـ transform وليس left/top. 6. فعّل Lenis فقط على أجهزة `(pointer: fine)` وشغّله من gsap.ticker؛ تحتفظ أجهزة اللمس بالتمرير الأصلي. في الروابط الداخلية للصفحة، انقل التركيز إلى الهدف بعد التمرير. الإعداد والمزالق المعروفة (كل واحدة كلّفت نقاطًا أو كسرت شيئًا في قياس العرض التجريبي، لا تتجاوز أيًّا منها): 1. إذا كان هناك موقع يعمل على الخادم أصلًا، أخبرني أولًا، لأن الإعداد يستبدل index.html ومجلد assets. اعرض معاينة scaffold_site مع confirm=false واستدعِ confirm=true بعد موافقتي. ثم اقرأ site_design_guide وsite_seo_guide. قبل كتابة الكود، ضع اتجاه التصميم (الطباعة، اللون، الشبكة، العنصر المميز، لغة الحركة والمكتبات التي لن تُحمَّل) في ملف ART.md قصير خارج assets واعرضه علي. 2. اجعل Tailwind مترجمًا، ولا تحمّله من CDN. ثبّت `npm i -D tailwindcss@3` عبر site_run_command مع background=true وتابعه بـ 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. استضف الخطوط ذاتيًا. تحقق أولًا من أن عائلة Fontshare التي تختارها تحتوي على الأحرف التركية (ş، ğ، ı، İ، ç، ö، ü): في العرض التجريبي لم يكن في Tanker حرف ı بلا نقطة ولم يكن في Outfit حروف ş وğ وİ، فكانت هذه الأحرف ستنتقل إلى خط آخر في العناوين. حمّل ملف woff2 لكل وزن على حدة بـ site_fetch إلى `assets/fonts/`، واكتب قواعد @font-face مع `font-display: swap` في `assets/app.css` (يبحث design-check عن الخط المخصص هناك) وتحقق من اسم font-family في ملف CSS الذي حمّلته. نفّذ preload لخطي العنوان والنص المستخدمين أعلى الصفحة في كل الصفحات بـ `<link rel="preload" as="font" type="font/woff2" crossorigin>` قبل ورقة الأنماط؛ لا تجعل preload لأكثر من ملفين، لأن preload لوزن ثالث في العرض التجريبي أطال LCP على الهاتف 0.2 ثانية. معظم خطوط 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]]` بدل `{{...}}`. ابنِ قائمة الجوال بدون JS باستخدام `<details>`. أبقِ اسم المنظمة والعنوان والهاتف نصًا عاديًا في التذييل، واجعل كل هدف لمس بحجم 44x44 px على الأقل، بما في ذلك روابط التذييل وفتات التنقل. 5. حوّل الصور أثناء تنزيلها بـ site_fetch: اكتب الصورة نفسها بـ resize="480x" و"800x" و"1200x" وimage_format="webp" وquality=65 في ملفات منفصلة. لا يقص site_fetch الصور أبدًا؛ عندما تحتاج صورة Unsplash إلى نسبة أخرى، نزّل النسخة المقصوصة بإضافة معاملات مثل `?w=1600&h=1200&fit=crop` إلى رابطها. أعطِ كل `<img>` قيم srcset وsizes وwidth وheight مطابقة للنسبة الحقيقية. الصورة الرئيسية أعلى الصفحة تحصل على fetchpriority="high" وليست lazy؛ والبقية تحصل على loading="lazy" decoding="async". إذا ملأت الصورة الرئيسية الشاشة على الجوال، فقدّم اقتطاعًا أصغر عبر `<picture>`. 6. اكتب نسخة SVG من الشعار باسم favicon.svg بـ site_write_file وأضف `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` إلى كل الصفحات. بدون favicon يسجل المتصفح خطأ 404 وتنخفض Best Practices إلى 96. 7. قواعد مدقق HTML: ابدأ بـ `<!DOCTYPE html>` بأحرف كبيرة، استخدم `&nbsp;` للمسافات في النص الظاهر لروابط tel:، لا تستخدم سمة style="" أبدًا، أعطِ كل زر type="button"، ولا تضع `<details>` داخل `<figure>` بعد figcaption. 8. نزّل مكتبات الحركة (GSAP وScrollTrigger وSplitText وLenis) من jsdelivr إلى `assets/vendor/` بـ site_fetch، ثبّت الإصدار وحمّلها في صفحتي الرئيسية والأعمال فقط. لا تستخدم `<script defer>`؛ ضع محمّلًا صغيرًا في نهاية الصفحة ينتظر حدث load، ثم استدعاءين لـ requestAnimationFrame، ثم requestIdleCallback، ويضيف السكربتات بالترتيب مع async=false. سكربت من سطر واحد في `<head>` يضيف الصنف `js` إلى `<html>` والصنف `anim` ما لم تكن prefers-reduced-motion تساوي "reduce"؛ وبدون `anim` لا ينزّل المحمّل شيئًا. عرّف حالات البداية المخفية تحت `.anim` فقط، وأضف حركة CSS كشبكة أمان تُظهر كل عنصر مخفي بعد 2.5 ثانية في حال لم تصل المكتبة أبدًا. في عروض تجريبية سابقة دفعت المكتبات المؤجلة LCP على الجوال إلى 3.2 ثانية؛ ومع هذا المحمّل سجلت الصفحات من 99 إلى 100. سمِّ السمة الخاصة بالعناصر المكشوفة عند التمرير data-reveal؛ فـ design-check لا يتعرف على الحركة إلا بهذا الاسم. SEO وAEO وGEO: 1. استخدم روابط بنمط المجلدات مع شرطة مائلة أخيرة (/isler/ و/studyo/ و/iletisim/ و/gizlilik/). املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. اكتب المخطط الخاص بكل صفحة (الرئيسية WebPage وFAQPage؛ الأعمال CollectionPage مع CreativeWork لكل مشروع في hasPart؛ الاستوديو AboutPage مع عناصر Person للفريق؛ التواصل ContactPage؛ BreadcrumbList في الصفحات الداخلية. لاستوديو له مكتب، businessType ProfessionalService في site.config.js) في كتل `<script type="application/ld+json">` منفصلة واربطها بالرسم الأساسي عبر @id. لا تضع BreadcrumbList داخل @graph؛ أبقِه في كتلته الخاصة، لأن هذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. أبقِ العناوين عند 60 حرفًا أو أقل (يعدّ seo-check كل ما يتجاوز 65 خطأ)، والأوصاف بين 120 و158 حرفًا، وh1 واحدًا في كل صفحة ودون تخطي مستويات العناوين (وجود h3 مباشرة بعد h1 خفّض إمكانية الوصول إلى 98). تحتاج كل صفحة إلى 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. لا اختلاق: لا تكتب مراجعات ولا تقييمات ولا جوائز ولا أعداد عملاء ولا شهادات ولا ساعات عمل ولا إحداثيات ولا أسعارًا دون أن تسألني. اترك أي حقل لا تعرفه خارج المخطط تمامًا. بوابات التحقق (بالترتيب؛ لا تقل "تم" قبل أن تنجح كلها): 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)؛ إذا نقص محتوى في هذه اللقطة فالحالة بلا حركة معطّلة. قد تظهر الصور الكسولة في الأسفل فارغة في لقطة الصفحة الكاملة؛ لا تعدّ ذلك خطأ، لكن تحقق من مساراتها. 3. نفّذ core_web_vitals مع strategy="mobile" وstrategy="desktop" لكل صفحة. معيار القبول: على الجوال Performance لا يقل عن 95 وAccessibility وBest Practices وSEO بقيمة 100؛ وعلى سطح المكتب الأربعة لا تقل عن 95. للصفحة التي لا تبلغ ذلك، اعثر على الملف البطيء بـ resources=true وأصلحه وقِس مجددًا. ثم نفّذ seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا يبقى أي عنوان خارج نطاقك في قائمة طلبات الشبكة. 4. لا تمرير أفقي عند 360 و390 و768 و1440 px، وأهداف لمس لا تقل عن 44 px ولا أخطاء في وحدة التحكم. ويجب أن يبدو الموقع سليمًا تمامًا داخل إطار 390x790 وإطار 1440x898، كما في صفحات الـ prompts. فحص الحركة: لا يستطيع site_preview عرض الحركة، لذا أخبرني بما أراقبه في متصفحي. على سطح المكتب يجب أن تغمق أسطر عنوان hero واحدًا تلو الآخر، وأن يتحرك شريط marquee ويتسارع مع التمرير ويتوقف بزر الإيقاف المؤقت، وأن تميل الأزرار قليلًا نحو المؤشر، وأن يترك تحريك المؤشر فوق hero صورًا تظهر وتتلاشى خلفه، وأن يبقى النص دائمًا فوق الصور. على الهاتف يجب ألا يكون هناك أثر ولا تأثير مغناطيسي، ويبقى التمرير أصليًا. مع تفعيل تقليل الحركة في نظام التشغيل يجب ألا يتحرك شيء ويظهر الشريط كقائمة ثابتة. يجب أن تكون حلقة التركيز ظاهرة في كل مكان عند التنقل بمفتاح 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)، ونتائج البوابات، ونتيجة التفاعلات التي جرّبتها في المتصفح، وقائمة الإصلاحات التي طبقتها.