حكايات شارع 4
Lyon Arabic Display
خط العناوين والغلاف — Light · Regular · Medium
صباح الخير أنس، هذا ما أنجزته لك، وهذا الطريق الذي أقترح أن نكمله معًا.
قبل ما نتكلم عن السعر، حبيت أوضح لك وين وصلنا، وش اللي انبنى فعلًا، وكيف بنحول التصميم الحالي إلى بيتك الرقمي الكامل: محتوى، صور، مقالات، كتاب، متجر، طلبات ودفع إلكتروني.
مرحلتنا الآن
نهاية التصميم والنموذج المتقدم، وقبل البناء الإنتاجي.
رسالة صريحة قبل التفاصيل
يا أنس، سامحني لأن المشروع أخذ وقتًا أكثر مما توقعت. ما حبيت أطلع لك شي سريع ما يشبهك، لذلك رجعت للفكرة أكثر من مرة، حللت كلامك وصورك ومواد الكتاب، وجربت اتجاهات كثيرة حتى صار عندنا أساس يستحق أن يتحول إلى منتج حقيقي.
حتى الآن صرفت تقريبًا 5 إلى 6 أيام عمل فعلي: نحو 3 إلى 4 أيام لبناء التصميم العام والهوية والصفحات، ويوم إلى يومين لصفحة الكتاب، الأغلفة، الرسومات، وإصلاح العربية واتجاه RTL على الجوال، والتدقيق التقني.
استعنت بأدوات مدفوعة عالية المستوى: Claude بنماذج Opus 5 وFable، وCodex بنموذج Astra، إضافة إلى Higgsfield لتوليد الصور ومعالجتها. هذه الأدوات سرّعت التجربة، لكنها لم تستبدل القرارات والمراجعة والاختبار. وتكلفة هذا المستوى حقيقية: الاشتراكات وحدها تجمع تقريبًا بين 200 و400 دولار شهريًا بحسب المستوى، وتوليد صور مشروعك أنفق 35 توليدًا استهلكت نحو 286 كريدت من باقة Higgsfield Ultimate، وملايين التوكنات اللي استهلكتها هالجلسات كانت ستكلف مئات الدولارات إضافية لو اشتغلت عبر الواجهات البرمجية بدل الاشتراكات. كل هذا دفعته أنا بالكامل، ولا أنتظر تعويضًا عنه.
أخوك، ماجد
- 5 إلى 6
- أيام عمل فعلي موزعة على التصميم والكتاب والتدقيق
- 14
- صفحة HTML في النموذج الحالي
- 22
- أصلًا بصريًا جاهزًا في نسخة العرض
- 12
- صفحة تم ضبطها للجوال والاتجاه العربي
نماذج من اللي انبنى فعلًا
النظام البصري كامل — الهوية، الألوان، الخطوط، وكل تفاصيل التصميم — يعيش الآن في نسخة حية تقدر تتفرج عليها بنفسك: anasaq-showcase.pages.dev
هذا نظام الألوان الكامل اللي انبنى عليه كل شيء في anasaq.me — من ورق الحكايات ورملها، إلى عودها ونحاسها، وأخضر الغابة اللي يشدها كلها.
أنس عبدالله القرني
Thmanyah Serif
خط الاقتباسات والعناوين الداخلية — Regular · Medium
بيتك الرقمي من أول حرف إلى آخر نقطة
Thmanyah Sans
خط النصوص والقراءة والواجهة — Light · Regular · Medium · Bold
وش أنجزت لك حتى الآن؟
الموجود ليس مجرد فكرة أو ملف عرض. عندنا نموذج بصري متقدم يحدد شخصية الموقع، أقسامه، تجربة الكتاب، واتجاه الحركة على الجوال والشاشات الكبيرة.
01
فلسفة الموقع وهيكله
تحويل فكرتك من «موقع شخصي» إلى منزل رقمي للأفكار والحكايات: بدأت هنا، بُنيت هنا، مرّت من هنا، كُتبت هنا، على الرف، المشاهد، والتواصل.
02
هوية بصرية موحّدة
نظام ألوان وخطوط وحركة يجمعك أنت، رحى، ذرى، خوص والمشاريع القادمة داخل هوية واحدة، بدل أن تصبح كل صفحة عالمًا منفصلًا.
03
صفحات وتجربة متجاوبة
14 صفحة HTML في نسخة العرض، مع إصلاحات خاصة لاتجاه RTL وتطبيق تحسينات الجوال على 12 صفحة تصميم.
04
عالم خوص
دراسات أغلفة كثيرة، نماذج نهائية، رسوم شارع 4، دمج توقيعك الحقيقي، قارئ صفحات عربي تجريبي، وترتيب صحيح لفتح الكتاب من اليمين.
05
تصور الشراء
واجهة مبدئية لنسخ الكتاب والسلة وإتمام الطلب والتنبيه عند التوفر. الربط الحقيقي بالمخزون والدفع والطلبات هو جزء البناء الإنتاجي التالي.
06
نسخ منشورة واختبارات
نُشرت نسخ تجريبية على Cloudflare، وتمت مراجعة الخطوط والروابط وسجل أخطاء المتصفح، مع ثلاث جولات نشر رئيسية في مرحلة الكتاب. شاهد نسخة العرض الحالية.
رحلة المشروع، ومرحلتنا الآن
فهم الفكرة
تحليل رسالتك، تقسيم دوائر الهوية، اختيار العربية أولًا، وتثبيت فكرة الهوية الموحدة.
النموذج الأول
بناء الصفحات والنظام البصري، ثم نشر أول نسخة عامة لمراجعة الاتجاه معك.
خوص والتدقيق
تطوير الغلاف والرسومات والتوقيع، إصلاح RTL والجوال، وتجهيز أصول الكتاب.
قرار البناء
التصميم المتقدم موجود. الخطوة التالية: منصة إنتاجية، لوحة إدارة، متجر ودفع حقيقي.
جاهز اليوم
- الرؤية، الهيكل، واللغة البصرية
- نماذج الصفحات الرئيسية
- أصول خوص والصور والرسوم
- تجربة عربية متجاوبة كنموذج
لم يبدأ إنتاجيًا بعد
- قاعدة البيانات وتسجيل الدخول
- لوحة إدارة المحتوى والوسائط
- المخزون والطلبات والشحن
- ربط بوابة الدفع والإطلاق على الدومين
تفاصيل تقنية صريحة عن الملفات والإصدارات
مجلد المشروع الحالي ليس مستودع Git، ولذلك عدد الـ commits الموثقة فيه حتى الآن هو صفر، وكل العمل الموجود يُعد عملًا غير موثق بإصدارات برمجية بعد. الموجود فعليًا: 61 ملفًا محليًا في نسخة النشر، 14 صفحة HTML، 22 أصلًا بصريًا، و63 ملفًا لمواد الكتاب بحجم يقارب 345 ميغابايت. أول خطوة في البناء الإنتاجي ستكون تنظيم المشروع داخل Git وتوثيق كل مرحلة بإصدار واضح.
القرار التقني بعد إعادة التفكير
في البداية كان Astro خيارًا منطقيًا لموقع تعريفي سريع وثابت. لكن المطلوب الآن صار منصة تديرها بنفسك، وليست صفحات للعرض فقط.
سنستخدم React وTypeScript فعلًا، لكن داخل Next.js. React يبني الواجهة، وNext.js يضيف الخادم والمسارات وتهيئة محركات البحث والأداء وإدارة البيانات في مشروع واحد. TypeScript يقلل الأخطاء عندما يكبر الموقع وتكثر المنتجات والطلبات والصلاحيات.
النتيجة: موقع سريع في الواجهة، ولوحة إدارة حقيقية في الخلف، وقاعدة بيانات ومتجر يمكن تطويرهما لاحقًا بدون إعادة البناء من الصفر.
- Next.jsالموقع والخادم
- React + TypeScriptالواجهة الموثوقة
- Payload CMSلوحة الإدارة
- PostgreSQLقاعدة بيانات المحتوى والطلبات
- Cloudflare R2الصور والملفات
- Moyasar أو Streamالدفع السعودي
لوحة التحكم الخاصة بك: مثل ووردبريس، لكن مفصّلة لاحتياجك
تدخل بحسابك من أي جهاز وتدير حرفيًا كل ما يظهر في الموقع. لا تحتاج الرجوع لمبرمج لتغيير صورة، إضافة مقال، تعديل سعر، ترتيب قسم أو متابعة طلب.
الصفحات والهوية
- تعديل النصوص والعناوين والصور
- إظهار وإخفاء وترتيب الأقسام
- القائمة والتذييل وروابط التواصل
- إعدادات الظهور في محركات البحث وصورة المشاركة
المقالات والحكايات
- كتابة المقال وحفظ المسودة
- المعاينة قبل النشر
- التصنيفات والوسوم والكاتب
- جدولة النشر والأرشفة
مكتبة الصور
- رفع الصور وتنظيمها داخل مجلدات
- قص وتحسين تلقائي للويب
- وصف عربي للصورة وحقوق الاستخدام
- إعادة استخدام الأصل في أكثر من صفحة
المشاريع والمشاهد
- إضافة مشروع جديد بكل تفاصيله
- ربطه بالقسم المناسب
- الأرقام، الشعارات، الصور والحالة
- التحكم في ترتيب الظهور
الكتاب والمتجر
- النسخ والأسعار والمخزون
- الطلبات والدفع والشحن
- الكوبونات والتنبيهات
- العملاء ورسائل تأكيد الطلب
الفريق والإعدادات
- حسابات وصلاحيات متعددة
- إعدادات الدومين والبريد
- سجل التعديلات والنسخ الاحتياطية
- إعدادات التواصل وسياسة المتجر
اللوحة ستكون عربية وRTL، بسيطة في الاستخدام، ومبنية على احتياجك الحقيقي بدل قوائم عامة لا تستعملها.
السلة والدفع: من اختيار المنتج إلى وصول الطلب
المتجر ليس زر شراء فقط. المطلوب مسار كامل يخدم أي منتج تبيعه — اليوم الكتاب، وغدًا ما بعده — يحفظ حق العميل، يثبت الدفع، ويعطيك أنت صورة واضحة لكل طلب من داخل اللوحة.
اختيار المنتج
السلة
العنوان والشحن
الدفع
تأكيد الطلب
المنتجات والنسخ
نبدأ بكتاب «خوص»: نسخة إلكترونية بسعر مناسب، ونسخة ورقية موقعة. والبناء نفسه يستوعب أي منتج جديد تضيفه لاحقًا من اللوحة بدون إعادة تطوير.
سلة حقيقية
إضافة وحذف وتعديل الكمية، حفظ السلة عند العودة، التحقق من المخزون، وتطبيق كوبون عند الحاجة.
إتمام طلب عربي
بيانات العميل، عنوان الشحن، المدينة، تكلفة التوصيل، ملخص واضح، والموافقة على السياسات قبل الدفع.
بوابة سعودية
اقتراحي Moyasar أو Stream، والقرار الأخير لك بما يريحك: كلاهما يدعم مدى وApple Pay وVisa وMastercard بحسب تفعيلها في حساب التاجر.
تأكيد آمن
إشعار مؤكد من بوابة الدفع حتى لا يُنشأ الطلب كمدفوع بالخطأ، مع رقم طلب ورسالة تأكيد بريدية.
إدارة ما بعد البيع
حالات الطلب، التجهيز، الشحن، الإلغاء أو الاسترجاع، وملاحظات العميل، كلها من لوحة واحدة.
تفعيل الدفع الفعلي يحتاج سجلًا تجاريًا وحساب تاجر ومستندات البوابة. رسوم بوابة الدفع والشحن والخدمات الخارجية تُدفع لمقدميها مباشرة وليست جزءًا من أتعاب التطوير.
كيف نكمل من هنا؟
نمشي على أربع مراحل واضحة، ونراجع معك كل مرحلة قبل الانتقال للي بعدها. التفاصيل مرنة لأن المحتوى وتفعيل الدفع مرتبطان بتجهيزاتك.
المرحلة الأولى
الأساس الإنتاجي
إنشاء Git، بناء Next.js وTypeScript، نقل التصميم القائم، ضبط العربية والجوال والأداء.
المرحلة الثانية
لوحة الإدارة
المحتوى والمشاريع والمقالات ومكتبة الصور والمستخدمون والصلاحيات وإعدادات الموقع.
المرحلة الثالثة
المتجر والدفع
المنتجات والسلة والمخزون والطلبات والشحن ورسائل البريد وربط بوابة الدفع.
المرحلة الرابعة
التجربة والإطلاق
اختبار الجوال والسرعة والظهور في محركات البحث والأمان، تدريبك على اللوحة، ربط anasaq.me، ثم شهر دعم بعد الإطلاق.
المدة المتوقعة للبناء الكامل: 5 إلى 7 أسابيع، تزيد أو تنقص حسب جاهزية الصور والنصوص واعتماد حساب الدفع. نمشي بهدوء، وبدون ما نضغطك على تجهيز كل شيء من أول يوم.
السعر؟ الرقم عندك أنت
يصعب علي أن أضع رقمًا على عمل أُنجز لصديق. كل ما فوق موثق بتفاصيله، وكل ما سيُبنى مكتوب بمراحل واضحة، ولذلك تركت التسعير لك. اقرأ العرض براحتك، وحدد القيمة التي تراها عادلة؛ أنا أثق في تقديرك، وأي رقم يريحك يريحني.
سعر هذا العرض يحدده
أنس
رقمك يشمل كل شيء: التصميم المنجز، البناء الكامل، لوحة الإدارة، المتجر، ربط الدفع، الإطلاق، التدريب، وشهر دعم بعد الإطلاق.
- الدفع على دفعات بالطريقة التي تريحك
- لا رسوم مفاجئة: الرسوم الخارجية الوحيدة موضحة تحت
متى ما حسمت رقمك، أرسله لي على واتساب ونبدأ الترتيبات. الدومين والاستضافة ورسوم بوابة الدفع والشحن تدفعها للخدمات مباشرة بسعرها الفعلي، بدون زيادة مني — وكلها مفصلة في القسم اللي تحت.
التكاليف المتوقعة على حسابك
ما فيه رسوم شهرية مني فوق رقمك. الحسابات الخارجية هذي تصرفها أنت مباشرة لمقدميها، وكلها تقريبًا تبدأ مجانًا:
-
Cloudflare
الاستضافة والشبكة — الباقة المجانية تكفي لمرحلة الإطلاق وطويلة بعدها.
مجانًا -
Supabase
قاعدة البيانات — الباقة المجانية تغطي احتياجنا الحالي، ونرقّيها فقط إذا كبرت بياناتك ومشاريعك عن سعتها.
مجانًا حاليًا -
الدومين anasaq.me
تشتريه باسمك من مسجل الدومينات ويتجدد سنويًا.
نحو 120 ريال سنويًا -
تخزين الصور Cloudflare R2
الباقة المجانية تسع مكتبة صورك الحالية، وأي توسع لاحق برسوم رمزية.
مجانًا للبداية -
بريد الموقع ورسائل الطلبات
الباقات المجانية تكفي لرسائل تأكيد الطلب والتواصل في البداية.
مجانًا -
بوابة الدفع (Moyasar أو Stream)
بدون رسوم ثابتة؛ خصم تقريبًا 2.5% + رسم بسيط لكل عملية بيع، يختلف بين البوابات.
نسبة من كل عملية -
السجل التجاري وحساب التاجر
رسوم حكومية تخصك، مطلوبة مرة واحدة لتفعيل بوابة الدفع.
حسب وضعك
وش أحتاج منك الآن؟
خمسة أشياء نبدأ بها، والباقي نجمعه مع تقدم العمل.
- اعتماد نصوص صفحة الكتاب والعنوان النهائي: «خوص | حكايات شارع 4».
- تثبيت سعر النسخة الإلكترونية والنسخة الورقية الموقعة، والمخزون الأولي.
- الصور والنصوص الأساسية لكل غرفة من غرف الموقع، ولو على دفعات.
- بيانات الدومين، والسجل التجاري وحساب التاجر عندما نصل لربط الدفع.
- جلسة مراجعة واحدة نثبت فيها الأولويات ونبدأ بعدها البناء الإنتاجي.
ما يحتاج تكون كل المواد كاملة من البداية. نبدأ بالأساس، وأرتب معك «واجبًا» صغيرًا لكل مرحلة مثل ما اتفقنا.
أنا مؤمن بأنّ anasaq.me يستحق أن يكون بيتًا لك، لا مجرد موقع.
سامحني على التأخير، وأتمنى أن يوضح لك هذا العرض أين راح الوقت، وش القيمة الموجودة اليوم، وكيف نكملها بشكل يليق بك وبمشاريعك وحكاياتك. رأيك يهمني، ونضبط أي نقطة معًا بكل أريحية.
أخوك، ماجد