Hamza/maps-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(showcase): apple SF Pro typography and refined executive palette

Browse Source
This commit is contained in:
Hamza-Ayed
2026-08-17 19:33:21 +03:00
parent a0a5a09135
commit bd287d155b
1 changed files with 236 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/ExecutiveShowcase.tsx
+236 -255
View File
@@ -1,58 +1,54 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { import {
Shield, Shield,
Compass,
Map as MapIcon, Map as MapIcon,
Activity, Activity,
CheckCircle2,
XCircle,
Layers, Layers,
Eye, Eye,
Crosshair, Crosshair,
Mountain,
Cpu, Cpu,
Zap,
Globe, Globe,
Server,
ArrowRight, ArrowRight,
Check,
ChevronRight,
Radio, Radio,
Gauge,
TrendingUp, TrendingUp,
FileText, Award,
Flame, CheckCircle,
Award XCircle,
HelpCircle,
ChevronLeft
} from 'lucide-react'; } from 'lucide-react';
export const ExecutiveShowcase: React.FC = () => { export const ExecutiveShowcase: React.FC = () => {
const [activeTab, setActiveTab] = useState<'strategy' | 'tactical' | 'comparison' | 'roadmap'>('strategy'); const [activeTab, setActiveTab] = useState<'strategy' | 'tactical' | 'comparison' | 'roadmap'>('strategy');
const appleFont = '-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "SF Pro Arabic", system-ui, -apple-system, sans-serif';
return ( return (
<div style={{ <div style={{
height: '100vh', height: '100vh',
overflowY: 'auto', overflowY: 'auto',
overflowX: 'hidden', overflowX: 'hidden',
background: 'radial-gradient(ellipse at top, #1e1b4b 0%, #0b0f19 50%, #030712 100%)', background: '#0a0d14',
color: '#f8fafc', color: '#f1f5f9',
fontFamily: "'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif", fontFamily: appleFont,
direction: 'rtl', direction: 'rtl',
paddingTop: 48, paddingTop: 48,
paddingBottom: 80, paddingBottom: 80,
scrollBehavior: 'smooth' scrollBehavior: 'smooth'
}}> }}>
{/* Top Military & National Header */} {/* Top Executive Header */}
<header style={{ <header style={{
borderBottom: '1px solid rgba(255, 255, 255, 0.08)', borderBottom: '1px solid #1e293b',
background: 'rgba(11, 15, 25, 0.8)', background: 'rgba(10, 13, 20, 0.88)',
backdropFilter: 'blur(20px)', backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
position: 'sticky', position: 'sticky',
top: 0, top: 0,
zIndex: 50, zIndex: 50,
padding: '16px 24px' padding: '14px 28px'
}}> }}>
<div style={{ <div style={{
maxWidth: 1280, maxWidth: 1240,
margin: '0 auto', margin: '0 auto',
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
@@ -62,37 +58,37 @@ export const ExecutiveShowcase: React.FC = () => {
}}> }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 14 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
<div style={{ <div style={{
width: 46, width: 44,
height: 46, height: 44,
borderRadius: 12, borderRadius: 10,
background: 'linear-gradient(135deg, #4f46e5, #06b6d4)', background: '#1e293b',
border: '1px solid #334155',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
boxShadow: '0 4px 20px rgba(79, 70, 229, 0.4)', color: '#38bdf8'
border: '1px solid rgba(255, 255, 255, 0.2)'
}}> }}>
<Shield size={24} color="#ffffff" /> <Shield size={22} />
</div> </div>
<div> <div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 800, letterSpacing: '-0.02em', color: '#ffffff' }}> <h1 style={{ margin: 0, fontSize: '1.2rem', fontWeight: 700, letterSpacing: '-0.01em', color: '#f8fafc' }}>
منظومة انطلاق للسيادة المكانية والخرائط التكتيكية منظومة انطلاق للسيادة المكانية والخرائط التكتيكية
</h1> </h1>
<span style={{ <span style={{
fontSize: '11px', fontSize: '11px',
background: 'rgba(34, 197, 94, 0.15)', background: 'rgba(16, 185, 129, 0.1)',
color: '#4ade80', color: '#34d399',
border: '1px solid rgba(34, 197, 94, 0.3)', border: '1px solid rgba(16, 185, 129, 0.25)',
padding: '2px 8px', padding: '2px 8px',
borderRadius: 999, borderRadius: 6,
fontWeight: 700 fontWeight: 600
}}> }}>
🇯🇴 سيادة أردنية 100% 🇯🇴 سيادة أردنية 100%
</span> </span>
</div> </div>
<p style={{ margin: '2px 0 0 0', fontSize: '0.8rem', color: '#94a3b8' }}> <p style={{ margin: '2px 0 0 0', fontSize: '0.8rem', color: '#64748b' }}>
عرض استراتيجي موجه للمركز الجغرافي الملكي الأردني والقيادة العامة | إعداد: المقدم م. حمزة الغويري عرض استراتيجي للمركز الجغرافي الملكي الأردني والقيادة العامة | إعداد: المقدم م. حمزة الغويري
</p> </p>
</div> </div>
</div> </div>
@@ -101,83 +97,81 @@ export const ExecutiveShowcase: React.FC = () => {
<div style={{ display: 'flex', gap: 10 }}> <div style={{ display: 'flex', gap: 10 }}>
<a href="#map" style={{ <a href="#map" style={{
textDecoration: 'none', textDecoration: 'none',
background: 'linear-gradient(135deg, #6366f1, #4f46e5)', background: '#2563eb',
color: '#ffffff', color: '#ffffff',
padding: '8px 18px', padding: '8px 18px',
borderRadius: 10, borderRadius: 8,
fontSize: '0.85rem', fontSize: '0.85rem',
fontWeight: 700, fontWeight: 600,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 6, gap: 6,
boxShadow: '0 4px 14px rgba(99, 102, 241, 0.35)' transition: 'background 0.2s'
}}> }}>
<MapIcon size={16} /> فتح الخريطة التفاعلية <MapIcon size={15} /> فتح الخريطة التفاعلية
</a> </a>
<a href="#review" style={{ <a href="#review" style={{
textDecoration: 'none', textDecoration: 'none',
background: 'rgba(255, 255, 255, 0.06)', background: '#1e293b',
border: '1px solid rgba(255, 255, 255, 0.12)', border: '1px solid #334155',
color: '#cbd5e1', color: '#94a3b8',
padding: '8px 16px', padding: '8px 16px',
borderRadius: 10, borderRadius: 8,
fontSize: '0.85rem', fontSize: '0.85rem',
fontWeight: 600, fontWeight: 600,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 6 gap: 6
}}> }}>
<Activity size={16} color="#38bdf8" /> لوحة تدقيق الشوارع <Activity size={15} color="#38bdf8" /> لوحة تدقيق الشوارع
</a> </a>
</div> </div>
</div> </div>
</header> </header>
{/* Main Container */} {/* Main Container */}
<main style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 24px' }}> <main style={{ maxWidth: 1240, margin: '0 auto', padding: '32px 24px' }}>
{/* Hero Section */} {/* Hero Section */}
<section style={{ <section style={{
textAlign: 'center', textAlign: 'center',
padding: '40px 20px', padding: '44px 24px',
background: 'linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, rgba(15, 23, 42, 0) 100%)', background: '#111726',
borderRadius: 24, borderRadius: 16,
border: '1px solid rgba(255, 255, 255, 0.08)', border: '1px solid #1e293b',
marginBottom: 40 marginBottom: 36
}}> }}>
<div style={{ <div style={{
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
gap: 8, gap: 8,
background: 'rgba(99, 102, 241, 0.15)', background: 'rgba(56, 189, 248, 0.08)',
border: '1px solid rgba(99, 102, 241, 0.3)', border: '1px solid rgba(56, 189, 248, 0.2)',
padding: '6px 16px', padding: '5px 14px',
borderRadius: 999, borderRadius: 8,
color: '#a5b4fc', color: '#38bdf8',
fontSize: '0.85rem', fontSize: '0.82rem',
fontWeight: 700, fontWeight: 600,
marginBottom: 20 marginBottom: 18
}}> }}>
<Cpu size={16} /> البديل السيادي الكامل لمنظومات إزري (ArcGIS) في الأردن <Cpu size={15} /> البديل السيادي الكامل لمنظومات إزري (ArcGIS) في الأردن
</div> </div>
<h2 style={{ <h2 style={{
fontSize: 'clamp(1.8rem, 3.5vw, 2.8rem)', fontSize: 'clamp(1.6rem, 3.2vw, 2.4rem)',
fontWeight: 900, fontWeight: 700,
lineHeight: 1.3, lineHeight: 1.35,
margin: '0 auto 16px auto', margin: '0 auto 16px auto',
maxWidth: 900, maxWidth: 880,
background: 'linear-gradient(135deg, #ffffff 30%, #94a3b8 100%)', color: '#f8fafc'
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent'
}}> }}>
منصة خرائط وطنية ذكية تتغذى ذاتياً وتولد الشوارع والبيانات المكانية من حركة الأساطيل منصة خرائط وطنية ذكية تتغذى ذاتياً وتولد الشوارع والبيانات المكانية من حركة الأساطيل
</h2> </h2>
<p style={{ <p style={{
fontSize: '1.05rem', fontSize: '0.98rem',
color: '#94a3b8', color: '#94a3b8',
maxWidth: 820, maxWidth: 780,
margin: '0 auto 28px auto', margin: '0 auto 28px auto',
lineHeight: 1.8 lineHeight: 1.8
}}> }}>
@@ -188,25 +182,25 @@ export const ExecutiveShowcase: React.FC = () => {
<div style={{ <div style={{
display: 'grid', display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
gap: 16, gap: 14,
maxWidth: 1000, maxWidth: 960,
margin: '0 auto' margin: '0 auto'
}}> }}>
<div style={{ background: 'rgba(255, 255, 255, 0.04)', padding: '16px', borderRadius: 14, border: '1px solid rgba(255, 255, 255, 0.08)' }}> <div style={{ background: '#0a0d14', padding: '16px', borderRadius: 12, border: '1px solid #1e293b' }}>
<div style={{ fontSize: '1.8rem', fontWeight: 900, color: '#38bdf8' }}>60 FPS</div> <div style={{ fontSize: '1.6rem', fontWeight: 800, color: '#38bdf8' }}>60 FPS</div>
<div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: 4 }}>سرعة عرض المتجهات (Martin MVT)</div> <div style={{ fontSize: '0.82rem', color: '#64748b', marginTop: 4 }}>سرعة عرض المتجهات (Vector Tiles)</div>
</div> </div>
<div style={{ background: 'rgba(255, 255, 255, 0.04)', padding: '16px', borderRadius: 14, border: '1px solid rgba(255, 255, 255, 0.08)' }}> <div style={{ background: '#0a0d14', padding: '16px', borderRadius: 12, border: '1px solid #1e293b' }}>
<div style={{ fontSize: '1.8rem', fontWeight: 900, color: '#4ade80' }}>100%</div> <div style={{ fontSize: '1.6rem', fontWeight: 800, color: '#34d399' }}>100%</div>
<div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: 4 }}>استقلالية تامة (Air-Gapped On-Premise)</div> <div style={{ fontSize: '0.82rem', color: '#64748b', marginTop: 4 }}>استقلالية تامة (Air-Gapped On-Premise)</div>
</div> </div>
<div style={{ background: 'rgba(255, 255, 255, 0.04)', padding: '16px', borderRadius: 14, border: '1px solid rgba(255, 255, 255, 0.08)' }}> <div style={{ background: '#0a0d14', padding: '16px', borderRadius: 12, border: '1px solid #1e293b' }}>
<div style={{ fontSize: '1.8rem', fontWeight: 900, color: '#fbbf24' }}>$0</div> <div style={{ fontSize: '1.6rem', fontWeight: 800, color: '#fbbf24' }}>$0</div>
<div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: 4 }}>تكلفة رخص سنوية أو رسوم لكل مستخدم</div> <div style={{ fontSize: '0.82rem', color: '#64748b', marginTop: 4 }}>تكلفة رخص سنوية أو رسوم لكل مستخدم</div>
</div> </div>
<div style={{ background: 'rgba(255, 255, 255, 0.04)', padding: '16px', borderRadius: 14, border: '1px solid rgba(255, 255, 255, 0.08)' }}> <div style={{ background: '#0a0d14', padding: '16px', borderRadius: 12, border: '1px solid #1e293b' }}>
<div style={{ fontSize: '1.8rem', fontWeight: 900, color: '#a78bfa' }}>3 دول</div> <div style={{ fontSize: '1.6rem', fontWeight: 800, color: '#cbd5e1' }}>3 دول</div>
<div style={{ fontSize: '0.85rem', color: '#94a3b8', marginTop: 4 }}>الأردن 🇯🇴 • سوريا 🇸🇾 • مصر 🇪🇬</div> <div style={{ fontSize: '0.82rem', color: '#64748b', marginTop: 4 }}>الأردن 🇯🇴 • سوريا 🇸🇾 • مصر 🇪🇬</div>
</div> </div>
</div> </div>
</section> </section>
@@ -215,33 +209,32 @@ export const ExecutiveShowcase: React.FC = () => {
<div style={{ <div style={{
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
gap: 12, gap: 10,
marginBottom: 32, marginBottom: 28,
flexWrap: 'wrap' flexWrap: 'wrap'
}}> }}>
{[ {[
{ id: 'strategy', label: '1. الرؤية وحجر الأساس (توليد الخرائط)', icon: <TrendingUp size={16} /> }, { id: 'strategy', label: '1. الرؤية وتوليد الخرائط الذاتي', icon: <TrendingUp size={15} /> },
{ id: 'tactical', label: '2. الأدوات التكتيكية والعسكرية (LOS)', icon: <Crosshair size={16} /> }, { id: 'tactical', label: '2. الأدوات التكتيكية والعسكرية (LOS)', icon: <Crosshair size={15} /> },
{ id: 'comparison', label: '3. المقارنة القاطعة مع إزري (Esri)', icon: <Layers size={16} /> }, { id: 'comparison', label: '3. المقارنة القاطعة مع إزري (Esri)', icon: <Layers size={15} /> },
{ id: 'roadmap', label: '4. خطة الشراكة مع المركز الجغرافي', icon: <Award size={16} /> }, { id: 'roadmap', label: '4. خطة الشراكة مع المركز الجغرافي', icon: <Award size={15} /> },
].map((tab) => ( ].map((tab) => (
<button <button
key={tab.id} key={tab.id}
onClick={() => setActiveTab(tab.id as any)} onClick={() => setActiveTab(tab.id as any)}
style={{ style={{
background: activeTab === tab.id ? 'linear-gradient(135deg, #4f46e5, #6366f1)' : 'rgba(255, 255, 255, 0.05)', background: activeTab === tab.id ? '#2563eb' : '#111726',
border: activeTab === tab.id ? '1px solid #818cf8' : '1px solid rgba(255, 255, 255, 0.1)', border: activeTab === tab.id ? '1px solid #3b82f6' : '1px solid #1e293b',
color: activeTab === tab.id ? '#ffffff' : '#94a3b8', color: activeTab === tab.id ? '#ffffff' : '#94a3b8',
padding: '12px 22px', padding: '10px 20px',
borderRadius: 12, borderRadius: 8,
fontSize: '0.9rem', fontSize: '0.88rem',
fontWeight: 700, fontWeight: 600,
cursor: 'pointer', cursor: 'pointer',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 8, gap: 8,
transition: 'all 0.2s ease', transition: 'all 0.15s ease'
boxShadow: activeTab === tab.id ? '0 4px 16px rgba(79, 70, 229, 0.35)' : 'none'
}} }}
> >
{tab.icon} {tab.icon}
@@ -250,78 +243,76 @@ export const ExecutiveShowcase: React.FC = () => {
))} ))}
</div> </div>
{/* TAB 1: STRATEGY & SELF-HEALING MAPS */} {/* TAB 1: STRATEGY */}
{activeTab === 'strategy' && ( {activeTab === 'strategy' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
<div style={{ <div style={{
background: 'rgba(15, 23, 42, 0.6)', background: '#111726',
border: '1px solid rgba(255, 255, 255, 0.08)', border: '1px solid #1e293b',
borderRadius: 20, borderRadius: 16,
padding: '32px', padding: '28px'
backdropFilter: 'blur(16px)'
}}> }}>
<h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: '#38bdf8', margin: '0 0 16px 0', display: 'flex', alignItems: 'center', gap: 10 }}> <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#f8fafc', margin: '0 0 14px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
<TrendingUp size={24} /> حجر الأساس: كيف تحول حركة الأساطيل إلى خريطة سيادية حية؟ <TrendingUp size={20} color="#38bdf8" /> حجر الأساس: كيف تحول حركة الأساطيل إلى خريطة سيادية حية؟
</h3> </h3>
<p style={{ color: '#cbd5e1', fontSize: '1rem', lineHeight: 1.8 }}> <p style={{ color: '#94a3b8', fontSize: '0.95rem', lineHeight: 1.8 }}>
النموذج التقليدي المتبع لدى إزري والشركات الأجنبية يعتمد على انتظار فرق المسح الميداني أو التقاط صور أقمار صناعية باهظة كل عدة أشهر أو سنوات. في المقابل، تتبنى منصتنا <strong>فلسفة الخريطة الحية ذاتية التغذية والتوليد (Autonomous Self-Healing Map Grid)</strong>: النموذج التقليدي المتبع لدى إزري والشركات الأجنبية يعتمد على انتظار فرق المسح الميداني أو التقاط صور أقمار صناعية باهظة كل عدة أشهر أو سنوات. في المقابل، تتبنى منصتنا <strong>فلسفة الخريطة الحية ذاتية التغذية والتوليد (Autonomous Self-Healing Map Grid)</strong>:
</p> </p>
<div style={{ <div style={{
display: 'grid', display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
gap: 20, gap: 16,
marginTop: 24 marginTop: 20
}}> }}>
<div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 20, borderRadius: 16, border: '1px solid rgba(56, 189, 248, 0.2)' }}> <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(56, 189, 248, 0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#38bdf8', marginBottom: 12 }}> <div style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(56, 189, 248, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#38bdf8', marginBottom: 12 }}>
<Activity size={20} /> <Activity size={18} />
</div> </div>
<h4 style={{ margin: '0 0 8px 0', fontSize: '1.1rem', color: '#ffffff' }}>1. استيعاب التتبع اللحظي (Telemetry)</h4> <h4 style={{ margin: '0 0 8px 0', fontSize: '1rem', color: '#f8fafc' }}>1. استيعاب التتبع اللحظي (Telemetry)</h4>
<p style={{ fontSize: '0.88rem', color: '#94a3b8', lineHeight: 1.7 }}> <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
المنصة تستوعب مئات آلاف نقاط الموقع من الآليات العسكرية أو أساطيل التوصيل والنقل كل 3 ثوانٍ وتعالجها مكانياً في محرك PostGIS فائق الأداء. المنصة تستوعب مئات آلاف نقاط الموقع من الآليات العسكرية أو أساطيل التوصيل والنقل كل 3 ثوانٍ وتعالجها مكانياً في محرك PostGIS فائق الأداء.
</p> </p>
</div> </div>
<div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 20, borderRadius: 16, border: '1px solid rgba(168, 85, 247, 0.2)' }}> <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(168, 85, 247, 0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#c084fc', marginBottom: 12 }}> <div style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(168, 85, 247, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#c084fc', marginBottom: 12 }}>
<Cpu size={20} /> <Cpu size={18} />
</div> </div>
<h4 style={{ margin: '0 0 8px 0', fontSize: '1.1rem', color: '#ffffff' }}>2. خوارزمية اكتشاف الطرق الجديدة</h4> <h4 style={{ margin: '0 0 8px 0', fontSize: '1rem', color: '#f8fafc' }}>2. خوارزمية اكتشاف الطرق الجديدة</h4>
<p style={{ fontSize: '0.88rem', color: '#94a3b8', lineHeight: 1.7 }}> <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
عندما تتحرك مركبات متعددة في مسار صحراوي أو حي جديد غير مرسوم على الخريطة، يقوم النظام بتوليد طريق مرشح (Candidate Road) وحساب طوله، سرعته، ومعدل الثقة به تلقائياً. عندما تتحرك مركبات متعددة في مسار صحراوي أو حي جديد غير مرسوم على الخريطة، يقوم النظام بتوليد طريق مرشح (Candidate Road) وحساب طوله، سرعته، ومعدل الثقة به تلقائياً.
</p> </p>
</div> </div>
<div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 20, borderRadius: 16, border: '1px solid rgba(34, 197, 94, 0.2)' }}> <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(34, 197, 94, 0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#4ade80', marginBottom: 12 }}> <div style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(52, 211, 153, 0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#34d399', marginBottom: 12 }}>
<CheckCircle2 size={20} /> <CheckCircle size={18} />
</div> </div>
<h4 style={{ margin: '0 0 8px 0', fontSize: '1.1rem', color: '#ffffff' }}>3. التدقيق والموافقة ونشر الملاحة فوراً</h4> <h4 style={{ margin: '0 0 8px 0', fontSize: '1rem', color: '#f8fafc' }}>3. التدقيق والموافقة ونشر الملاحة فوراً</h4>
<p style={{ fontSize: '0.88rem', color: '#94a3b8', lineHeight: 1.7 }}> <p style={{ fontSize: '0.85rem', color: '#64748b', lineHeight: 1.7, margin: 0 }}>
يستعرض مهندسو المركز الجغرافي الشوارع المكتشفة في لوحة التدقيق (Review Dashboard) بجانب صور الأقمار الصناعية والخرائط السوفيتية، وبضغطة زر واحدة يُحقن الطريق في محرك الملاحة. يستعرض مهندسو المركز الجغرافي الشوارع المكتشفة في لوحة التدقيق بجانب صور الأقمار الصناعية والخرائط السوفيتية، وبضغطة زر واحدة يُحقن الطريق في محرك الملاحة.
</p> </p>
</div> </div>
</div> </div>
{/* Military & Tactical Deployment Expansion */}
<div style={{ <div style={{
marginTop: 28, marginTop: 20,
padding: '20px', padding: '16px 20px',
background: 'rgba(99, 102, 241, 0.12)', background: '#0a0d14',
borderRadius: 14, borderRadius: 12,
border: '1px solid rgba(99, 102, 241, 0.3)', border: '1px solid #1e293b',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 16 gap: 14
}}> }}>
<Globe size={32} color="#818cf8" style={{ flexShrink: 0 }} /> <Globe size={24} color="#38bdf8" style={{ flexShrink: 0 }} />
<div> <div>
<div style={{ fontWeight: 800, fontSize: '1rem', color: '#ffffff' }}> <div style={{ fontWeight: 700, fontSize: '0.92rem', color: '#f8fafc' }}>
الأثر العسكري والتوسعي: العمل في أي مسرح عمليات فورياً الأثر العسكري والتوسعي: العمل في أي مسرح عمليات فورياً
</div> </div>
<div style={{ fontSize: '0.88rem', color: '#cbd5e1', marginTop: 4, lineHeight: 1.7 }}> <div style={{ fontSize: '0.84rem', color: '#94a3b8', marginTop: 3, lineHeight: 1.6 }}>
إذا تم نشر آليات القوات المسلحة أو الأجهزة الأمنية في أي منطقة حدودية أو دولة مجاورة (مثل جنوب سوريا، غرب العراق، صحراء سيناء)، يكفي تشغيل تطبيق التتبع لتبدأ المنصة فوراً برسم شبكة الطرق والممرات الوعرة ونشرها لباقي التشكيلات في الميدان دون انتظار أي طرف أجنبي! إذا تم نشر آليات القوات المسلحة أو الأجهزة الأمنية في أي منطقة حدودية أو دولة مجاورة (مثل جنوب سوريا، غرب العراق، صحراء سيناء)، يكفي تشغيل تطبيق التتبع لتبدأ المنصة فوراً برسم شبكة الطرق والممرات الوعرة ونشرها لباقي التشكيلات في الميدان دون انتظار أي طرف أجنبي.
</div> </div>
</div> </div>
</div> </div>
@@ -329,37 +320,34 @@ export const ExecutiveShowcase: React.FC = () => {
</div> </div>
)} )}
{/* TAB 2: TACTICAL & MILITARY TOOLS */} {/* TAB 2: TACTICAL */}
{activeTab === 'tactical' && ( {activeTab === 'tactical' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
<div style={{ <div style={{
background: 'rgba(15, 23, 42, 0.6)', background: '#111726',
border: '1px solid rgba(255, 255, 255, 0.08)', border: '1px solid #1e293b',
borderRadius: 20, borderRadius: 16,
padding: '32px', padding: '28px'
backdropFilter: 'blur(16px)'
}}> }}>
<h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: '#f59e0b', margin: '0 0 16px 0', display: 'flex', alignItems: 'center', gap: 10 }}> <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#f8fafc', margin: '0 0 14px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
<Crosshair size={24} /> قدرات الميدان والتحليل التكتيكي العسكري <Crosshair size={20} color="#fbbf24" /> قدرات الميدان والتحليل التكتيكي العسكري
</h3> </h3>
<p style={{ color: '#cbd5e1', fontSize: '1rem', lineHeight: 1.8 }}> <p style={{ color: '#94a3b8', fontSize: '0.95rem', lineHeight: 1.8 }}>
تم تزويد المنصة بأدوات تحليل تضاريسي مخصصة لخدمة سلاح المدفعية، الاستطلاع، وغرف العمليات والسيطرة المشتركة: تم تزويد المنصة بأدوات تحليل تضاريسي مخصصة لخدمة سلاح المدفعية، الاستطلاع، وغرف العمليات والسيطرة المشتركة:
</p> </p>
<div style={{ <div style={{
display: 'grid', display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
gap: 20, gap: 16,
marginTop: 24 marginTop: 20
}}> }}>
<div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 22, borderRadius: 16, border: '1px solid rgba(255, 255, 255, 0.08)' }}> <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
<div style={{ padding: 8, borderRadius: 8, background: 'rgba(245, 158, 11, 0.2)', color: '#fbbf24' }}> <Eye size={18} color="#fbbf24" />
<Eye size={20} /> <h4 style={{ margin: 0, fontSize: '0.98rem', color: '#f8fafc' }}>تبادل الرؤية وخط النظر (Line of Sight)</h4>
</div>
<h4 style={{ margin: 0, fontSize: '1.1rem', color: '#ffffff' }}>تبادل الرؤية وخط النظر (Line of Sight)</h4>
</div> </div>
<ul style={{ paddingRight: 18, color: '#94a3b8', fontSize: '0.88rem', lineHeight: 1.8, margin: 0 }}> <ul style={{ paddingRight: 16, color: '#94a3b8', fontSize: '0.84rem', lineHeight: 1.8, margin: 0 }}>
<li>تحديد إمكانية الرؤية المباشرة بين نقطتين (راصد وهدف).</li> <li>تحديد إمكانية الرؤية المباشرة بين نقطتين (راصد وهدف).</li>
<li>كشف وتحديد القمم الجبلية والعوائق الحاجبة للرؤية بدقة المتر.</li> <li>كشف وتحديد القمم الجبلية والعوائق الحاجبة للرؤية بدقة المتر.</li>
<li>حساب نسبة <strong>الأرض الميتة (Dead Ground)</strong> خلف الحواف.</li> <li>حساب نسبة <strong>الأرض الميتة (Dead Ground)</strong> خلف الحواف.</li>
@@ -367,29 +355,25 @@ export const ExecutiveShowcase: React.FC = () => {
</ul> </ul>
</div> </div>
<div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 22, borderRadius: 16, border: '1px solid rgba(255, 255, 255, 0.08)' }}> <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
<div style={{ padding: 8, borderRadius: 8, background: 'rgba(167, 139, 250, 0.2)', color: '#c084fc' }}> <Shield size={18} color="#a78bfa" />
<Shield size={20} /> <h4 style={{ margin: 0, fontSize: '0.98rem', color: '#f8fafc' }}>حسابات الرماية وزاوية الموقع (Mils)</h4>
</div>
<h4 style={{ margin: 0, fontSize: '1.1rem', color: '#ffffff' }}>حسابات الرماية وزاوية الموقع (Mils)</h4>
</div> </div>
<ul style={{ paddingRight: 18, color: '#94a3b8', fontSize: '0.88rem', lineHeight: 1.8, margin: 0 }}> <ul style={{ paddingRight: 16, color: '#94a3b8', fontSize: '0.84rem', lineHeight: 1.8, margin: 0 }}>
<li>حساب زاوية الموقع (Angle of Site) بالميللي العسكري (Artillery Mils).</li> <li>حساب زاوية الموقع بالميللي العسكري (Artillery Mils NATO/Soviet).</li>
<li>حساب السمت والاتجاه البوصلّي الدقيق (Azimuth / Bearing).</li> <li>حساب السمت والاتجاه البوصلّي الدقيق (Azimuth / Bearing).</li>
<li>مقطع رأسي كامل للارتفاعات فوق مستوى سطح البحر (AMSL).</li> <li>مقطع رأسي كامل للارتفاعات فوق مستوى سطح البحر (AMSL).</li>
<li>تعديل ارتفاع عين الراصد وارتفاع الهدف حسب نوع الآلية أو البرج.</li> <li>تعديل ارتفاع عين الراصد وارتفاع الهدف حسب نوع الآلية أو البرج.</li>
</ul> </ul>
</div> </div>
<div style={{ background: 'rgba(255, 255, 255, 0.03)', padding: 22, borderRadius: 16, border: '1px solid rgba(255, 255, 255, 0.08)' }}> <div style={{ background: '#0a0d14', padding: 18, borderRadius: 12, border: '1px solid #1e293b' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
<div style={{ padding: 8, borderRadius: 8, background: 'rgba(56, 189, 248, 0.2)', color: '#38bdf8' }}> <Radio size={18} color="#38bdf8" />
<Radio size={20} /> <h4 style={{ margin: 0, fontSize: '0.98rem', color: '#f8fafc' }}>التشغيل المعزول التام (Air-Gapped Offline)</h4>
</div>
<h4 style={{ margin: 0, fontSize: '1.1rem', color: '#ffffff' }}>التشغيل المعزول التام (Air-Gapped Offline)</h4>
</div> </div>
<ul style={{ paddingRight: 18, color: '#94a3b8', fontSize: '0.88rem', lineHeight: 1.8, margin: 0 }}> <ul style={{ paddingRight: 16, color: '#94a3b8', fontSize: '0.84rem', lineHeight: 1.8, margin: 0 }}>
<li>نظام كامل يعمل داخل خادم صغير أو جهاز لوحي عسكري داخل الآلية.</li> <li>نظام كامل يعمل داخل خادم صغير أو جهاز لوحي عسكري داخل الآلية.</li>
<li>توجيه وملاحة وحساب مسافات بدون الحاجة لأي اتصال بالإنترنت.</li> <li>توجيه وملاحة وحساب مسافات بدون الحاجة لأي اتصال بالإنترنت.</li>
<li>حماية تامة من التشويش أو قطع الخدمات السحابية الأجنبية.</li> <li>حماية تامة من التشويش أو قطع الخدمات السحابية الأجنبية.</li>
@@ -401,79 +385,78 @@ export const ExecutiveShowcase: React.FC = () => {
</div> </div>
)} )}
{/* TAB 3: DIRECT COMPARISON WITH ESRI ARCGIS */} {/* TAB 3: DIRECT COMPARISON WITH ESRI */}
{activeTab === 'comparison' && ( {activeTab === 'comparison' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
<div style={{ <div style={{
background: 'rgba(15, 23, 42, 0.6)', background: '#111726',
border: '1px solid rgba(255, 255, 255, 0.08)', border: '1px solid #1e293b',
borderRadius: 20, borderRadius: 16,
padding: '32px', padding: '28px'
backdropFilter: 'blur(16px)'
}}> }}>
<h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: '#ffffff', margin: '0 0 20px 0' }}> <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#f8fafc', margin: '0 0 16px 0' }}>
مقارنة مباشرة: منصة انطلاق السيادية مقابل إزري (Esri ArcGIS) مقارنة دقيقة: منصة انطلاق السيادية مقابل منظومة إزري (Esri ArcGIS)
</h3> </h3>
<div style={{ overflowX: 'auto' }}> <div style={{ overflowX: 'auto' }}>
<table style={{ <table style={{
width: '100%', width: '100%',
borderCollapse: 'collapse', borderCollapse: 'collapse',
fontSize: '0.9rem', fontSize: '0.88rem',
textAlign: 'right' textAlign: 'right'
}}> }}>
<thead> <thead>
<tr style={{ background: 'rgba(255, 255, 255, 0.06)', borderBottom: '2px solid rgba(255, 255, 255, 0.15)' }}> <tr style={{ background: '#0a0d14', borderBottom: '2px solid #1e293b' }}>
<th style={{ padding: '14px 18px', color: '#94a3b8' }}>المعيار</th> <th style={{ padding: '12px 16px', color: '#94a3b8', fontWeight: 600 }}>المعيار</th>
<th style={{ padding: '14px 18px', color: '#ef4444' }}>منظومة إزري (Esri ArcGIS)</th> <th style={{ padding: '12px 16px', color: '#f87171', fontWeight: 600 }}>منظومة إزري (Esri ArcGIS Enterprise)</th>
<th style={{ padding: '14px 18px', color: '#4ade80', background: 'rgba(34, 197, 94, 0.08)' }}>منصة انطلاق السيادية (Intaleq)</th> <th style={{ padding: '12px 16px', color: '#34d399', fontWeight: 600, background: 'rgba(16, 185, 129, 0.05)' }}>منصة انطلاق السيادية (Intaleq)</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{[ {[
{ {
criteria: 'التكلفة والترخيص السنوي', criteria: 'نموذج التكلفة والترخيص السنوي',
esri: 'عشرات إلى مئات الآلاف $ سنوياً (تراخيص مستخدمين + استهلاك Credits)', esri: 'عقود Enterprise باهظة (تراخيص مستخدمين Creator/Viewer + استهلاك Service Credits للبحث والتوجيه)',
intaleq: 'ملكية سيادية وطنية كاملة $0 رخص سنوية أو رسوم مستخدمين' intaleq: 'ملكية سيادية وطنية 100%، $0 رخص سنوية، استعلامات واستخدام غير محدود بدون قيود'
}, },
{ {
criteria: 'السيادة وسرية البيانات', criteria: 'السيادة وموقع البيانات',
esri: 'تعتمد على سحابة إزري الأمريكية في البحث والتوجيه وتحديث البيانات', esri: 'خدمات التوجيه العالمي والـ Geocoding تمر عبر خوادم إزري السحابية في الولايات المتحدة',
intaleq: 'سيرفرات داخلية 100% داخل المركز الجغرافي أو القيادة العامة (On-Premise)' intaleq: 'معالجة داخلية 100% داخل خوادم المركز الجغرافي أو القيادة العامة (On-Premise / Air-Gapped)'
}, },
{ {
criteria: 'سرعة عرض الخرائط التفاعلية', criteria: 'سرعة عرض الخرائط التفاعلية',
esri: 'ثقيلة وبطيئة على المتصفحات وتطبيقات الميدان (15-25 FPS)', esri: 'تعتمد معمارية السيرفر التقليدية وتوليد الصور أو المتجهات الثقيلة (15-25 FPS على المتصفح)',
intaleq: 'فائقة السرعة عبر Vector Tiles ورندرة بكرت الشاشة (60 FPS)' intaleq: 'فائقة السرعة عبر Vector Tiles (Martin/PostGIS) ورندرة بالـ GPU بـ 60 FPS وسلاسة فورية'
}, },
{ {
criteria: 'تحديث شبكة الطرق', criteria: 'تحديث شبكة الطرق والمعالم',
esri: 'يتطلب مسحاً ميدانياً بطيئاً أو شراء مجموعات بيانات دورية باهظة', esri: 'تتطلب فرق مسح ميداني بطيئة أو شراء تحديثات بيانات دورية باهظة من شركات أجنبية',
intaleq: 'تحديث تلقائي لحظي من بيانات تتبع حركة السائقين والآليات' intaleq: 'تحديث حي ذاتي التغذية من حركة أساطيل التتبع وتوليد الطرق المرشحة تلقائياً'
}, },
{ {
criteria: 'البحث بالعربية والمسميات المحلية', criteria: 'البحث العربي والمسميات المحلية',
esri: 'ضعيف في فهم اللهجة الشعبية، التقسيمات العشائرية والأخطاء الإملائية', esri: 'ضعيف في استيعاب اللهجات المحلية، التقسيمات العشائرية والأخطاء الشائعة في كتابة الأسماء',
intaleq: 'محرك بحث ذكي يفهم اللهجة الأردنية، الاستعلامات النسبية وبوابات المجمعات' intaleq: 'محرك بحث ذكي يفهم اللهجة الأردنية والمسميات النسبية (قرب، مقابل، بجانب) وبوابات المعالم'
}, },
{ {
criteria: 'التكامل مع تطبيقات الموبايل والميدان', criteria: 'التكامل والتطوير (API & SDK)',
esri: 'يحتاج مكتبات SDK ضخمة وتراخيص App Development مدفوعة', esri: 'تتطلب مكتبات SDK ضخمة ومقيدة بشروط رخص للمطورين لكل تطبيق يتم إطلاقه',
intaleq: 'واجهات REST APIs و MapLibre مفتوحة وسهلة الدمج مع أي تطبيق فلاتر أو أندرويد' intaleq: 'واجهات REST APIs قياسية وخفيفة وسهلة الدمج مع أي تطبيق Flutter، iOS، Android، أو Web'
}, },
{ {
criteria: 'الاستخدام في مسارح عمليات خارج الأردن', criteria: 'التوسع في مسارح عمليات خارجية',
esri: 'شراء تراخيص خرائط منفصلة لكل دولة إضافية', esri: 'شراء حزم خرائط وبيانات منفصلة لكل دولة إضافية بتكاليف إضافية',
intaleq: 'إضافة أي دولة (سوريا، مصر، العراق) بسكربت واحد خلال دقائق معدودة' intaleq: 'إضافة أي دولة في العالم (سوريا، مصر، العراق) خلال دقائق بضغطة زر وبدون أي تكلفة'
} }
].map((row, idx) => ( ].map((row, idx) => (
<tr key={idx} style={{ <tr key={idx} style={{
borderBottom: '1px solid rgba(255, 255, 255, 0.06)', borderBottom: '1px solid #1e293b',
background: idx % 2 === 0 ? 'transparent' : 'rgba(255, 255, 255, 0.02)' background: idx % 2 === 0 ? 'transparent' : 'rgba(255, 255, 255, 0.01)'
}}> }}>
<td style={{ padding: '14px 18px', fontWeight: 700, color: '#f8fafc' }}>{row.criteria}</td> <td style={{ padding: '12px 16px', fontWeight: 600, color: '#f1f5f9' }}>{row.criteria}</td>
<td style={{ padding: '14px 18px', color: '#fca5a5' }}>✕ {row.esri}</td> <td style={{ padding: '12px 16px', color: '#fca5a5', lineHeight: 1.6 }}>{row.esri}</td>
<td style={{ padding: '14px 18px', color: '#86efac', fontWeight: 600, background: 'rgba(34, 197, 94, 0.04)' }}>✓ {row.intaleq}</td> <td style={{ padding: '12px 16px', color: '#a7f3d0', fontWeight: 500, background: 'rgba(16, 185, 129, 0.03)', lineHeight: 1.6 }}>{row.intaleq}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@@ -483,28 +466,27 @@ export const ExecutiveShowcase: React.FC = () => {
</div> </div>
)} )}
{/* TAB 4: ROADMAP WITH RJGC */} {/* TAB 4: ROADMAP */}
{activeTab === 'roadmap' && ( {activeTab === 'roadmap' && (
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
<div style={{ <div style={{
background: 'rgba(15, 23, 42, 0.6)', background: '#111726',
border: '1px solid rgba(255, 255, 255, 0.08)', border: '1px solid #1e293b',
borderRadius: 20, borderRadius: 16,
padding: '32px', padding: '28px'
backdropFilter: 'blur(16px)'
}}> }}>
<h3 style={{ fontSize: '1.4rem', fontWeight: 800, color: '#4ade80', margin: '0 0 16px 0', display: 'flex', alignItems: 'center', gap: 10 }}> <h3 style={{ fontSize: '1.25rem', fontWeight: 700, color: '#f8fafc', margin: '0 0 14px 0', display: 'flex', alignItems: 'center', gap: 10 }}>
<Award size={24} /> خطة الشراكة والتنفيذ المقترحة مع المركز الجغرافي الملكي <Award size={20} color="#34d399" /> خطة الشراكة والتنفيذ المقترحة مع المركز الجغرافي الملكي
</h3> </h3>
<p style={{ color: '#cbd5e1', fontSize: '1rem', lineHeight: 1.8 }}> <p style={{ color: '#94a3b8', fontSize: '0.95rem', lineHeight: 1.8 }}>
لا نطلب من المركز إلغاء ما لديه فجأة، بل نقترح مسار شراكة استراتيجي آمن يبدأ بإثبات الجدارة: لا نطلب من المركز إلغاء ما لديه فجأة، بل نقترح مسار شراكة استراتيجي آمن يبدأ بإثبات الجدارة:
</p> </p>
<div style={{ <div style={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: 16, gap: 14,
marginTop: 24 marginTop: 20
}}> }}>
{[ {[
{ {
@@ -524,37 +506,37 @@ export const ExecutiveShowcase: React.FC = () => {
} }
].map((item, idx) => ( ].map((item, idx) => (
<div key={idx} style={{ <div key={idx} style={{
background: 'rgba(255, 255, 255, 0.03)', background: '#0a0d14',
border: '1px solid rgba(255, 255, 255, 0.08)', border: '1px solid #1e293b',
borderRadius: 14, borderRadius: 12,
padding: '20px', padding: '16px 20px',
display: 'flex', display: 'flex',
alignItems: 'flex-start', alignItems: 'flex-start',
gap: 16 gap: 14
}}> }}>
<div style={{ <div style={{
width: 36, width: 32,
height: 36, height: 32,
borderRadius: 10, borderRadius: 8,
background: 'rgba(79, 70, 229, 0.2)', background: '#1e293b',
border: '1px solid rgba(79, 70, 229, 0.4)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
color: '#a5b4fc', color: '#38bdf8',
fontWeight: 800, fontWeight: 700,
fontSize: '0.9rem',
flexShrink: 0 flexShrink: 0
}}> }}>
{idx + 1} {idx + 1}
</div> </div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
<h4 style={{ margin: 0, fontSize: '1.05rem', color: '#ffffff' }}>{item.phase}</h4> <h4 style={{ margin: 0, fontSize: '0.98rem', color: '#f8fafc' }}>{item.phase}</h4>
<span style={{ fontSize: '0.8rem', color: '#38bdf8', background: 'rgba(56, 189, 248, 0.1)', padding: '2px 10px', borderRadius: 999 }}> <span style={{ fontSize: '0.78rem', color: '#38bdf8', background: 'rgba(56, 189, 248, 0.08)', padding: '2px 8px', borderRadius: 6 }}>
{item.duration} {item.duration}
</span> </span>
</div> </div>
<p style={{ margin: '8px 0 0 0', fontSize: '0.88rem', color: '#94a3b8', lineHeight: 1.7 }}> <p style={{ margin: '6px 0 0 0', fontSize: '0.84rem', color: '#64748b', lineHeight: 1.7 }}>
{item.desc} {item.desc}
</p> </p>
</div> </div>
@@ -567,40 +549,39 @@ export const ExecutiveShowcase: React.FC = () => {
{/* Live Demo Launcher Banner */} {/* Live Demo Launcher Banner */}
<section style={{ <section style={{
marginTop: 40, marginTop: 32,
background: 'linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(6, 182, 212, 0.15) 100%)', background: '#111726',
border: '1px solid rgba(99, 102, 241, 0.4)', border: '1px solid #1e293b',
borderRadius: 20, borderRadius: 16,
padding: '28px 32px', padding: '24px 28px',
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
flexWrap: 'wrap', flexWrap: 'wrap',
gap: 20 gap: 16
}}> }}>
<div> <div>
<h3 style={{ margin: '0 0 6px 0', fontSize: '1.3rem', fontWeight: 800, color: '#ffffff' }}> <h3 style={{ margin: '0 0 4px 0', fontSize: '1.15rem', fontWeight: 700, color: '#f8fafc' }}>
هل ترغب في استعراض النظام عملياً الآن؟ هل ترغب في استعراض النظام عملياً الآن؟
</h3> </h3>
<p style={{ margin: 0, color: '#cbd5e1', fontSize: '0.9rem' }}> <p style={{ margin: 0, color: '#94a3b8', fontSize: '0.85rem' }}>
الخريطة الحية وأدوات التوجيه وتبادل الرؤية والطقس جاهزة وتعمل بالكامل داخل المتصفح. الخريطة الحية وأدوات التوجيه وتبادل الرؤية والطقس جاهزة وتعمل بالكامل داخل المتصفح.
</p> </p>
</div> </div>
<div style={{ display: 'flex', gap: 12 }}> <div style={{ display: 'flex', gap: 10 }}>
<a href="#map" style={{ <a href="#map" style={{
textDecoration: 'none', textDecoration: 'none',
background: '#ffffff', background: '#2563eb',
color: '#0f172a', color: '#ffffff',
padding: '10px 22px', padding: '9px 20px',
borderRadius: 10, borderRadius: 8,
fontSize: '0.9rem', fontSize: '0.86rem',
fontWeight: 800, fontWeight: 600,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 8, gap: 6
boxShadow: '0 4px 14px rgba(255, 255, 255, 0.25)'
}}> }}>
بدء الديمو التفاعلي <ArrowRight size={16} /> بدء الديمو التفاعلي <ArrowRight size={15} />
</a> </a>
</div> </div>
</section> </section>