HomeServicesWorkTestimonialsBlogAboutFAQContact Me
All Projects
Web Development D-Arrow – Next-Gen Digital Platform & Brand System
Click to zoom
Verified Case Study & ROI Impact دراسة حالة موثقة ونتائج مثبتة

D-Arrow – Next-Gen Digital Platform & Brand System

دي آرو – المنظومة الرقمية المتكاملة وتطوير الويب والهوية

Full-cycle digital engineering: Designed and built the official D-Arrow web platform from scratch with Next.js, bilingual RTL/LTR architecture, interactive pricing engines, influencer portal, and enterprise design system.

تطوير وهندسة رقمية شاملة: تصميم وبرمجة المنصة الرسمية لوكالة دي آرو (D-Arrow) من الصفر بتقنيات Next.js، مع بنية ثنائية اللغة RTL/LTR، وحاسبة باقات تفاعلية، وبوابة المؤثرين، ومنظومة هوية مؤسسية متكاملة.

Client
D-Arrow Digital (Saudi Arabia)
وكالة دي آرو الرقمية (المملكة العربية السعودية)
Category
Web Development
تصميم وتطوير ويب
Role / Role Scope
Lead Full-Stack Creative Developer & UI/UX Architect
كبير مطوري الويب ومصممي تجربة المستخدم
Timeline
4 Weeks
Date
August 4, 2026
Images
9 photos
Visit Live Project Inquire Similar Project طلب مشروع مماثل
Live
Production Platform (d-arrow.com)
منصة حية تعمل على الإنترنت
<0.7s
Core Web Vitals & Load Speed
سرعة تحميل وتصفح فائقة
100%
Bilingual RTL/LTR Synchronization
توافق كامل ثنائي اللغة عربي/إنجليزي
8+
Custom Portals & Interactive Engines
بوابات ومحركات تسعير تفاعلية
The Challenge / Problem التحدي والمشكلة
The Strategic Hurdle
التحدي الأساسي للعميل
D-Arrow needed an authoritative, modern digital headquarters to reflect their expansion across the Saudi and Gulf markets. The platform required a seamless bilingual experience (Arabic RTL-first and English), interactive quotation calculators, a multi-category service ecosystem, influencer onboarding portals, and sub-second performance.
احتاجت وكالة دي آرو (D-Arrow) إلى منصة ويب رسمية تعكس مكانتها الرائدة وتوسعها في السوق السعودي والخليجي. تطلب المشروع بناء تجربة مستخدم تفاعلية ثنائية اللغة بالكامل (RTL/LTR)، مع منظومة عرض باقات وحاسبات أسعار متطورة، وبوابة متخصصة للمؤثرين، وسرعة تحميل فائقة.
The Engineering & Creative Solution الحل الإبداعي والتقني
Our Execution Approach
استراتيجية الحل والتنفيذ
Engineered and developed the full web platform from scratch utilizing Next.js, Tailwind CSS, Lucide icons, and custom Arabic typography (29LT Bukra & Gilroy). Structured an interactive service matrix, custom pricing tiers, a dedicated influencer portal, digital store, and immersive dark-mode aesthetics.
قمنا بهندسة وتطوير المنصة الرقمية بالكامل من الصفر باستخدام Next.js و Tailwind CSS ومنظومة خطوط عربية مخصصة (29LT Bukra و Gilroy). تم بناء منظومة تفاعلية للخدمات، ونظام باقات مرن، وبوابة للمؤثرين، ومتجر رقمي، مع واجهة داكنة متميزة.

Production Web Platform Live

Architected & built from scratch — Deployed on high-performance global edge infrastructure

Visit Live Site (d-arrow.com)

Executive Summary

D-Arrow Digital is an award-winning digital marketing and creative engineering agency operating in the Kingdom of Saudi Arabia and the Gulf region. To match their regional expansion and attract high-ticket enterprise clients, I engineered their official digital platform from the ground up — uniting cutting-edge Next.js architecture, an interactive pricing calculator, dedicated industry portals, and a scalable brand identity system.

Next.js (App Router) Tailwind CSS Framer Motion RTL / LTR Bilingual Engine Custom Typography (29LT Bukra & Gilroy) Interactive Pricing Calculator Influencer Onboarding Portal Digital Agency Store

1. Photorealistic 3D Studio Mockups & Live Portals

01. Next-Generation Homepage & Hero Experience

Photorealistic studio shot of the space-black MacBook Pro displaying the live D-Arrow interface with neon magenta edge lighting and real-time counters.

D-Arrow Homepage 3D Studio Mockup
02. Influencer Collaboration & Onboarding Portal

iPad Pro and iPhone 15 Pro dual device mockup displaying the dedicated creator onboarding portal across Saudi Arabia.

D-Arrow Influencer Portal 3D Device Mockup
03. Interactive Packages & Quotation Engine

Angled MacBook Pro studio showcase displaying the multi-tier pricing and interactive package comparison calculator.

D-Arrow Pricing Packages 3D Studio Mockup

2. Platform Architecture & Engineering

Bilingual RTL / LTR Architecture

Flawless Arabic-first typography hierarchy paired with seamless English toggle across all pages and interactive components.

Custom Type System

High-precision font loading utilizing 29LT Bukra for Arabic headings and Gilroy / TT Hoves for English numerical & UI data.

Dynamic Dropdown Matrix

Contextual navigation menus with icon badges, category previews, and deep linking across 20+ specialized service domains.

Sub-Second Performance

Built with Next.js App Router and optimized asset pipelines, delivering <0.7s LCP on GCC mobile networks.


3. Brand Identity & Design System

In addition to full-stack web engineering, I developed the unified brand identity system for D-Arrow:

  • Geometric Mark Geometry: Dynamic monogram combining forward velocity with angular precision.
  • Color Token Architecture: Obsidian slates (#070913, #0B0D1F) paired with high-energy pink-orange gradients (#FF4D6D to #FF9A3C).
  • Comprehensive Asset Guidelines: Multi-scale responsive vectors, brand manual, and stationery suites.

4. Measurable Outcomes

  • Full-Cycle Delivery: Built and deployed from initial Figma architecture to production in 4 weeks.
  • Flawless Multi-Device Responsiveness: Fully optimized for mobile, tablet, and ultra-wide displays.
  • Live Inbound Conversions: Serving clients across Riyadh, Al Khobar, and the wider GCC region at d-arrow.com.

الموقع الرسمي متاح الآن على الإنترنت

تم التصميم والبرمجة بالكامل من الصفر ومرفوع على سيرفرات سريعة عالمية

زيارة الموقع المباشر: d-arrow.com

الملخص التنفيذي

وكالة دي آرو (D-Arrow Digital) هي وكالة تسويق رقمي وبرمجيات رائدة في المملكة العربية السعودية ومنطقة الخليج. لمواكبة التوسع السريع واستقطاب كبرى الشركات والمؤسسات، قمت بتصميم وبرمجة المنصة الرسمية للوكالة بالكامل من الصفر — بالاعتماد على بنية Next.js الحديثة، ونظام الباقات التفاعلية، وبوابة المؤثرين، ومنظومة الهوية البصرية المؤسسية.

Next.js (App Router) Tailwind CSS Framer Motion محرك ثنائي اللغة RTL/LTR خطوط مخصصة (29LT Bukra و Gilroy) حاسبة باقات تفاعلية بوابة تسجيل المؤثرين متجر دي آرو الرقمي

1. استعراض الموكابس ثلاثية الأبعاد (3D Studio Mockups)

01. الواجهة الرئيسية التفاعلية (Homepage & Hero)

موكاب استوديو واقعي لجهاز MacBook Pro بلون Space Black يعرض واجهة دي آرو الحقيقية مع إضاءة نيون محيطية وعدادات الخبرة.

واجهة دي آرو الرئيسية في موكاب ماك بوك واقعي
02. بوابة انضمام وتسجيل المؤثرين (Influencer Portal)

موكاب واقعي لجهاز iPad Pro و iPhone 15 Pro يعرض بوابة صناع المحتوى والمؤثرين في السعودية.

بوابة المؤثرين دي آرو في موكاب أجهزة واقعي
03. مصفوفة الباقات وحاسبة الأسعار التفاعلية (Pricing Engine)

موكاب استوديو بزاوية احترافية يعرض نظام مقارنة الباقات واختيار الخطة المناسبة وطلب الاستشارة.

باقات دي آرو في موكاب ماك بوك واقعي

2. المميزات الهندسية والتقنية

هندسة ثنائية اللغة RTL / LTR

تصميم عربي أصيل بانسيابية تامة، مع إمكانية التبديل للإنجليزية بضغطة زر واحدة في جميع الصفحات.

منظومة الخطوط المخصصة

دمج خط 29LT Bukra الفاخر للعناوين العربية مع خطوط Gilroy و TT Hoves للبيانات والأرقام.

القوائم المنسدلة الذكية

قوائم تنقل غنية بالأيقونات والبطاقات المصغرة للوصول السريع لأكثر من 20 خدمة وقطاع.

سرعة تحميل فائقة

تحقيق أداء عالي على مؤشرات Google Web Vitals بسرعة تحميل أقل من 0.7 ثانية على شبكات الجوال.


4. الهوية البصرية ونظام التصميم

إلى جانب البرمجة والتطوير، تم ابتكار منظومة الهوية البصرية لعلامة دي آرو:

  • الشعار الهندسي المبتكر: دمج رمز السهم المنطلق مع حرف ‘D’ ليعبر عن النمو والسرعة.
  • نظام الألوان: تدرجات الأوبسيديان الليلي الفاخر (#070913 و #0B0D1F) مع التدرج الكهرماني والوردي المتوهج.
  • دليل الهوية الكامل: منظومة أصول متجاوبة للشاشات والمطبوعات وعروض المستثمرين.

5. النتائج والأثر الفعلي

  • تسليم المشروع من الصفر إلى الإطلاق النهائي في 4 أسابيع.
  • تحقيق مؤشرات أداء قياسية (Core Web Vitals) مع سرعة استجابة فائقة.
  • إطلاق القنوات التسويقية الرقمية بنجاح لخدمة عملاء الوكالة في الرياض، الشرقية، ودول الخليج عبر d-arrow.com.
Next.js Full-Stack Development UI/UX Architecture RTL/LTR Bilingual Influencer Portal Interactive Pricing Design Systems Performance Engineering
"Omar built the D-Arrow platform from the ground up with unmatched speed, clean architecture, and visual polish. The interactive features and performance exceeded all our expectations."
"قام عمر ببناء وبرمجة منصة دي آرو بالكامل من الصفر بدقة هندسية متميزة وسرعة فائقة. التفاعل، والأداء، واللغة البصرية المتقنة أحدثت فارقاً كبيراً في تفاعل عملائنا في المملكة."
D-Arrow Leadership
D-Arrow Leadership
Digital Marketing Agency (Saudi Arabia)
Global Collaboration & Remote Ready جاهزية للعمل مع الشركات العالمية عن بُعد

Ready to Elevate Your Brand to Global Standards?

جاهز لنقل علامتك التجارية إلى المستوى العالمي؟

Whether you need full-scale brand engineering, viral AI video productions, or high-performance digital platforms — we deliver tier-1 quality on time.

سواء كنت تبحث عن بناء هوية تجارية متكاملة، إنتاج فيديوهات فيروسية بالذكاء الاصطناعي، أو تطوير منصات رقمية عالية الأداء — نقدم أعلى معايير الجودة والالتزام بالمواعيد.