From 126c94df63d174d713864b7a2c311cf2303c245c Mon Sep 17 00:00:00 2001 From: Hamza-Ayed Date: Sat, 19 Sep 2026 12:36:10 +0300 Subject: [PATCH] feat: add Mapbox-grade sovereign portal landing page with interactive showcase, unit economics ROI simulator, and developer playground --- apps/web/src/main.tsx | 11 +- apps/web/src/pages/LandingPage.tsx | 1180 ++++++++++++++++++++++++++++ 2 files changed, 1190 insertions(+), 1 deletion(-) create mode 100644 apps/web/src/pages/LandingPage.tsx diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx index 893995a..df6e4c8 100644 --- a/apps/web/src/main.tsx +++ b/apps/web/src/main.tsx @@ -8,6 +8,7 @@ import { ExecutiveShowcase } from './pages/ExecutiveShowcase' import { TacticalDefenseView } from './pages/TacticalDefenseView' import { TourismMapView } from './pages/TourismMapView' import { Terrain3DView } from './pages/Terrain3DView' +import { LandingPage } from './pages/LandingPage' import './index.css' try { @@ -24,6 +25,7 @@ try { // Lightweight hash router with Sovereign Executive Styling const NAV = [ + { hash: '#portal', label: 'البوابة التعريفية', icon: '✨' }, { hash: '#map', label: 'الخريطة والملاحة الشاملة', icon: '🗺️' }, { hash: '#terrain3d', label: 'الخريطة ثلاثية الأبعاد والتضاريس', icon: '🏔️' }, { hash: '#tourism', label: 'الخريطة السياحية والتراثية', icon: '🏛️' }, @@ -276,13 +278,14 @@ function Root() { return () => window.removeEventListener('hashchange', on); }, []); + const isPortal = hash === '#portal' || hash === '#landing' || hash === '#home'; const isTourism = hash === '#tourism' || hash === '#heritage' || hash === '#tourist'; const isTactical = hash === '#tactical' || hash === '#military' || hash === '#siro'; const isTerrain3D = hash === '#terrain3d' || hash === '#3d' || hash === '#terrain'; const isExecutive = hash === '#showcase' || hash === '#pitch'; const isCompare = hash === '#compare'; const isReview = hash === '#review'; - const isMap = hash === '#map' || (!isTourism && !isTactical && !isTerrain3D && !isExecutive && !isCompare && !isReview); + const isMap = hash === '#map' || (!isPortal && !isTourism && !isTactical && !isTerrain3D && !isExecutive && !isCompare && !isReview); return ( @@ -298,6 +301,12 @@ function Root() { height: 'calc(100vh - 52px)', overflow: 'hidden' }}> + {isPortal && ( +
+ +
+ )} + {isTerrain3D && (
diff --git a/apps/web/src/pages/LandingPage.tsx b/apps/web/src/pages/LandingPage.tsx new file mode 100644 index 0000000..3a31f5f --- /dev/null +++ b/apps/web/src/pages/LandingPage.tsx @@ -0,0 +1,1180 @@ +import React, { useState } from 'react'; +import { + Shield, + Map as MapIcon, + Compass, + Navigation, + Mountain, + Sun, + Cpu, + Server, + Database, + Code, + CheckCircle, + ArrowRight, + ExternalLink, + Zap, + Lock, + Layers, + TrendingUp, + Sparkles, + Activity, + Globe, + DollarSign, + Clock, + Sliders, + Smartphone, + Terminal, + Play, + ArrowUpRight, + BarChart3, + Flame, + Radio +} from 'lucide-react'; + +export const LandingPage: React.FC = () => { + const [activeTab, setActiveTab] = useState<'nav' | 'terrain' | 'tactical' | 'tourism'>('terrain'); + const [dailyRides, setDailyRides] = useState(100000); + const [codeTab, setCodeTab] = useState<'flutter' | 'web' | 'rest'>('flutter'); + + // ROI Calculations: $0.30 savings per ride compared to Google/Mapbox metered API calls + const monthlyRides = dailyRides * 30; + const apiCallsPerRide = 7; // Autocomplete, Details, Route, Snap-to-roads, Matrix, Direction updates + const monthlyApiCalls = monthlyRides * apiCallsPerRide; + + // Google Maps standard rate ~$5.00 per 1,000 requests + const googleMonthlyCostUsd = (monthlyApiCalls / 1000) * 5.0; + const googleAnnualCostUsd = googleMonthlyCostUsd * 12; + + // Siro Sovereign Cloud cost: Fixed infrastructure (approx $1,200/mo regardless of calls) + const siroMonthlyCostUsd = 1200; + const siroAnnualCostUsd = siroMonthlyCostUsd * 12; + + const annualSavingsUsd = Math.max(0, googleAnnualCostUsd - siroAnnualCostUsd); + const unitSavingsPerTrip = ((googleMonthlyCostUsd - siroMonthlyCostUsd) / monthlyRides).toFixed(2); + + return ( +
+ {/* 1. HERO SECTION (Mapbox Grade Cinematic Dark Canvas) */} +
+ {/* Sovereign Strategic Badge */} +
+ + منظومة الخرائط السيادية والذكاء المكاني للشرق الأوسط v3.5 + Mapbox Alternative +
+ +

+ الجيل القادم من الخرائط الرقمية والملاحة ثلاثية الأبعاد باستقلالية وطنية مطلقة +

+ +

+ محرك خرائط متجهات عالي الأداء معتمد على مسارات الأردن الدقيقة، محاكاة التضاريس والظلال بزمن حقيقي، ملاحة تكتيكية وتجارية بدون إنترنت، وتوفير جذري يتجاوز 0.30$ لكل رحلة مقارنة باحتكار العمالقة. +

+ + {/* Hero CTA Group */} + + + {/* Hero Micro-Metrics Strip */} +
+
+
0.30$
+
وفر هامش الربح لكل رحلة
+
+
+
100%
+
استقلالية سيادية بدون إنترنت
+
+
+
< 25ms
+
زمن استجابة مربعات Martin MVT
+
+
+
0.00$
+
ضرائب استدعاء API لشركات أجنبية
+
+
+
+ + {/* 2. INTERACTIVE PRODUCT SHOWCASE (Signature Mapbox Tab Switcher) */} +
+
+
+ ركائز المنظومة الجغرافية المتقدمة +
+

+ منصة متكاملة تلبي أعتى متطلبات الملاحة، الدفاع، والتضاريس +

+
+ + {/* Tab Buttons */} +
+ {[ + { id: 'terrain', label: 'التضاريس ثلاثية الأبعاد ومحاكي الظلال', icon: }, + { id: 'nav', label: 'الملاحة التجارية وإدارة الأساطيل', icon: }, + { id: 'tactical', label: 'الاستطلاع والذكاء التكتيكي (MGRS)', icon: }, + { id: 'tourism', label: 'السياحة والتراث ومسار الأردن', icon: }, + ].map(tab => { + const active = activeTab === tab.id; + return ( + + ); + })} +
+ + {/* Tab Showcase Card */} +
+ {activeTab === 'terrain' && ( + <> +
+
+ + محرك Terrarium DEM & حساب الظلال الفلكية +
+

+ تضاريس ثلاثية الأبعاد حية، خطوط كنتور، ومحاكاة مسار الشمس +

+

+ يعتمد المحرك على بطاقات الرسوميات (GPU-accelerated Mesh Displacement) لتحويل الارتفاعات الرقمية إلى نماذج جبلية حقيقية، مع حساب زاوية السمت والارتفاع الشمسي لإسقاط الظلال الفيزيائية من الفجر حتى الغروب. +

+
+
+ + تظليل جبلي واقعي (Hillshade 315° NW) بدقة متناهية لوادي رم والبتراء والبحر الميت +
+
+ + خطوط كنتور طبوغرافية رئيسية وفرعية كل 10 و 50 متر +
+
+ + دوران سينمائي نشط 360° مع إمالة الكاميرا 60° داخل الموبايل والويب +
+
+ + فتح استوديو التضاريس 3D + + +
+
+
+ LIVE VIEWPORTS — JORDAN SCENIC SITES +
+
+
+
🏜️ وادي رم وجبل أم الدامي
+
ارتفاع 1,854م | صخور جرانيتية
+
+
+
🌊 البحر الميت ووادي الموجب
+
أخفض نقطة في العالم (-430م)
+
+
+
🏛️ السيق والخزنة بالبتراء
+
خوانق صخرية عمودية ضيقة
+
+
+
🏙️ تلال عمان السبعة
+
مجسمات المباني ثلاثية الأبعاد
+
+
+
+ ⚡ معادلة الظلال الفلكية المدمجة: L = H / tan(α) — حساب أطوال الظلال وزوايا حجب الرؤية لحظياً. +
+
+ + )} + + {activeTab === 'nav' && ( + <> +
+
+ + محرك التوجيه فائق السرعة GraphHopper & Valhalla +
+

+ توجيه ملاحي ذكي، تخطيط أساطيل، ودعم كامل بدون اتصال +

+

+ بنية تحتية مصممة لتحمل ملايين الرحلات اليومية بتكلفة خادم ثابتة. يدعم التوجيه الصوتي خطوة بخطوة (Turn-by-Turn)، تجنب الازدحامات، وإعادة التوجيه الفوري دون أي استدعاءات سحابية خارجية. +

+
+
+ + ملاحة مدمجة في شاشة عائمة (Picture-in-Picture) فوق التطبيقات الأخرى +
+
+ + حزم خرائط أوفلاين حقيقية (SQLite Road Graph) تعمل بدون نت نهائياً +
+
+ + تطبيع العنونة العربية وتجاوز أخطاء الهمزات والتاء المربوطة +
+
+ + تجربة الملاحة الشاملة + + +
+
+
+ FLEET ENGINE TELEMETRY METRICS +
+
+
+
+ متوسط زمن حساب المسار + 4.2 ميلي ثانية +
+
+
+
+
+
+
+ حجم حزمة أوفلاين لطرق الأردن كاملة + ~114 ميغابايت مضغوطة +
+
+
+
+
+
+
+ دقة مطابقة الموقع بالطريق (Map Matching) + 99.8% +
+
+
+
+
+
+
+ + )} + + {activeTab === 'tactical' && ( + <> +
+
+ + معايير أمنية عسكرية & شبكة الإحداثيات MGRS +
+

+ منظومة القيادة والسيطرة والاستطلاع المعزول كلياً +

+

+ منظومة عملياتية مخصصة للجهات الدفاعية والأمنية والمركز الجغرافي الملكي، توفر تتبع القوات الصديقة (BFT)، حساب خط النظر والمدى البصري (Viewshed & LOS)، وتحليل المقذوفات والتقاطع العكسي بالميل (Mils). +

+
+
+ + حساب مناطق هبوط المروحيات (HLZ) وميادين الألغام +
+
+ + محدد المدى البصري وحساب زوايا الانخفاض بمستشعر الكاميرا +
+
+ + عزل تام للهاتف (Zero Telemetry Leakage) وحماية التموضع في بيئات التشويش GNSS-Denied +
+
+ + دخول غرفة العمليات التكتيكية + + +
+
+
+ SOVEREIGN BATTLEFIELD PROTOCOLS +
+
+
+
MGRS Precision Grid
+
دقة إحداثيات 1 متر مربع (10 أرقام) متوافقة مع NATO وقيادة الأركان
+
+
+
Dead Reckoning & PDR
+
تحديد الموقع بحساب الخطى عند انقطاع الـ GPS عبر مقاييس التسارع والبوصلة
+
+
+
Air-Gapped Deployment
+
حاويات دوكر معزولة خلف جدار ناري محلي 100% دون خوادم سحابية أجنبية
+
+
+
+ + )} + + {activeTab === 'tourism' && ( + <> +
+
+ + السياحة البيئية والتراثية ومسار الأردن +
+

+ استكشاف المواقع الأثرية، مسارات الهايكنج، وتوثيق التراث +

+

+ تغطية شاملة لمسار الأردن (Jordan Trail 650km)، المحميات الطبيعية في ضانا والموجب وعجلون، معالم البتراء وجرش وأم قيس، مع ملفات ارتفاعات مقطعية لكل مسار ومشاركة تشاركية للمواقع. +

+
+
+ + بروفايل الارتفاع اللحظي ومعدل انحدار المسارات للمشاة +
+
+ + توثيق المعالم الأثرية ثلاثية الأبعاد ونقاط المياه ومناطق التخييم +
+
+ + عرض سلس بدون أي نوافذ تعيق الرؤية مع نظام استكشاف سريع +
+
+ + فتح خريطة التراث والسياحة + + +
+
+
+ JORDAN TRAIL & HERITAGE HIGHLIGHTS +
+
+
+
🥾 مسار ضانا إلى البتراء
+
صُنف من أفضل 15 مسار في العالم
+
+
+
🏰 قلعة عجلون والربض
+
غابات البلوط وإطلالة جبال عجلون
+
+
+
🏜️ قيعان رم الصحراوية
+
مسارات المشي والسيارات 4x4
+
+
+
💧 كانيون وادي بن حماد
+
مياه كبريتية جارية وشلالات
+
+
+
+ + )} +
+
+ + {/* 3. VENTURE CAPITAL & UNIT ECONOMICS CALCULATOR ($0.30/TRIP SAVINGS) */} +
+
+
+
+ اقتصاديات استثمارية وحماية هوامش الربح +
+

+ كيف تحمي منصات التنقل والخدمات اللوجستية أرباحها مع سيرو؟ +

+

+ تفرض جوجل وماب بوكس ضريبة متزايدة لكل استدعاء ملاحي، مما يستنزف ما بين 0.25$ إلى 0.40$ من ربحية كل طلب. سيرو تحول التكلفة المتغيرة إلى بنية تحتية وطنية ثابتة. +

+
+ +
+ {/* Left Column: Interactive Slider */} +
+
+ حجم الرحلات / الطلبات اليومية للمنظومة: + {dailyRides.toLocaleString()} رحلة/يوم +
+ setDailyRides(Number(e.target.value))} + style={{ + width: '100%', + accentColor: '#0071e3', + height: 8, + borderRadius: 4, + cursor: 'pointer', + marginBottom: 24 + }} + /> + +
+
+ إجمالي الرحلات الشهرية: + {monthlyRides.toLocaleString()} رحلة +
+
+ استدعاءات الـ API الشهرية (7 استدعاء/رحلة): + {monthlyApiCalls.toLocaleString()} استدعاء +
+
+ فاتورة جوجل السنوية المتوقعة: + ${Math.round(googleAnnualCostUsd).toLocaleString()} / سنة +
+
+ تكلفة خوادم سيرو السنوية الثابتة: + ${Math.round(siroAnnualCostUsd).toLocaleString()} / سنة +
+
+
+ + {/* Right Column: Net Annual Savings Highlight */} +
+
+ صافي الوفر السنوي المباشر المضاف للربحية +
+
+ ${Math.round(annualSavingsUsd).toLocaleString()} +
+
+ توفير ما يعادل ~ {unitSavingsPerTrip}$ في كل رحلة تطلبها المركبة +
+

+ هذا الوفر يضاعف الهامش الإجمالي (Gross Margin) لمنصات التوصيل والنقل الذكي بنسبة تتراوح بين 30% إلى 55% فورياً. +

+ + مقارنة الأسعار وجداول العمالقة بالتفصيل + +
+
+
+
+ + {/* 4. EXPANSION SERVICES ROADMAP (ما الخدمات التي نضيفها للتوسع الجغرافي) */} +
+
+
+ خارطة التوسع والخدمات الجغرافية +
+

+ ماذا نملك الآن، وما هي الخدمات التي نضيفها للتوسع الإقليمي؟ +

+
+ +
+ {/* Service 1: Current In Production */} +
+
+
+ +
+
+

1. خادم مربعات المتجهات المباشر (Martin MVT)

+ ● متاح ويعمل في الإنتاج +
+
+

+ توليد مربعات الخرائط الديناميكية بسرعة أقل من 25ms مباشرة من قاعدة بيانات PostGIS المكانية مع تصفية أوتوماتيكية للطبقات والمباني. +

+
+ + {/* Service 2: Current In Production */} +
+
+
+ +
+
+

2. تضاريس ثلاثية الأبعاد وكنتور Terrarium DEM

+ ● متاح ويعمل في الإنتاج +
+
+

+ تمثيل طوبوغرافي واقعي لتضاريس الأردن، مع تظليل التلال NW 315°، دوران سينمائي 360°، وخطوط كنتور دقيقة. +

+
+ + {/* Service 3: Expansion Ready */} +
+
+
+ +
+
+

3. واجهة حساب الظلال الشمسية (/solar/shadow)

+ ● مرحلة الإطلاق الفلكي +
+
+

+ حساب زوايا السمت الشمسي، وارتفاع الشمس، وأطوال الظلال (L = H / tan α) للتخطيط العمراني، الطاقة الكهروضوئية، والعمليات العسكرية. +

+
+ + {/* Service 4: Expansion Horizon */} +
+
+
+ +
+
+

4. خدمة نطاقات الوصول الزمني (Isochrones API)

+ ● قيد التوسع اللوجستي +
+
+

+ رسم مضلعات جغرافية تبين المناطق التي يمكن الوصول إليها خلال 5 و 10 و 15 دقيقة، لخدمات الدفاع المدني والإسعاف والتوصيل السريع. +

+
+ + {/* Service 5: Expansion Horizon */} +
+
+
+ +
+
+

5. مصفوفة المسافات والأوقات (Matrix API)

+ ● تحسين أساطيل النقل +
+
+

+ حساب مصفوفة المسافات وزمن الرحلات بين مئات النقاط والمركبات بطلب واحد (N x M Matrix) لتوزيع الطلبات بأعلى كفاءة تشغيلية. +

+
+ + {/* Service 6: Expansion Horizon */} +
+
+
+ +
+
+

6. محرك العنونة وفهرسة الأحياء (Smart Geocoding)

+ ● تخصيص أردني/عربي فائق +
+
+

+ فهرس كامل لأحياء ومعالم المملكة الأردنية بدقة متناهية يتجاوز صعوبة العناوين غير المنظمة وتفاوت التهجئة العربية. +

+
+
+
+ + {/* 5. DEVELOPER SDK & API PLAYGROUND */} +
+
+
+
+ تكامل المطورين | DEVELOPER FIRST +
+

+ مكتبات برمجية جاهزة للويب، الموبايل، والأنظمة الخلفية +

+
+ +
+ {/* Playground Tab Headers */} +
+
+ + + +
+
+ API Endpoint: https://tiles.intaleqapp.com +
+
+ + {/* Code Body */} +
+ {codeTab === 'flutter' && ( + 
+{`// Siro Flutter SDK: Initialize Map & Enable 3D Terrain & Sun Shadow
+import 'package:intaleq_map_sdk/intaleq_map_sdk.dart';
+
+final controller = IntaleqMapController();
+
+IntaleqMapWidget(
+  styleUri: 'https://tiles.intaleqapp.com/styles/style-3d-terrain.json',
+  initialCenter: LatLng(31.9539, 35.9106), // Amman Citadel
+  initialZoom: 14.5,
+  initialTilt: 60.0,
+  enableTerrain: true,
+  onMapCreated: (ctrl) {
+    // Start Cinematic Orbit
+    ctrl.orbitStep(speedTier: 1);
+    
+    // Simulate Daylight Shadow from 06:00 to 18:00
+    ctrl.updateSunSimulation(hour: 16.5, azimuth: 245.0, elevation: 22.0);
+  },
+);`}
+
+ )} + + {codeTab === 'web' && ( + 
+{`// MapLibre WebGL: Native GPU-Accelerated 3D Terrain & Contours
+import maplibregl from 'maplibre-gl';
+
+const map = new maplibregl.Map({
+  container: 'map-container',
+  style: 'https://tiles.intaleqapp.com/styles/style-3d-terrain.json',
+  center: [35.4444, 30.3285], // Petra Siq & Treasury
+  zoom: 15.2,
+  pitch: 65,
+  bearing: -20,
+  maxPitch: 85
+});
+
+map.on('load', () => {
+  // Activate Native 3D DEM Terrain
+  map.setTerrain({ source: 'jordan-dem', exaggeration: 1.5 });
+  
+  // Set Solar Horizon Sky
+  map.setSky({
+    'sky-color': '#0ea5e9',
+    'sky-horizon-blend': 0.8,
+    'horizon-color': '#fde047'
+  });
+});`}
+
+ )} + + {codeTab === 'rest' && ( + 
+{`# Sovereign Route & Solar Shadow REST API Request
+curl -X POST "https://tiles.intaleqapp.com/api/v1/routing/calculate" \\
+  -H "Authorization: Bearer SIRO_SOVEREIGN_KEY_PROD" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "coordinates": [
+      {"lat": 31.9539, "lng": 35.9106},
+      {"lat": 31.9700, "lng": 35.8500}
+    ],
+    "vehicle": "car",
+    "elevation": true,
+    "avoid_tolls": false
+  }'
+
+# Response: 200 OK (< 5ms execution)
+# GeoJSON LineString with elevation profile, turn instructions & ETA.`}
+
+ )} +
+
+
+
+ + {/* 6. AIR-GAPPED ON-PREMISE VS SOVEREIGN CLOUD ARCHITECTURE */} +
+
+ البنية التحتية والسيادة الوطنية +
+

+ جاهزية النشر المعزول (Air-Gapped) على خوادمك الخاصة +

+

+ حاويات Docker متناسقة بالكامل تضم PostGIS 15، محرك المتجهات Martin، خادم التوجيه GraphHopper & Valhalla، بدون أي اتصال خارجي. +

+ +
+
+
+ +

سرية تامة للبيانات

+
+

+ لا تخرج إحداثيات السائقين، الوحدات الأمنية، أو استفسارات العناوين خارج حدود السيرفر المحلي إطلاقاً. +

+
+ +
+
+ +

نقل سلس بين السيرفرات

+
+

+ أمر ترحيل واحد ينقل قاعدة البيانات، غراف التوجيه، وحزم الأوفلاين إلى أي داتا سنتر محلي في دقائق. +

+
+ +
+
+ +

استدامة بدون إنترنت

+
+

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

+
+
+
+ + {/* 7. EXECUTIVE FOOTER & CALL TO ACTION */} + +
+ ); +}; +export default LandingPage;