أنشئ موقعًا لمنتج SaaS بشبكة bento على طراز Webflow ومفتاح تبديل للأسعار بين الشهري والسنوي

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على موقع [اسم الخادم] في خادم استضافة Opus Growth الخاص بي، ابنِ موقعًا تسويقيًا ثابتًا وسريعًا لمنتج البرمجيات الخاص بي [اسم المنتج] يشبه قوالب SaaS الحديثة على Webflow، دون استخدام Webflow. المنتج: [ما يقدمه ولمن، في جملة واحدة]. الميزات الرئيسية: [ست ميزات، جملة واحدة لكل ميزة]. لقطات شاشة التطبيق: [روابط ثلاث لقطات شاشة وما تعرضه كل واحدة منها]. الخطط: [أسماء الخطط، الأسعار الشهرية والسنوية، هل الضريبة مشمولة، ما تشمله كل خطة]. شعارات العملاء التي لدي إذن كتابي بعرضها: [ملفات الشعار أو "لا يوجد"]. آراء العملاء: [اقتباس معتمد، الاسم، المسمى الوظيفي، الشركة أو "لا يوجد"]. الشركة: [الاسم القانوني]، [العنوان]، [الهاتف]، [البريد الإلكتروني]، [رقم WhatsApp]. مسار التسجيل أو العرض التجريبي: [URL صفحة التسجيل أو "طلبات العرض التجريبي عبر WhatsApp والبريد الإلكتروني"]. النطاق: [النطاق]. الصفحات: الصفحة الرئيسية (قسم رئيسي مع لقطة شاشة للمنتج، شريط الشعارات، شبكة بنتو للميزات، عرض المنتج بتبويبات، آراء العملاء، الأسئلة الشائعة، دعوة ختامية لاتخاذ إجراء)، الميزات (/ozellikler/، لكل ميزة عنوانها ومرساها الخاص)، الأسعار (/fiyatlar/: مفتاح تبديل، بطاقات الخطط، جدول مقارنة، أسئلة شائعة عن الفوترة)، التواصل (/iletisim/، بلا نموذج؛ بريد إلكتروني، وWhatsApp برسالة معبأة مسبقًا، وهاتف)، الخصوصية (/gizlilik/) وصفحة 404.html. الأسلوب: SaaS حديث بخلفية فاتحة. إذا لم تُحدَّد [تفضيل اللون]، فاستخدم خلفية بيضاء مائلة إلى الدفء، ونصًا بلون الحبر الأسود، ولونًا مميزًا ساطعًا واحدًا (يُستخدم كخلفية فقط، مع نص داكن فوقه). وزنان من عائلة خطوط Fontshare واحدة (مثل Satoshi 400 و700). بلاطات بنتو كبيرة بزوايا مستديرة، وأزرار على شكل حبوب، ولقطة شاشة المنتج داخل إطار نافذة داكن. بلا تدرجات من البنفسجي إلى الأزرق وبلا تأثير زجاجي في كل مكان. قواعد التفاعل (تفاعلات Webflow دون مكتبة): 1. لا يتم تحميل GSAP وLenis وSwiper. اكتب التفاعلات بـ CSS إضافة إلى ملف JS واحد بلا مكتبات لا يتجاوز 3 KB، يُحمَّل بالسمة defer في الصفحة الرئيسية فقط. لا يحتاج مفتاح تبديل الأسعار إلى أي سكربت. 2. شبكة بنتو: شبكة CSS من 4 أعمدة على سطح المكتب، مع بلاطة واحدة بحجم 2x2 وبلاطتين بعرض عمودين، مرتبة بحيث لا تبقى أي خلية فارغة؛ وعمود واحد على الجوال. تحمل كل بلاطة رابطًا حقيقيًا إلى العنوان المطابق في صفحة الميزات، وتكون البلاطة بأكملها قابلة للنقر: أعطِ الرابط ::after مع inset:0 (رابط ممتد) ولا تضع رابطًا ثانيًا داخل البلاطة. عند تمرير المؤشر وعند :focus-within يصبح الإطار أغمق، وترتفع البلاطة 4 بكسل باستخدام transform، ويتحرك الجزء الصغير من الواجهة داخلها (قائمة خطوات تنزلق جانبيًا، وأعمدة تنمو باستخدام scaleY). 3. يستخدم شريط الشعارات فقط شعارات العملاء الذين أعطوا إذنًا كتابيًا؛ وإذا لم يوجد أي منهم، فاترك القسم خارج الصفحة ولا تستبدله بشعارات وهمية أو بقائمة "تكاملات" مختلقة. يتكون الشريط من نسختين من القائمة نفسها (الثانية بالسمة aria-hidden="true") تتحركان بـ @keyframes translate3d(-50%, 0, 0) في CSS؛ ويتوقف عند تمرير المؤشر وعند التركيز. ولأن الحركة تستمر أكثر من خمس ثوانٍ، تشترط WCAG 2.2.2 زر "إيقاف الشريط مؤقتًا": يكون الزر مخفيًا في HTML، ويُظهره JS ويحدّث aria-pressed وتسميته. أعطِ الصف الذي يحتوي الزر min-height يساوي ارتفاع الزر؛ ففي العرض التجريبي كان الصف يكبر عند ظهور الزر، وقيس انزياح صغير (CLS 0.002) على سطح المكتب. مع prefers-reduced-motion تتوقف الحركة، وتُخفى النسخة الثانية، وتتحول الشعارات إلى شبكة ثابتة تلتف على عدة أسطر. 4. عرض المنتج بتبويبات: في HTML تكون التبويبات روابط داخل الصفحة إلى اللوحات (href="#ekran-x") وتكون اللوحات الثلاث ظاهرة جميعها واحدة تحت الأخرى، فيكتمل المحتوى مع تعطيل JS وللزواحف. أعطِ حاوية التبويبات role="group" وaria-label. يحوّلها JS إلى role="tablist" و"tab" و"tabpanel"، ويدير aria-selected وaria-controls وtabindex وhidden، ويدعم السهمين الأيسر والأيمن وHome وEnd، ويحدد التبويب المطابق عند فتح الصفحة مع #ekran-x. تقع اللوحات أسفل الشاشة الأولى، لذا لا يسبب إخفاؤها أي انزياح في التخطيط؛ وتستخدم صور اللوحات loading="lazy". 5. يعمل مفتاح تبديل الأسعار دون JS: زرا اختيار (radio) داخل fieldset (شهري محدد افتراضيًا) وقواعد مثل `.pricing:has(#donem-yillik:checked) .price-m { display: none }` تُظهر الأسعار السنوية. أخفِ زر الاختيار بصريًا لكن أبقِ التسمية كلها قابلة للنقر وقابلة للوصول بلوحة المفاتيح؛ وأظهر حلقة التركيز باستخدام `label:has(input:focus-visible)`. في العرض الشهري تعرض كل خطة سطر "تُحاسَب سنويًا: X TL"، بحيث يكون السعران موجودين في النص. 6. تأتي آراء العملاء فقط من اقتباسات معتمدة يمكن التحقق منها بالاسم والمسمى الوظيفي والشركة. إذا لم يكن لديك أي منها، فاحذف القسم؛ وإذا استخدمت واحدًا أثناء المسودة، فاجعله بطاقة نائبة بحدود متقطعة تذكر أنها ستُملأ عند وصول اقتباس حقيقي، واسألني قبل النشر. لا تكتب schema من نوع Review أو aggregateRating. 7. لقطة شاشة المنتج في القسم الرئيسي هي عنصر LCP على سطح المكتب: fetchpriority="high"، دون lazy، مع sizes يحدد عرضها الفعلي. على الجوال يكون LCP عادةً نص العنوان؛ ومع ذلك يجب أن تحمّل لقطة الشاشة نسختها بعرض 480 بكسل عبر srcset. Schema: SoftwareApplication في الصفحة الرئيسية وصفحة الأسعار (name وapplicationCategory "BusinessApplication" وoperatingSystem وurl وimage وpublisher وعرض Offer واحد لكل خطة ولكل فترة فوترة: name وprice وpriceCurrency "TRY" وurl). تشترط Google وجود تقييم أو مراجعة لعرض النتيجة المنسقة لتطبيق البرمجيات؛ وبدون مراجعات حقيقية تُجمع على موقعك الخاص لن تظهر نجوم، ولا يجوز حل ذلك بتقييم مختلق. FAQPage في الصفحة الرئيسية والميزات والأسعار، وContactPage في التواصل، وBreadcrumbList في الصفحات الداخلية. تجيب الفقرة الأولى من صفحة الأسعار مباشرة: "تبدأ أسعار [اسم المنتج] من N TL شهريًا". جدول المقارنة هو `<table>` حقيقي ويتمرر أفقيًا على الشاشات الضيقة داخل `<section tabindex="0" aria-label="...">`؛ وفي العرض التجريبي تسبب div بالسمة role="region" في تنبيه prefer-native-element، وتسبب قسمان موسومان بالعنوان نفسه في تنبيه unique-landmark. الإعداد والمزالق المعروفة (كلٌّ منها كلّف نقاطًا في قياسات العرض التجريبي، فلا تتجاوز أيًّا منها): 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 وقوالب `_src` وأي ملف JS يكتب أصناف CSS. يحتوي `_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 لكل وزن على حدة باستخدام site_fetch إلى `assets/fonts/`، واكتب قواعد @font-face مع `font-display: swap` في `assets/app.css`، فهو المكان الذي يبحث فيه design-check عن خط مخصص. تحقق من اسم font-family في CSS الذي نزّلته وتأكد أن العائلة تحتوي على الحروف التركية ı وİ وş وğ (Tanker لا تحتوي على ı). نفّذ preload لكل وزن مستخدم في الشاشة الأولى باستخدام `<link rel="preload" as="font" type="font/woff2" crossorigin>`، ويوضع قبل سطر ورقة الأنماط؛ وإذا زاد العدد على ثلاثة ملفات، فاستخدم أوزانًا أقل. في العرض التجريبي دفع وزن واحد للنص لم يُحمَّل مسبقًا قيمة LCP على الجوال إلى 2.6 ثانية وخفّض Performance إلى 97. معظم خطوط Fontshare تفتقر إلى رمز ₺، لذا اكتب الأسعار مع "TL". 4. اجعل القائمة والتذييل HTML ثابتًا. لا تحمّل chrome.js أو motion.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" إلى الرابط النشط. استخدم عناصر نائبة مثل `[[NAV]]` بدلًا من `{{...}}` ولا تمنح القوالب امتداد .html، وإلا عامل design-check وseo-check القوالب كصفحات غير مكتملة. ابنِ قائمة الجوال بعنصر `<details>` دون JS. أبقِ اسم النشاط والعنوان والهاتف نصًا عاديًا في التذييل، واجعل ارتفاع روابط التذييل وفتات التنقل 44 بكسل على الأقل. 5. حوّل الصور أثناء جلبها باستخدام site_fetch: اكتب الصورة نفسها كملفات منفصلة مع resize="480x" و"800x" و"1200x" وimage_format="webp" وquality=60 (لا يقص site_fetch الصور، لذا اطلب المصدر بالنسبة التي تحتاجها). أعطِ كل `<img>` سمات srcset وsizes وwidth وheight مطابقة للنسبة الحقيقية. الصورة التي تمثل عنصر LCP في الصفحة تأخذ fetchpriority="high" ولا تكون lazy؛ وكل صورة أخرى تأخذ loading="lazy" decoding="async". إذا ملأت صورة الشاشة الأولى على الجوال، فقدّم قصًّا أصغر للجوال باستخدام `<picture>`. 6. أضف `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` إلى كل صفحة وأنشئ apple-touch-icon بحجم 180 بكسل من الشعار باستخدام site_fetch مع resize="180x180". بدون رابط favicon يطلب المتصفح /favicon.ico ويسجل خطأ 404 وتنخفض Best Practices إلى 96. 7. قواعد مدقق HTML: ابدأ كل مستند بـ `<!DOCTYPE html>` بأحرف كبيرة؛ يجب أن تكون كل مسافة في النص المرئي لرابط tel: هي `&nbsp;`، بما فيها المسافة التي تلي بادئة مثل "اتصل:&nbsp;0212..."؛ لا تستخدم style=""؛ أعطِ كل زر type؛ ضع aria-label فقط على المعالم (landmarks) أو النماذج أو العناصر التفاعلية (على ul أو div بلا role كان ذلك خطأ)؛ لا تسمِّ معلمين باسم واحد؛ ولا تترك مسافات زائدة في نهاية الأسطر. 8. لا تتخطَّ مستويات العناوين: في صفحة قائمة، أدت عناوين البطاقات h3 مباشرة بعد h1 إلى خفض Accessibility إلى 98. عند إعادة استخدام بطاقة، حدد مستوى عنوانها لكل صفحة (h2 في صفحة القائمة، وh3 داخل قسم h2). 9. سمِّ سمة الحركة data-reveal (لا يتعرف design-check على الحركة إلا بهذا الاسم). يمنح JS الحالة الأولية المخفية فقط للكتل الموجودة أسفل الشاشة عند فتح الصفحة، ولا يخفي أبدًا محتوى الشاشة الأولى؛ استخدم transform، لأن التلاشي بـ opacity يخفض نتيجة فحص التباين. ضع السمة على الكتلة التي تحيط بعنوان ووصفه، لا على العنوان وحده؛ ففي العرض التجريبي انزلق عنوان ينتظر فوق الفقرة التي تحته. مع prefers-reduced-motion: reduce لا يُخفى شيء وتتوقف الحركات. SEO وAEO وGEO: 1. استخدم عناوين URL بنمط المجلدات مع شرطة مائلة في النهاية. املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. اكتب schema الخاص بكل صفحة في كتل `<script type="application/ld+json">` منفصلة مرتبطة بالرسم الأساسي عبر @id. لا تضع BreadcrumbList داخل @graph؛ أبقِه في كتلته الخاصة، فهذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. العناوين بحد أقصى 60 حرفًا (يعدّ seo-check أي عنوان أقل من 25 أو أكثر من 65 خطأ)، والأوصاف من 130 إلى 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)؛ فإذا كان هناك محتوى ناقص في تلك اللقطة، فالحالة الثابتة معطلة. في اللقطات الكاملة للصفحة قد تظهر عناصر ثابتة مثل شريط sticky في منتصف الصفحة وقد تكون الصور lazy الأبعد فارغة؛ لا تحسب ذلك أخطاء، لكن تحقق من مساراتها. 3. نفّذ core_web_vitals لكل صفحة مع strategy="mobile" وstrategy="desktop". معيار القبول: على الجوال Performance لا تقل عن 95 (الهدف من 99 إلى 100) وAccessibility وBest Practices وSEO بقيمة 100؛ وعلى سطح المكتب تكون الأربعة كلها 100. لأي صفحة لا تحقق المعيار، استخدم resources=true لإيجاد الملف الذي يؤخرها، وأصلحه ثم قِس مجددًا. بعد ذلك نفّذ seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا يبقى أي عنوان خارج نطاقك الخاص في قائمة طلبات الشبكة. 4. لا تمرير أفقي عند عرض 360 و390 و768 و1440 بكسل، وأهداف اللمس 44 بكسل على الأقل، ولا أخطاء في وحدة التحكم (console). فحص التفاعل: لا يستطيع site_preview عرض التمرير بالمؤشر (hover) ولا الحركة. أخبرني كيف أتحقق في متصفح سطح المكتب من أن بلاطات بنتو ترتفع عند تمرير المؤشر وعند التركيز بمفتاح 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)، ونتيجة كل بوابة، وقائمة بالإصلاحات التي طبقتها.