مرحبا جئت بفكرة موقع لو قمنا بإنشائه بالطريقة الصحيحة والتي ينبغي بها سنحقق ثورة وترند عاملي ونكتسح العالم هاته هي التفاصيل: مشروع Veloria هو منصة رقمية مبتكرة تمزج بين عالم الأنمي والخيال الملحمي وبين تجربة تطوير الذات والمهام التفاعلية.الفكرة تقوم على تحويل حياة المستخدم إلى رحلة بطولية: حيث يؤدي مهامه اليومية على شكل Quests، يرتقي في المستويات، ينضم إلى نقابات (Guilds)، يتعاون مع الأصدقاء، ويتنافس على المراتب في لوحة الشرف.هدف المشروع هو خلق عالم افتراضي تفاعلي يجعل من الإنجاز الشخصي تجربة ممتعة وملهمة، بحيث يشعر المستخدم أنه بطل في قصة أنمي أسطورية، وفي الوقت نفسه يحقق تقدماً حقيقياً في حياته الواقعية# 1 — مقدمة المشروع (موجز قصير)Veloria: عالم أنمي فانتازي مُدمَج مع نظام Gamification لتطوير الذات. يجب أن يشعر المستخدم من اللمحة الأولى بأنه دخل عالمًا أسطورياً: انترو سينمائي، هوية بصرية ملكية، وتفاعلات حسّاسة تشبه الألعاب. النبرة: ملحمية، مظلمة مع بارقة أمل، أنمي.---# 2 — المتطلبات العامة والمخرجات المتوقعة1. ملف هوية بصريّة كامل (Brand Guideline) بصيغة PDF + Figma/Sketch source.2. لوغو: 3 نسخ (Primary full, Secondary stacked, Icon-only) بصيغ SVG/PNG (2048×2048, 1024×1024, 512×512, favicon 64).3. Color Palette & Tokens (HEX + HSL + CMYK + opacity variants).4. Typography: خطوط عربية/لاتينية، أحجام ووزن لكل حالة، وأنظمة RTL.5. UI Kit / Component Library في Figma مع حالات (default/hover/active/disabled/focus) + أكواد CSS tokens أو Tailwind tokens.6. Icon Set: 120 أيقونة SVG (system + guild + actions + social + status + runes).7. Hero Backgrounds & Maps: 3 خلفيات عالية الدقة (4K) – شاشة دارك بانوراما، شاشة بوابة، شاشة خريطة Veloria.8. Micro-animations: ملفات Lottie/JSON لكل تفاعل (button press, level-up, portal open, notification).9. Sound Pack: 8–12 ملفات صوتية (wav/ogg) للمؤثرات الأساسية + مقترحات لموسيقى BGM قصيرة (روابط اقتراحية أو ملفات مرخصة).10. Interactive Prototype (Figma Prototype أو HTML/CSS/React minimal) لصفحات أساسية: Landing, Onboarding Intro, Create Character, Dashboard (Quests), Guild Hall, Chat, Leaderboard, Profile.11. Storyboard وAnimatic للانترو السينمائي (مشاهد Intro) بوصوف كاميرا وموسيقى ومؤثرات.12. دليل تسليم dev-handoff: أسماء الملفات، المسارات، متطلبات الأداء، مقاسات الصور (responsive), وـSVG sprites، CSS tokens.---# 3 — الهوية البصرية التفصيلية3.1 الألوان (Color Palette)Royal Purple — #6A0DAD (Primary)Obsidian Black — #0D0D0D (Background / Deep)Silver Metallic — #C0C0C0 (Accent / metallic)Crystal Glow Blue — #5FD1FF (Accent energy / XP glow)Gold Radiant — #FFD166 (Highlights / rewards)White — #FFFFFF (Text/light contrast)تحديد حالات لونية: 100/200/500/800 shades, ونسخ مع شفافيات 8%/20%/40%.3.2 الخطوط (Typography)عناوين (Display / Titles): Arabic: Almarai (Heavy/ExtraBold) أو El Messiri Bold — مقاس عناوين رئيسية: 40–72 px desktop، 28–36 mobile.نص الجسم (UI/Body): Arabic: Cairo أو Noto Sans Arabic (Regular/Medium) — أحجام 14–18 px (mobile) و16–20 px (desktop).خط أحادي/رمزي: للـRunes أو الكود: Courier New أو IBM Plex Mono.تأكيد دعم RTL الكامل ونسخة لاتينية مماثلة (Montserrat/Inter) للتصاميم العالمية.3.3 الشعار (Logo Guidelines)Primary: درع معدني أنيق يحوي كريستالة بنفسجية متوهجة في الوسط، مع هالة طاقة ولمسات رونية.Secondary: نفس الرمز مع كلمة "Veloria" بخط أسطوري معدني.Icon-only: الكريستالة فقط أو Crest simplified.إعطاء إصدارات للـdark mode وlight mode وmono (one-color).3.4 أيقونات (Iconography)ستايل: semi-flat مع توهج خفيف وedges ناعمة، حواف معدنية، خطوط رونية داخل الأيقونات.صيغة: SVG لكل أيقونة + PNG @1x,@2x.أمثلة أيقونات: Quest, Daily, Weekly, Guild, Party, Chat, Friend Request, LevelUp, XP, Penalty, Shop, Inventory, Avatar Custom, Settings.---# 4 — تجربة المستخدم (UX Flows) ومقاسات الشاشات4.1 نقاط الانطلاق (Breakpoints)Mobile (360–420px) — 1 column.Tablet (768px) — 2/3 columns.Desktop (1024px+) — 12-column grid (max width 1440px).Safe margins: 16px mobile, 24px tablet, 32–48px desktop.4.2 شاشات رئيسية ومخططاتها(لكل شاشة: وصف المكونات، أولويات العناصر، سلوكيات التفاعل)1. Landing / HomepageHero: الخلفية البانورامية (بوابة Veloria) + Logo + CTA "ادخل العالم".Secondary: Preview of Guilds, Leaderboard snapshot, Trailer autoplay muted (loop).Footer: Links, Social, Legal.2. Onboarding Intro (Cinematic)Play full-intro cinematic modal (skip).بعد المشهد: اختيار "أنا مستعد" → Create Character.3. Create Character / Choose PathAvatar builder (preset faces + hairstyles) + choose path (Valor / Eternia / Fusion) — كل اختيار يغير نوع المهام.Live preview avatar with small intro animation.4. Dashboard (Main Hub / World Map)Left: Nav vertical (Profile, Quests, Guilds, Chat, Shop).Center: World Map interactive (touch to zoom) — كل منطقة مفتوحة تعرض المهام الخاصة بها.Right: Quick Panel (XP bar, Daily quests list, Notifications, Party invites).5. Quest PageList of tasks as "Scrolls" (card UI with difficulty, XP reward, penalty).Action buttons: Start, Snooze (with penalty preview), Share to Party.6. Guild HallGuild profile, Emblem, Members, Guild Quests, Leaderboard.Create Guild flow: Name, Emblem uploader (SVG), Description, Privacy (open/invite-only).7. Party & MatchmakingCreate Party modal, invite friends, auto-match by level/type, Party chat.8. Chat SystemTabs: Direct (DM), Party, Guild, Global (Tavern).Features: friend requests, online status, typing indicator, message reactions, attachments (images), moderation tools, profanity filter, mute/report.Optional: voice channels (later phase).9. Profile & Avatar ShopCustomization slots: Skin, Emblem, Title (earned).Show Medals, Titles, Achievements, Rank.10. Leaderboard/SeasonsSeasonal rankings with animated podium and seasonal rewards.---# 5 — الواجهات والتفاعلات الدقيقة (Microinteractions & Motion)5.1 قواعد عامة للأنيميشنUse easing: cubic-bezier(.2,.8,.2,1) for entrances; ease-out for exits.Motion duration guidelines:Micro (button press): 90–140ms.Modal open/close: 250–350ms.Portal/LevelUp cinematics: 800–1400ms (multi-stage).Long scene transitions (map zoom, portal open): 1000–1600ms.5.2 تفاعلات محددةButton press: scale 0.96 + glow pulse (Crystal Glow Blue) 120ms then rebound 180ms.Hover (desktop): slight lift translateY(-6px) + soft shadow + color hue shift.Loading / Spinner: rune-circle spins (Lottie) 1000ms loop.Level Up: burst particles (purple + gold), XP bar flashes, sound cue (short triumphant chime).Portal open: concentric rings animate outward, shards/glow particles float, screen shake subtle 40ms on impact, then camera pullback. (Provide Lottie + 4k video loop).Penalty effect: vignette darken, hue shift to desaturated + low rumble sound.---# 6 — الصوت والموسيقى (SFX & BGM)SFX (wav/ogg, 44.1kHz): door/portal open, level-up chime, button press, error buzz, achievement fanfare, message ping (soft rune).BGM: 3 tracks (loopable): Home ambient (mysterious orchestral, 90–120s), Battle/Challenge (intense, 60–90s), Guild Hall (heroic, 60–90s). Provide short stems for layering (strings, choir, percussion).كل صوت يجب أن يكون خفيف الحجم ومتيّم مع خاصية Mute لجميع الأصوات + تحكم موزع للمستخدم.---# 7 — المحتوى النصّي (Microcopy) — أمثلة بالعربيةCTA Hero: "ادخل العالم"Warning modal header: "تحذير: دخولك لعالم Veloria غير قابل للرجوع"Onboarding button: "أنا مستعد" / "الانسحاب"Quest card button: "ابدأ المهمة", "تأجيل (مع عقوبة)"Friend request: "طلب صداقة من [اسم]" — قبول / رفض.Guild create placeholder: "اسم النقابة", "شعار النقابة (SVG)".> أدرج نصوص احتياطية (fallback) بالإنجليزية مع ترجمة مهنية، واحفظ نسخاً قصيرة وطويلة لكل حالة (tooltip, empty state, confirmation).---# 8 — النظام الاجتماعي والتقني للـChat & Guilds (تفصيل وظيفي)8.1 الدردشةMessage types: text, emoji, reactions, image, system notifications.DM: 1-1 encryption optional.Party chat: auto-create عند تشكيل فريق.Guild chat: roles (Leader, Officer, Member).Global/Tavern: rate-limited, moderation tools (report, mute, ban), profanity filter (configurable).Presence: online/away/do not disturb.Friend requests: notify & persistent pending list.8.2 الفرق والنقاباتParty: 3–5 members، مشاركة XP modifiers (e.g., +5% XP when completing same quest).Guild: up to 500 members, ranks, Guild Quests weekly, Guild Treasury (Gold).Guild Emblem: upload SVG, auto-generate fallback icon.Guild Marketplace: special cosmetics purchasable via in-game currency (Gold/Gems).Moderation: guild leaders can kick/ban/promote.---# 9 — متطلبات التسليم التقني (Handoff & Dev Notes)Assets export: SVGs + PNG 1x/2x/3x, Lottie JSONs, optimized JPG/WebP for backgrounds, audio in wav + ogg (compressed).Figma: components with variants, Auto Layout, tokens (colors/typography/spacing).Code snippets: CSS variables for colors/typography, example React components (Button, Modal, QuestCard).Performance: hero images max 400KB webp (mobile), lazy load, use CDN.Accessibility: WCAG AA contrast for text, focus states clearly visible, keyboard navigable modals, ARIA labels for chat and buttons.RTL: full RTL support and Arabic typography tuning (line-height, letter-spacing).---# 10 — معايير القبول (Acceptance Criteria)1. الهوية البصرية PDF + Figma file مُسَلَّم وكاملة.2. كل screen prototypes تعمل كـ interactive prototype يعمل على mobile & desktop.3. Logo vector وIcon set مُسَلَّمين بصيغ SVG+PNG.4. Animations: Lottie files لـButton, Portal, LevelUp, Loading.5. Sound pack: 8 ملفات SFX + 3 BGM stems، مع خيارات mute.6. Chat & Guild mockups مع حالات UI لكل حالة (empty, loading, error, success).7. Hand-off guide شامل يشرح كيفية دمج الأصول مع الـfront-end وشرح tokens.---# 11 — تعليمات نهائية لوكيل الذكاء/فريق التصميم (Tone & Execution)اتبع النبرة الأنمي الملحمي: مظلم، عاطفي، لكن دائماً مع نفحة أمل (gold).احرص على توحيد المظهر عبر كل الشاشات — كل أيقونة، زر، ومؤثر يجب أن يشعر بأنه جزء من عالم Veloria.قدّم بدائل (3 مفاهيم) للشاشة الرئيسية والـCTA قبل الاعتماد النهائي.قدم ملاحظات/تعليقات مبدئية مع ملف Figma حتى نقدر نراجع ونعطي ملاحظات iteratively (2 جولات مراجعة أساسية + 1 جولة نهائية).سلّم كل شيء مُسمّى بطريقة منظمة (folders: /logo /icons /ui-kit /animations /audio /prototype).اولا قم بتحليل هاذا المشروع افهمه جيدا وركز في انشاء كل شيء وابدع دون اخطاء لننشأ ونطلق ثورة عالمية تكتسح العالم وهاته الصورة المرسلة هي الهوية البصرية للمشروع ان اردت استعمالها فلا تنسا نزع الخلفية من الصورةابدع🫡