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