feat: Add high-conversion Main Landing Page and dedicated Military Culture Directorate Strategic Proposal Page
This commit is contained in:
Hamza-Ayed
@@ -0,0 +1,444 @@
|
||||
<?php
|
||||
|
||||
namespace App\Views;
|
||||
|
||||
class LandingPage
|
||||
{
|
||||
public static function render(): string
|
||||
{
|
||||
return <<<'HTML'
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>منصة صَقِل التعليمية — الجيل الثاني للتمكين الأكاديمي والتوجيهي</title>
|
||||
<!-- Google Fonts: Cairo -->
|
||||
<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=Cairo:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Pure Luxury Self-Contained CSS -->
|
||||
<style>
|
||||
:root {
|
||||
--bg-dark: #0B132B;
|
||||
--bg-card: #16203D;
|
||||
--bg-card-hover: #1E2C52;
|
||||
--border: #2A3B66;
|
||||
--border-focus: #00F5D4;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #CBD5E1;
|
||||
--text-muted: #8E9FB8;
|
||||
--accent-cyan: #00F5D4;
|
||||
--accent-cyan-dark: #00BAA1;
|
||||
--accent-gold: #FFD166;
|
||||
--accent-purple: #A78BFA;
|
||||
--accent-green: #10B981;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', system-ui, -apple-system, sans-serif; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg-dark);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background-image:
|
||||
radial-gradient(circle at 10% 15%, rgba(0, 245, 212, 0.08) 0%, transparent 45%),
|
||||
radial-gradient(circle at 90% 40%, rgba(255, 209, 102, 0.06) 0%, transparent 45%),
|
||||
radial-gradient(circle at 50% 85%, rgba(167, 139, 250, 0.05) 0%, transparent 50%),
|
||||
linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
|
||||
background-size: 100% 100%, 100% 100%, 100% 100%, 36px 36px, 36px 36px;
|
||||
}
|
||||
|
||||
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; width: 100%; }
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
border-bottom: 1px solid var(--border);
|
||||
background-color: rgba(11, 19, 43, 0.92);
|
||||
backdrop-filter: blur(16px);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
.header-content { height: 72px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.logo-area { display: flex; align-items: center; gap: 12px; text-decoration: none; }
|
||||
.logo-badge {
|
||||
width: 44px; height: 44px; border-radius: 12px;
|
||||
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark));
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #0B132B; font-size: 22px; font-weight: 900;
|
||||
box-shadow: 0 0 24px rgba(0, 245, 212, 0.4);
|
||||
}
|
||||
.brand-title { font-size: 22px; font-weight: 900; color: #FFFFFF; letter-spacing: 0.5px; }
|
||||
|
||||
.nav-actions { display: flex; align-items: center; gap: 14px; }
|
||||
.nav-btn {
|
||||
font-size: 13.5px; font-weight: 700; padding: 8px 18px; border-radius: 10px; text-decoration: none;
|
||||
transition: 0.2s; display: inline-flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.nav-btn-ghost { color: var(--text-secondary); border: 1px solid transparent; }
|
||||
.nav-btn-ghost:hover { color: #FFF; background: rgba(255,255,255,0.05); }
|
||||
.nav-btn-gold {
|
||||
background: rgba(255, 209, 102, 0.12); color: var(--accent-gold); border: 1px solid rgba(255, 209, 102, 0.35);
|
||||
}
|
||||
.nav-btn-gold:hover { background: rgba(255, 209, 102, 0.2); }
|
||||
.nav-btn-cyan {
|
||||
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark)); color: #0B132B;
|
||||
font-weight: 900; box-shadow: 0 4px 16px rgba(0,245,212,0.3);
|
||||
}
|
||||
.nav-btn-cyan:hover { opacity: 0.95; transform: translateY(-1px); }
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section { padding: 80px 0 60px; text-align: center; position: relative; }
|
||||
.hero-pill {
|
||||
display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
|
||||
background: rgba(0, 245, 212, 0.1); border: 1px solid rgba(0, 245, 212, 0.35);
|
||||
color: var(--accent-cyan); padding: 6px 16px; border-radius: 999px; margin-bottom: 24px;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: clamp(32px, 5vw, 54px); font-weight: 900; line-height: 1.25; color: #FFFFFF;
|
||||
max-width: 900px; margin: 0 auto 20px;
|
||||
}
|
||||
.hero-highlight-cyan {
|
||||
background: linear-gradient(135deg, #00F5D4, #70E000);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
}
|
||||
.hero-highlight-gold {
|
||||
background: linear-gradient(135deg, #FFD166, #F59E0B);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
}
|
||||
.hero-desc {
|
||||
font-size: clamp(15px, 2vw, 18px); color: var(--text-secondary); max-width: 760px;
|
||||
margin: 0 auto 36px; line-height: 1.7;
|
||||
}
|
||||
.hero-cta-group { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 50px; }
|
||||
.cta-btn-main {
|
||||
padding: 14px 32px; font-size: 16px; font-weight: 900; border-radius: 12px; text-decoration: none;
|
||||
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark)); color: #0B132B;
|
||||
box-shadow: 0 8px 30px rgba(0, 245, 212, 0.35); transition: 0.2s; display: inline-flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.cta-btn-main:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0, 245, 212, 0.45); }
|
||||
.cta-btn-secondary {
|
||||
padding: 14px 28px; font-size: 15px; font-weight: 800; border-radius: 12px; text-decoration: none;
|
||||
background: var(--bg-card); color: #FFFFFF; border: 1px solid var(--border); transition: 0.2s;
|
||||
}
|
||||
.cta-btn-secondary:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
|
||||
|
||||
/* Trust Stats Bar */
|
||||
.trust-bar {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px;
|
||||
background: rgba(16, 26, 54, 0.7); border: 1px solid var(--border); border-radius: 20px;
|
||||
padding: 24px 32px; backdrop-filter: blur(10px); margin-bottom: 70px;
|
||||
}
|
||||
.trust-item { text-align: center; }
|
||||
.trust-num { font-size: 32px; font-weight: 900; color: var(--accent-cyan); display: block; }
|
||||
.trust-label { font-size: 12.5px; color: var(--text-muted); font-weight: 700; margin-top: 4px; }
|
||||
|
||||
/* Pillar Section */
|
||||
.section-header { text-align: center; margin-bottom: 48px; }
|
||||
.section-tag {
|
||||
font-size: 11.5px; font-weight: 800; color: var(--accent-gold); background: rgba(255,209,102,0.12);
|
||||
border: 1px solid rgba(255,209,102,0.3); padding: 4px 14px; border-radius: 999px; display: inline-block; margin-bottom: 12px;
|
||||
}
|
||||
.section-title { font-size: 32px; font-weight: 900; color: #FFFFFF; margin-bottom: 12px; }
|
||||
.section-subtitle { font-size: 15px; color: var(--text-muted); max-width: 650px; margin: 0 auto; line-height: 1.6; }
|
||||
|
||||
.features-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 80px;
|
||||
}
|
||||
.feature-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px;
|
||||
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; position: relative; overflow: hidden;
|
||||
}
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px); border-color: var(--accent-cyan);
|
||||
box-shadow: 0 16px 40px rgba(0, 245, 212, 0.12);
|
||||
}
|
||||
.card-icon {
|
||||
width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 245, 212, 0.1);
|
||||
border: 1px solid rgba(0, 245, 212, 0.3); display: flex; align-items: center; justify-content: center;
|
||||
color: var(--accent-cyan); font-size: 24px; margin-bottom: 20px;
|
||||
}
|
||||
.card-title { font-size: 19px; font-weight: 900; color: #FFFFFF; margin-bottom: 10px; }
|
||||
.card-desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; }
|
||||
|
||||
/* Institutional Special Feature Banner */
|
||||
.b2g-banner {
|
||||
background: linear-gradient(135deg, #16203D 0%, #1A284D 100%);
|
||||
border: 1px solid rgba(255, 209, 102, 0.4); border-radius: 24px; padding: 48px;
|
||||
display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); margin-bottom: 80px; position: relative;
|
||||
}
|
||||
@media (max-width: 900px) { .b2g-banner { grid-template-columns: 1fr; padding: 32px; } }
|
||||
|
||||
.b2g-badge {
|
||||
display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800;
|
||||
background: rgba(255, 209, 102, 0.15); border: 1px solid rgba(255, 209, 102, 0.4);
|
||||
color: var(--accent-gold); padding: 4px 14px; border-radius: 999px; margin-bottom: 16px;
|
||||
}
|
||||
.b2g-title { font-size: 28px; font-weight: 900; color: #FFFFFF; margin-bottom: 14px; line-height: 1.35; }
|
||||
.b2g-desc { font-size: 14.5px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 24px; }
|
||||
.b2g-btn {
|
||||
padding: 12px 28px; font-size: 14.5px; font-weight: 900; border-radius: 12px; text-decoration: none;
|
||||
background: linear-gradient(135deg, #FFD166, #F59E0B); color: #0B132B; display: inline-flex; align-items: center; gap: 8px;
|
||||
box-shadow: 0 6px 20px rgba(255, 209, 102, 0.35); transition: 0.2s;
|
||||
}
|
||||
.b2g-btn:hover { transform: translateY(-2px); }
|
||||
|
||||
.b2g-card-stat {
|
||||
background: rgba(11, 19, 43, 0.85); border: 1px solid var(--border); border-radius: 18px; padding: 24px;
|
||||
}
|
||||
.b2g-stat-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
|
||||
.b2g-stat-item:last-child { margin-bottom: 0; }
|
||||
.b2g-icon-check {
|
||||
width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 245, 212, 0.15);
|
||||
color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
border-top: 1px solid var(--border); background: #070D1E; padding: 48px 0 24px; color: var(--text-muted); font-size: 13px;
|
||||
}
|
||||
.footer-grid {
|
||||
display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 36px;
|
||||
}
|
||||
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
|
||||
.footer-col-title { font-size: 14px; font-weight: 800; color: #FFFFFF; margin-bottom: 14px; }
|
||||
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
|
||||
.footer-links a { color: var(--text-muted); text-decoration: none; transition: 0.2s; }
|
||||
.footer-links a:hover { color: var(--accent-cyan); }
|
||||
.footer-bottom {
|
||||
border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="header-content">
|
||||
<a href="/" class="logo-area">
|
||||
<div class="logo-badge">صـ</div>
|
||||
<span class="brand-title">صَقِل</span>
|
||||
</a>
|
||||
|
||||
<div class="nav-actions">
|
||||
<a href="/military-culture" class="nav-btn nav-btn-gold">
|
||||
<span>🇯🇴 خطة الثقافة العسكرية</span>
|
||||
</a>
|
||||
<a href="/teacher" class="nav-btn nav-btn-ghost">استوديو المعلمين</a>
|
||||
<a href="/student" class="nav-btn nav-btn-cyan">دخول الطلاب 🚀</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="hero-pill">
|
||||
<span>⚡ الجيل الثاني لمنصات التمكين الأكاديمي والتوجيهي في الأردن</span>
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title">
|
||||
لا نكتفي بعرض الفيديوهات.. <br>
|
||||
نحن <span class="hero-highlight-cyan">نصقل فهم الطالب</span> ونضمن <span class="hero-highlight-gold">جاهزيته للوزاري</span>
|
||||
</h1>
|
||||
|
||||
<p class="hero-desc">
|
||||
أول منظومة تعليمية تفاعلية تعتمد التعلم السقراطي (Socratic Learning)، الكويزات الصدمية داخل الفيديو مع الإرجاع العلاجي، ومؤشر الجاهزية للوزاري المدعوم بالذكاء الاصطناعي.
|
||||
</p>
|
||||
|
||||
<div class="hero-cta-group">
|
||||
<a href="/student" class="cta-btn-main">
|
||||
<span>ابدأ رحلة التميز كطالب ←</span>
|
||||
</a>
|
||||
<a href="/teacher" class="cta-btn-secondary">
|
||||
<span>انضم كأستاذ معتمد (استوديو صَقِل) 👨🏫</span>
|
||||
</a>
|
||||
<a href="/military-culture" class="cta-btn-secondary" style="border-color: var(--accent-gold); color: var(--accent-gold);">
|
||||
<span>مبادرة مديرية الثقافة العسكرية 🇯🇴</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Trust Stats -->
|
||||
<div class="trust-bar">
|
||||
<div class="trust-item">
|
||||
<span class="trust-num">100%</span>
|
||||
<span class="trust-label">حماية محتوى DRM ضد القرصنة</span>
|
||||
</div>
|
||||
<div class="trust-item">
|
||||
<span class="trust-num">0s</span>
|
||||
<span class="trust-label">تأخير في الشات المباشر (Workerman)</span>
|
||||
</div>
|
||||
<div class="trust-item">
|
||||
<span class="trust-num">4 مستويات</span>
|
||||
<span class="trust-label">هرمية الامتحانات والتقييم المعرفي</span>
|
||||
</div>
|
||||
<div class="trust-item">
|
||||
<span class="trust-num">91.4%</span>
|
||||
<span class="trust-label">متوسط إتقان واستيعاب المفاهيم</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Pillars -->
|
||||
<section style="padding: 40px 0;">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">الفلسفة التربوية والتقنية</span>
|
||||
<h2 class="section-title">لماذا تُحدث صَقِل فارقاً حقيقياً في علامة الطالب؟</h2>
|
||||
<p class="section-subtitle">
|
||||
المنصات التقليدية تقدم تعليماً سلبياً (مشاهدة بدون قياس). صَقِل تحول المشاهدة إلى اشتباك ذهني إجباري يرسخ المعلومة.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<!-- Card 1 -->
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">🎬</div>
|
||||
<h3 class="card-title">مشغل الفيديو السقراطي (Socratic Checkpoint)</h3>
|
||||
<p class="card-desc">
|
||||
يتوقف الفيديو إجبارياً عند الدقيقة المحددة لفحص فهم الطالب. إذا أخطأ في الإجابة، يقوم المشغل بإرجاعه 45 ثانية للخلف لإعادة استيعاب المفهوم وتثبيته.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">🧠</div>
|
||||
<h3 class="card-title">مؤشر الجاهزية للوزاري (Tawjihi Readiness)</h3>
|
||||
<p class="card-desc">
|
||||
خوارزمية ذكية تحسب مؤشر فهم الطالب التراكمي من 100% بناءً على نتائج امتحانات الدروس والوحدات وسرعة الحل وتحديد نقاط الضعف الدقيقة.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">⚡</div>
|
||||
<h3 class="card-title">شات وتواصل حي عبر Workerman</h3>
|
||||
<p class="card-desc">
|
||||
قناة اتصال فورية مشفرة بـ WebSocket تربط الطالب بأستاذه مباشرة لطرح الأسئلة ومناقشة تفاصيل الدرس دون أي تأخير أو استهلاك لموارد السيرفر.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">🔒</div>
|
||||
<h3 class="card-title">حماية محتوى DRM وعلامة مائية متحركة</h3>
|
||||
<p class="card-desc">
|
||||
بنية تحتية مشفرة بالكامل تمنع تنزيل الفيديوهات وتطبع علامة مائية ديناميكية برقم هاتف الطالب فوق الفيديو لحماية حقوق المعلمين ومؤسسات التعليم.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 5 -->
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">📲</div>
|
||||
<h3 class="card-title">دخول مباشر عبر الواتساب (Passwordless)</h3>
|
||||
<p class="card-desc">
|
||||
لا حاجة لحفظ كلمات مرور معقدة؛ تسجيل دخول فوري وآمن بـ 6 أرقام تصل عبر بطاقة واتساب معتمدة وبصمة الجهاز الموحدة (Zero-Trust).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Card 6 -->
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">👨👩👧</div>
|
||||
<h3 class="card-title">سجل ولي الأمر والتقارير الدورية</h3>
|
||||
<p class="card-desc">
|
||||
إشعارات تلقائية لأولياء الأمور بمستوى تقدم الطالب وساعات دراسته ونتائج امتحاناته الدورية لضمان المتابعة الأسرية المستمرة.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- B2G Institutional Banner -->
|
||||
<div class="b2g-banner">
|
||||
<div>
|
||||
<div class="b2g-badge">🇯🇴 مبادرة الشراكة الاستراتيجية والمؤسسية</div>
|
||||
<h2 class="b2g-title">حلول مخصصة لمديرية التربية والتعليم والثقافة العسكرية</h2>
|
||||
<p class="b2g-desc">
|
||||
نقدم للمديرية نموذجاً متكاملاً لشراء المخرجات والإنتاج بأقل التكاليف التشغيلية، مع توحيد جودة التعليم في مدارس البادية والمحافظات وغرفة عمليات مركزية لمتابعة إنجاز كل طالب.
|
||||
</p>
|
||||
<a href="/military-culture" class="b2g-btn">
|
||||
<span>استعرض ملف المبادرة الاستراتيجية الكاملة ←</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="b2g-card-stat">
|
||||
<div class="b2g-stat-item">
|
||||
<div class="b2g-icon-check">✓</div>
|
||||
<div>
|
||||
<strong style="color: #FFF; font-size: 14px; display: block;">عدالة تعليمية شاملة</strong>
|
||||
<span style="font-size: 12px; color: var(--text-muted);">نفس جودة نخبة المعلمين لجميع أبناء القوات المسلحة في كل المحافظات.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b2g-stat-item">
|
||||
<div class="b2g-icon-check">✓</div>
|
||||
<div>
|
||||
<strong style="color: #FFF; font-size: 14px; display: block;">لوحة قيادة مركزية للضباط</strong>
|
||||
<span style="font-size: 12px; color: var(--text-muted);">متابعة تحصيل كل مدرسة وشعبة لحظياً بمؤشرات أداء واضحة.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b2g-stat-item">
|
||||
<div class="b2g-icon-check">✓</div>
|
||||
<div>
|
||||
<strong style="color: #FFF; font-size: 14px; display: block;">توفير 80% من التكاليف</strong>
|
||||
<span style="font-size: 12px; color: var(--text-muted);">إلغاء تكاليف المراكز والتنقل والطباعة مع مخرجات أعلى جودة.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<div class="logo-area" style="margin-bottom: 14px;">
|
||||
<div class="logo-badge" style="width: 36px; height: 36px; font-size: 18px;">صـ</div>
|
||||
<span class="brand-title" style="font-size: 19px;">منصة صَقِل</span>
|
||||
</div>
|
||||
<p style="font-size: 13px; line-height: 1.7; max-width: 380px;">
|
||||
المنظومة الأردنية الرائدة في التمكين الأكاديمي والتعليم السقراطي الذكي لطلبة التوجيهي والمراحل الثانوية.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="footer-col-title">البوابات والخدمات</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="/student">بوابة الطالب الذكية</a></li>
|
||||
<li><a href="/teacher">استوديو المعلمين ونظام الشراكة</a></li>
|
||||
<li><a href="/military-culture">ملف مديرية الثقافة العسكرية</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="footer-col-title">الأمان والخصوصية</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">حماية المحتوى DRM</a></li>
|
||||
<li><a href="#">السيادة الرقمية وتشفير البيانات</a></li>
|
||||
<li><a href="#">معايير Zero-Trust</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<span>جميع الحقوق محفوظة © لمنصة صَقِل التعليمية 2026</span>
|
||||
<span style="color: var(--accent-cyan);">بنية تحتية سحابية موثوقة • عمان، الأردن 🇯🇴</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
HTML;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,475 @@
|
||||
<?php
|
||||
|
||||
namespace App\Views;
|
||||
|
||||
class MilitaryCulturePitch
|
||||
{
|
||||
public static function render(): string
|
||||
{
|
||||
return <<<'HTML'
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>مبادرة التمكين الأكاديمي لمديرية الثقافة العسكرية — منصة صَقِل</title>
|
||||
<!-- Google Fonts: Cairo -->
|
||||
<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=Cairo:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Pure Self-Contained Luxury CSS (Military Heritage Dark Theme) -->
|
||||
<style>
|
||||
:root {
|
||||
--bg-dark: #07101E;
|
||||
--bg-card: #111D33;
|
||||
--bg-card-hover: #182845;
|
||||
--border: #233759;
|
||||
--border-gold: #FFD166;
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #CBD5E1;
|
||||
--text-muted: #8E9FB8;
|
||||
--accent-gold: #FFD166;
|
||||
--accent-gold-dark: #D97706;
|
||||
--accent-cyan: #00F5D4;
|
||||
--accent-green: #10B981;
|
||||
--accent-red: #EF4444;
|
||||
--military-badge: #1E3A8A;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', system-ui, -apple-system, sans-serif; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg-dark);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 15%, rgba(255, 209, 102, 0.07) 0%, transparent 45%),
|
||||
radial-gradient(circle at 80% 35%, rgba(0, 245, 212, 0.05) 0%, transparent 45%),
|
||||
linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
|
||||
background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
|
||||
}
|
||||
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; width: 100%; }
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
border-bottom: 1px solid var(--border);
|
||||
background-color: rgba(7, 16, 30, 0.95);
|
||||
backdrop-filter: blur(16px);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
.header-content { height: 72px; display: flex; align-items: center; justify-content: space-between; }
|
||||
.logo-area { display: flex; align-items: center; gap: 12px; text-decoration: none; }
|
||||
.logo-badge {
|
||||
width: 44px; height: 44px; border-radius: 12px;
|
||||
background: linear-gradient(135deg, #FFD166, #D97706);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: #07101E; font-size: 22px; font-weight: 900;
|
||||
box-shadow: 0 0 24px rgba(255, 209, 102, 0.35);
|
||||
}
|
||||
.brand-title { font-size: 20px; font-weight: 900; color: #FFFFFF; }
|
||||
.military-pill {
|
||||
font-size: 11.5px; font-weight: 800; padding: 3px 12px; border-radius: 999px;
|
||||
background: rgba(255, 209, 102, 0.12); color: var(--accent-gold);
|
||||
border: 1px solid rgba(255, 209, 102, 0.35); margin-right: 8px;
|
||||
}
|
||||
|
||||
.header-cta {
|
||||
padding: 8px 20px; font-size: 13.5px; font-weight: 800; border-radius: 10px; text-decoration: none;
|
||||
background: linear-gradient(135deg, #FFD166, #D97706); color: #07101E;
|
||||
box-shadow: 0 4px 16px rgba(255, 209, 102, 0.3); transition: 0.2s;
|
||||
}
|
||||
.header-cta:hover { transform: translateY(-1px); }
|
||||
|
||||
/* Executive Banner */
|
||||
.exec-hero { padding: 60px 0 50px; text-align: center; }
|
||||
.flag-tag {
|
||||
display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900;
|
||||
background: rgba(255, 209, 102, 0.1); border: 1px solid rgba(255, 209, 102, 0.35);
|
||||
color: var(--accent-gold); padding: 6px 18px; border-radius: 999px; margin-bottom: 24px;
|
||||
}
|
||||
.exec-title {
|
||||
font-size: clamp(28px, 4.5vw, 48px); font-weight: 900; line-height: 1.3; color: #FFFFFF;
|
||||
max-width: 960px; margin: 0 auto 20px;
|
||||
}
|
||||
.exec-title-gold {
|
||||
background: linear-gradient(135deg, #FFD166, #F59E0B);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
}
|
||||
.exec-desc {
|
||||
font-size: clamp(15px, 2vw, 17.5px); color: var(--text-secondary); max-width: 820px;
|
||||
margin: 0 auto 36px; line-height: 1.8;
|
||||
}
|
||||
|
||||
.exec-cta-box {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px;
|
||||
padding: 24px; max-width: 700px; margin: 0 auto 50px; display: flex; align-items: center;
|
||||
justify-content: space-between; gap: 20px; flex-wrap: wrap; text-align: right;
|
||||
}
|
||||
.exec-cta-btn {
|
||||
padding: 12px 28px; font-size: 14.5px; font-weight: 900; border-radius: 12px; text-decoration: none;
|
||||
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark)); color: #07101E;
|
||||
box-shadow: 0 4px 20px rgba(0, 245, 212, 0.3); transition: 0.2s; white-space: nowrap;
|
||||
}
|
||||
.exec-cta-btn:hover { transform: translateY(-2px); }
|
||||
|
||||
/* Strategic Value Matrix */
|
||||
.value-matrix {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 70px;
|
||||
}
|
||||
.matrix-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 28px;
|
||||
transition: transform 0.2s, border-color 0.2s;
|
||||
}
|
||||
.matrix-card:hover { transform: translateY(-3px); border-color: var(--accent-gold); }
|
||||
.matrix-num { font-size: 32px; font-weight: 900; color: var(--accent-gold); margin-bottom: 8px; }
|
||||
.matrix-title { font-size: 17px; font-weight: 800; color: #FFF; margin-bottom: 8px; }
|
||||
.matrix-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
|
||||
|
||||
/* Pillars Section */
|
||||
.section-header { text-align: center; margin-bottom: 44px; }
|
||||
.section-tag {
|
||||
font-size: 11.5px; font-weight: 800; color: var(--accent-cyan); background: rgba(0,245,212,0.1);
|
||||
border: 1px solid rgba(0,245,212,0.3); padding: 4px 14px; border-radius: 999px; display: inline-block; margin-bottom: 12px;
|
||||
}
|
||||
.section-title { font-size: 30px; font-weight: 900; color: #FFFFFF; margin-bottom: 10px; }
|
||||
.section-subtitle { font-size: 14.5px; color: var(--text-muted); max-width: 650px; margin: 0 auto; line-height: 1.6; }
|
||||
|
||||
.pillars-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; margin-bottom: 70px;
|
||||
}
|
||||
.pillar-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px;
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.pillar-card.gold-border { border-color: rgba(255, 209, 102, 0.4); }
|
||||
.pillar-icon {
|
||||
width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 209, 102, 0.12);
|
||||
border: 1px solid rgba(255, 209, 102, 0.3); display: flex; align-items: center; justify-content: center;
|
||||
font-size: 22px; margin-bottom: 18px; color: var(--accent-gold);
|
||||
}
|
||||
.pillar-title { font-size: 18px; font-weight: 900; color: #FFFFFF; margin-bottom: 10px; }
|
||||
.pillar-desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; }
|
||||
.pillar-points { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
|
||||
.pillar-points li { display: flex; align-items: center; gap: 8px; }
|
||||
.pillar-points li::before { content: "•"; color: var(--accent-cyan); font-weight: 900; font-size: 16px; }
|
||||
|
||||
/* Roadmap Section */
|
||||
.roadmap-box {
|
||||
background: linear-gradient(135deg, #111D33 0%, #15243F 100%);
|
||||
border: 1px solid var(--border); border-radius: 24px; padding: 40px; margin-bottom: 70px;
|
||||
}
|
||||
.roadmap-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 28px;
|
||||
}
|
||||
.step-card {
|
||||
background: rgba(7, 16, 30, 0.7); border: 1px solid var(--border); border-radius: 18px; padding: 24px;
|
||||
}
|
||||
.step-badge {
|
||||
font-size: 11px; font-weight: 900; color: var(--accent-cyan); background: rgba(0,245,212,0.1);
|
||||
padding: 3px 10px; border-radius: 6px; display: inline-block; margin-bottom: 10px;
|
||||
}
|
||||
.step-title { font-size: 16px; font-weight: 800; color: #FFF; margin-bottom: 8px; }
|
||||
.step-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
|
||||
|
||||
/* Demo Request Form */
|
||||
.demo-section {
|
||||
background: var(--bg-card); border: 1px solid rgba(255, 209, 102, 0.4); border-radius: 24px;
|
||||
padding: 44px; margin-bottom: 70px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.demo-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; }
|
||||
@media (max-width: 860px) { .demo-grid { grid-template-columns: 1fr; } }
|
||||
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
|
||||
.input-text {
|
||||
width: 100%; background: #07101E; border: 1px solid var(--border); border-radius: 10px;
|
||||
padding: 12px 14px; font-size: 13.5px; color: #FFFFFF; outline: none; transition: 0.2s;
|
||||
}
|
||||
.input-text:focus { border-color: var(--accent-gold); }
|
||||
|
||||
footer {
|
||||
border-top: 1px solid var(--border); background: #040912; padding: 36px 0 24px; color: var(--text-muted); font-size: 12.5px;
|
||||
}
|
||||
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="header-content">
|
||||
<a href="/" class="logo-area">
|
||||
<div class="logo-badge">صـ</div>
|
||||
<div>
|
||||
<span class="brand-title">منصة صَقِل</span>
|
||||
<span class="military-pill">مبادرة الثقافة العسكرية 🇯🇴</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<a href="/" style="font-size: 13px; color: var(--text-secondary); text-decoration: none; margin-left: 10px;">الرئيسية</a>
|
||||
<a href="#demo_request_form" class="header-cta">طلب عرض تنفيذي للقيادة ←</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="exec-hero">
|
||||
<div class="container">
|
||||
<div class="flag-tag">
|
||||
<span>🇯🇴 مبادرة استراتيجية لمدارس الجيش العربي والأجهزة الأمنية</span>
|
||||
</div>
|
||||
|
||||
<h1 class="exec-title">
|
||||
نحو تحقيق أعلى نسب تفوق وزاري لأبناء القوات المسلحة: <br>
|
||||
<span class="exec-title-gold">نبيعكم الناتج والتمكين الأكاديمي</span> بأقل التكاليف التشغيلية
|
||||
</h1>
|
||||
|
||||
<p class="exec-desc">
|
||||
عرض تقني وتربوي متكامل موجه لقيادة ومديرية التربية والتعليم والثقافة العسكرية، لتوحيد جودة تدريس التوجيهي عبر كافة مدارس المملكة والبادية، وتوفير غرفة قيادة وسيطرة مركزية تقيس مستوى تحصيل كل مدرسة وطالب لحظياً.
|
||||
</p>
|
||||
|
||||
<div class="exec-cta-box">
|
||||
<div>
|
||||
<strong style="font-size: 15px; color: #FFF; display: block;">عرض المنظومة والتجربة الميدانية المباشرة</strong>
|
||||
<span style="font-size: 12.5px; color: var(--text-muted);">جاهزون لتقديم عرض تنفيذي حي (Live Demo) في مبنى المديرية في أي وقت تحددونه.</span>
|
||||
</div>
|
||||
<a href="#demo_request_form" class="exec-cta-btn">حجز موعد العرض التنفيذي 📅</a>
|
||||
</div>
|
||||
|
||||
<!-- Value Matrix -->
|
||||
<div class="value-matrix">
|
||||
<div class="matrix-card">
|
||||
<div class="matrix-num">100%</div>
|
||||
<div class="matrix-title">عدالة تعليمية جغرافية</div>
|
||||
<div class="matrix-desc">طالب مدرسة القويرة أو الصفاوي يتلقى نفس شرح وتدريب كبار معلمي العاصمة بدون عناء التنقل.</div>
|
||||
</div>
|
||||
|
||||
<div class="matrix-card">
|
||||
<div class="matrix-num">80%</div>
|
||||
<div class="matrix-title">توفير في النفقات الإثرائية</div>
|
||||
<div class="matrix-desc">إلغاء تكاليف المراكز، المطبوعات الورقية، وباصات التنقل عبر بنية سحابية موحدة وذكية.</div>
|
||||
</div>
|
||||
|
||||
<div class="matrix-card">
|
||||
<div class="matrix-num">0s</div>
|
||||
<div class="matrix-title">تقارير لحظية للقيادة</div>
|
||||
<div class="matrix-desc">غرفة عمليات مركزية لمدير التعليم والضباط لمتابعة نسب الإنجاز والمؤشر الوزاري لكل شعبة.</div>
|
||||
</div>
|
||||
|
||||
<div class="matrix-card">
|
||||
<div class="matrix-num">100%</div>
|
||||
<div class="matrix-title">سيادة رقمية وأمان عالي</div>
|
||||
<div class="matrix-desc">استضافة محلية آمنة، تشفير بيانات الطلاب، ومنع تام لتسريب أو قرصنة المحتوى الدراسي.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Strategic Pillars -->
|
||||
<section style="padding: 20px 0;">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">أركان المبادرة الاستراتيجية</span>
|
||||
<h2 class="section-title">كيف تضمن منصة صَقِل تفوق طلبة الثقافة العسكرية؟</h2>
|
||||
<p class="section-subtitle">
|
||||
النموذج التقليدي يعتمد على المشاهدة السلبية. نحن نلزم الطالب بالاشتباك الذهني ونقيس استيعابه في كل ثانية.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="pillars-grid">
|
||||
<!-- Pillar 1 -->
|
||||
<div class="pillar-card gold-border">
|
||||
<div class="pillar-icon">🎖️</div>
|
||||
<h3 class="pillar-title">1. غرفة القيادة والسيطرة التعليمية المركزية (Command Dashboard)</h3>
|
||||
<p class="pillar-desc">
|
||||
لوحة تحكم تنفيذية مخصصة لمدير التعليم وضباط الإشراف التربوي بالمديرية لمتابعة الإنجاز اليومي:
|
||||
</p>
|
||||
<ul class="pillar-points">
|
||||
<li>نسبة مشاهدة وإكمال الحصص لكل مدرسة على مستوى المحافظات.</li>
|
||||
<li>كشف فوري للشعب والمدارس التي تواجه تعثراً في مواد محددة (كالفيزياء أو الرياضيات).</li>
|
||||
<li>مؤشر الجاهزية للوزاري التراكمي (Tawjihi Readiness Index).</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Pillar 2 -->
|
||||
<div class="pillar-card">
|
||||
<div class="pillar-icon">⏱️</div>
|
||||
<h3 class="pillar-title">2. مشغل الكويزات الصدمية (Socratic Checkpoints)</h3>
|
||||
<p class="pillar-desc">
|
||||
الحل الحاسم لمشكلة تشتت الطالب أو فتح الفيديو دون تركيز:
|
||||
</p>
|
||||
<ul class="pillar-points">
|
||||
<li>يتوقف الفيديو إجبارياً عند الدقيقة المحددة (مثلاً 08:30) لسؤال الطالب حول المفهوم المشروح.</li>
|
||||
<li>إذا أخطأ: يعيده المشغل تلقائياً 45 ثانية للخلف لإعادة التركيز وفهم المفهوم.</li>
|
||||
<li>لا يُعتبر الدرس مكتملاً إلا بعد اجتياز كافة نقاط التوقف السقراطية.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Pillar 3 -->
|
||||
<div class="pillar-card">
|
||||
<div class="pillar-icon">📲</div>
|
||||
<h3 class="pillar-title">3. تقارير أولياء الأمور المؤتمتة عبر الواتساب</h3>
|
||||
<p class="pillar-desc">
|
||||
ربط مباشر مع أولياء الأمور من ضباط وضباط صف القوات المسلحة والأجهزة الأمنية:
|
||||
</p>
|
||||
<ul class="pillar-points">
|
||||
<li>إشعار دوري على الواتساب بنتائج ابنه وساعات دراسته ومستوى تقدمه.</li>
|
||||
<li>تنبيه استباقي فوري لولي الأمر في حال انخفاض مؤشر الجاهزية للوزاري.</li>
|
||||
<li>تسهيل المتابعة الأسرية حتى أثناء فترات مناوبات الضباط في الميدان.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Pillar 4 -->
|
||||
<div class="pillar-card">
|
||||
<div class="pillar-icon">🤖</div>
|
||||
<h3 class="pillar-title">4. محرك الذكاء الاصطناعي لسد الثغرات المعرفية</h3>
|
||||
<p class="pillar-desc">
|
||||
تشخيص دقيق ومخصص لكل طالب بدلاً من التعليم الجماعي الموحد:
|
||||
</p>
|
||||
<ul class="pillar-points">
|
||||
<li>تحديد نقاط الضعف الدقيقة لكل طالب بناءً على أخطائه في الامتحانات.</li>
|
||||
<li>توليد امتحانات علاجية مخصصة لسد الثغرات تلقائياً قبل الامتحانات الوزارية.</li>
|
||||
<li>تقارير تشخيصية توضح للمعلم أين تكمن المشكلة بالضبط.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Pillar 5 -->
|
||||
<div class="pillar-card">
|
||||
<div class="pillar-icon">📡</div>
|
||||
<h3 class="pillar-title">5. جاهزية العمل في البادية والمناطق النائية</h3>
|
||||
<p class="pillar-desc">
|
||||
بنية تحتية مصممة خصيصاً للتعامل مع تحديات سرعة الإنترنت:
|
||||
</p>
|
||||
<ul class="pillar-points">
|
||||
<li>بث متكيف (Adaptive Bitrate Streaming) يعمل بسلاسة حتى على شبكات 3G/4G الضعيفة.</li>
|
||||
<li>إمكانية تحميل المحاضرات مسبقاً بشكل مشفر داخل معامل الحاسوب المدرسية.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Pillar 6 -->
|
||||
<div class="pillar-card">
|
||||
<div class="pillar-icon">🔒</div>
|
||||
<h3 class="pillar-title">6. السيادة الرقمية والحماية الأمنية (Zero-Trust)</h3>
|
||||
<p class="pillar-desc">
|
||||
أعلى معايير الأمن السيبراني لحماية بيانات أبناء القوات المسلحة:
|
||||
</p>
|
||||
<ul class="pillar-points">
|
||||
<li>تشفير كامل لقواعد البيانات والاتصالات السلكية واللاسلكية.</li>
|
||||
<li>علامة مائية ديناميكية تمنع تصوير الشاشات أو تسريب المواد التعليمية.</li>
|
||||
<li>استضافة محلية تخضع للسيادة الأردنية الكاملة.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phased Implementation Plan -->
|
||||
<div class="roadmap-box">
|
||||
<div style="text-align: center;">
|
||||
<span class="section-tag">خطة التنفيذ والتشغيل المقترحة</span>
|
||||
<h2 style="font-size: 26px; font-weight: 900; color: #FFF;">مراحل تفعيل المنظومة مع مديرية الثقافة العسكرية</h2>
|
||||
</div>
|
||||
|
||||
<div class="roadmap-grid">
|
||||
<div class="step-card">
|
||||
<span class="step-badge">المرحلة الأولى (14 يوماً)</span>
|
||||
<h4 class="step-title">الإطلاق التجريبي الاستطلاعي (Pilot Phase)</h4>
|
||||
<p class="step-desc">
|
||||
اختيار 5 مدارس نموذجية تابعة للمديرية (شمال، وسط، جنوب، وبادية) لتطبيق النظام على طلاب التوجيهي وربط المعلمين بالاستوديو.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<span class="step-badge">المرحلة الثانية (30 يوماً)</span>
|
||||
<h4 class="step-title">قياس الأثر ومؤشر الجاهزية</h4>
|
||||
<p class="step-desc">
|
||||
استعراض تقارير غرفة العمليات المركزية، وقياس نسبة تحسن الطلاب في الامتحانات التجريبية، وتدريب المشرفين التربويين.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="step-card">
|
||||
<span class="step-badge">المرحلة الثالثة</span>
|
||||
<h4 class="step-title">التعميم الشامل والاعتماد المؤسسي</h4>
|
||||
<p class="step-desc">
|
||||
تعميم المنظومة رسمياً على كافة مدارس ومديريات الثقافة العسكرية في المملكة لتصبح المنصة الرقمية المعتمدة لأبناء الجيش العربي.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Executive Demo Request Form -->
|
||||
<div id="demo_request_form" class="demo-section">
|
||||
<div class="demo-grid">
|
||||
<div>
|
||||
<span class="section-tag">التواصل والتنسيق التنفيذي</span>
|
||||
<h2 style="font-size: 28px; font-weight: 900; color: #FFF; margin-bottom: 12px;">طلب جلسة تقديم العرض التنفيذي للقيادة</h2>
|
||||
<p style="font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px;">
|
||||
يسعدنا تقديم عرض عملي مباشر لكافة مزايا المنظومة أمام عطوفة المدير وضباط التعليم، مع تقديم تقرير الجدوى الاقتصادية والأثر التربوي.
|
||||
</p>
|
||||
|
||||
<div style="background: rgba(7, 16, 30, 0.8); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 16px;">
|
||||
<span style="font-size: 12px; color: var(--text-muted); display: block;">مسؤول التنسيق والتنفيذ المباشر:</span>
|
||||
<strong style="font-size: 16px; color: var(--accent-gold); display: block; margin-top: 2px;">الأستاذ حمزة النجار</strong>
|
||||
<span style="font-size: 13px; color: var(--text-secondary);">المؤسس والمعماري التقني لمنظومة صَقِل التعليمية</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<form onsubmit="event.preventDefault(); alert('تم استلام طلبكم بنجاح! سيتم التواصل معكم فوراً لترتيب موعد العرض التنفيذي.');">
|
||||
<div class="form-group">
|
||||
<label class="form-label">الرتبة والاسم الكامل للمسؤول / الضابط المنسق</label>
|
||||
<input type="text" placeholder="مثال: الرائد محمد ..." class="input-text" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">الجهة أو المدرسة التابعة للمديرية</label>
|
||||
<input type="text" placeholder="مثال: قسم الإشراف التربوي / مدرسة ..." class="input-text" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">رقم الهاتف / الواتساب للتنسيق المباشر</label>
|
||||
<input type="tel" placeholder="0790000000" class="input-text" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">الموعد أو اليوم المقترح للعرض التوضيحي</label>
|
||||
<input type="text" placeholder="مثال: الثلاثاء القادم الساعة 10:00 صباحاً" class="input-text">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="exec-cta-btn" style="width: 100%; padding: 14px; border: none; cursor: pointer; font-size: 15px;">
|
||||
تأكيد طلب موعد العرض التنفيذي 🇯🇴
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<span>مبادرة التمكين الأكاديمي لمدارس مديرية التربية والتعليم والثقافة العسكرية — منصة صَقِل © 2026</span>
|
||||
<div style="display: flex; gap: 18px;">
|
||||
<a href="/" style="color: var(--text-muted); text-decoration: none;">الرئيسية</a>
|
||||
<a href="/student" style="color: var(--text-muted); text-decoration: none;">بوابة الطالب</a>
|
||||
<a href="/teacher" style="color: var(--text-muted); text-decoration: none;">استوديو المعلمين</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
HTML;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user