أنشئ صفحة D2C لمنتج واحد: عرض ثلاثي الأبعاد، ومحدد ألوان بلا إزاحة في التخطيط، وشريط شراء ثابت

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. أنشئ صفحة منتج مباشرة للمستهلك مع بضع صفحات داعمة لـ [اسم العلامة التجارية]، وهي علامتي التجارية ذات المنتج الواحد، على موقع [اسم الخادم] في خادم استضافة Opus Growth الخاص بي. المنتج: [اسم المنتج، وماذا يفعل، ولمن]. السعر: [السعر]. الألوان أو الخيارات: [لكل خيار اسم ورمز لون ورابط صورة مأخوذة من الزاوية نفسها وعلى اللوحة نفسها]. المواصفات: [الأبعاد والمادة والوزن وأرقام الأداء مع ظروف اختبارها]. الطرازات للمقارنة: [طرازاتك الأخرى وأرقامها]. رابط الشراء: [URL المتجر ومعامل الخيار]. الشحن والإرجاع والضمان: [المدد والشروط]. التواصل: [البريد الإلكتروني]، [الهاتف]، [رقم WhatsApp]، [العنوان]. النطاق: [النطاق]. الصفحات: الصفحة الرئيسية للمنتج (/)، والضمان والإرجاع (/garanti-ve-iade/)، والتواصل (/iletisim/)، والخصوصية (/gizlilik/)، و404.html. أقسام الصفحة الرئيسية بالترتيب: القسم الرئيسي (عرض ثلاثي الأبعاد على اليسار؛ وعلى اليمين تسمية وh1 ومقدمة من جملتين والسعر ومحدد الألوان وزر الشراء وملخص للشحن والإرجاع والضمان)، وثلاثة أقسام قصيرة عن طريقة عمل المنتج، وجدول المواصفات (#ozellikler)، وجدول مقارنة الأحجام أو الطرازات (#karsilastir)، والأسئلة الشائعة (#sss). تربط القائمة بهذه الأقسام داخل الصفحة نفسها إضافة إلى صفحتي الضمان والتواصل. لا توجد في هذا الموقع سلة تسوق ولا صفحة دفع؛ يوجه زر الشراء إلى صفحة المتجر مع الخيار المحدد، وتذكر الصفحة ذلك بوضوح. الأسلوب: صفحة منتج نظيفة وعصرية مباشرة للمستهلك. خلفية بيضاء دافئة مائلة للكريمي، ولون واحد للعلامة يتناسب مع المنتج، وزر شراء أسود بحواف دائرية، وجداول نظيفة. الخطوط: خط عناوين Grotesk محكم من Fontshare (مثل Familjen Grotesk بوزني 500 و700) مع خط نص مقروء (مثل Ranade بوزني 400 و500). صورة المنتج هي النجمة؛ احتفظ بالجرأة للعرض ثلاثي الأبعاد. لا يتم تحميل GSAP وLenis وSwiper؛ وجافاسكريبت الوحيد هو سكربت مضمّن حجمه أقل من 1 KB يميل العرض. قواعد العرض ثلاثي الأبعاد ومحدد الألوان وشريط الشراء (اتبعها حرفيًا): 1. ابنِ العرض ثلاثي الأبعاد بـ CSS: `perspective: 1100px` على الحاوية، و`transform: rotateX(var(--rx, 3deg)) rotateY(var(--ry, -7deg))` و`transform-style: preserve-3d` على البطاقة الداخلية، وانتقال للـ transform مدته 0.3 ثانية. بدون جافاسكريبت وعلى شاشات اللمس تبقى البطاقة في هذه الوضعية المائلة قليلًا. تطفو شارتان صغيرتان (مثل السعة ورقم أداء) أمام البطاقة بـ `translateZ(60px)` وتكونان aria-hidden؛ والمعلومات نفسها موجودة أيضًا في النص. ضع إضاءة ناعمة تتبع المؤشر فوق الصورة (radial-gradient تتحكم فيه --gx و--gy). 2. السكربت المسؤول عن الميل مضمّن في نهاية الصفحة ويعمل فقط عندما يتحقق `matchMedia("(pointer: fine) and (prefers-reduced-motion: no-preference)")`. عند pointermove يحوّل موضع المؤشر داخل البطاقة إلى قيمة من -0.5 إلى 0.5، ويضبط --ry بحد أقصى 8 و--rx بحد أقصى 6 درجات، ويحدّ من عمليات الكتابة بـ requestAnimationFrame؛ وعند pointerleave يزيل المتغيرات ويعود إلى الوضعية الافتراضية. يتغير الـ transform فقط ولا يتحرك التخطيط أبدًا. أضف الخاصية data-reveal="tilt" إلى حاوية العرض ليتعرف design-check على الحركة. 3. ابنِ محدد الألوان بدون جافاسكريبت: داخل `<fieldset>` و`<legend>`، عنصر `<input type="radio" name="colour">` حقيقي لكل خيار داخل `<label>` بحجم 44x44 بكسل؛ يكون الـ radio مخفيًا بصريًا (sr-only)، وتحصل نقطة اللون على حلقة مزدوجة عبر `input:checked + .dot` وعلى حلقة تركيز عبر `input:focus-visible + .dot`؛ وتغيّر مفاتيح الأسهم اللون. توضع جميع صور الخيارات فوق بعضها في صندوق `aspect-ratio` نفسه مع `position: absolute; inset: 0`، ويتغير `opacity` فقط، فلا يتحرك التخطيط عند تغيير اللون (CLS يساوي 0 في العرض التجريبي). اعكس الاختيار باستخدام `.product:has(#r-colour:checked)` على الصورة، واسم اللون في الـ legend، ورابط الشراء. إذا كان المتصفح لا يدعم :has، تبقى صورة الخيار الافتراضي واسمه ورابطه ظاهرة. 4. صورة الخيار الافتراضي هي عنصر LCP: fetchpriority="high" وبدون lazy. تحصل صور الخيارات الأخرى على loading="lazy" decoding="async". يجب أن تُلتقط صور الخيارات من الزاوية نفسها وعلى اللوحة نفسها وبالاقتصاص نفسه؛ وإلا فسيقفز المنتج عند تغيير اللون. اسألني عن ذلك بدلًا من محاولة مطابقة صور بزوايا مختلفة عبر الاقتصاص. 5. لا تدع قيمة `display` في فئة زر مثل `.btn-buy` تتجاوز ظهور روابط الشراء الخاصة بالخيارات. في العرض التجريبي تم تجاوز القاعدة `.vb { display: none }` بواسطة `.btn-buy { display: inline-flex }` الواردة بعدها، فظهرت أزرار الشراء الأربعة معًا؛ اكتب القاعدة بمحدد أكثر تحديدًا مثل `.product :is(.vb)` وتحقق في المتصفح من أن زرًا واحدًا فقط يظهر. 6. شريط شراء ثابت على الجوال: أقل من 768 بكسل، شريط بـ `position: fixed; bottom: 0` يعرض اسم المنتج وسعره واسم اللون المحدد وزر "اشترِ" واحدًا (بارتفاع 48 بكسل على الأقل). اجعل نص الزر قصيرًا وفي سطر واحد (`whitespace-nowrap`)؛ وضع اسم اللون داخل الزر كنص sr-only لقارئات الشاشة. أعطِ الـ body حشوة سفلية تساوي ارتفاع الشريط حتى لا يغطي الشريط المحتوى أو التذييل، وتأكد من أن آخر رابط في أسفل الصفحة يبقى فوق الشريط. يكون الشريط مخفيًا على سطح المكتب. 7. الجداول: يحتوي جدول المواصفات على رؤوس صفوف `<th scope="row">` وعنصر `<caption>` مخفي بصريًا وجملة توضح ظروف الاختبار (مثل درجة حرارة الغرفة والغطاء مغلق). في جدول المقارنة قارن طرازاتك أنت فقط، دون أسماء منافسين أو ادعاءات عنهم؛ وأبرز الطراز المعروض للبيع بلون خلفية دون الاعتماد على اللون وحده. غلّف الجدول في `<section aria-label="..." tabindex="0" class="overflow-x-auto">` حتى لا يفيض أبدًا على الشاشات الضيقة؛ ولا تكتب role="region" لأن html-validate يعتبره prefer-native-element. الإعداد والأخطاء المعروفة (كلٌّ منها كلّف نقاطًا أو أفشل بوابة في قياس العرض التجريبي، فلا تتجاوزها): 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. إذا حددت نقاط الألوان بفئات قيم اعتباطية مثل `bg-[#28385C]` فستُجمَّع لأنها تظهر في HTML. 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. أبقِ اسم النشاط والعنوان والهاتف في التذييل كنص عادي، واجعل ارتفاع روابط التذييل ومسار التنقل 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" لبقية الصور. نزّل صور الخيارات بنسبة 4:5 مع resize="480x" و"720x" و"960x". 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. قد يشير تدقيق أهداف اللمس إلى أن الـ radio المخفي بصريًا بحجم 1 بكسل؛ هدف اللمس الحقيقي هو الـ label المحيط به. تحقق من أن الـ label بحجم 44x44 بكسل على الأقل ودوّن السبب في التقرير. SEO وAEO وGEO: 1. استخدم عناوين URL بنمط المجلدات مع شرطة مائلة في النهاية (/garanti-ve-iade/ و/iletisim/ و/gizlilik/ أو ما يقابلها بلغتك). املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. بالنسبة لعلامة بلا متجر فعلي، اضبط localBusiness:false في site.config.js. الصفحة الرئيسية: ItemPage (وmainEntity هو المنتج)، ومخطط المنتج، وFAQPage. مخطط المنتج: مع خيار واحد، Product وOffer؛ ومع خيارات ألوان، ProductGroup (productGroupID وvariesBy https://schema.org/color وbrand وdescription وmaterial) وداخل hasVariant عنصر Product لكل لون (sku وcolor وimage) مع Offer (price وpriceCurrency TRY وavailability وitemCondition ورابط متجر الخيار كـ url وseller @id وshippingDetails مع OfferShippingDetails وhasMerchantReturnPolicy مع MerchantReturnPolicy). انشر MerchantReturnPolicy نفسه مع @id الخاص به في كتلة مستقلة في صفحة الضمان والإرجاع. أضف GTIN أو التقييمات أو المراجعات فقط إذا كانت لديّ قيم حقيقية. اكتب كل مخطط خاص بصفحة في كتلة `<script type="application/ld+json">` مستقلة واربطه بالرسم الأساسي عبر @id. لا تضع BreadcrumbList داخل @graph؛ أبقِه في كتلة مستقلة، لأن هذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. العناوين من 48 إلى 60 حرفًا (يعتبر seo-check ما فوق 65 خطأ)، والأوصاف من 145 إلى 158 حرفًا، وh1 واحد في كل صفحة. المحتوى الرئيسي لكل صفحة 150 كلمة على الأقل. في العرض التجريبي جاءت صفحات الضمان والإرجاع والخصوصية والتواصل بـ 141 و124 و106 كلمات في المحاولة الأولى، وأُكملت بمعلومات حقيقية مثل "خطوات الإرجاع" و"مع من تُشارك البيانات" و"ما يتطلبه طلب الضمان". 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 لا يستطيع إظهار الحركة أو النقرات، أخبرني بما يجب أن أراقبه في متصفحي: على سطح المكتب، عند تحريك الفأرة فوق المنتج تميل البطاقة نحو المؤشر مع طفو الشارتين أمامها، وتعود إلى الوضعية المائلة عند مغادرة الفأرة؛ والنقر على نقطة لون أو الضغط على مفتاح سهم يغيّر الصورة واسم اللون ورابط الشراء دون أن يتحرك أي شيء في الصفحة؛ ومع إيقاف جافاسكريبت يظل محدد الألوان يعمل؛ وعلى الهاتف يكون الشريط السفلي ظاهرًا دائمًا ولا يغطي الروابط في نهاية الصفحة؛ ومع تفعيل تقليل الحركة لا تميل البطاقة. بعد النشر: اعرض معاينة القاعدة `/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)، ونتائج البوابات، وقائمة الإصلاحات التي طبقتها.