حكايات شارع 4
Lyon Arabic Display
خط العناوين والغلاف — Light · Regular · Medium
صباح الخير أنس، هذا ما أنجزته لك، وهذا الطريق الذي أقترح أن نكمله معًا.
قبل ما نتكلم عن السعر، حبيت أوضح لك وين وصلنا، وش اللي انبنى فعلًا، وكيف نحوّل التصميم الحالي إلى بيتك الرقمي الكامل.
مرحلتنا الآن
نهاية التصميم والنموذج المتقدم، وقبل البناء الإنتاجي.
رسالة صريحة قبل التفاصيل
يا أنس، بدأنا المشروع في يونيو وأنا كلي حماس، وما زلت على نفس الحماس لليوم. الطريق أخذ وقتًا أطول مما توقعنا: جزء منه فترة انتظار طبيعية على جاهزيتك بين يوليو وسبتمبر وانشغالك، وجزء منه أني ما حبيت أطلع لك شي سريع ما يشبهك — رجعت للفكرة أكثر من مرة، حللت كلامك وصورك ومواد الكتاب، وجربت اتجاهات كثيرة حتى صار عندنا أساس يستحق أن يتحول إلى منتج حقيقي.
حتى الآن صرفت تقريبًا 5 إلى 6 أيام عمل فعلي: التصميم والهوية والصفحات، عالم خوص وأغلفتِه ورسوماته، إصلاح العربية واتجاه RTL على الجوال، والتدقيق التقني.
استعنت بأدوات مدفوعة عالية المستوى: Claude بنماذج Opus 5 وFable، وCodex بنموذج Astra، إضافة إلى Higgsfield لتوليد الصور ومعالجتها. هذه الأدوات سرّعت التجربة، لكنها لم تستبدل القرارات والمراجعة والاختبار.
- 5 إلى 6
- أيام عمل فعلي موزعة على التصميم والكتاب والتدقيق
- 14
- صفحة HTML في النموذج الحالي
- 22
- أصلًا بصريًا جاهزًا في نسخة العرض
- 12
- صفحة تم ضبطها للجوال والاتجاه العربي
نماذج من اللي انبنى فعلًا
النظام البصري كامل — الهوية، الألوان، الخطوط، وكل تفاصيل التصميم — يعيش الآن في نسخة حية تقدر تتفرج عليها بنفسك: anasaq-showcase.pages.dev
هذا نظام الألوان الكامل اللي انبنى عليه كل شيء في anasaq.me — من ورق الحكايات ورملها، إلى عودها ونحاسها، وأخضر الغابة اللي يشدها كلها.
أنس عبدالله القرني
Thmanyah Serif
خط الاقتباسات والعناوين الداخلية — Regular · Medium
بيتك الرقمي من أول حرف إلى آخر نقطة
Thmanyah Sans
خط النصوص والقراءة والواجهة — Light · Regular · Medium · Bold
وش أنجزت لك حتى الآن؟
الموجود ليس مجرد فكرة أو ملف عرض. عندنا نموذج بصري متقدم يحدد شخصية الموقع، أقسامه، تجربة الكتاب، واتجاه الحركة على الجوال والشاشات الكبيرة.
01
فلسفة الموقع وهويته
منزل رقمي على فلسفة دوائرك الثلاث — بدأت هنا، بُنيت هنا، مرّت من هنا، كُتبت هنا، على الرف، المشاهد، والتواصل — داخل هوية موحّدة تجمعك أنت ومشاريعك كلها.
02
صفحات وتجربة متجاوبة
14 صفحة HTML في نسخة العرض، مع إصلاحات خاصة لاتجاه RTL وتطبيق تحسينات الجوال على 12 صفحة تصميم.
03
عالم خوص
دراسات أغلفة كثيرة، نماذج نهائية، رسوم شارع 4، دمج توقيعك الحقيقي، قارئ صفحات عربي تجريبي، وترتيب صحيح لفتح الكتاب من اليمين.
04
تصور الشراء
واجهة مبدئية لنسخ الكتاب والسلة وإتمام الطلب والتنبيه عند التوفر. الربط الحقيقي — إدارة المتجر والمخزون والطلبات والشحن من لوحة التحكم — جزء البناء الإنتاجي التالي.
05
نسخ منشورة واختبارات
نُشرت نسخ تجريبية على Cloudflare، وتمت مراجعة الخطوط والروابط وسجل أخطاء المتصفح، مع ثلاث جولات نشر رئيسية في مرحلة الكتاب. شاهد نسخة العرض الحالية.
رحلة المشروع، ومرحلتنا الآن
فهم الفكرة
تحليل رسالتك، تقسيم دوائر الهوية، اختيار العربية أولًا، وتثبيت فكرة الهوية الموحدة.
النموذج الأول
بناء الصفحات والنظام البصري، ثم نشر أول نسخة عامة لمراجعة الاتجاه معك.
فترة انتظار
بقيت متحمسًا للمشروع طول الوقت، وتوقف الإيقاع مؤقتًا بانتظار جاهزيتك وانشغالك — لين ما رجعنا مع بعض في سبتمبر بكامل الطاقة.
خوص والتدقيق
تطوير الغلاف والرسومات والتوقيع، إصلاح RTL والجوال، وتجهيز أصول الكتاب.
قرار البناء
التصميم المتقدم موجود. الخطوة التالية: منصة إنتاجية، لوحة إدارة، متجر ودفع حقيقي.
نقطة صريحة: صفحة المدونة الجديدة
في آخر لقاء طلبت مدونة تكتب فيها بشكل مستمر. التصميم الحالي انبنى قبل هذا الطلب، وما لها صفحة بين الأربع عشرة صفحة — وهذي فجوة التصميم الوحيدة، ورح نصممها من نفس الهوية في المرحلة الأولى.
اقتراحي نسميها «المجلس» — مجلس البيت اللي تستقبل فيه ضيوفك وتحكي معهم — وبديل ثاني «أكتب هنا» على نمط غرف بيتك. الاختيار عندك، وهو أول بند في واجب المدونة تحت.
تفاصيل تقنية صريحة عن الملفات والإصدارات
مجلد المشروع الحالي ليس مستودع Git، ولذلك عدد الـ commits الموثقة فيه حتى الآن هو صفر، وكل العمل الموجود يُعد عملًا غير موثق بإصدارات برمجية بعد. الموجود فعليًا: 61 ملفًا محليًا في نسخة النشر، 14 صفحة HTML، 22 أصلًا بصريًا، و63 ملفًا لمواد الكتاب بحجم يقارب 345 ميغابايت. أول خطوة في البناء الإنتاجي ستكون تنظيم المشروع داخل Git وتوثيق كل مرحلة بإصدار واضح.
القرار التقني بعد إعادة التفكير
المطلوب صار منصة تديرها بنفسك، مو صفحات للعرض فقط — وهذا هو اللي غيّر القرار التقني.
سنستخدم React وTypeScript داخل 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، ثم شهر دعم بعد الإطلاق.
الاعتماد لما: الفحوصات تمر، والدومين شغال باسمك، وتكون تدربت على اللوحة وإنت مرتاح لها.
المدة المتوقعة: 7 إلى 9 أسابيع حسب جاهزية المواد واعتماد حساب الدفع. وتقدر توقف بعد أي مرحلة وتستلم كل ما انبنى حتى تلك اللحظة. نمشي بهدوء، وبدون ما نضغطك على تجهيز كل شيء من أول يوم.
السعر؟ الرقم عندك أنت
كل ما فوق موثق بتفاصيله، وكل ما سيُبنى مكتوب بمراحل واضحة، ولذلك تركت التسعير لك. اقرأ العرض براحتك، وحدد القيمة التي تراها عادلة؛ أنا أثق في تقديرك.
السطر هذا لك:
ريال
رقمك يشمل: التصميم المنجز، البناء الكامل، لوحة الإدارة، المتجر، ربط الدفع، الإطلاق، التدريب، وشهر دعم بعد الإطلاق.
- الرقم اللي تكتبه ينقسم على أربع دفعات، دفعة مع بداية كل مرحلة
- حصة كل دفعة على حجم عمل مرحلتها: الأساس الإنتاجي 20% · لوحة الإدارة 35% · المتجر والدفع 30% · الإطلاق وشهر الدعم 15%
- تقدر توقف بعد أي مرحلة — وكل ما انبنى ملكك بالكامل
- لا رسوم مفاجئة: الرسوم الخارجية الوحيدة موضحة تحت
الدومين والاستضافة ورسوم بوابة الدفع والشحن تدفعها للخدمات مباشرة بسعرها الفعلي، بدون زيادة مني — وكلها مفصلة في القسم اللي تحت.
التكاليف المتوقعة على حسابك
ما فيه رسوم شهرية مني فوق رقمك. الحسابات الخارجية هذي تصرفها أنت مباشرة لمقدميها، وكلها تقريبًا تبدأ مجانًا:
-
Cloudflare
الاستضافة والشبكة — تكفي للإطلاق وطويلًا بعده.
مجانًا -
Supabase
قاعدة البيانات — نرقّيها فقط إذا كبرت بياناتك.
مجانًا حاليًا -
الدومين anasaq.me
تشتريه باسمك ويتجدد سنويًا.
نحو 120 ريال سنويًا -
تخزين الصور Cloudflare R2
والتوسع لاحقًا برسوم رمزية.
مجانًا للبداية -
بريد الموقع ورسائل الطلبات
يكفي لتأكيد الطلبات والتواصل.
مجانًا -
بوابة الدفع (Moyasar أو Stream)
ميسر اقتراحي الأساسي: بدون رسوم شهرية، والنسبة تتأكد مع فتح حساب التاجر — عادة بين 1.5% و2.5% + نحو ريال واحد لمدى، وحوالي 2.5% إلى 3% للبطاقات وApple Pay. ستريم يعمل باشتراك شهري أو دفع حسب الاستخدام فوق رسوم البوابة، وسعره بعرض مباشر.
نسبة من كل عملية -
السجل التجاري أو شهادة عمل حر وحساب التاجر
مرة واحدة لتفعيل الدفع.
حسب وضعك
الواجب: وش أحتاج منك الآن؟
واجب كل غرفة على فلسفة دوائرك الثلاث — وما نحتاجه كله قبل البداية؛ كل مرحلة لها واجبها الصغير مثل ما اتفقنا.
الصفحة الرئيسية
- صورتك الشخصية بدقة عالية
- سطر التعريف تحت اسمك: «Builder of Ideas, Places & Stories» أو «أبني الأفكار والأماكن والحكايات» — أو صياغتك الخاصة
- ترتيب الغرف المفضل عندك في القائمة
بدأت هنا — مشاريعك الخاصة
- المربى وملحقاته: قصة كل منتج وصوره — «حين تتحول القصة إلى منتج يعيش بين يديكم»
- ذرى: فكرة إعادة تقديم الضيافة السعودية بصورتها المعاصرة كاملة
- وداد والمشاريع القادمة: وش يظهر الآن، وش ينتظر وقته
بُنيت هنا — اللي أنت فيها ومستمر
- رحى المكان: الفروع، الحملات، المنتجات، والمشاريع الخاصة بالعلامة
- الإنجازات والأرقام اللي تفتخر فيها
- غير رحى من مشاريعك المستمرة؟ وش تبي يدخل
مرّت من هنا — بصمات بلا توقيع
- لكل علامة مررت بها: اسمها، فلسفة منتجاتها، وصورها
- أثرك فيها: تطوير المنيوهات، منتج موسمي، تجربة عميل، تحسين تشغيل، فكرة حملة، أو تطوير هوية
كُتبت هنا — خوص
- من مواد الكتاب الكاملة عندي أجهز: النبذة، الشخصيات، المقتطفات، الصور، ورحلة الكتاب وفلسفته — واختياراتك واعتمادك النهائي
- العنوان: «خوص | حكايات شارع 4»
- سعر النسخة الإلكترونية والورقية الموقعة، والمخزون الأولي
على الرف — أفكار تنتظر وقتها
- الرسومات اليدوية اللي تبي تعرضها
- أفكار المنتجات والمشاريع المستقبلية المرشحة للرف
المشاهد
- صورك مصنفة: أماكن، مشاريع، منتجات، رحلات، خلف الكواليس
- وصف قصير لكل مشهد
- تأكيد حقوق استخدام كل صورة
المجلس — المدونة الجديدة
- اختيار الاسم: «المجلس» أو «أكتب هنا» أو اقتراحك
- أول 3 إلى 5 مواضيع تحب تفتح بها
- وتيرة النشر المريحة لك
التواصل والخدمات
- قنواتك الرسمية: بريد وواتساب للأعمال
- الخدمات اللي تبيعها: استشارات وجلسات حجز — نطاق كل خدمة وسعرها
- أوقات تفرغك للمعاينات والحجز
حسابات وتجهيزات تنعمل مرة واحدة — وكلها باسمك
- شراء الدومين anasaq.me باسمك (نحو 120 ريال سنويًا)
- حساب Cloudflare باسمك — الاستضافة والشبكة
- حساب Supabase باسمك — قاعدة البيانات
- بريد الموقع ورسائل الطلبات (Resend أو مثله) + بريد رسمي مثل hello@anasaq.me
- السجل التجاري أو شهادة عمل حر وحساب التاجر لبوابة الدفع — وقتهما مرحلة المتجر، ما يحتاج اليوم
- جلسة المراجعة الأولى نثبت فيها الأولويات ونبدأ
كل حساب وكل ملف ينشأ باسمك من أول يوم، وأنا أرتب وأشغّل وأدربك عليه. والواجب مو اختبار: أي بند يصعب، نحله مع بعض.
أنا مؤمن بأنّ anasaq.me يستحق أن يكون بيتًا لك، لا مجرد موقع.
أتمنى أن يكون واضحًا في هذا العرض وين راح الوقت، وش القيمة الموجودة اليوم، وكيف نكملها بشكل يليق بك وبمشاريعك وحكاياتك. رأيك يهمني، ونضبط أي نقطة معًا بكل أريحية — ونلتقي ونحكي أكثر 🤍
أخوك، ماجد