المنصة لايف

شاشة الهوم

1. الشريط العلوي (Top bar)

زر تسجيل الدخول: فوق على اليمين (أو الشمال حسب اللغة)، زر بسيط يودّي المستخدم لشاشة الـ Auth لما تحب تربطه بحساب.

مفيش لوجو تقيل، الجو كله بسيط وهادئ عشان العين تروح مباشرة على الهيرو في النص.

شاشة الـ Auth

2. بطل الشاشة (Hero)

في النص قدّامك: عنوان كبير (H1) جملة من سطرين تقريبًا، المعنى العام: "مكانك الآمن يبدأ من هنا"

و"أول محطة... علاقتك بنفسك" + سطر تاني بيشرح إن "الرحلة" مساحة هادية لفهم العلاقات، و"دواير" بوصلة المدار.

ده هو مركز الثقل البصري: text-2xl/3xl, bold, ومتوسّط.

• فقرة تعريف تحت العنوان:

  • نص جسدي text-base تقريبًا، سطرين–تلاتة، بيشرح:

    • إن المنصّة مش مجرّد أداة، دي "مساحة" عشان تفهم علاقاتك، وتعيد تنظيم الطاقة، وهكذا.

  • مصمم للقراءة المريحة: leading-relaxed، لون أفتح شوية من العنوان.

3. زرار البداية (Primary CTA)

تحت العنوان مباشرة:

• زر كبير "يلا نبدأ" (أو النص اللي انت ضابطه في الـ copy):

  • زر دائري طويل (pill) بألوان البراند (تدرج teal).

  • ده اللي بيودّي المستخدم لأول خطوة حقيقية في الرحلة (غالبًا شاشة اختيار الهدف أو البوصلة الأولى حسب الإعداد).

• تحته مباشرة:

  • لو الميزة متفعّلة، بيظهر نص رابط صغير:

    • “جرّب الأدوات” أو نص مشابه، يفتح لك شاشة الأدوات (Journey Tools) من غير ما تدخل في الرحلة الكاملة.

4. كروت "إيه هي الرحلة؟" (What is Section)

تنزل شوية لتحت تلاقي سيكشن تعريفي:

• عنوان فرعي صغير text-sm، مثلاً "إيه هي الرحلة؟".

• تحته ٣ كروت زجاجية صغيرة (glass-card / card-unified):

  • كل كارت فيه:

    • أيقونة صغيرة (🎯 Target / 🛡 Shield / ✅ CheckCircle2).

    • نص سطرين يشرح:

      • إن الرحلة مش علاج نفسي، لكنها أداة تنظيم وعي.

      • إن فيه تركيز على الحدود.

      • وإن فيه خطة خطوة خطوة، مش كلام نظري.

5. قسم الثقة (Trust / Social Proof)

بعد كروت التعريف:

• فقرة صغيرة text-xs توضح:

  • إن فيه ناس كتير استخدمت الأداة.

• تحتها رقم/إحصائية كبيرة شوية text-lg:

  • مثال: "أكتر من X رحلة" + وصف قصير.

• بعدين Testimonials:

  • ٢–٣ كروت اقتباس (glass-card):

    • كل واحد فيه جملة قصيرة من مستخدم سابق (quote).

    • وسطر تحتها باسم الشخص (author).

  • ده الجزء اللي بيقول للمستخدم: "أنت مش أول واحد يجرب، في ناس قبلك استفادت".

6. قسم الأدوات (Tools Section)

أقرب لتحت شوية:

• عنوان فرعي "أدوات الرحلة" أو حسب النص اللي في landingCopy.toolsTitle.

• تحته قائمة كروت أدوات (زرار-كارت لكل Tool):

كل كارت فيه:

• أيقونة دائرية على الشمال (أو اليمين حسب الاتجاه) تمثّل الأداة.

• اسم الأداة بخط واضح (مثلاً: "دواير"، "تمارين التنفس"، ...).

• Tagline قصير يشرح في كلمة أو اتنين.

• "Badge" صغير يوضح حالة الأداة:

  • "مفتوحة"، "تجريبية"، ... إلخ.

• وصف قصير 2–3 سطور عن فكرة الأداة.

• الكارت نفسه glass/card-unified، لو الأداة مقفولة بيبان شكلها أهدى شوية + لو متاحة بيبان إنها "مفتوحة".

وتحتهم في آخر السيكشن:

• كارت CTA صغير:

  • يقول للمستخدم إنّه يقدر يدخل على صفحة الأدوات ويشوفهم كلهم مرة واحدة.

  • فيه زر "افتح" صغير على الطرف.

7. الأزرار العائمة (Floating Buttons)

على أطراف الشاشة:

• زر مرشد الرحلة (Chatbot):

  • دائرة عائمة أسفل اليمين، بأيقونة الشات.

  • لما تضغطه يفتح شات الـ AI اللي إحنا اضبطناه (مرشد الرحلة).

• زر "✨ أرشيف الوعي":

  • أسفل الشمال في شاشة الهبوط (landing) زر صغير زجاجي:

    • يفتح مودال أرشيف الوعي (كل الذكريات اللي اتخزّنت من البوصلة والشات).

8. الإحساس العام (منظور تصميمي)

الخلفية: Gradient كوني (Nebula) من styles.css.

المحتوى:

• في نص الشاشة، محصور جوّه Panel (app-panel-main):

  • max-w-2xl

  • radius كبير

  • خلفية زجاجية خفيفة.

• المسافات:

  • بين كل سيكشن والتاني في حدود mt-6 / mt-8 / mt-10 (مضاعفات 8).

• التايبو:

  • Hero: text-2xl/4xl bold.

  • الجسم: text-sm / text-base بـ leading-relaxed.

  • الملاحظات/الـ badges: text-xs.