أنشئ موقع شركة ناشئة بأسلوب النيو-بروتاليزم: حدود سميكة، ظلال حادة، شارات ملصقات، بدون JS

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. ابنِ موقع منتج بأسلوب النيو-بروتاليزم، متعدد الصفحات وخاليًا من JavaScript، لـ [اسم المنتج أو الشركة الناشئة] على موقع [اسم الخادم] في خادم الاستضافة الخاص بي لدى Opus Growth. المنتج: [ما يفعله ولمن]. كيف يعمل: [ثلاث خطوات]. أبرز الميزات: [من 4 إلى 6 ميزات]. الأسعار: [أسماء الباقات وأسعارها، أو "لا توجد صفحة أسعار"]. روابط التنزيل أو التسجيل: [App Store أو Google Play أو URL للتسجيل]. التواصل: [البريد الإلكتروني]، [الهاتف]، [رقم WhatsApp]، [العنوان]. النطاق: [النطاق]. ألوان العلامة التجارية: [الألوان، أو "اختر أنت"]. صور أو لقطات شاشة حقيقية: [روابط، أو "لا يوجد"]. الصفحات: الرئيسية (/)، كيف يعمل (/nasil-calisir/ أو /how-it-works/)، الأسعار (/fiyat/)، من نحن (/hakkimizda/)، تواصل معنا (/iletisim/)، الخصوصية (/gizlilik/) و404.html. أقسام الصفحة الرئيسية بالترتيب: القسم الرئيسي hero (h1، مقدمة من جملتين، زران، شارات على شكل ملصقات والعنصر المميز)، شريط الفئات، ثلاث خطوات، لمن هو (مع صورة)، الميزات، الأسئلة الشائعة ودعوة ختامية لاتخاذ إجراء. لا نموذج في صفحة التواصل؛ بدلًا منه البريد الإلكتروني والهاتف ورابط WhatsApp برسالة معبأة مسبقًا وروابط التنزيل، لأن الخادم يقدّم الملفات الثابتة فقط. الأسلوب: نيو-بروتاليزم، لكن بطابع منتج لا لعبة. حدود سوداء سميكة (3 بكسل)، ظلال حادة بلا تمويه (سوداء فقط، بإزاحة 4 و6 و10 بكسل)، كتل ألوان مسطحة زاهية (خمسة ألوان مسطحة كحد أقصى، مثل الطماطم والليموني والنعناعي والأزرق السماوي والليلكي على خلفية كريمية)، شارات مائلة قليلًا تبدو كالملصقات. الخطوط: خط عرض سميك وذو شخصية من Fontshare (مثل Chubbo) مع خط غروتيسك هادئ للنص (مثل Supreme بوزني 400 و700). بلا تدرجات لونية، بلا تأثير زجاجي، بلا ظلال ناعمة وبلا مزج من البنفسجي إلى الأزرق. لا يحتوي الموقع على أي JavaScript؛ لا يتم تحميل GSAP وLenis وSwiper. العنصر المميز: على يمين قسم hero، بطاقة بحدود سميكة ترسم الشاشة الرئيسية للمنتج بـ HTML حقيقي بدلًا من صورة (مثل مصروفات أسرة هذا الشهر وتسوية نهاية الشهر)، مع ملصقات ملصوقة حولها. قواعد اللون والتباين والحركة (حيث يخسر هذا الأسلوب النقاط بأسهل صورة): 1. اكتب النص بالأسود على كل خلفية ملونة ولا تستخدم النص الأبيض أبدًا. احسب نسبة التباين لكل لون مقابل الأسود وضعها في ART.md على شكل جدول؛ وأغمِق أي لون أقل من 4.5. في العرض التجريبي كانت أدنى نسبة 6.7 على البرتقالي الطماطمي، وبلغت إمكانية الوصول 100 في كل صفحة. 2. اجعل حلقة التركيز 3 بكسل من الأسود بإزاحة 3 بكسل، وتتحول إلى الأصفر الليموني في تذييل أسود. استخدم outline-offset حتى لا تندمج حلقة التركيز مع الحد السميك. 3. نفّذ الإزاحة المرحة للأزرار والبطاقات بـ transform وbox-shadow فقط: عند التمرير translate(-2px, -2px) وظل أكبر، وعند الضغط translate(4px, 4px) وبلا ظل. ارتفاع الأزرار 48 بكسل على الأقل، والأزرار الصغيرة 44 على الأقل. 4. ضع ميل الملصقات في الخاصية المنفصلة `rotate` لا في transform، وحدد الزاوية بفئة خاصية اعتباطية من Tailwind مثل `[--r:-4deg]`. بهذه الطريقة تبقى الملصقات مائلة حتى عندما تعيد قاعدة reduced-motion ضبط transform، ولا حاجة إلى سمة style="". 5. نفّذ دخول "slap on" للملصقات بـ `scale` و`translate` فقط، داخل `@media (prefers-reduced-motion: no-preference)` ومع السمة data-reveal="slap" (يتعرف design-check على الحركة من هذه السمة). بلا إخفاء بـ opacity، ولا يتحرك h1 أبدًا. مع prefers-reduced-motion: reduce تتوقف كل الرسوم المتحركة والانتقالات. 6. ضع aria-hidden="true" على الملصقات الزخرفية؛ أما الشارات التي تحمل معلومة (مثل "مجاني حتى 6 أشخاص") فتبقى عناصر قائمة عادية. على الجوال، أخفِ الملصق الزخرفي تحت 640 بكسل إذا تداخل مع شارة أخرى عند زاوية البطاقة؛ في العرض التجريبي غطّى ملصق "تمت إضافة الإيصال" شارة "3 أشخاص" عند 390 بكسل. الإعداد والمزالق المعروفة (كلٌّ منها كلّف نقاطًا أو أخفق في بوابة أثناء قياس العرض التجريبي، لا تتجاوزها): 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 بما فيها المجلدات الفرعية وقوالب `_src/*.tpl` وأي ملف 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 المضمّن وchrome.js وmotion.js، واربط `/assets/site.css` فقط. أعد التجميع بعد كل تعديل على HTML. هذا الموقع لا يحتوي على ملفات JavaScript، لذا لا تحتاج قائمة content إلى مدخلات JS. 3. استضف الخطوط بنفسك. اقرأ CSS من Fontshare بطلب واحد لكل عائلة ووزن (`https://api.fontshare.com/v2/css?f[]=family@weight`)، ونزّل كل ملف woff2 في `assets/fonts/` باستخدام site_fetch واكتب قواعد @font-face مع `font-display: swap` في `assets/app.css`؛ يبحث design-check عن الخط المخصص هناك. نفّذ preload لكل الأوزان المستخدمة في الجزء الظاهر قبل التمرير (العنوان والنص والأزرار) في كل صفحة بـ `<link rel="preload" as="font" type="font/woff2" crossorigin>` وضع هذه الأسطر قبل رابط ورقة الأنماط. معظم خطوط Fontshare لا تحتوي على رمز ₺، لذا اكتب الأسعار بـ "TL". 4. اجعل القائمة والتذييل HTML ثابتًا. اكتب `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]]` بدلًا من `{{...}}`. ابنِ قائمة الجوال بـ `<details>` وبدون JS. أبقِ اسم النشاط والعنوان والهاتف في التذييل كنص عادي، واجعل ارتفاع روابط التذييل وروابط breadcrumb 44 بكسل على الأقل. 5. حوّل الصور أثناء تنزيلها باستخدام site_fetch: اكتب الصورة نفسها في ملفات منفصلة مع resize="480x" و"800x" و"1120x" (أو العروض التي تحتاجها الصفحة)، وimage_format="webp" وquality=65. امنح كل `<img>` السمات srcset وsizes وwidth وheight بما يطابق النسبة الحقيقية. تحصل الصورة الرئيسية في الجزء الظاهر قبل التمرير على fetchpriority="high" ولا تكون lazy؛ أعطِ fetchpriority لعنصر LCP الحقيقي فقط، وloading="lazy" decoding="async" لبقية الصور. 6. اكتب `favicon.svg` صغيرًا في جذر الموقع وأضف `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` إلى كل صفحة؛ وإذا كان هناك شعار PNG، فأنشئ apple-touch-icon باستخدام site_fetch مع resize="180x180" وimage_format="png". بدون favicon يسجّل المتصفح خطأ 404 لـ /favicon.ico وينخفض Best Practices إلى 96. 7. قواعد مدقّق HTML: ابدأ كل مستند بـ `<!DOCTYPE html>` بأحرف كبيرة، وضع السمات بين علامات اقتباس مزدوجة، واستخدم `&nbsp;` للمسافات في النص المرئي لروابط tel:، ولا تستخدم سمة style="" أبدًا (إذا احتجت إلى متغير CSS فاستخدم فئة خاصية اعتباطية من Tailwind مثل `[--r:-4deg]`)، وأعطِ كل زر type="button"، ولا تضع aria-label على عناصر بلا role مثل `<ul>` أو `<div>`، واستخدم `<section aria-label="...">` بدلًا من role="region". 8. إذا كان تذييل الصفحة بخلفية سوداء، فاجعل روابطه كريمية مع تمرير ليموني، وأبقِ ارتفاع كل منها 44 بكسل على الأقل. SEO وAEO وGEO: 1. استخدم عناوين URL بنمط المجلدات مع شرطة مائلة في النهاية (/nasil-calisir/ و/fiyat/ و/hakkimizda/ و/iletisim/ و/gizlilik/ أو ما يقابلها بلغتك). املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. بالنسبة لشركة ناشئة بلا متجر فعلي، اضبط localBusiness:false في site.config.js. مخططات الصفحات: الرئيسية WebPage وFAQPage؛ كيف يعمل WebPage وFAQPage؛ الأسعار SoftwareApplication (مع applicationCategory وoperatingSystem وOffer لكل باقة) وFAQPage؛ من نحن AboutPage؛ التواصل ContactPage؛ وBreadcrumbList في الصفحات الداخلية. بما أنك لن تضيف مراجعات أو تقييمات للمستخدمين إلى SoftwareApplication، فقد لا تعرض Google نتيجة غنية للتطبيق؛ لا بأس بذلك، لا تختلق تقييمًا. اكتب كل مخطط خاص بصفحة في كتلة `<script type="application/ld+json">` خاصة به واربطه بالرسم الأساسي عبر @id. لا تضع BreadcrumbList داخل @graph؛ أبقِه في كتلة منفصلة، لأن هذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. العناوين من 48 إلى 60 حرفًا (يعتبر seo-check ما يزيد على 65 خطأ)، والأوصاف من 145 إلى 158 حرفًا، وh1 واحد لكل صفحة. المحتوى الرئيسي لكل صفحة 150 كلمة على الأقل. في العرض التجريبي جاءت صفحات من نحن والتواصل والخصوصية بين 113 و148 كلمة من المحاولة الأولى؛ أضف إليها معلومات حقيقية، مثل "ما الذي يجب تضمينه في طلب الدعم" أو "مع من تُشارك البيانات". 3. تجيب الفقرة الأولى في كل صفحة مباشرةً عن سؤال الصفحة، ويُصاغ h1 على هيئة هذا السؤال. اكتب الأسئلة الشائعة الخاصة بالصفحة بـ `<details>` ووسمها كـ FAQPage. أظهر الجهة الناشرة وتاريخ "آخر تحديث" بـ `<time datetime>`. 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 الصفحة والحركة متوقفة؛ وإذا لم يكن المحتوى مكتملًا في هذه اللقطة، فحالة عدم الحركة معطّلة. قد تظهر الصور الكسولة في الأسفل فارغة في لقطة الصفحة الكاملة؛ لا تعدّ ذلك خطأ، لكن تحقق من مساراتها. 3. نفّذ core_web_vitals لكل صفحة مع strategy="mobile" وstrategy="desktop". معيار القبول: على الجوال أن يكون Performance 95 على الأقل وAccessibility وBest Practices وSEO بقيمة 100؛ وعلى سطح المكتب أن تكون الأربعة 95 على الأقل، والهدف 100. للصفحة التي لا تحقق ذلك، ابحث عن الملف البطيء باستخدام resources=true وأصلحه وقِس مجددًا. ثم نفّذ seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا تحتوي قائمة طلبات الشبكة على أي عنوان خارج نطاقك (روابط المتجر وWhatsApp روابط وليست طلبات). 4. لا تمرير أفقي عند عرض 360 و390 و768 و1440 بكسل، وأهداف اللمس 44 بكسل على الأقل، ولا أخطاء في وحدة التحكم. فحص التفاعل: بما أن site_preview لا يستطيع عرض الحركة، أخبرني بما يجب أن أراقبه في متصفحي: يرتفع الزر إلى الأعلى واليسار عند التمرير ويغوص في ظله عند الضغط؛ تُلصق الملصقات بلطف أثناء تحميل الصفحة؛ يظهر التنقل بمفتاح Tab حلقة تركيز سوداء سميكة على كل رابط؛ وعند تفعيل تقليل الحركة في نظام التشغيل لا يتحرك شيء لكن الملصقات تبقى مائلة؛ ومع إيقاف JavaScript تظل قائمة الجوال تُفتح. بعد النشر: اعرض معاينة للقاعدة `/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)، ونتائج البوابات، وقائمة الإصلاحات التي طبّقتها.