1046 lines
66 KiB
HTML
1046 lines
66 KiB
HTML
<!doctype html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>MapSaaS | البنية الوطنية لخدمات الخرائط والسيادة المكانية</title>
|
|
<meta name="description" content="عرض تنفيذي سيادي لمنظومة MapSaaS: خرائط متجهات وطنية، محرك ملاحة محلي، حماية بيانات الحركة، وعائد اقتصادي سيادي للأردن.">
|
|
|
|
<!-- Apple & Modern Web Typography -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
|
|
|
|
<!-- Tailwind CSS Engine -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"apple-bg": "#FFFFFF",
|
|
"apple-canvas": "#FBFBFD",
|
|
"apple-card": "#FFFFFF",
|
|
"apple-text": "#1D1D1F",
|
|
"apple-sub": "#424245",
|
|
"apple-muted": "#86868B",
|
|
"apple-blue": "#0071E3",
|
|
"apple-blue-hover": "#0077ED",
|
|
"tactical-navy": "#0B192C",
|
|
"tactical-emerald": "#059669",
|
|
"sovereign-gold": "#D97706",
|
|
"border-subtle": "rgba(0, 0, 0, 0.07)",
|
|
"border-highlight": "rgba(0, 113, 227, 0.25)"
|
|
},
|
|
fontFamily: {
|
|
sans: ['-apple-system', 'BlinkMacSystemFont', 'SF Pro AR', 'SF Pro Display', 'SF Pro Text', 'SF Arabic', 'Alexandria', 'Plus Jakarta Sans', 'system-ui', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'Menlo', 'monospace']
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--font-apple: -apple-system, BlinkMacSystemFont, "SF Pro AR", "SF Pro Display", "SF Pro Text", "SF Arabic", "Alexandria", "Plus Jakarta Sans", system-ui, sans-serif;
|
|
}
|
|
* {
|
|
font-family: var(--font-apple);
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
background-color: #FBFBFD;
|
|
color: #1D1D1F;
|
|
line-height: 1.75;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Apple Glassmorphism (Vibrant Frosted Surface) */
|
|
.apple-glass {
|
|
background: rgba(255, 255, 255, 0.82);
|
|
backdrop-filter: blur(28px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
|
border: 1px solid rgba(0, 0, 0, 0.07);
|
|
}
|
|
.apple-glass-dark {
|
|
background: rgba(11, 25, 44, 0.88);
|
|
backdrop-filter: blur(28px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(28px) saturate(180%);
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
/* San Francisco Multi-layered Shadows */
|
|
.apple-card {
|
|
background: #FFFFFF;
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
border-radius: 24px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 12px 28px -4px rgba(0, 0, 0, 0.04);
|
|
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
.apple-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 16px -2px rgba(0, 0, 0, 0.03), 0 24px 48px -8px rgba(0, 0, 0, 0.08);
|
|
border-color: rgba(0, 113, 227, 0.22);
|
|
}
|
|
|
|
/* Apple Pill Buttons */
|
|
.apple-btn-primary {
|
|
background: #0071E3;
|
|
color: #FFFFFF;
|
|
font-weight: 600;
|
|
border-radius: 9999px;
|
|
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
box-shadow: 0 4px 14px 0 rgba(0, 113, 227, 0.3);
|
|
}
|
|
.apple-btn-primary:hover {
|
|
background: #0077ED;
|
|
transform: scale(1.02);
|
|
box-shadow: 0 6px 20px 0 rgba(0, 113, 227, 0.45);
|
|
}
|
|
.apple-btn-secondary {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
color: #1D1D1F;
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
border-radius: 9999px;
|
|
font-weight: 600;
|
|
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
.apple-btn-secondary:hover {
|
|
background: rgba(0, 0, 0, 0.08);
|
|
border-color: rgba(0, 0, 0, 0.15);
|
|
transform: scale(1.01);
|
|
}
|
|
|
|
/* Dynamic Route Animations */
|
|
@keyframes dashFlow {
|
|
from { stroke-dashoffset: 44; }
|
|
to { stroke-dashoffset: 0; }
|
|
}
|
|
.route-animated-dash {
|
|
animation: dashFlow 2s linear infinite;
|
|
}
|
|
@keyframes pulseRing {
|
|
0% { transform: scale(0.95); opacity: 0.8; }
|
|
50% { transform: scale(1.35); opacity: 0.15; }
|
|
100% { transform: scale(0.95); opacity: 0.8; }
|
|
}
|
|
.pulse-ring {
|
|
animation: pulseRing 2.4s ease-in-out infinite;
|
|
transform-origin: center;
|
|
}
|
|
|
|
/* Subtle map grid texture */
|
|
.map-grid-pattern {
|
|
background-image: radial-gradient(rgba(0, 113, 227, 0.08) 1.5px, transparent 1.5px);
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
/* Custom Apple-grade scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #D2D2D7;
|
|
border-radius: 9999px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #A1A1A6;
|
|
}
|
|
|
|
/* Modern Details disclosure animation */
|
|
details summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased selection:bg-apple-blue selection:text-white">
|
|
|
|
<!-- 1. EXECUTIVE TOP BAR (Apple Pro Header) -->
|
|
<header class="sticky top-0 z-50 apple-glass border-b border-border-subtle transition-all">
|
|
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
|
|
<!-- Brand Emblem & Badges -->
|
|
<div class="flex items-center gap-5">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-tactical-navy to-apple-blue flex items-center justify-center text-white shadow-sm ring-1 ring-black/10">
|
|
<span class="material-symbols-outlined text-[24px]">explore</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-extrabold text-xl text-apple-text tracking-tight">MapSaaS</span>
|
|
<span class="text-[11px] font-mono font-bold px-2 py-0.5 rounded-full bg-apple-blue/10 text-apple-blue">v2.4 PRO</span>
|
|
</div>
|
|
<span class="text-[12px] text-apple-sub font-medium">البنية الوطنية للسيادة المكانية <span class="text-apple-muted font-normal text-[11px]">| National Geo-Infrastructure</span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden xl:flex items-center gap-2 mr-4 pr-4 border-r border-black/10">
|
|
<span class="px-3 py-1 rounded-full text-[11.5px] font-semibold bg-black/5 text-apple-text border border-black/5 flex items-center gap-1.5 shadow-2xs">
|
|
<span>🇯🇴</span> سيادة مكانية 100%
|
|
</span>
|
|
<span class="px-3 py-1 rounded-full text-[11.5px] font-semibold bg-tactical-emerald/10 text-tactical-emerald border border-tactical-emerald/20 flex items-center gap-1.5 shadow-2xs">
|
|
<span class="w-2 h-2 rounded-full bg-tactical-emerald animate-pulse"></span> جاهزية العزل التام (Air-Gapped)
|
|
</span>
|
|
<span class="px-3 py-1 rounded-full text-[11.5px] font-mono font-medium bg-black/5 text-apple-sub border border-black/5 flex items-center gap-1 shadow-2xs">
|
|
<span class="material-symbols-outlined text-[14px] text-apple-blue">bolt</span> <42ms زمن المعالجة
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Nav Links -->
|
|
<nav class="hidden lg:flex items-center gap-7 text-[13.5px] font-medium text-apple-sub">
|
|
<a class="hover:text-apple-blue transition-colors" href="#hero">نظرة عامة</a>
|
|
<a class="hover:text-apple-blue transition-colors" href="#pillars">الركائز السيادية</a>
|
|
<a class="hover:text-apple-blue transition-colors" href="#governance">الحوكمة والتكامل</a>
|
|
<a class="hover:text-apple-blue transition-colors" href="#mobility">التطبيق والتجوّل</a>
|
|
<a class="hover:text-apple-blue transition-colors" href="#economics">العائد والوفر المالي</a>
|
|
<a class="hover:text-apple-blue transition-colors" href="#faq">الأسئلة التنفيذية</a>
|
|
</nav>
|
|
|
|
<!-- Executive CTAs -->
|
|
<div class="flex items-center gap-3">
|
|
<a class="hidden sm:inline-flex items-center gap-1.5 text-xs font-semibold px-4 py-2.5 apple-btn-secondary" href="#memorandum">
|
|
<span class="material-symbols-outlined text-[16px]">description</span>
|
|
طلب العرض التنفيذي
|
|
</a>
|
|
<a class="inline-flex items-center gap-1.5 text-xs font-semibold px-5 py-2.5 apple-btn-primary" href="#map-sim">
|
|
<span class="material-symbols-outlined text-[16px]">navigation</span>
|
|
المنصة التجريبية
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<!-- MAIN WRAPPER -->
|
|
<main class="max-w-7xl mx-auto px-6 py-12 space-y-28">
|
|
|
|
<!-- 2. HERO SECTION -->
|
|
<section class="relative pt-6 pb-8" id="hero">
|
|
<div class="text-center max-w-4xl mx-auto space-y-6">
|
|
|
|
<!-- Sovereign Pill Badge -->
|
|
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white border border-border-subtle shadow-xs">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-sovereign-gold"></span>
|
|
<span class="text-xs font-bold text-apple-text">البنية التحتية الجيومكانية السيادية للمملكة الأردنية الهاشمية</span>
|
|
<span class="text-[11px] font-mono text-apple-muted mr-1">Sovereign Geocoding Core</span>
|
|
</div>
|
|
|
|
<!-- Grand Apple-style Headline -->
|
|
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-apple-text leading-[1.18]">
|
|
خريطة بلدنا تعمل عندنا،<br class="hidden sm:inline"/>
|
|
<span class="bg-clip-text text-transparent bg-gradient-to-l from-apple-blue to-tactical-navy">وتتحسن من واقعنا الميداني.</span>
|
|
</h1>
|
|
|
|
<!-- Subtitle -->
|
|
<p class="text-lg sm:text-xl text-apple-sub max-w-3xl mx-auto font-normal leading-relaxed">
|
|
إنهاء التبعية لمزودي الخرائط الأجانب، وامتلاك محرك ملاحة ومعالجة مكانية فائق السرعة داخل الحدود الأردنية 100%، بدقة إحداثيات وطنية وبنية معزولة تحمي حركة الوطن وتدعم قراره الاستراتيجي.
|
|
</p>
|
|
|
|
<!-- Executive Metrics Row -->
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 pt-4 max-w-3xl mx-auto">
|
|
<div class="apple-card p-4 rounded-2xl text-center">
|
|
<div class="text-2xl sm:text-3xl font-extrabold text-apple-blue font-mono">zsh.00</div>
|
|
<div class="text-xs font-medium text-apple-sub mt-1">ضرائب رخص أجنبية للمملكة</div>
|
|
<div class="text-[10px] text-apple-muted font-mono mt-0.5">Zero Foreign SaaS Drain</div>
|
|
</div>
|
|
|
|
<div class="apple-card p-4 rounded-2xl text-center">
|
|
<div class="text-2xl sm:text-3xl font-extrabold text-tactical-emerald font-mono">38ms</div>
|
|
<div class="text-xs font-medium text-apple-sub mt-1">زمن استجابة المسار داخل عمّان</div>
|
|
<div class="text-[10px] text-apple-muted font-mono mt-0.5">Ultra-Low National Latency</div>
|
|
</div>
|
|
|
|
<div class="apple-card p-4 rounded-2xl text-center">
|
|
<div class="text-2xl sm:text-3xl font-extrabold text-tactical-navy font-mono">100%</div>
|
|
<div class="text-xs font-medium text-apple-sub mt-1">تخزين ومعالجة على خوادم محلية</div>
|
|
<div class="text-[10px] text-apple-muted font-mono mt-0.5">Jordanian Data Residency</div>
|
|
</div>
|
|
|
|
<div class="apple-card p-4 rounded-2xl text-center">
|
|
<div class="text-2xl sm:text-3xl font-extrabold text-sovereign-gold font-mono">C4ISR</div>
|
|
<div class="text-xs font-medium text-apple-sub mt-1">جاهزية أمنية ودفاعية فورية</div>
|
|
<div class="text-[10px] text-apple-muted font-mono mt-0.5">Tactical Grade Ready</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- DYNAMIC APPLE-STYLE INTERACTIVE NAVIGATION MAP MOCKUP -->
|
|
<div class="mt-14 relative rounded-3xl overflow-hidden border border-black/10 apple-card p-3 sm:p-5 bg-gradient-to-b from-[#F7F8FA] to-[#EDEFF3]" id="map-sim">
|
|
|
|
<!-- Mac / Device Window Top Controls -->
|
|
<div class="flex items-center justify-between pb-4 px-3 border-b border-black/5">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-3 h-3 rounded-full bg-[#FF5F56] inline-block shadow-2xs"></span>
|
|
<span class="w-3 h-3 rounded-full bg-[#FFBD2E] inline-block shadow-2xs"></span>
|
|
<span class="w-3 h-3 rounded-full bg-[#27C93F] inline-block shadow-2xs"></span>
|
|
<span class="text-xs font-mono text-apple-muted mr-3 font-semibold">MapSaaS Vector Engine (Amman Tactical Grid 4.1)</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-mono bg-tactical-emerald/10 text-tactical-emerald font-bold border border-tactical-emerald/20">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-tactical-emerald animate-ping"></span> متصل: مركز البيانات الوطني (ماركا)
|
|
</span>
|
|
<span class="text-xs font-mono text-apple-sub px-2.5 py-1 rounded-md bg-white border border-black/5 shadow-2xs">
|
|
FPS: <span class="font-bold text-apple-text">60.0</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The Canvas Simulation Area -->
|
|
<div class="relative h-[490px] sm:h-[550px] w-full rounded-2xl overflow-hidden bg-[#F4F3F0] flex items-center justify-center select-none map-grid-pattern">
|
|
|
|
<!-- Styled Map Base Grid & Real Amman Roads -->
|
|
<svg class="absolute inset-0 w-full h-full object-cover" viewBox="0 0 1000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
<!-- Green Public Parks & Landmarks -->
|
|
<path d="M 50,450 Q 200,430 350,520 Q 550,600 750,530 T 1000,560 L 1000,600 L 0,600 Z" fill="#E2EFE3" opacity="0.65" />
|
|
<circle cx="820" cy="180" r="130" fill="#E2EFE3" opacity="0.5" />
|
|
<circle cx="280" cy="220" r="85" fill="#E2EFE3" opacity="0.5" />
|
|
|
|
<!-- Secondary Street Grid -->
|
|
<g stroke="#E6E5E0" stroke-width="2.5" stroke-linecap="round">
|
|
<line x1="0" y1="120" x2="1000" y2="120" />
|
|
<line x1="0" y1="240" x2="1000" y2="240" />
|
|
<line x1="0" y1="360" x2="1000" y2="360" />
|
|
<line x1="0" y1="480" x2="1000" y2="480" />
|
|
<line x1="160" y1="0" x2="160" y2="600" />
|
|
<line x1="320" y1="0" x2="320" y2="600" />
|
|
<line x1="480" y1="0" x2="480" y2="600" />
|
|
<line x1="640" y1="0" x2="640" y2="600" />
|
|
<line x1="800" y1="0" x2="800" y2="600" />
|
|
</g>
|
|
|
|
<!-- Major Arterials (Airport Rd, Zahran St, Mecca St) -->
|
|
<path d="M 0,280 C 250,270 420,380 620,290 C 780,210 900,230 1000,200" stroke="#FFFFFF" stroke-width="14" stroke-linecap="round" />
|
|
<path d="M 120,600 C 180,450 290,320 450,210 C 600,110 750,80 1000,40" stroke="#FFFFFF" stroke-width="16" stroke-linecap="round" />
|
|
<path d="M 500,600 C 510,420 530,280 620,160 C 710,40 850,20 1000,0" stroke="#FFFFFF" stroke-width="12" stroke-linecap="round" />
|
|
|
|
<!-- Navigation Route (Abdoun Bridge -> 4th Circle -> Zahran Corridor -> KHBP) -->
|
|
<path id="navRouteGlow" d="M 220,490 Q 320,440 410,360 T 560,270 Q 670,220 780,180" stroke="#0071E3" stroke-width="22" stroke-opacity="0.22" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path id="navRoute" d="M 220,490 Q 320,440 410,360 T 560,270 Q 670,220 780,180" stroke="#0071E3" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M 220,490 Q 320,440 410,360 T 560,270 Q 670,220 780,180" stroke="#FFFFFF" stroke-width="3" stroke-dasharray="10 16" stroke-linecap="round" stroke-linejoin="round" class="route-animated-dash" />
|
|
|
|
<!-- Traffic Congestion Snippets -->
|
|
<path d="M 320,440 Q 370,400 410,360" stroke="#059669" stroke-width="4.5" stroke-linecap="round" />
|
|
<path d="M 450,330 Q 500,300 530,285" stroke="#D97706" stroke-width="4.5" stroke-linecap="round" />
|
|
|
|
<!-- Origin Marker: Abdoun -->
|
|
<circle cx="220" cy="490" r="16" fill="#0071E3" opacity="0.25" class="pulse-ring" />
|
|
<circle cx="220" cy="490" r="8" fill="#0071E3" stroke="#FFFFFF" stroke-width="3" />
|
|
|
|
<!-- Waypoint: 4th Circle -->
|
|
<circle cx="410" cy="360" r="6.5" fill="#1D1D1F" stroke="#FFFFFF" stroke-width="2.5" />
|
|
|
|
<!-- Destination Marker: KHBP -->
|
|
<circle cx="780" cy="180" r="20" fill="#059669" opacity="0.25" class="pulse-ring" />
|
|
<circle cx="780" cy="180" r="10" fill="#059669" stroke="#FFFFFF" stroke-width="3" />
|
|
|
|
<!-- Moving Simulation Vehicle -->
|
|
<g>
|
|
<animateMotion dur="8s" repeatCount="indefinite" path="M 220,490 Q 320,440 410,360 T 560,270 Q 670,220 780,180" rotate="auto" />
|
|
<circle cx="0" cy="0" r="7" fill="#0071E3" stroke="#FFFFFF" stroke-width="2.5" />
|
|
<polygon points="9,0 0,-4 3,0 0,4" fill="#FFFFFF" />
|
|
</g>
|
|
</svg>
|
|
|
|
<!-- Map Overlay Landmarks Labels (Arabic) -->
|
|
<div class="absolute bottom-16 right-20 bg-white/95 backdrop-blur-md px-3 py-1.5 rounded-xl text-[11.5px] font-bold text-apple-text shadow-md border border-black/5 hidden md:flex items-center gap-1.5">
|
|
<span class="w-2 h-2 rounded-full bg-apple-blue"></span> جسر عبدون المعلق (نقطة الانطلاق)
|
|
</div>
|
|
|
|
<div class="absolute top-[48%] right-[44%] bg-white/95 backdrop-blur-md px-2.5 py-1 rounded-lg text-[11px] font-semibold text-apple-sub shadow-sm border border-black/5 hidden md:block">
|
|
الدوار الرابع - شارع زهران
|
|
</div>
|
|
|
|
<div class="absolute top-16 left-28 bg-white/95 backdrop-blur-md px-3.5 py-2 rounded-xl text-[12.5px] font-extrabold text-apple-text shadow-lg border border-tactical-emerald/30 hidden md:flex items-center gap-2">
|
|
<span class="w-2.5 h-2.5 rounded-full bg-tactical-emerald"></span> مجمع الملك حسين للأعمال (KHBP)
|
|
</div>
|
|
|
|
<!-- Floating Turn-by-Turn Apple Guidance Card (Top Right) -->
|
|
<div class="absolute top-5 right-5 z-20 w-80 apple-glass p-4 rounded-2xl shadow-xl border border-black/10">
|
|
<div class="flex items-start gap-3.5">
|
|
<div class="w-11 h-11 rounded-xl bg-apple-blue text-white flex items-center justify-center flex-shrink-0 shadow-md">
|
|
<span class="material-symbols-outlined text-[26px]">turn_slight_left</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="text-[11px] font-bold text-apple-blue font-mono">بعد 350 متر</div>
|
|
<div class="text-[14px] font-extrabold text-apple-text leading-snug">اسلك المسار الأيمن نحو نفق مكة</div>
|
|
<div class="text-[11px] text-apple-muted mt-0.5">مسار سيادي سالك خالي من الحفريات</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 pt-3 border-t border-black/5 flex items-center justify-between text-xs">
|
|
<span class="text-apple-sub font-medium">السرعة المحددة: <span class="font-mono font-bold text-apple-text">80 كم/س</span></span>
|
|
<span class="font-mono text-tactical-emerald font-bold bg-tactical-emerald/10 px-2 py-0.5 rounded">حركة انسيابية</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Sovereign Trip Summary Card (Bottom Left) -->
|
|
<div class="absolute bottom-5 left-5 z-20 apple-card p-4 rounded-2xl shadow-xl border border-black/10 flex items-center gap-5">
|
|
<div class="border-l border-black/10 pl-5 text-center">
|
|
<div class="text-3xl font-extrabold text-apple-text font-mono tracking-tight">14 <span class="text-base font-normal text-apple-sub">دقيقة</span></div>
|
|
<div class="text-[11px] text-apple-muted font-medium">11.4 كم • وصول متوقع 09:42 ص</div>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div class="flex items-center gap-1.5 text-xs font-bold text-apple-text">
|
|
<span class="material-symbols-outlined text-[17px] text-tactical-emerald">verified</span>
|
|
مسار وطني مؤمن (Jordan Sovereign Route)
|
|
</div>
|
|
<div class="text-[11px] text-apple-sub">
|
|
خوادم استضافة محلية: <span class="font-mono font-bold text-apple-blue">Amman-DC1 (Tier-3)</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 text-[10.5px] text-apple-muted font-mono pt-0.5">
|
|
<span>تحديث مروري: لحظي</span>
|
|
<span>•</span>
|
|
<span>استهلاك البيانات: 12KB</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Live Precision JTM Badge (Bottom Right) -->
|
|
<div class="absolute bottom-5 right-5 z-20 apple-glass px-3.5 py-2 rounded-xl text-xs font-mono text-apple-text shadow-md border border-black/10 hidden sm:flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-apple-blue animate-pulse"></span>
|
|
<span>JAD68 / JTM Grid System • ±0.4m Precision</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. THE 3-PILLAR SOVEREIGN BENTO GRID -->
|
|
<section class="space-y-8" id="pillars">
|
|
<div class="text-center max-w-2xl mx-auto">
|
|
<div class="text-xs font-mono font-bold text-apple-blue uppercase tracking-wider mb-2">Core Architecture</div>
|
|
<h2 class="text-3xl sm:text-4xl font-extrabold text-apple-text tracking-tight">ركائز السيادة المكانية الثلاث</h2>
|
|
<p class="text-sm sm:text-base text-apple-sub mt-2">منظومة متكاملة تنقل المملكة من مستهلك لمعطيات الخارج إلى صانع ومتحكم ببياناته الجغرافية الحيوية.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
|
|
<!-- Pillar 1: المكان -->
|
|
<div class="apple-card p-8 rounded-3xl flex flex-col justify-between group">
|
|
<div>
|
|
<div class="w-12 h-12 rounded-2xl bg-apple-blue/10 text-apple-blue flex items-center justify-center mb-6 group-hover:scale-105 transition-transform">
|
|
<span class="material-symbols-outlined text-[28px]">map</span>
|
|
</div>
|
|
<div class="text-[11.5px] font-mono font-bold text-apple-blue uppercase">الركيزة الأولى • The Vector Baseline</div>
|
|
<h3 class="text-2xl font-extrabold text-apple-text mt-1 mb-3">المكان: الحقيقة الجيومكانية</h3>
|
|
<p class="text-apple-sub text-sm leading-relaxed mb-6">
|
|
بناء خرائط متجهات مسبوكة محلياً ومحدثة أسبوعياً، مع نماذج ارتفاع رقمية عالية الدقة (DEM) لسطح المملكة بالكامل، باستقلال هندسي لا يخضع لأي شروط أو سحابات أجنبية.
|
|
</p>
|
|
</div>
|
|
<div class="pt-5 border-t border-black/5 space-y-2.5">
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-apple-sub">دقة التقسيم الطبوغرافي:</span>
|
|
<span class="font-mono font-bold text-apple-text">0.25m High-Res</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-apple-sub">صيغ الخرائط المدعومة:</span>
|
|
<span class="font-mono font-bold text-apple-text">MVT, GeoJSON, COG</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-apple-sub">السيادة على بيانات الأساس:</span>
|
|
<span class="font-mono font-bold text-tactical-emerald">100% ملكية وطنية</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pillar 2: الحركة -->
|
|
<div class="apple-card p-8 rounded-3xl flex flex-col justify-between group">
|
|
<div>
|
|
<div class="w-12 h-12 rounded-2xl bg-tactical-emerald/10 text-tactical-emerald flex items-center justify-center mb-6 group-hover:scale-105 transition-transform">
|
|
<span class="material-symbols-outlined text-[28px]">alt_route</span>
|
|
</div>
|
|
<div class="text-[11.5px] font-mono font-bold text-tactical-emerald uppercase">الركيزة الثانية • Dynamic Routing</div>
|
|
<h3 class="text-2xl font-extrabold text-apple-text mt-1 mb-3">الحركة: محرك التنقل الحي</h3>
|
|
<p class="text-apple-sub text-sm leading-relaxed mb-6">
|
|
محرك ملاحة ذكي يتعلم من طبيعة الشارع الأردني وحركة السير الفعلية في عمّان والمحافظات. يعالج إغلاقات الطرق، الحفريات، والتحويلات اللحظية بمرونة فائقة وسرعة حسابية مبهرة.
|
|
</p>
|
|
</div>
|
|
<div class="pt-5 border-t border-black/5 space-y-2.5">
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-apple-sub">زمن استجابة المسار المحدث:</span>
|
|
<span class="font-mono font-bold text-tactical-emerald"><50ms Response</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-apple-sub">معالجة إشارات المرور والمطبات:</span>
|
|
<span class="font-mono font-bold text-apple-text">خوارزمية رصد تشاركي</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-apple-sub">توجيه أساطيل النقل العام:</span>
|
|
<span class="font-mono font-bold text-apple-text">Multi-modal Ready</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pillar 3: القرار -->
|
|
<div class="apple-card p-8 rounded-3xl flex flex-col justify-between group">
|
|
<div>
|
|
<div class="w-12 h-12 rounded-2xl bg-sovereign-gold/10 text-sovereign-gold flex items-center justify-center mb-6 group-hover:scale-105 transition-transform">
|
|
<span class="material-symbols-outlined text-[28px]">shield</span>
|
|
</div>
|
|
<div class="text-[11.5px] font-mono font-bold text-sovereign-gold uppercase">الركيزة الثالثة • Tactical C4ISR</div>
|
|
<h3 class="text-2xl font-extrabold text-apple-text mt-1 mb-3">القرار: الذكاء التكتيكي</h3>
|
|
<p class="text-apple-sub text-sm leading-relaxed mb-6">
|
|
بنية مزدوجة الاستخدام (Dual-Use) تخدم التطبيقات المدنية التجارية، وتتحول فوراً إلى أداة دعم لغرف العمليات وإدارة الأزمات، وتحليلات الكثافة، وفرض مناطق الحظر اللحظي بدقة تكتيكية.
|
|
</p>
|
|
</div>
|
|
<div class="pt-5 border-t border-black/5 space-y-2.5">
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-apple-sub">التشغيل المعزول (Air-Gap):</span>
|
|
<span class="font-mono font-bold text-apple-text">مستقل 100% عن الويب الخارجي</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-apple-sub">التكامل الميداني:</span>
|
|
<span class="font-mono font-bold text-apple-text">الطائرات المسيرة والرادارات</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-apple-sub">إدارة الكوارث والطوارئ:</span>
|
|
<span class="font-mono font-bold text-sovereign-gold">استجابة وتوجيه فوري</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. INSTITUTIONAL GOVERNANCE DUAL-ROLE MATRIX & PIPELINE -->
|
|
<section class="space-y-10" id="governance">
|
|
<div class="text-center max-w-2xl mx-auto">
|
|
<div class="text-xs font-mono font-bold text-apple-blue uppercase tracking-wider mb-2">Institutional Architecture</div>
|
|
<h2 class="text-3xl sm:text-4xl font-extrabold text-apple-text tracking-tight">التكامل المؤسسي والحوكمة الوطنية</h2>
|
|
<p class="text-sm sm:text-base text-apple-sub mt-2">تكامل استراتيجي يحترم الصلاحيات السيادية ويعزز الكفاءة التقنية بين المرجع الوطني والمحرك الرقمي.</p>
|
|
</div>
|
|
|
|
<!-- Dual Role Comparison Cards -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
|
|
<!-- Role 1: المركز الجغرافي الملكي -->
|
|
<div class="apple-card p-8 rounded-3xl border-r-4 border-r-sovereign-gold">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-[32px] text-sovereign-gold">account_balance</span>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-apple-text">المركز الجغرافي الملكي الأردني</h3>
|
|
<span class="text-xs font-mono text-apple-muted">The Sovereign Baseline Authority</span>
|
|
</div>
|
|
</div>
|
|
<span class="px-3 py-1 bg-sovereign-gold/10 text-sovereign-gold text-xs font-bold rounded-full">المرجعية والاعتماد</span>
|
|
</div>
|
|
<p class="text-sm text-apple-sub leading-relaxed mb-6">
|
|
الهيئة الوطنية الرسمية صاحبة السيادة الدستورية على مسح الحدود، شبكات الإسناد الجيوديسي، وإصدار المخططات الطبوغرافية المعتمدة للدولة الأردنية.
|
|
</p>
|
|
<ul class="space-y-3 text-xs text-apple-sub">
|
|
<li class="flex items-start gap-2.5">
|
|
<span class="material-symbols-outlined text-[18px] text-tactical-emerald mt-0.5">check_circle</span>
|
|
<span><strong>الاعتماد الرسمي:</strong> المصادقة على الإحداثيات والحدود الإدارية والمسميات الجغرافية الوطنية.</span>
|
|
</li>
|
|
<li class="flex items-start gap-2.5">
|
|
<span class="material-symbols-outlined text-[18px] text-tactical-emerald mt-0.5">check_circle</span>
|
|
<span><strong>المسح الجوي والأقمار الصناعية:</strong> تزويد طبقات التصوير الجوي الخام عالية الدقة وصور الاستشعار.</span>
|
|
</li>
|
|
<li class="flex items-start gap-2.5">
|
|
<span class="material-symbols-outlined text-[18px] text-tactical-emerald mt-0.5">check_circle</span>
|
|
<span><strong>حماية سرية البيانات الدفاعية:</strong> إدارة تصنيفات الأمان للمناطق الحساسة والمحميات العسكرية.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Role 2: منصة MapSaaS السيادية -->
|
|
<div class="apple-card p-8 rounded-3xl border-r-4 border-r-apple-blue">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-[32px] text-apple-blue">terminal</span>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-apple-text">منصة MapSaaS السيادية</h3>
|
|
<span class="text-xs font-mono text-apple-muted">The High-Velocity Digital Engine</span>
|
|
</div>
|
|
</div>
|
|
<span class="px-3 py-1 bg-apple-blue/10 text-apple-blue text-xs font-bold rounded-full">المحرك الرقمي والتوزيع</span>
|
|
</div>
|
|
<p class="text-sm text-apple-sub leading-relaxed mb-6">
|
|
الذراع التقني فائق السرعة، المسؤول عن تحويل البيانات المرجعية الخام إلى خدمات رقمية حية، APIs لحظية، وتطبيقات ملاحة تخدم الاقتصاد والدفاع.
|
|
</p>
|
|
<ul class="space-y-3 text-xs text-apple-sub">
|
|
<li class="flex items-start gap-2.5">
|
|
<span class="material-symbols-outlined text-[18px] text-apple-blue mt-0.5">check_circle</span>
|
|
<span><strong>Vector Tiles Server:</strong> توليد شرائح الخرائط التفاعلية بـ 60 إطاراً في الثانية دون تأخير.</span>
|
|
</li>
|
|
<li class="flex items-start gap-2.5">
|
|
<span class="material-symbols-outlined text-[18px] text-apple-blue mt-0.5">check_circle</span>
|
|
<span><strong>محرك الملاحة الحي (Routing & ETA):</strong> معالجة ملايين طلبات التوجيه اللحظية للقطاعين العام والخاص.</span>
|
|
</li>
|
|
<li class="flex items-start gap-2.5">
|
|
<span class="material-symbols-outlined text-[18px] text-apple-blue mt-0.5">check_circle</span>
|
|
<span><strong>SDKs متعددة المنصات:</strong> مكتبات برمجية جاهزة لـ iOS و Android والويب لتمكين المطورين الوطنيين.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- VISUAL PIPELINE FLOW DIAGRAM -->
|
|
<div class="apple-card p-8 rounded-3xl bg-gradient-to-r from-white via-[#F8F9FB] to-white">
|
|
<div class="text-center mb-8">
|
|
<h4 class="text-lg font-bold text-apple-text">مسار تدفق البيانات المكانية الوطنية</h4>
|
|
<span class="text-xs text-apple-muted font-mono">End-to-End Sovereign Data Ingestion & Distribution Pipeline</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 relative">
|
|
<!-- Step 1 -->
|
|
<div class="p-5 rounded-2xl bg-white border border-black/5 shadow-2xs text-center">
|
|
<div class="w-10 h-10 mx-auto rounded-full bg-sovereign-gold/10 text-sovereign-gold flex items-center justify-center font-mono font-bold mb-3">1</div>
|
|
<div class="text-sm font-bold text-apple-text">المسح والاعتماد</div>
|
|
<div class="text-xs text-apple-sub mt-1">المركز الجغرافي الملكي</div>
|
|
<div class="text-[10px] text-apple-muted font-mono mt-2">Geodesic Surveys & Raw DEM</div>
|
|
</div>
|
|
<!-- Step 2 -->
|
|
<div class="p-5 rounded-2xl bg-white border border-black/5 shadow-2xs text-center">
|
|
<div class="w-10 h-10 mx-auto rounded-full bg-apple-blue/10 text-apple-blue flex items-center justify-center font-mono font-bold mb-3">2</div>
|
|
<div class="text-sm font-bold text-apple-text">المعالجة وسبك البلاطات</div>
|
|
<div class="text-xs text-apple-sub mt-1">MapSaaS Tile Core</div>
|
|
<div class="text-[10px] text-apple-muted font-mono mt-2">Protobuf Vector Generation</div>
|
|
</div>
|
|
<!-- Step 3 -->
|
|
<div class="p-5 rounded-2xl bg-white border border-black/5 shadow-2xs text-center">
|
|
<div class="w-10 h-10 mx-auto rounded-full bg-tactical-navy/10 text-tactical-navy flex items-center justify-center font-mono font-bold mb-3">3</div>
|
|
<div class="text-sm font-bold text-apple-text">توزيع المحتوى المحلي</div>
|
|
<div class="text-xs text-apple-sub mt-1">Jordan Edge CDN</div>
|
|
<div class="text-[10px] text-apple-muted font-mono mt-2">Sub-40ms Edge Cache</div>
|
|
</div>
|
|
<!-- Step 4 -->
|
|
<div class="p-5 rounded-2xl bg-white border border-black/5 shadow-2xs text-center">
|
|
<div class="w-10 h-10 mx-auto rounded-full bg-tactical-emerald/10 text-tactical-emerald flex items-center justify-center font-mono font-bold mb-3">4</div>
|
|
<div class="text-sm font-bold text-apple-text">الاستهلاك والتشغيل</div>
|
|
<div class="text-xs text-apple-sub mt-1">تطبيقات النقل والعمليات</div>
|
|
<div class="text-[10px] text-apple-muted font-mono mt-2">Siro, Delivery, C4ISR Nodes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- 5. SOVEREIGN MOBILITY & NEXT-GEN APP SUITE (With 360° Street View) -->
|
|
<section class="space-y-10" id="mobility">
|
|
<div class="text-center max-w-2xl mx-auto">
|
|
<div class="text-xs font-mono font-bold text-apple-blue uppercase tracking-wider mb-2">Consumer & Enterprise Apps</div>
|
|
<h2 class="text-3xl sm:text-4xl font-extrabold text-apple-text tracking-tight">تجربة التنقل السيادية والتجوّل الافتراضي 360°</h2>
|
|
<p class="text-sm sm:text-base text-apple-sub mt-2">تطبيقات ملاحة تضاهي أرقى معايير أبل العالمية، مدعومة بأول خط إنتاج أردني للمسح البصري الذكي.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
|
|
|
|
<!-- Left: Phone App Mockup (Apple Style) -->
|
|
<div class="lg:col-span-5 flex justify-center">
|
|
<div class="w-[300px] sm:w-[320px] rounded-[48px] p-3.5 bg-[#1D1D1F] shadow-2xl ring-1 ring-black/20">
|
|
<!-- Dynamic Island Screen Frame -->
|
|
<div class="w-full bg-white rounded-[40px] overflow-hidden border border-black/10 text-apple-text flex flex-col h-[590px] relative">
|
|
<div class="h-7 bg-white flex items-center justify-center pt-2">
|
|
<div class="w-24 h-4 bg-black rounded-full"></div>
|
|
</div>
|
|
|
|
<!-- Inside Screen: Navigation Interface -->
|
|
<div class="flex-1 bg-[#F5F5F7] p-4 flex flex-col justify-between relative overflow-hidden map-grid-pattern">
|
|
|
|
<!-- Top Floating Destination Bar -->
|
|
<div class="apple-glass p-3 rounded-2xl shadow-xs z-10 flex items-center justify-between border border-black/5">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-apple-blue text-[20px]">near_me</span>
|
|
<div>
|
|
<div class="text-xs font-bold text-apple-text">طريق المطار - الدوار السابع</div>
|
|
<div class="text-[10px] text-apple-muted">مسار سيادي سالك</div>
|
|
</div>
|
|
</div>
|
|
<span class="text-xs font-mono font-bold text-tactical-emerald bg-tactical-emerald/10 px-2 py-0.5 rounded">18 د</span>
|
|
</div>
|
|
|
|
<!-- Street View Mini Preview Pill -->
|
|
<div class="z-10 apple-card p-2 rounded-xl shadow-md flex items-center gap-2 self-end mb-2">
|
|
<span class="material-symbols-outlined text-[16px] text-apple-blue">view_in_ar</span>
|
|
<span class="text-[10px] font-bold text-apple-text">استعراض 360° للشارع</span>
|
|
</div>
|
|
|
|
<!-- Bottom Ride / Nav Drawer -->
|
|
<div class="apple-card p-4 rounded-3xl shadow-lg z-10 space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs font-bold text-apple-text">تطبيق الملاحة الوطني (Siro Go)</span>
|
|
<span class="text-[10px] font-mono text-apple-blue font-bold">Local Engine</span>
|
|
</div>
|
|
<div class="w-full bg-[#F5F5F7] p-2.5 rounded-xl flex items-center justify-between text-xs">
|
|
<span class="text-apple-sub">الأجرة المقدرة:</span>
|
|
<span class="font-bold text-apple-text font-mono">2.80 د.أ</span>
|
|
</div>
|
|
<button class="w-full py-2.5 bg-apple-blue text-white rounded-xl text-xs font-bold shadow-xs hover:bg-apple-blue-hover transition-colors">
|
|
بدء المسار المحمي
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: 360° Street View Jordanian Pipeline Details -->
|
|
<div class="lg:col-span-7 space-y-6">
|
|
<div class="apple-card p-6 sm:p-8 rounded-3xl space-y-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 rounded-2xl bg-apple-blue/10 text-apple-blue flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-[28px]">streetview</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-apple-text">أول مسح شوارع وطني متكامل 360°</h3>
|
|
<span class="text-xs font-mono text-apple-muted">Jordanian Street-Level Imagery Pipeline</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-sm text-apple-sub leading-relaxed">
|
|
بدلاً من انتظار سيارات الشركات العالمية التي قد تمر مرة كل خمس سنوات، أنشأنا خط إنتاج محلي يعتمد على كاميرات مسح وطنية مدمجة بالذكاء الاصطناعي الميداني على الحافة (Edge AI).
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
|
|
<div class="p-4 rounded-2xl bg-[#FBFBFD] border border-black/5">
|
|
<div class="flex items-center gap-2 text-xs font-bold text-apple-text mb-1">
|
|
<span class="material-symbols-outlined text-tactical-emerald text-[18px]">privacy_tip</span>
|
|
حماية الخصوصية التامة (YOLO Edge)
|
|
</div>
|
|
<p class="text-[12px] text-apple-sub leading-relaxed">
|
|
تشفير وتعتيم فوري وتلقائي لأرقام لوحات المركبات ووجوه المارة قبل رفع الصورة للسيرفرات السيادية.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="p-4 rounded-2xl bg-[#FBFBFD] border border-black/5">
|
|
<div class="flex items-center gap-2 text-xs font-bold text-apple-text mb-1">
|
|
<span class="material-symbols-outlined text-sovereign-gold text-[18px]">construction</span>
|
|
أرشفة المطبات وتلف الطرقات
|
|
</div>
|
|
<p class="text-[12px] text-apple-sub leading-relaxed">
|
|
خوارزمية ذكية تفهرس المطبات العشوائية، الحفر، والتشققات وترسل تقارير تلقائية لأمانة عمّان ووزارة الأشغال.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Crowdsourced fleet badge -->
|
|
<div class="p-4 rounded-2xl bg-apple-blue/5 border border-apple-blue/15 flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-apple-blue text-[26px]">commute</span>
|
|
<div class="flex-1">
|
|
<div class="text-xs font-bold text-apple-text">شبكة الرصد التشاركي للمركبات الوطنية</div>
|
|
<div class="text-[11px] text-apple-sub">الاستفادة من أساطيل الحافلات وسيارات الأجرة لتحديث حالة الطرق الأردنية يومياً دون تكاليف مسح باهظة.</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. SOVEREIGN UNIT ECONOMICS & ROI INTERACTIVE CALCULATOR -->
|
|
<section class="space-y-10" id="economics">
|
|
<div class="text-center max-w-2xl mx-auto">
|
|
<div class="text-xs font-mono font-bold text-tactical-emerald uppercase tracking-wider mb-2">Financial Autonomy</div>
|
|
<h2 class="text-3xl sm:text-4xl font-extrabold text-apple-text tracking-tight">محاكي الجدوى والعائد الاقتصادي الوطني</h2>
|
|
<p class="text-sm sm:text-base text-apple-sub mt-2">كيف نوفر ملايين الدنانير من استنزاف رخص الخرائط الخارجية ونحتفظ بالأموال داخل الدورة الاقتصادية الأردنية.</p>
|
|
</div>
|
|
|
|
<!-- Main Calculator Card -->
|
|
<div class="apple-card p-6 sm:p-10 rounded-3xl">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
|
|
|
|
<!-- Interactive Slider Controls (Left) -->
|
|
<div class="lg:col-span-7 space-y-8">
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-sm font-bold text-apple-text" for="tripsRange">عدد الرحلات اليومية النشطة في المملكة (تاكسي، توصيل، لوجستيات)</label>
|
|
<span class="text-base font-bold font-mono text-apple-blue bg-apple-blue/10 px-3 py-1 rounded-full" id="tripsValueText">250,000 رحلة</span>
|
|
</div>
|
|
<input class="w-full h-2.5 bg-[#E5E5EA] rounded-lg appearance-none cursor-pointer accent-apple-blue" id="tripsRange" max="600000" min="50000" step="25000" type="range" value="250000"/>
|
|
<div class="flex justify-between text-[11px] font-mono text-apple-muted mt-1.5">
|
|
<span>50 ألف رحلة</span>
|
|
<span>300 ألف</span>
|
|
<span>600 ألف رحلة/يوم</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-sm font-bold text-apple-text" for="rateRange">تكلفة استدعاء الخريطة الأجنبية لكل رحلة (Google Maps Geocoding / Routing Tax)</label>
|
|
<span class="text-base font-bold font-mono text-sovereign-gold bg-sovereign-gold/10 px-3 py-1 rounded-full" id="rateValueText">zsh.28 / رحلة</span>
|
|
</div>
|
|
<input class="w-full h-2.5 bg-[#E5E5EA] rounded-lg appearance-none cursor-pointer accent-sovereign-gold" id="rateRange" max="0.50" min="0.10" step="0.02" type="range" value="0.28"/>
|
|
<div class="flex justify-between text-[11px] font-mono text-apple-muted mt-1.5">
|
|
<span>zsh.10</span>
|
|
<span>zsh.28 متوسط السوق</span>
|
|
<span>zsh.50 استدعاء مكثف</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Explanatory Notice -->
|
|
<div class="text-xs text-apple-sub bg-[#F5F5F7] p-4 rounded-2xl border border-black/5 leading-relaxed">
|
|
💡 <strong>معادلة الوفر السيادي:</strong> في منصات التوصيل والتنقل، يتطلب كل طلب 4-8 استدعاءات لواجهات (Autocomplete, Direction, Distance Matrix). هذا يستنزف ما بين 0.20$ إلى 0.35$ لكل طلب تخرج كعملة صعبة خارج الأردن. مع <strong>MapSaaS</strong> تصبح التكلفة ثابتة محلياً تقترب من الصفر لكل عملية.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calculated Totals (Right) -->
|
|
<div class="lg:col-span-5 space-y-4">
|
|
|
|
<!-- Result Card 1: Annual Foreign Outflow Prevented -->
|
|
<div class="p-6 rounded-2xl bg-gradient-to-br from-tactical-navy to-[#182C48] text-white shadow-xl">
|
|
<div class="text-[11px] font-mono text-white/70 uppercase mb-1">الهدر السنوي الذي يتم استرداده</div>
|
|
<div class="text-3xl sm:text-4xl font-extrabold font-mono text-white tracking-tight" id="annualLossSaved">18,126,000 د.أ</div>
|
|
<div class="text-xs text-white/80 mt-2">أموال كانت تخرج سنوياً لشركات التقنية الأجنبية عبر البطاقات الائتمانية.</div>
|
|
</div>
|
|
|
|
<!-- Result Card 2: 5-Year Cumulative Sovereign Retention -->
|
|
<div class="p-6 rounded-2xl bg-tactical-emerald/10 border border-tactical-emerald/20 text-apple-text">
|
|
<div class="text-[11px] font-mono text-tactical-emerald font-bold uppercase mb-1">صافي الأثر التراكمي خلال 5 سنوات</div>
|
|
<div class="text-2xl sm:text-3xl font-extrabold font-mono text-tactical-emerald" id="fiveYearRetention">90.6M دينار أردني</div>
|
|
<div class="text-xs text-apple-sub mt-2">يعاد ضخها لتطوير البنية التقنية الوطنية وتمكين الشركات الناشئة المحلية.</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- TCO Savings Comparison Table -->
|
|
<div class="mt-12 pt-8 border-t border-black/5 overflow-x-auto">
|
|
<div class="text-sm font-bold text-apple-text mb-4">مقارنة التكلفة الكلية للملكية (TCO: Total Cost of Ownership)</div>
|
|
<table class="w-full text-right text-xs">
|
|
<thead>
|
|
<tr class="border-b border-black/10 text-apple-muted font-mono">
|
|
<th class="py-3 px-4">المحور</th>
|
|
<th class="py-3 px-4">خرائط Google / Esri الخارجية</th>
|
|
<th class="py-3 px-4 text-apple-blue font-bold">منظومة MapSaaS الأردنية</th>
|
|
<th class="py-3 px-4 text-tactical-emerald font-bold">الميزة السيادية</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-black/5 text-apple-sub">
|
|
<tr>
|
|
<td class="py-3.5 px-4 font-bold text-apple-text">نموذج التسعير</td>
|
|
<td class="py-3.5 px-4">دفع بالدولار لكل 1000 طلب (API Metered)</td>
|
|
<td class="py-3.5 px-4 font-semibold text-apple-text">رخصة سيادية وطنية موحدة وثابتة</td>
|
|
<td class="py-3.5 px-4 text-tactical-emerald font-bold">وفر يصل إلى 90%</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3.5 px-4 font-bold text-apple-text">سرعة معالجة البيانات داخل عمّان</td>
|
|
<td class="py-3.5 px-4">220ms - 450ms (عبر خوادم أوروبا)</td>
|
|
<td class="py-3.5 px-4 font-semibold text-apple-text"><45ms (استضافة مباشرة في ماركا / إربد)</td>
|
|
<td class="py-3.5 px-4 text-tactical-emerald font-bold">أسرع بـ 6 أضعاف</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3.5 px-4 font-bold text-apple-text">خصوصية تحركات المواطنين والمواكب</td>
|
|
<td class="py-3.5 px-4 text-[#BA1A1A]">تخزن وتحلل في مراكز بيانات خارجية</td>
|
|
<td class="py-3.5 px-4 font-semibold text-apple-text">مشفرة ومحمية بقانون الأمن السيبراني الأردني</td>
|
|
<td class="py-3.5 px-4 text-tactical-emerald font-bold">حماية سيادية كاملة</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3.5 px-4 font-bold text-apple-text">العمل في ظروف حجب الإنترنت العالمي</td>
|
|
<td class="py-3.5 px-4 text-[#BA1A1A]">تتوقف تماماً عن العمل</td>
|
|
<td class="py-3.5 px-4 font-semibold text-apple-text">استمرارية 100% داخل الشبكة الوطنية الأردنية</td>
|
|
<td class="py-3.5 px-4 text-tactical-emerald font-bold">صمود استراتيجي كامل</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. EXECUTIVE FAQ ACCORDION -->
|
|
<section class="space-y-8" id="faq">
|
|
<div class="text-center max-w-2xl mx-auto">
|
|
<div class="text-xs font-mono font-bold text-apple-blue uppercase tracking-wider mb-2">Executive Inquiries</div>
|
|
<h2 class="text-3xl sm:text-4xl font-extrabold text-apple-text tracking-tight">الأسئلة التنفيذية الأكثر إلحاحاً</h2>
|
|
<p class="text-sm sm:text-base text-apple-sub mt-2">إجابات دقيقة لمتخذ القرار في المؤسسات الحكومية والقطاع الخاص.</p>
|
|
</div>
|
|
|
|
<div class="max-w-3xl mx-auto space-y-4">
|
|
|
|
<!-- FAQ 1 -->
|
|
<details class="apple-card rounded-2xl p-5 group transition-all" open>
|
|
<summary class="flex items-center justify-between cursor-pointer font-bold text-apple-text text-sm sm:text-base select-none">
|
|
<span>لماذا لا نكتفي بخرائط Google أو بمبادرة OpenStreetMap المجانية؟</span>
|
|
<span class="material-symbols-outlined text-apple-muted group-open:rotate-180 transition-transform text-[20px]">expand_more</span>
|
|
</summary>
|
|
<div class="mt-4 pt-3 border-t border-black/5 text-xs sm:text-sm text-apple-sub leading-relaxed">
|
|
خرائط Google تشكل نزيفاً مستمراً للعملة الصعبة ولا تمنحك حق امتلاك أصولك الجغرافية، فضلاً عن كونها سحابة خارجية غير مسموح بربطها بالأنظمة الحساسة. أما OpenStreetMap فمع أهميتها كقاعدة مفتوحة، إلا أنها تفتقر في الأردن للدقة اللحظية، وتفتقد لمحرك ملاحة عالي الكفاءة (Production-Grade Routing Engine) مهيأ لطبيعة التحويلات المرورية الأردنية. منصة <strong>MapSaaS</strong> تدمج أفضل ما في النواة المفتوحة مع بيانات المركز الجغرافي الملكي ومحرك ذكاء محلي فائق السرعة.
|
|
</div>
|
|
</details>
|
|
|
|
<!-- FAQ 2 -->
|
|
<details class="apple-card rounded-2xl p-5 group transition-all">
|
|
<summary class="flex items-center justify-between cursor-pointer font-bold text-apple-text text-sm sm:text-base select-none">
|
|
<span>كيف نضمن استمرارية الخدمة عند انقطاع كوابل الإنترنت البحرية أو عزل الشبكة؟</span>
|
|
<span class="material-symbols-outlined text-apple-muted group-open:rotate-180 transition-transform text-[20px]">expand_more</span>
|
|
</summary>
|
|
<div class="mt-4 pt-3 border-t border-black/5 text-xs sm:text-sm text-apple-sub leading-relaxed">
|
|
تم تصميم البنية الهندسية لمنظومة MapSaaS لتعمل بنمط السيادة الكاملة (Self-Contained On-Premises). خوادم البلاطات المتجهية ومحركات المسار مسبوكة ومثبتة في مراكز بيانات وطنية، ما يعني أن حركة النقل والتوجيه الداخلي لسيارات الطوارئ، التاكسي، والشاحنات ستستمر بنسبة 100% دون الحاجة لأي اتصال بالإنترنت الدولي.
|
|
</div>
|
|
</details>
|
|
|
|
<!-- FAQ 3 -->
|
|
<details class="apple-card rounded-2xl p-5 group transition-all">
|
|
<summary class="flex items-center justify-between cursor-pointer font-bold text-apple-text text-sm sm:text-base select-none">
|
|
<span>ما هي متطلبات النشر داخل مراكز البيانات الوطنية (Air-Gapped Requirements)؟</span>
|
|
<span class="material-symbols-outlined text-apple-muted group-open:rotate-180 transition-transform text-[20px]">expand_more</span>
|
|
</summary>
|
|
<div class="mt-4 pt-3 border-t border-black/5 text-xs sm:text-sm text-apple-sub leading-relaxed">
|
|
تأتي المنظومة بحزم Kubernetes / Docker معزولة ومجهزة مسبقاً، وتتطلب خوادم معالجة مدمجة ببطاقات رسومية خفيفة (GPU Rendering Nodes) ومساحات تخزين SSD سريعة. يمكن تثبيت النواة بالكامل في غضون 72 ساعة في بيئات الدفاع والداخلية دون كتابة سطر واحد يتصل بالشبكة الخارجية.
|
|
</div>
|
|
</details>
|
|
|
|
<!-- FAQ 4 -->
|
|
<details class="apple-card rounded-2xl p-5 group transition-all">
|
|
<summary class="flex items-center justify-between cursor-pointer font-bold text-apple-text text-sm sm:text-base select-none">
|
|
<span>كيف تتكامل المنصة مع تطبيقات التوصيل والنقل الذكي المحلية مثل (Siro)؟</span>
|
|
<span class="material-symbols-outlined text-apple-muted group-open:rotate-180 transition-transform text-[20px]">expand_more</span>
|
|
</summary>
|
|
<div class="mt-4 pt-3 border-t border-black/5 text-xs sm:text-sm text-apple-sub leading-relaxed">
|
|
نوفر حزم SDKs متطابقة بنسبة 100% مع معايير Mapbox و Google SDKs. يمكن لأي تطبيق محلي استبدال سطر برمجي واحد (Endpoint URL) ليبدأ فوراً باستخدام الخرائط الأردنية وتخفيض فواتيره الشهرية من آلاف الدولارات إلى الصفر تقريباً مع دعم فني ميداني محلي على مدار الساعة.
|
|
</div>
|
|
</details>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 8. DIRECT LEADERSHIP PITCH: THE EXECUTIVE MEMORANDUM -->
|
|
<section class="relative" id="memorandum">
|
|
<div class="apple-card rounded-[36px] p-8 sm:p-14 border border-black/10 bg-gradient-to-b from-white via-[#FAFAFC] to-[#F3F4F8] shadow-2xl relative overflow-hidden">
|
|
|
|
<!-- Top Sovereign Ribbon Pattern -->
|
|
<div class="absolute top-0 right-0 left-0 h-2 bg-gradient-to-r from-apple-blue via-tactical-navy to-sovereign-gold"></div>
|
|
|
|
<div class="max-w-3xl mx-auto space-y-8">
|
|
|
|
<div class="flex items-center justify-between border-b border-black/10 pb-6">
|
|
<div>
|
|
<span class="text-[11px] font-mono uppercase tracking-widest text-sovereign-gold font-bold">وثيقة تنفيذية استراتيجية • Strategic Memorandum</span>
|
|
<h2 class="text-2xl sm:text-3xl font-extrabold text-apple-text mt-1">الرسالة التي تُعرض على القيادة الوطنية</h2>
|
|
</div>
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-tr from-tactical-navy to-apple-blue flex items-center justify-center text-white ring-2 ring-black/5 shadow-md">
|
|
<span class="material-symbols-outlined text-[32px]">military_tech</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Memorandum Body -->
|
|
<div class="space-y-4 text-apple-sub text-sm sm:text-base leading-relaxed">
|
|
<p>
|
|
<strong>دولة الرئيس / أصحاب المعالي والعطوفة،</strong>
|
|
</p>
|
|
<p>
|
|
إن الجغرافيا ليست مجرد خطوط على شاشة؛ بل هي <strong>العصب الحيوي لسيادة المملكة واقتصادها وأمنها القومي</strong>. في كل يوم، تعتمد قطاعاتنا الحيوية—من خدمات الإسعاف والدفاع المدني، إلى شاحنات نقل البضائع وتطبيقات التنقل اليومية—على خوادم تقع خارج حدودنا، تديرها شركات تجارية تملك مفتاح تعطيلها أو رفع تسعيرتها بقرار منفرد.
|
|
</p>
|
|
<p>
|
|
لقد أثبتت التجارب الدولية أن الدول التي لا تملك خريطتها الرقمية، لا تملك استقلال قرارها الميداني. تقدم <strong>MapSaaS</strong> اليوم للمملكة الأردنية الهاشمية فرصة تاريخية لا تتكرر: إنهاء هذا الاستنزاف الاقتصادي، توطين أسرع محرك معالجة مكانية في المنطقة، وجعل الأردن نموذجاً رائداً في السيادة الجيومكانية الرقمية المتكاملة.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Key Pillars Sign-off -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-black/5">
|
|
<div class="p-3.5 bg-white rounded-2xl border border-black/5 shadow-2xs">
|
|
<div class="text-[11px] text-apple-muted font-mono">الجدوى الاقتصادية</div>
|
|
<div class="font-bold text-tactical-emerald text-sm mt-0.5">وفر وطني فوري (zsh.30/رحلة)</div>
|
|
</div>
|
|
<div class="p-3.5 bg-white rounded-2xl border border-black/5 shadow-2xs">
|
|
<div class="text-[11px] text-apple-muted font-mono">الأمن السيبراني</div>
|
|
<div class="font-bold text-apple-blue text-sm mt-0.5">صفر تسريب إحداثيات</div>
|
|
</div>
|
|
<div class="p-3.5 bg-white rounded-2xl border border-black/5 shadow-2xs">
|
|
<div class="text-[11px] text-apple-muted font-mono">الاستقلالية الاستراتيجية</div>
|
|
<div class="font-bold text-sovereign-gold text-sm mt-0.5">صمود معزول 100%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Executive Action Buttons -->
|
|
<div class="pt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-apple-text text-white flex items-center justify-center font-bold text-xs">🇯🇴</div>
|
|
<div>
|
|
<div class="text-xs font-bold text-apple-text">فريق المبادرة الوطنية للسيادة المكانية</div>
|
|
<div class="text-[11px] text-apple-muted">عمّان • المملكة الأردنية الهاشمية</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 w-full sm:w-auto">
|
|
<button class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-full bg-apple-text hover:bg-black text-white font-semibold text-xs transition-all shadow-md cursor-pointer" onclick="alert('تم تسجيل طلبك لعقد جلسة إحاطة تنفيذية مغلقة لمجلس السياسات والمؤسسات المعنية.')">
|
|
<span class="material-symbols-outlined text-[18px]">calendar_today</span>
|
|
طلب إحاطة تنفيذية عالية المستوى
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- LUXURY FOOTER (Apple Minimalist Style) -->
|
|
<footer class="border-t border-black/5 bg-[#F5F5F7] mt-24 py-12 text-xs text-apple-muted">
|
|
<div class="max-w-7xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-6">
|
|
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-7 h-7 rounded-lg bg-apple-blue flex items-center justify-center text-white text-[14px]">
|
|
<span class="material-symbols-outlined text-[16px]">explore</span>
|
|
</div>
|
|
<span class="font-medium text-apple-sub">منظومة MapSaaS للسيادة المكانية © 2026 — مصممة ومطورة في الأردن بأعلى المعايير العالمية.</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6 font-mono text-[11px]">
|
|
<span>Amman, Jordan</span>
|
|
<span>•</span>
|
|
<span>JAD68 / JTM Compliant</span>
|
|
<span>•</span>
|
|
<span>Strict Dual-Use Framework</span>
|
|
</div>
|
|
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- SCRIPT FOR DYNAMIC CALCULATOR -->
|
|
<script>
|
|
const tripsRange = document.getElementById('tripsRange');
|
|
const rateRange = document.getElementById('rateRange');
|
|
const tripsValueText = document.getElementById('tripsValueText');
|
|
const rateValueText = document.getElementById('rateValueText');
|
|
const annualLossSaved = document.getElementById('annualLossSaved');
|
|
const fiveYearRetention = document.getElementById('fiveYearRetention');
|
|
|
|
function updateCalculator() {
|
|
const trips = parseInt(tripsRange.value);
|
|
const rate = parseFloat(rateRange.value);
|
|
|
|
// Formatting text displays
|
|
tripsValueText.textContent = trips.toLocaleString('en-US') + ' رحلة';
|
|
rateValueText.textContent = '$' + rate.toFixed(2) + ' / رحلة';
|
|
|
|
// Calculation: trips * rate (USD) * 365 days converted to JOD (1 USD = 0.709 JOD)
|
|
const dailyUsd = trips * rate;
|
|
const annualJod = Math.round(dailyUsd * 365 * 0.709);
|
|
const fiveYearJod = annualJod * 5;
|
|
|
|
annualLossSaved.textContent = annualJod.toLocaleString('en-US') + ' د.أ';
|
|
fiveYearRetention.textContent = (fiveYearJod / 1000000).toFixed(1) + 'M دينار أردني';
|
|
}
|
|
|
|
tripsRange.addEventListener('input', updateCalculator);
|
|
rateRange.addEventListener('input', updateCalculator);
|
|
updateCalculator();
|
|
</script>
|
|
</body>
|
|
</html>
|