Hamza/saqel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Full Apple Cupertino design revolution, SF Pro/Alexandria font stack, fixed grid layout, and luxury glassmorphic UI across all portals

Browse Source
This commit is contained in:
Hamza-Ayed
2026-08-27 03:15:43 +03:00
parent c7db799fa8
commit 261796fcab
4 changed files with 463 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app/Views/LandingPage.php
+433 -146
View File
@@ -13,211 +13,496 @@ class LandingPage
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>منصة صَقِل التعليمية — الجيل الثاني للتمكين الأكاديمي والتوجيهي</title> <title>منصة صَقِل التعليمية — الجيل الثاني للتمكين الأكاديمي والتوجيهي</title>
<!-- Google Fonts: Cairo -->
<!-- Apple SF Pro & Alexandria Arabic Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
<!-- Pure Luxury Self-Contained CSS --> <!-- Apple-Grade Luxury Cupertino CSS Design System -->
<style> <style>
:root { :root {
--bg-dark: #0B132B; --bg-base: #030712;
--bg-card: #16203D; --bg-surface-1: rgba(17, 24, 39, 0.7);
--bg-card-hover: #1E2C52; --bg-surface-2: rgba(31, 41, 55, 0.5);
--border: #2A3B66; --bg-glass: rgba(255, 255, 255, 0.03);
--border-focus: #00F5D4; --bg-glass-hover: rgba(255, 255, 255, 0.06);
--text-primary: #FFFFFF; --border-glass: rgba(255, 255, 255, 0.08);
--text-secondary: #CBD5E1; --border-glass-bright: rgba(255, 255, 255, 0.18);
--text-muted: #8E9FB8; --text-primary: #F9FAFB;
--accent-cyan: #00F5D4; --text-secondary: #D1D5DB;
--accent-cyan-dark: #00BAA1; --text-muted: #9CA3AF;
--accent-gold: #FFD166; --apple-gold: #F59E0B;
--accent-purple: #A78BFA; --apple-gold-light: #FDE68A;
--accent-green: #10B981; --apple-cyan: #06B6D4;
--apple-cyan-glow: #22D3EE;
--apple-green: #10B981;
--apple-purple: #8B5CF6;
} }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', system-ui, -apple-system, sans-serif; } * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Alexandria", "SF Pro Display", "SF Pro Text", "SF Arabic", "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { body {
background-color: var(--bg-dark); background-color: var(--bg-base);
color: var(--text-primary); color: var(--text-primary);
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
background-image: background-image:
radial-gradient(circle at 10% 15%, rgba(0, 245, 212, 0.08) 0%, transparent 45%), radial-gradient(circle at 50% -10%, rgba(6, 182, 212, 0.15) 0%, transparent 60%),
radial-gradient(circle at 90% 40%, rgba(255, 209, 102, 0.06) 0%, transparent 45%), radial-gradient(circle at 10% 40%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
radial-gradient(circle at 50% 85%, rgba(167, 139, 250, 0.05) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px); linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 100% 100%, 36px 36px, 36px 36px; background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
} }
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; width: 100%; } .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
width: 100%;
}
/* Header */ /* Apple Glass Navigation Bar */
header { header {
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border-glass);
background-color: rgba(11, 19, 43, 0.92); background-color: rgba(3, 7, 18, 0.8);
backdrop-filter: blur(16px); backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 50; z-index: 100;
}
.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;
} }
.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 { .logo-badge {
width: 44px; height: 44px; border-radius: 12px; width: 42px;
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark)); height: 42px;
display: flex; align-items: center; justify-content: center; border-radius: 12px;
color: #0B132B; font-size: 22px; font-weight: 900; background: linear-gradient(135deg, #06B6D4, #3B82F6);
box-shadow: 0 0 24px rgba(0, 245, 212, 0.4); display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 22px;
font-weight: 900;
box-shadow: 0 4px 20px rgba(6, 182, 212, 0.35);
}
.brand-title {
font-size: 20px;
font-weight: 800;
color: #FFFFFF;
letter-spacing: -0.5px;
} }
.brand-title { font-size: 22px; font-weight: 900; color: #FFFFFF; letter-spacing: 0.5px; }
.nav-actions { display: flex; align-items: center; gap: 14px; } .nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
.nav-btn { .nav-btn {
font-size: 13.5px; font-weight: 700; padding: 8px 18px; border-radius: 10px; text-decoration: none; font-size: 13px;
transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
padding: 8px 18px;
border-radius: 980px;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
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.06);
} }
.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 { .nav-btn-gold {
background: rgba(255, 209, 102, 0.12); color: var(--accent-gold); border: 1px solid rgba(255, 209, 102, 0.35); background: rgba(245, 158, 11, 0.12);
color: #FBBF24;
border: 1px solid rgba(245, 158, 11, 0.3);
} }
.nav-btn-gold:hover { background: rgba(255, 209, 102, 0.2); } .nav-btn-gold:hover {
.nav-btn-cyan { background: rgba(245, 158, 11, 0.2);
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-dark)); color: #0B132B; transform: translateY(-1px);
font-weight: 900; box-shadow: 0 4px 16px rgba(0,245,212,0.3); }
.nav-btn-primary {
background: #FFFFFF;
color: #030712 !important;
font-weight: 800;
box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
}
.nav-btn-primary:hover {
background: #F3F4F6;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
} }
.nav-btn-cyan:hover { opacity: 0.95; transform: translateY(-1px); }
/* Hero Section */ /* Apple Hero Section */
.hero-section { padding: 80px 0 60px; text-align: center; position: relative; } .hero-section {
padding: 90px 0 60px;
text-align: center;
position: relative;
}
.hero-pill { .hero-pill {
display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; display: inline-flex;
background: rgba(0, 245, 212, 0.1); border: 1px solid rgba(0, 245, 212, 0.35); align-items: center;
color: var(--accent-cyan); padding: 6px 16px; border-radius: 999px; margin-bottom: 24px; gap: 8px;
font-size: 12px;
font-weight: 700;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-glass-bright);
color: var(--text-primary);
padding: 6px 18px;
border-radius: 980px;
margin-bottom: 28px;
backdrop-filter: blur(12px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #06B6D4;
box-shadow: 0 0 8px #06B6D4;
} }
.hero-title { .hero-title {
font-size: clamp(32px, 5vw, 54px); font-weight: 900; line-height: 1.25; color: #FFFFFF; font-size: clamp(32px, 5.5vw, 56px);
max-width: 900px; margin: 0 auto 20px; font-weight: 900;
line-height: 1.25;
color: #FFFFFF;
max-width: 980px;
margin: 0 auto 24px;
letter-spacing: -1px;
} }
.hero-highlight-cyan { .gradient-text-cyan {
background: linear-gradient(135deg, #00F5D4, #70E000); background: linear-gradient(135deg, #22D3EE 0%, #3B82F6 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.hero-highlight-gold { .gradient-text-gold {
background: linear-gradient(135deg, #FFD166, #F59E0B); background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.hero-desc { .hero-desc {
font-size: clamp(15px, 2vw, 18px); color: var(--text-secondary); max-width: 760px; font-size: clamp(15px, 2vw, 18px);
margin: 0 auto 36px; line-height: 1.7; color: var(--text-secondary);
max-width: 760px;
margin: 0 auto 40px;
line-height: 1.8;
font-weight: 400;
} }
.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 */ .hero-cta-group {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 60px;
}
.cta-btn-apple-main {
padding: 15px 36px;
font-size: 15px;
font-weight: 800;
border-radius: 980px;
text-decoration: none;
background: linear-gradient(135deg, #06B6D4, #2563EB);
color: #FFFFFF;
box-shadow: 0 8px 30px rgba(6, 182, 212, 0.4);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
display: inline-flex;
align-items: center;
gap: 8px;
}
.cta-btn-apple-main:hover {
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(6, 182, 212, 0.55);
}
.cta-btn-apple-secondary {
padding: 15px 30px;
font-size: 15px;
font-weight: 700;
border-radius: 980px;
text-decoration: none;
background: var(--bg-glass);
color: #FFFFFF;
border: 1px solid var(--border-glass-bright);
backdrop-filter: blur(12px);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-btn-apple-secondary:hover {
background: var(--bg-glass-hover);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
/* Glass Trust Metrics Bar */
.trust-bar { .trust-bar {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; display: grid;
background: rgba(16, 26, 54, 0.7); border: 1px solid var(--border); border-radius: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
padding: 24px 32px; backdrop-filter: blur(10px); margin-bottom: 70px; gap: 20px;
background: var(--bg-glass);
border: 1px solid var(--border-glass);
border-radius: 24px;
padding: 28px 36px;
backdrop-filter: blur(20px);
margin-bottom: 90px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
} }
.trust-item { text-align: center; } .trust-item { text-align: center; }
.trust-num { font-size: 32px; font-weight: 900; color: var(--accent-cyan); display: block; } .trust-num {
.trust-label { font-size: 12.5px; color: var(--text-muted); font-weight: 700; margin-top: 4px; } font-size: 36px;
font-weight: 900;
/* Pillar Section */ color: #FFFFFF;
.section-header { text-align: center; margin-bottom: 48px; } display: block;
.section-tag { letter-spacing: -1px;
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; .trust-label {
font-size: 13px;
color: var(--text-muted);
font-weight: 600;
margin-top: 4px;
} }
.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; }
/* Section Layouts */
.section-header {
text-align: center;
margin-bottom: 56px;
}
.section-tag {
font-size: 12px;
font-weight: 700;
color: #FBBF24;
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.25);
padding: 5px 16px;
border-radius: 980px;
display: inline-block;
margin-bottom: 14px;
}
.section-title {
font-size: clamp(26px, 4vw, 38px);
font-weight: 900;
color: #FFFFFF;
letter-spacing: -0.5px;
margin-bottom: 14px;
}
.section-subtitle {
font-size: 16px;
color: var(--text-muted);
max-width: 680px;
margin: 0 auto;
line-height: 1.7;
}
/* Apple Grid Cards */
.features-grid { .features-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 80px; display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
margin-bottom: 90px;
} }
.feature-card { .feature-card {
background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px; background: var(--bg-glass);
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; border: 1px solid var(--border-glass);
border-radius: 24px;
padding: 36px;
backdrop-filter: blur(20px);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
} }
.feature-card:hover { .feature-card:hover {
transform: translateY(-4px); border-color: var(--accent-cyan); transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0, 245, 212, 0.12); border-color: rgba(6, 182, 212, 0.4);
background: var(--bg-glass-hover);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
} }
.card-icon { .card-icon {
width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 245, 212, 0.1); width: 52px;
border: 1px solid rgba(0, 245, 212, 0.3); display: flex; align-items: center; justify-content: center; height: 52px;
color: var(--accent-cyan); font-size: 24px; margin-bottom: 20px; border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-glass-bright);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 22px;
}
.card-title {
font-size: 19px;
font-weight: 800;
color: #FFFFFF;
margin-bottom: 10px;
letter-spacing: -0.3px;
}
.card-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.75;
font-weight: 400;
} }
.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 */ /* Institutional Special Feature Banner */
.b2g-banner { .b2g-banner {
background: linear-gradient(135deg, #16203D 0%, #1A284D 100%); background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(31, 41, 55, 0.8) 100%);
border: 1px solid rgba(255, 209, 102, 0.4); border-radius: 24px; padding: 48px; border: 1px solid rgba(245, 158, 11, 0.35);
display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; border-radius: 28px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); margin-bottom: 80px; position: relative; padding: 48px;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 40px;
align-items: center;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
margin-bottom: 90px;
backdrop-filter: blur(20px);
}
@media (max-width: 880px) {
.b2g-banner { grid-template-columns: 1fr; padding: 32px; gap: 28px; }
} }
@media (max-width: 900px) { .b2g-banner { grid-template-columns: 1fr; padding: 32px; } }
.b2g-badge { .b2g-badge {
display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; display: inline-flex;
background: rgba(255, 209, 102, 0.15); border: 1px solid rgba(255, 209, 102, 0.4); align-items: center;
color: var(--accent-gold); padding: 4px 14px; border-radius: 999px; margin-bottom: 16px; gap: 6px;
font-size: 12px;
font-weight: 800;
background: rgba(245, 158, 11, 0.15);
border: 1px solid rgba(245, 158, 11, 0.35);
color: #FBBF24;
padding: 4px 14px;
border-radius: 980px;
margin-bottom: 18px;
}
.b2g-title {
font-size: 28px;
font-weight: 900;
color: #FFFFFF;
margin-bottom: 14px;
line-height: 1.35;
letter-spacing: -0.5px;
}
.b2g-desc {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.75;
margin-bottom: 24px;
} }
.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 { .b2g-btn {
padding: 12px 28px; font-size: 14.5px; font-weight: 900; border-radius: 12px; text-decoration: none; padding: 13px 30px;
background: linear-gradient(135deg, #FFD166, #F59E0B); color: #0B132B; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px;
box-shadow: 0 6px 20px rgba(255, 209, 102, 0.35); transition: 0.2s; font-weight: 800;
border-radius: 980px;
text-decoration: none;
background: linear-gradient(135deg, #F59E0B, #D97706);
color: #FFFFFF;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.b2g-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(245, 158, 11, 0.5);
} }
.b2g-btn:hover { transform: translateY(-2px); }
.b2g-card-stat { .b2g-card-stat {
background: rgba(11, 19, 43, 0.85); border: 1px solid var(--border); border-radius: 18px; padding: 24px; background: rgba(3, 7, 18, 0.6);
border: 1px solid var(--border-glass);
border-radius: 20px;
padding: 26px;
}
.b2g-stat-item {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 18px;
} }
.b2g-stat-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.b2g-stat-item:last-child { margin-bottom: 0; } .b2g-stat-item:last-child { margin-bottom: 0; }
.b2g-icon-check { .b2g-icon-check {
width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 245, 212, 0.15); width: 28px;
color: var(--accent-cyan); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; flex-shrink: 0; height: 28px;
border-radius: 8px;
background: rgba(6, 182, 212, 0.15);
color: #22D3EE;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 14px;
flex-shrink: 0;
} }
/* Footer */ /* Apple Luxury Footer */
footer { footer {
border-top: 1px solid var(--border); background: #070D1E; padding: 48px 0 24px; color: var(--text-muted); font-size: 13px; border-top: 1px solid var(--border-glass);
background: #020617;
padding: 56px 0 28px;
color: var(--text-muted);
font-size: 13px;
} }
.footer-grid { .footer-grid {
display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 36px; display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 48px;
margin-bottom: 40px;
} }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 768px) {
.footer-col-title { font-size: 14px; font-weight: 800; color: #FFFFFF; margin-bottom: 14px; } .footer-grid { grid-template-columns: 1fr; gap: 32px; }
.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-col-title {
.footer-links a:hover { color: var(--accent-cyan); } font-size: 14px;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 16px;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover { color: #22D3EE; }
.footer-bottom { .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; border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 24px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Header --> <!-- Apple Navigation Bar -->
<header> <header>
<div class="container"> <div class="container">
<div class="header-content"> <div class="header-content">
@@ -231,48 +516,49 @@ class LandingPage
<span>🇯🇴 خطة الثقافة العسكرية</span> <span>🇯🇴 خطة الثقافة العسكرية</span>
</a> </a>
<a href="/teacher" class="nav-btn nav-btn-ghost">استوديو المعلمين</a> <a href="/teacher" class="nav-btn nav-btn-ghost">استوديو المعلمين</a>
<a href="/student" class="nav-btn nav-btn-cyan">دخول الطلاب 🚀</a> <a href="/student" class="nav-btn nav-btn-primary">دخول الطلاب 🚀</a>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<!-- Hero Section --> <!-- Apple Hero Section -->
<section class="hero-section"> <section class="hero-section">
<div class="container"> <div class="container">
<div class="hero-pill"> <div class="hero-pill">
<span>⚡ الجيل الثاني لمنصات التمكين الأكاديمي والتوجيهي في الأردن</span> <span class="pill-dot"></span>
<span>الجيل الثاني لمنصات التمكين الأكاديمي والتوجيهي في الأردن</span>
</div> </div>
<h1 class="hero-title"> <h1 class="hero-title">
لا نكتفي بعرض الفيديوهات.. <br> لا نكتفي بعرض الفيديوهات.. <br>
نحن <span class="hero-highlight-cyan">نصقل فهم الطالب</span> ونضمن <span class="hero-highlight-gold">جاهزيته للوزاري</span> نحن <span class="gradient-text-cyan">نصقل فهم الطالب</span> ونضمن <span class="gradient-text-gold">جاهزيته للوزاري</span>
</h1> </h1>
<p class="hero-desc"> <p class="hero-desc">
أول منظومة تعليمية تفاعلية تعتمد التعلم السقراطي (Socratic Learning)، الكويزات الصدمية داخل الفيديو مع الإرجاع العلاجي، ومؤشر الجاهزية للوزاري المدعوم بالذكاء الاصطناعي. أول منظومة تعليمية تفاعلية تعتمد التعلم السقراطي (Socratic Learning)، التثبيت المعرفي التلقائي أثناء المشاهدة، ومؤشر الجاهزية للوزاري المدعوم بالذكاء الاصطناعي.
</p> </p>
<div class="hero-cta-group"> <div class="hero-cta-group">
<a href="/student" class="cta-btn-main"> <a href="/student" class="cta-btn-apple-main">
<span>ابدأ رحلة التميز كطالب ←</span> <span>ابدأ رحلة التميز كطالب ←</span>
</a> </a>
<a href="/teacher" class="cta-btn-secondary"> <a href="/teacher" class="cta-btn-apple-secondary">
<span>انضم كأستاذ معتمد (استوديو صَقِل) 👨‍🏫</span> <span>انضم كأستاذ معتمد (استوديو صَقِل) 👨‍🏫</span>
</a> </a>
<a href="/military-culture" class="cta-btn-secondary" style="border-color: var(--accent-gold); color: var(--accent-gold);"> <a href="/military-culture" class="cta-btn-apple-secondary" style="border-color: rgba(245, 158, 11, 0.4); color: #FBBF24;">
<span>مبادرة مديرية الثقافة العسكرية 🇯🇴</span> <span>مبادرة مديرية الثقافة العسكرية 🇯🇴</span>
</a> </a>
</div> </div>
<!-- Trust Stats --> <!-- Trust Metrics Bar -->
<div class="trust-bar"> <div class="trust-bar">
<div class="trust-item"> <div class="trust-item">
<span class="trust-num">100%</span> <span class="trust-num">100%</span>
<span class="trust-label">حماية محتوى DRM ضد القرصنة</span> <span class="trust-label">حماية محتوى DRM ضد التسريب</span>
</div> </div>
<div class="trust-item"> <div class="trust-item">
<span class="trust-num">0s</span> <span class="trust-num">0ms</span>
<span class="trust-label">تأخير في الشات المباشر (Workerman)</span> <span class="trust-label">تأخير في الشات المباشر (Workerman)</span>
</div> </div>
<div class="trust-item"> <div class="trust-item">
@@ -288,13 +574,13 @@ class LandingPage
</section> </section>
<!-- Core Pillars --> <!-- Core Pillars -->
<section style="padding: 40px 0;"> <section style="padding: 20px 0 60px;">
<div class="container"> <div class="container">
<div class="section-header"> <div class="section-header">
<span class="section-tag">الفلسفة التربوية والتقنية</span> <span class="section-tag">الفلسفة التربوية والتقنية</span>
<h2 class="section-title">لماذا تُحدث صَقِل فارقاً حقيقياً في علامة الطالب؟</h2> <h2 class="section-title">لماذا تُحدث صَقِل فارقاً حقيقياً في علامة الطالب؟</h2>
<p class="section-subtitle"> <p class="section-subtitle">
المنصات التقليدية تقدم تعليماً سلبياً (مشاهدة بدون قياس). صَقِل تحول المشاهدة إلى اشتباك ذهني إجباري يرسخ المعلومة. المنصات التقليدية تقدم تعليماً سلبياً (مشاهدة بدون قياس). صَقِل تحول المشاهدة إلى اشتباك ذهني إجباري يرسخ المعلومة في الذاكرة طويلة المدى.
</p> </p>
</div> </div>
@@ -351,6 +637,7 @@ class LandingPage
<p class="card-desc"> <p class="card-desc">
تقارير دورية موجزة تصل لولي الأمر لإبقائه في قلب المسيرة التعليمية ومتابعة تحصيل ابنه وساعات دراسته ومؤشر تفوقه. تقارير دورية موجزة تصل لولي الأمر لإبقائه في قلب المسيرة التعليمية ومتابعة تحصيل ابنه وساعات دراسته ومؤشر تفوقه.
</p> </p>
</div>
</div> </div>
<!-- B2G Institutional Banner --> <!-- B2G Institutional Banner -->
@@ -371,7 +658,7 @@ class LandingPage
<div class="b2g-icon-check">✓</div> <div class="b2g-icon-check">✓</div>
<div> <div>
<strong style="color: #FFF; font-size: 14px; display: block;">عدالة تعليمية شاملة</strong> <strong style="color: #FFF; font-size: 14px; display: block;">عدالة تعليمية شاملة</strong>
<span style="font-size: 12px; color: var(--text-muted);">نفس جودة نخبة المعلمين لجميع أبناء القوات المسلحة في كل المحافظات.</span> <span style="font-size: 12.5px; color: var(--text-muted);">نفس جودة نخبة المعلمين لجميع أبناء القوات المسلحة في كل المحافظات.</span>
</div> </div>
</div> </div>
@@ -379,7 +666,7 @@ class LandingPage
<div class="b2g-icon-check">✓</div> <div class="b2g-icon-check">✓</div>
<div> <div>
<strong style="color: #FFF; font-size: 14px; display: block;">لوحة قيادة مركزية للضباط</strong> <strong style="color: #FFF; font-size: 14px; display: block;">لوحة قيادة مركزية للضباط</strong>
<span style="font-size: 12px; color: var(--text-muted);">متابعة تحصيل كل مدرسة وشعبة لحظياً بمؤشرات أداء واضحة.</span> <span style="font-size: 12.5px; color: var(--text-muted);">متابعة تحصيل كل مدرسة وشعبة لحظياً بمؤشرات أداء واضحة.</span>
</div> </div>
</div> </div>
@@ -387,7 +674,7 @@ class LandingPage
<div class="b2g-icon-check">✓</div> <div class="b2g-icon-check">✓</div>
<div> <div>
<strong style="color: #FFF; font-size: 14px; display: block;">توفير 80% من التكاليف</strong> <strong style="color: #FFF; font-size: 14px; display: block;">توفير 80% من التكاليف</strong>
<span style="font-size: 12px; color: var(--text-muted);">إلغاء تكاليف المراكز والتنقل والطباعة مع مخرجات أعلى جودة.</span> <span style="font-size: 12.5px; color: var(--text-muted);">إلغاء تكاليف المراكز والتنقل والطباعة مع مخرجات أعلى جودة.</span>
</div> </div>
</div> </div>
</div> </div>
@@ -405,7 +692,7 @@ class LandingPage
<div class="logo-badge" style="width: 36px; height: 36px; font-size: 18px;">صـ</div> <div class="logo-badge" style="width: 36px; height: 36px; font-size: 18px;">صـ</div>
<span class="brand-title" style="font-size: 19px;">منصة صَقِل</span> <span class="brand-title" style="font-size: 19px;">منصة صَقِل</span>
</div> </div>
<p style="font-size: 13px; line-height: 1.7; max-width: 380px;"> <p style="font-size: 13.5px; line-height: 1.7; max-width: 380px;">
المنظومة الأردنية الرائدة في التمكين الأكاديمي والتعليم السقراطي الذكي لطلبة التوجيهي والمراحل الثانوية. المنظومة الأردنية الرائدة في التمكين الأكاديمي والتعليم السقراطي الذكي لطلبة التوجيهي والمراحل الثانوية.
</p> </p>
</div> </div>
@@ -431,7 +718,7 @@ class LandingPage
<div class="footer-bottom"> <div class="footer-bottom">
<span>جميع الحقوق محفوظة © لمنصة صَقِل التعليمية 2026</span> <span>جميع الحقوق محفوظة © لمنصة صَقِل التعليمية 2026</span>
<span style="color: var(--accent-cyan);">بنية تحتية سحابية موثوقة • عمان، الأردن 🇯🇴</span> <span style="color: #22D3EE;">بنية تحتية سحابية موثوقة • عمان، الأردن 🇯🇴</span>
</div> </div>
</div> </div>
</footer> </footer>
backend/app/Views/MilitaryCulturePitch.php
+10 -3
View File
@@ -13,10 +13,10 @@ class MilitaryCulturePitch
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>المبادرة الاستراتيجية لتمكين مدارس مديرية الثقافة العسكرية — منصة صَقِل</title> <title>المبادرة الاستراتيجية لتمكين مدارس مديرية الثقافة العسكرية — منصة صَقِل</title>
<!-- Google Fonts: Cairo --> <!-- Apple SF Pro & Alexandria Arabic Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Executive Enterprise Luxury CSS --> <!-- Executive Enterprise Luxury CSS -->
<style> <style>
@@ -36,7 +36,14 @@ class MilitaryCulturePitch
--blue-accent: #3B82F6; --blue-accent: #3B82F6;
} }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', system-ui, -apple-system, sans-serif; } * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Alexandria", "SF Pro Display", "SF Pro Text", "SF Arabic", "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { body {
background-color: var(--bg-dark); background-color: var(--bg-dark);
backend/app/Views/StudentPortal.php
+10 -3
View File
@@ -13,10 +13,10 @@ class StudentPortal
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>بوابة الطالب — منصة صَقِل التعليمية</title> <title>بوابة الطالب — منصة صَقِل التعليمية</title>
<!-- Google Fonts: Cairo --> <!-- Apple SF Pro & Alexandria Arabic Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Pure Self-Contained Luxury CSS (Zero External CDN Dependency) --> <!-- Pure Self-Contained Luxury CSS (Zero External CDN Dependency) -->
<style> <style>
@@ -38,7 +38,14 @@ class StudentPortal
--accent-purple: #A78BFA; --accent-purple: #A78BFA;
} }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', system-ui, -apple-system, sans-serif; } * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Alexandria", "SF Pro Display", "SF Pro Text", "SF Arabic", "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { body {
background-color: var(--bg-dark); background-color: var(--bg-dark);
backend/app/Views/TeacherPortal.php
+10 -3
View File
@@ -13,10 +13,10 @@ class TeacherPortal
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>بوابة المعلم — استوديو صَقِل التعليمي</title> <title>بوابة المعلم — استوديو صَقِل التعليمي</title>
<!-- Google Fonts: Cairo --> <!-- Apple SF Pro & Alexandria Arabic Web Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Pure Self-Contained Luxury CSS (Zero External CDN Dependency) --> <!-- Pure Self-Contained Luxury CSS (Zero External CDN Dependency) -->
<style> <style>
@@ -38,7 +38,14 @@ class TeacherPortal
--accent-purple: #A78BFA; --accent-purple: #A78BFA;
} }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', system-ui, -apple-system, sans-serif; } * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Alexandria", "SF Pro Display", "SF Pro Text", "SF Arabic", "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { body {
background-color: var(--bg-dark); background-color: var(--bg-dark);