ثلاثي اللغات · التسويقالألعاب · ما قبل التأسيس (Pre-Seed)

موقع Wahori

موقع عرض استثماري بثلاث لغات، وملخص للمستثمرين، وحضور لجمع التمويل لمشروع لعبة لتعلّم اللغات.

يونيو – يوليو 2026 نحو 3 أسابيع للإصدار v0

WAHORI

English Is How You Survive

اللغات: EN/AR/JP: 3
صفحات منشورة: 4
تبعيات في المجمل: 6

العميل: Wahori
القطاع: الألعاب · تعلّم اللغات
طبيعة التعاون: حضور على الويب لجولة تمويل
الحالة: قيد التنفيذ: أُطلق الإصدار v0
المدة: يونيو – يوليو 2026 · نحو 3 أسابيع للإصدار v0
النطاق: موقع هبوط ثلاثي اللغات، وملخص المستثمرين، وإطارا سجل البناء والبوابة

01 نظرة عامة

من هو العميل؟

Wahori مشروع ألعاب يقوده مؤسِّسه، يبني لعبة محاكاة حياة مريحة تكون فيها الإنجليزية وسيلتك للبقاء: تخيّل دفءًا قريبًا من Animal Crossing يحيط باكتساب جادّ للغة. تقوم الفكرة على «التجمّد»: تدرس الإنجليزية سبع سنوات، ثم تصل إلى فانكوفر فيسألك سائق التاكسي «What nationality are you?» (أي: ما جنسيتك؟) لا السؤال المألوف «Where are you from?» (من أين أنت؟) الذي أعدّك له كتابك المدرسي، فينعقد لسانك. سوقا الإطلاق هما الناطقون بالعربية والناطقون باليابانية، والمشروع يجمع جولة تمويل من الأصدقاء والعائلة والمستثمرين الملائكيين لتحمل اللعبة حتى مرحلة ألفا المغلقة. كانت مهمتنا بناء الحضور على الويب لهذه الجولة.

02 بيان المشكلة

ما المشكلة التي واجهوها؟

لعبة لا توجد في معظمها إلا كبنية وقناعة يجب أن يُشعَر بها لكي تُموَّل. فكرة Wahori الأساسية، وهي أن لحظة التجمّد حقيقية، وأن الإنجليزية المدرسية تفشل في التداولية، وأن اللعبة تستطيع أن تعلّم ما لا تعلّمه التطبيقات، يسهل أن يهزّ المرء رأسه موافقًا عليها في عرض تقديمي، ويسهل أن ينساها بعد ساعة. احتاج المشروع إلى موقع يجعل الزائر يعيش التجمّد بنفسه لا أن يقرأ عنه.

كان المطلوب تمويل شعور، لا قائمة ميزات
الأطروحة يسهل أن يهزّ المرء رأسه موافقًا عليها في عرض تقديمي ويسهل أن ينساها بعد ساعة. كان على الموقع أن يجعل الزائر يعيش لحظة التجمّد لا أن يقرأ وصفًا لها.
جمهوران، علامة واحدة، احتياجان متعاكسان
احتاج اللاعبون المحتملون، الناطقون بالعربية واليابانية، إلى أن يروا لغتهم تُعامَل باحترام لا كزينة تُرشّ عليها. واحتاج المستثمرون المحتملون إلى الأطروحة والسوق والميزة التنافسية وخارطة الطريق والطلب مرتبة كوثيقة لا كتجربة تمرير.
لا بنية تحتية للمصداقية في جولة الأصدقاء والعائلة
احتاج المشروع إلى سجل بناء علني يُظهر الزخم بين التحديثات، وبوابة خاصة يرى فيها المستثمرون الأموال المجمَّعة وتوزيعها مقابل الخطة ومدة التمويل: الشفافية التي تبقي الجولة المبكرة دافئة.
لا حضور على الويب إطلاقًا
كانت مواد المستثمرين عروضًا تقديمية فقط. لم يكن للجولة مدخل رئيسي يمكن الوصول إليه برابط، ولا وسيلة تتيح للاعب محتمل أن يلتقي بالفكرة الأساسية للمنتج قبل أن يوجد كلعبة.

03 الحل

كيف حللناها؟

بنينا الموقع كتطبيق Next.js صغير مصنوع بعناية له ثلاثة وجوه. صفحة الهبوط هي «التجمّد» مجسَّدًا: خمسة مشاهد مرتبطة بالتمرير تعمل بالكامل على عناصر التمرير الأساسية في Motion v12، وهو اختيار مقصود للاستغناء عن حزمة GSAP مع Lenis الأثقل المستخدمة في مشاريع أخرى، لأن التصميم احتاج إلى مشاهد مرتبطة بالتمرير لا إلى نظام كامل للجداول الزمنية للحركة.

العربية واليابانية في الموقع أساسيتان لا زخرفيتان. كل عبارة حقيقية ومدقَّقة وصحيحة في سياقها، وفق قاعدة موثَّقة في الشيفرة: لا نص «lorem ipsum» أبدًا ولا زخرفة أبدًا. يعمل الموقع كله بثلاث لغات: الإنجليزية هي الافتراضية، والعربية واليابانية لغتان أساسيتان، مع دعم كامل للكتابة من اليمين إلى اليسار للعربية. يقرأ وسيط على مستوى الطلب ترويسة Accept-Language التي يرسلها المتصفح عند الزيارة الأولى، ويزرع ملف تعريف ارتباط للغة وفق أفضل تطابق، ليصل الزائر الناطق بالعربية إلى الموقع بالعربية دون أن يلمس محدِّد اللغة.

صفحة العرض الاستثماري في /pitch هي ملخص المستثمرين على هيئة وثيقة: المشكلة، والفكرة، ولحظة المنتج، ولماذا الآن، والميزة التنافسية، والسوق، وخارطة طريق من أربع مراحل، والفريق، والطلب. وتؤطّر صفحتان إضافيتان ما سيأتي: سجل بناء علني في /progress وبوابة مستثمرين خاصة في /investors. أُطلقتا في الإصدار v0 كإطارين مصمَّمين ووظائفهما مؤجلة إلى المرحلة التالية، فتوجد الروابط والتأطير والتوقعات منذ اليوم الأول.

FE Next.js 16 صفحة الهبوط والعرض الاستثماري Motion v12الأولوية للمحتوى الثابت
PX proxy.ts اكتشاف اللغة Accept-Languageزرع ملف تعريف الارتباط
i18n LocaleProvider AR / JP مع RTL 3 لغاتمحتوى مدقَّق

الأولوية للمحتوى الثابت · بلا واجهة خلفية بعد · Vercel للإصدار v0 وDokploy مخطط له

Next.js 16
React 19
TypeScript
Tailwind CSS v4
Motion v12
Fraunces / Figtree
Noto Naskh Arabic
Noto Sans JP

يعمل على الإصدار v0 المنشور: مشاهد تمرير حقيقية ونصوص حقيقية مُدرجة مسبقًا

مشهد الحل: المساعد داخل اللعبة يشرح المفاجأة غير المتوقعة — **الحل**

الواجهة الرئيسية لملخص المستثمرين — **ملخص المستثمرين**

04 الجدول الزمني للمشروع

أبرز المعالم والمدة

المرحلة 1 22–29 يونيو 2026
نظام التصميم وبنية السرد
اللغة البصرية: الورق والحبر والتيراكوتا والأخضر المريمي والكهرماني وطبقة حبيبية وخطوط العناوين بإعدادات مخصصة لمحاور الخط المتغير، إضافة إلى سرد صفحة الهبوط ذي المشاهد الخمسة ومنهج تصميم حركة التمرير.
المرحلة 2 29 يونيو – 8 يوليو 2026
بناء صفحة الهبوط والعرض الاستثماري
تسلسل الهبوط الكامل بمشاهد المسح والتمرير، وملخص المستثمرين بأقسامه الأحد عشر، وشريط التنقل، والتذييل.
المرحلة 3 8–15 يوليو 2026
التدويل والصفحات الداعمة
الطبقة ثلاثية اللغات: اكتشاف اللغة، وحفظ ملف تعريف الارتباط، والكتابة من اليمين إلى اليسار (RTL)، وقواميس الترجمة، ومحتوى AR/JP مدقَّق، إضافة إلى إطاري صفحة التقدم وبوابة المستثمرين ومراجعات إمكانية الوصول.
التالي مفتوح
سجل البناء والمصادقة وانتقال البنية التحتية
ربط خلاصة سجل البناء، والمصادقة عبر الرابط السحري لبوابة المستثمرين، والانتقال المخطط له من الاستضافة الأولية إلى البنية التحتية المجمَّعة.

05 التحديات وحلولها

ما العقبات التي واجهتنا وكيف تجاوزناها؟

جعل الشعور قابلًا للتمرير
المشكلةلا ينجح «التجمّد» إلا إذا عاش الزائر الفجوة بين ما درسه وما يُقال فعلًا. لا تستطيع صفحة مقسّمة إلى أقسام بعناوين أن تجسّد شعورًا.
الحلعوملت الصفحة كمشاهد لها مداخل ومخارج لا كأقسام: تظهر بطاقات الكتاب المدرسي أولًا، ثم يقع السؤال الحقيقي بوقع مختلف، ويجيب مشهد الحل عنه كما كان المنتج سيفعل، اعتمادًا على عناصر أساسية قابلة لإعادة الاستخدام للمسح والتلاشي والتمرير.
استخدام اللغات الحقيقية بصدق أصعب من الاكتفاء برشّها
المشكلةتنحدر العربية واليابانية عادةً، في موقع مبني بالإنجليزية، إلى مجرد زينة، أو إلى ما هو أسوأ: نص خاطئ لا يستطيع أحد في الفريق قراءته. وبالنسبة إلى منتج يقوم عرضه على احترام لغات المتعلمين الأم، ستكون العبارة الخاطئة على موقع العرض نقضًا لنفسها.
الحلفُرض التحقق من الصحة على مستوى قاعدة الشيفرة: ملف محتوى واحد يضم كل عبارة عربية ويابانية مع نقحرتها وسياقها، وعليه ملاحظة تشترط تدقيق أي إضافة والتأكد من صحتها في سياقها.
كان لا بد أن يكون دعم الكتابة من اليمين إلى اليسار بنيويًا لا شكليًا
المشكلةالعربية ليست استبدال نصوص مترجمة: يتغير اتجاه المستند، ولا بد أن يصمد التخطيط والمحاذاة ومحدِّد اللغة أمام هذا التغيير.
الحلحالة اللغة محفوظة في مكان واحد (ملف تعريف ارتباط)، وتُزرع بذكاء من تفضيلات المتصفح على مستوى الطلب، ثم تمر عبر LocaleProvider حتى يُعرض كل مكوّن عرضًا سليمًا في اللغات الثلاث.
جمهوران، موقع واحد، بلا تنازل
المشكلةيطلب السرد الموجّه للمستهلكين والوثيقة الموجّهة للمستثمرين شيئين متضادين: الانغماس مقابل سهولة القراءة الخاطفة.
الحلسمح تقسيمهما إلى / و /pitch لكلٍّ منهما أن يكون نفسه تمامًا، مع عناصر واجهة مشتركة ولغة تصميم واحدة تبقيهما علامة واحدة. صُمِّمت صفحة العرض الاستثماري عن قصد لتُقرأ كوثيقة تصادف أنها جميلة، لأن المستثمرين يقرؤون قراءة خاطفة.
غنى الرسوم المتحركة يتعارض عادةً مع إمكانية الوصول
المشكلةغالبًا ما تتعارض الرسوم المتحركة الغنية المرتبطة بالتمرير مع دعم تقليل الحركة، إذ على كل مكوّن متحرك أن يتذكر معالجة تقليل الحركة بنفسه، أو ينتهي به الأمر إلى نسيانها.
الحلبُني مسار تقليل الحركة كعقد شامل منذ البداية: ينتقل كل مكوّن متحرك فورًا إلى حالته النهائية حين يفضّل الزائر تقليل الحركة، بدل أن يعالج كل مكوّن ذلك بمفرده.

06 قبل وبعد

مقارنة بين الوضع قبل المشروع وبعده

قبل	بعد
لا حضور على الويب	موقع هبوط سردي يجسّد الفكرة الأساسية للمنتج
كانت مواد المستثمرين عروضًا تقديمية فقط	ملخص المستثمرين علني وله رابط مباشر: من الأطروحة إلى الطلب
لا مؤشر على مصداقية اللغة	محتوى عربي وياباني مدقَّق، وموقع كامل بثلاث لغات مع RTL
لا توطين	اكتشاف تلقائي للغة مع حفظ اختيار المستخدم
كانت البنية التحتية للجولة سلاسل رسائل بريد إلكتروني	إطار لسجل البناء وبوابة المستثمرين مع خارطة طريق نحو الوظائف الكاملة
لا ضمانات لإمكانية الوصول	دعم شامل لتقليل الحركة، ونصوص متعددة اللغات مترجمة، وتباين ألوان بمستوى AA

ملخص المستثمرين بالعربية، من اليمين إلى اليسار — ملخص المستثمرين بالعربية: تخطيط كامل من اليمين إلى اليسار، لا مجرد استبدال للنصوص مع انعكاس الواجهة. الوثيقة نفسها والعلامة نفسها، باتجاه صحيح بنيويًا.

07 فوائد العميل ونتائجه

ما القيمة التي حصل عليها العميل؟

اللغات: 3; EN · AR · JP، كلها لغات أساسية كاملة الدعم
صفحات منشورة: 4; / · /pitch · /progress · /investors
مشاهد تمرير: 5; «التجمّد» مجسَّدًا من البداية إلى النهاية
التبعيات: 6; تشغيله شبه مجاني، بلا واجهة خلفية بعد

صار للجولة مدخل رئيسي
بدل ملف عرض تقديمي مرفق، يرسل المشروع رابطًا تتجلّى فيه المشكلة بنفسها، ويقع الطلب على بعد صفحة واحدة مع الأطروحة الكاملة حوله. ومستوى الحرفية في الموقع نفسه حجة على أن الفريق قادر على بناء اللعبة التي يصفها.
كلا سوقي الإطلاق يرى أنه يُؤخذ على محمل الجد
يصل الناطق بالعربية أو باليابانية إلى الموقع بلغته تلقائيًا، ويقرأ عبارات حقيقية يقولها فعلًا أصدقاؤه ثنائيو اللغة، ويرى خطه منضّدًا كما ينبغي. في هذا المنتج، الموقع برهان على القيم لا مجرد وصف لها.
أُرسيت أسس علاقات المستثمرين قبل أن تظهر الحاجة إليها
سجل البناء والبوابة موجودان كالتزامات مؤطَّرة: يعرف المستثمرون أين ستكون الشفافية وماذا ستعرض، وهذا يحدد نبرة الجولة من دون أن يتعطل الإصدار v0 بانتظار البنية التحتية للمصادقة والخلاصة.
تشغيله شبه مجاني وتطويره سهل
عدد قليل من التبعيات، ولا واجهة خلفية خاصة به بعد، وصفحات تعتمد المحتوى الثابت أولًا؛ أما القطع الأثقل، كالخلاصة ومصادقة البوابة، فمرتَّبة كخطوات تالية واضحة لا كأجزاء نصف مبنية.

إطار بوابة المستثمرين الخاصة — بوابة المستثمرين: إطار مخصص للأموال المجمَّعة وتوزيعها ومدة التمويل وسلسلة رسائل مباشرة مع المؤسس. تُطلق اليوم بعبارة «قريبًا» صادقة، أما الالتزام فمعلن بالفعل.

08 الدروس المستفادة

ماذا تعلّمنا من هذا المشروع؟

جسِّد المشكلة ولا تكتفِ بوصفها
أقوى أصول المشروع لحظة عاشها كل من في سوقه؛ وبناء صفحة الهبوط كمشاهد تعيد خلقها يحقق تحويلًا أفضل من أي نص يتحدث عنها.
إذا كان احترام اللغة هو المنتج، فهو أيضًا مواصفات الموقع
جعل صحة العربية واليابانية قاعدة في الشيفرة، بملف محتوى واحد وعبارات مدقَّقة وسياق إلزامي، منع الموقع من تقويض العرض الذي يقدّمه.
اختر أدوات الرسوم المتحركة التي يحتاجها التصميم فعلًا
لم تتطلب المشاهد المرتبطة بالتمرير سلسلة أدوات GSAP كاملة؛ فمكتبة أخف أبقت الحزمة صغيرة والنموذج الذهني بسيطًا. اختيار الأداة لكل مشروع أفضل من عادة استخدام الأداة نفسها في كل المشاريع.
أطلق إطارات لما هو قادم
تُظهر صفحتا التقدم والبوابة أن العنصر النائب المصمَّم جيدًا، برابط صحيح وتأطير صحيح وعبارة «قريبًا» صادقة، يخلق مساءلة وتوقعًا دون تأخير الإطلاق.
إمكانية الوصول كعقد شامل قابلة للتوسع؛ أما على مستوى كل مكوّن فلا
قاعدة واحدة لتقليل الحركة تشمل كل الرسوم المتحركة يمكن التحقق منها؛ أما أربعون تنفيذًا منفردًا فلا.
حين يسبق الإطار البرمجي معرفة منظومته، اكتب التحذير داخل المستودع
يعمل الموقع على إصدار من Next.js حديث إلى حد أن اصطلاحاته تختلف عن الخبرة السابقة، فقد أُعيدت تسمية طبقة البرمجيات الوسيطة للطلبات نفسها إلى proxy.ts. ومنعت ملاحظة من سطرين، تطلب من كل مساهم قادم مراجعة الوثائق المضمّنة أولًا، فئةً كاملة من أخطاء «كان يعمل في المشروع السابق».