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

feat: Install custom Apple UI design system skills, implement official Apple.com dark aesthetic with SF Pro/Arabic typography and Bento grids

Browse Source
This commit is contained in:
Hamza-Ayed
2026-08-27 03:19:07 +03:00
parent 261796fcab
commit 0d25239712
3 changed files with 430 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/apple-ui-design-system/SKILL.md
+144
View File
@@ -0,0 +1,144 @@
---
name: apple-ui-design-system
description: >-
World-class Apple Cupertino UI/UX Design System for Web and Flutter.
Use whenever building high-end, luxury, Apple-grade user interfaces with SF Pro/SF Arabic typography,
glassmorphism, bento grids, fluid micro-interactions, and Cupertino dark aesthetics.
---
# Apple Cupertino Luxury UI/UX Design System (Web & Mobile)
This skill equips the agent with Apple's official human interface guidelines (HIG) and Cupertino web design standards (`apple.com` and iOS 18 / macOS Sequoia aesthetic).
---
## 1. Typography Standards (Apple San Francisco Arabic & Latin)
### Web Font Stack
```css
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root {
--font-apple: -apple-system, BlinkMacSystemFont, "SF Pro AR", "SF Pro Display", "SF Pro Text", "SF Arabic", "Geeza Pro", "Alexandria", system-ui, sans-serif;
}
* {
font-family: var(--font-apple);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Apple Tracking & Typography Scale */
h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
h2 { font-size: clamp(26px, 3.5vw, 42px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
h3 { font-size: clamp(18px, 2.5vw, 24px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }
p { font-size: 15px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.7; color: #86868B; }
```
---
## 2. Apple Dark Mode Palette & Materials
```css
:root {
/* Surfaces */
--apple-black: #000000;
--apple-space-gray: #0B0F17;
--apple-card: rgba(22, 22, 23, 0.8);
--apple-card-hover: rgba(30, 30, 32, 0.95);
/* Borders & Glass */
--apple-border: rgba(255, 255, 255, 0.08);
--apple-border-focus: rgba(255, 255, 255, 0.25);
--apple-blur: blur(24px) saturate(180%);
/* Text */
--apple-text-white: #F5F5F7;
--apple-text-silver: #A1A1A6;
--apple-text-muted: #6E6E73;
/* Accent Colors */
--apple-blue: #0071E3;
--apple-blue-hover: #0077ED;
--apple-gold: #F59E0B;
--apple-cyan: #00F5D4;
}
```
---
## 3. Apple Bento Grid & Interactive Cards
```css
.apple-bento-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
}
.apple-card {
background: var(--apple-card);
border: 1px solid var(--apple-border);
border-radius: 28px;
padding: 36px;
backdrop-filter: var(--apple-blur);
-webkit-backdrop-filter: var(--apple-blur);
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.apple-card:hover {
transform: translateY(-4px);
border-color: var(--apple-border-focus);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
```
---
## 4. Apple Pill Buttons & Micro-Interactions
```css
.apple-btn-primary {
background: #0071E3;
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
padding: 12px 26px;
border-radius: 980px;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.apple-btn-primary:hover {
background: #0077ED;
transform: scale(1.02);
box-shadow: 0 4px 20px rgba(0, 113, 227, 0.4);
}
.apple-btn-ghost {
background: rgba(255, 255, 255, 0.06);
color: #F5F5F7;
border: 1px solid rgba(255, 255, 255, 0.15);
font-weight: 600;
font-size: 14px;
padding: 12px 24px;
border-radius: 980px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.apple-btn-ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.3);
transform: scale(1.02);
}
```
.agents/skills/flutter-luxury-ui/SKILL.md
+18
View File
@@ -0,0 +1,18 @@
---
name: flutter-luxury-ui
description: >-
Ultra-luxury Flutter & Web UI Design System.
Use when building fluid animations, glassmorphism, Cupertino styling, custom painters,
and tactile mobile/web experiences in Flutter and responsive frontends.
---
# Luxury Flutter & Web UI Engineering Standards
This skill provides the architectural foundation for building multi-platform applications with Apple-grade fidelity.
## Key Principles:
1. **Typography:** SF Pro / SF Arabic & Alexandria with precise optical sizing and letter-spacing (`-0.015em`).
2. **Atmospheric Lighting:** Deep OLED dark canvases (`#000000`) accented with subtle radial ambient glow orbs.
3. **Materials & Depth:** Frosted glass cards with `BackdropFilter` (Flutter) or `backdrop-filter: blur(24px)` (Web).
4. **Fluid Curves:** Cupertino bezier curves (`Curves.easeOutCubic` / `cubic-bezier(0.16, 1, 0.3, 1)`).
5. **Tactile Micro-interactions:** Instant responsive feedback, subtle scale transformations on touch/hover (`transform: scale(0.98)` on press, `scale(1.02)` on hover).
backend/app/Views/LandingPage.php
+268 -278
View File
@@ -17,63 +17,59 @@ class LandingPage
<!-- Apple SF Pro & Alexandria Arabic Web Fonts --> <!-- 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=Alexandria:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;600;700;800&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;500;600;700;800&display=swap" rel="stylesheet">
<!-- Apple-Grade Luxury Cupertino CSS Design System --> <!-- Apple Official Design System (Cupertino Dark Mode) -->
<style> <style>
:root { :root {
--bg-base: #030712; --apple-bg: #000000;
--bg-surface-1: rgba(17, 24, 39, 0.7); --apple-surface: #121214;
--bg-surface-2: rgba(31, 41, 55, 0.5); --apple-surface-card: #161617;
--bg-glass: rgba(255, 255, 255, 0.03); --apple-surface-hover: #1C1C1E;
--bg-glass-hover: rgba(255, 255, 255, 0.06); --apple-border: rgba(255, 255, 255, 0.08);
--border-glass: rgba(255, 255, 255, 0.08); --apple-border-focus: rgba(255, 255, 255, 0.2);
--border-glass-bright: rgba(255, 255, 255, 0.18); --apple-text-white: #F5F5F7;
--text-primary: #F9FAFB; --apple-text-silver: #A1A1A6;
--text-secondary: #D1D5DB; --apple-text-muted: #6E6E73;
--text-muted: #9CA3AF; --apple-blue: #0071E3;
--apple-blue-hover: #0077ED;
--apple-cyan: #00F5D4;
--apple-gold: #F59E0B; --apple-gold: #F59E0B;
--apple-gold-light: #FDE68A;
--apple-cyan: #06B6D4;
--apple-cyan-glow: #22D3EE;
--apple-green: #10B981;
--apple-purple: #8B5CF6;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Alexandria", "SF Pro Display", "SF Pro Text", "SF Arabic", "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "SF Pro AR", "SF Pro Display", "SF Pro Text", "SF Arabic", "Alexandria", "Segoe UI", Roboto, sans-serif;
letter-spacing: -0.015em;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
body { body {
background-color: var(--bg-base); background-color: var(--apple-bg);
color: var(--text-primary); color: var(--apple-text-white);
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
background-image: background-image:
radial-gradient(circle at 50% -10%, rgba(6, 182, 212, 0.15) 0%, transparent 60%), radial-gradient(circle at 50% 0%, rgba(0, 113, 227, 0.18) 0%, transparent 60%),
radial-gradient(circle at 10% 40%, rgba(245, 158, 11, 0.08) 0%, transparent 50%), radial-gradient(circle at 85% 30%, rgba(245, 158, 11, 0.06) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%), radial-gradient(circle at 15% 70%, rgba(0, 245, 212, 0.06) 0%, transparent 50%);
linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px), background-size: 100% 100%;
linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
} }
.container { .container {
max-width: 1200px; max-width: 1180px;
margin: 0 auto; margin: 0 auto;
padding: 0 24px; padding: 0 24px;
width: 100%; width: 100%;
} }
/* Apple Glass Navigation Bar */ /* Apple Glass Navigation */
header { header {
border-bottom: 1px solid var(--border-glass); border-bottom: 1px solid var(--apple-border);
background-color: rgba(3, 7, 18, 0.8); background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
position: sticky; position: sticky;
@@ -81,7 +77,7 @@ class LandingPage
z-index: 100; z-index: 100;
} }
.header-content { .header-content {
height: 72px; height: 64px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -93,23 +89,23 @@ class LandingPage
text-decoration: none; text-decoration: none;
} }
.logo-badge { .logo-badge {
width: 42px; width: 38px;
height: 42px; height: 38px;
border-radius: 12px; border-radius: 10px;
background: linear-gradient(135deg, #06B6D4, #3B82F6); background: linear-gradient(135deg, #0071E3, #00F5D4);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #FFFFFF; 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-size: 20px;
font-weight: 800; font-weight: 800;
box-shadow: 0 4px 16px rgba(0, 113, 227, 0.35);
}
.brand-title {
font-size: 19px;
font-weight: 800;
color: #FFFFFF; color: #FFFFFF;
letter-spacing: -0.5px; letter-spacing: -0.03em;
} }
.nav-actions { .nav-actions {
@@ -117,10 +113,10 @@ class LandingPage
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.nav-btn { .apple-pill-btn {
font-size: 13px; font-size: 12.5px;
font-weight: 700; font-weight: 600;
padding: 8px 18px; padding: 7px 18px;
border-radius: 980px; border-radius: 980px;
text-decoration: none; text-decoration: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
@@ -128,88 +124,86 @@ class LandingPage
align-items: center; align-items: center;
gap: 6px; gap: 6px;
} }
.nav-btn-ghost { .btn-nav-ghost {
color: var(--text-secondary); color: var(--apple-text-silver);
border: 1px solid transparent; border: 1px solid transparent;
} }
.nav-btn-ghost:hover { .btn-nav-ghost:hover {
color: #FFF; color: #FFFFFF;
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.08);
} }
.nav-btn-gold { .btn-nav-military {
background: rgba(245, 158, 11, 0.12); background: rgba(245, 158, 11, 0.12);
color: #FBBF24; color: #FBBF24;
border: 1px solid rgba(245, 158, 11, 0.3); border: 1px solid rgba(245, 158, 11, 0.3);
} }
.nav-btn-gold:hover { .btn-nav-military:hover {
background: rgba(245, 158, 11, 0.2); background: rgba(245, 158, 11, 0.22);
transform: translateY(-1px); transform: scale(1.02);
} }
.nav-btn-primary { .btn-nav-primary {
background: #FFFFFF; background: var(--apple-blue);
color: #030712 !important; color: #FFFFFF !important;
font-weight: 800; box-shadow: 0 2px 10px rgba(0, 113, 227, 0.3);
box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15);
} }
.nav-btn-primary:hover { .btn-nav-primary:hover {
background: #F3F4F6; background: var(--apple-blue-hover);
transform: translateY(-1px); transform: scale(1.02);
box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25); box-shadow: 0 4px 16px rgba(0, 113, 227, 0.45);
} }
/* Apple Hero Section */ /* Apple Hero Section */
.hero-section { .hero-section {
padding: 90px 0 60px; padding: 96px 0 64px;
text-align: center; text-align: center;
position: relative; position: relative;
} }
.hero-pill { .apple-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 600;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border-glass-bright); border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--text-primary); color: var(--apple-text-silver);
padding: 6px 18px; padding: 6px 18px;
border-radius: 980px; border-radius: 980px;
margin-bottom: 28px; margin-bottom: 28px;
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
} }
.pill-dot { .badge-dot {
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: #06B6D4; background: var(--apple-cyan);
box-shadow: 0 0 8px #06B6D4; box-shadow: 0 0 10px var(--apple-cyan);
} }
.hero-title { .hero-title {
font-size: clamp(32px, 5.5vw, 56px); font-size: clamp(34px, 5.5vw, 60px);
font-weight: 900; font-weight: 800;
line-height: 1.25; line-height: 1.15;
color: #FFFFFF; color: var(--apple-text-white);
max-width: 980px; max-width: 960px;
margin: 0 auto 24px; margin: 0 auto 24px;
letter-spacing: -1px; letter-spacing: -0.03em;
} }
.gradient-text-cyan { .hero-title-gradient {
background: linear-gradient(135deg, #22D3EE 0%, #3B82F6 100%); background: linear-gradient(180deg, #FFFFFF 0%, #A1A1A6 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.gradient-text-gold { .hero-cyan-glow {
background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%); background: linear-gradient(135deg, #00F5D4 0%, #0071E3 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.hero-desc { .hero-desc {
font-size: clamp(15px, 2vw, 18px); font-size: clamp(16px, 2vw, 19px);
color: var(--text-secondary); color: var(--apple-text-silver);
max-width: 760px; max-width: 740px;
margin: 0 auto 40px; margin: 0 auto 44px;
line-height: 1.8; line-height: 1.7;
font-weight: 400; font-weight: 400;
} }
@@ -218,73 +212,72 @@ class LandingPage
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 60px; margin-bottom: 72px;
} }
.cta-btn-apple-main { .apple-main-btn {
padding: 15px 36px; padding: 14px 34px;
font-size: 15px; font-size: 15px;
font-weight: 800; font-weight: 600;
border-radius: 980px; border-radius: 980px;
text-decoration: none; text-decoration: none;
background: linear-gradient(135deg, #06B6D4, #2563EB); background: var(--apple-blue);
color: #FFFFFF; color: #FFFFFF;
box-shadow: 0 8px 30px rgba(6, 182, 212, 0.4); box-shadow: 0 6px 24px rgba(0, 113, 227, 0.4);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
} }
.cta-btn-apple-main:hover { .apple-main-btn:hover {
transform: translateY(-2px); background: var(--apple-blue-hover);
box-shadow: 0 12px 36px rgba(6, 182, 212, 0.55); transform: scale(1.02);
box-shadow: 0 10px 32px rgba(0, 113, 227, 0.55);
} }
.cta-btn-apple-secondary { .apple-secondary-btn {
padding: 15px 30px; padding: 14px 28px;
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 600;
border-radius: 980px; border-radius: 980px;
text-decoration: none; text-decoration: none;
background: var(--bg-glass); background: rgba(255, 255, 255, 0.06);
color: #FFFFFF; color: var(--apple-text-white);
border: 1px solid var(--border-glass-bright); border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
} }
.cta-btn-apple-secondary:hover { .apple-secondary-btn:hover {
background: var(--bg-glass-hover); background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-1px); transform: scale(1.02);
} }
/* Glass Trust Metrics Bar */ /* Apple Metric Bar */
.trust-bar { .metrics-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px; gap: 16px;
background: var(--bg-glass); background: var(--apple-surface-card);
border: 1px solid var(--border-glass); border: 1px solid var(--apple-border);
border-radius: 24px; border-radius: 24px;
padding: 28px 36px; padding: 28px 36px;
backdrop-filter: blur(20px); margin-bottom: 96px;
margin-bottom: 90px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
} }
.trust-item { text-align: center; } .metric-col { text-align: center; }
.trust-num { .metric-val {
font-size: 36px; font-size: 38px;
font-weight: 900; font-weight: 800;
color: #FFFFFF; color: #FFFFFF;
display: block; display: block;
letter-spacing: -1px; letter-spacing: -0.03em;
} }
.trust-label { .metric-label {
font-size: 13px; font-size: 13px;
color: var(--text-muted); color: var(--apple-text-muted);
font-weight: 600; font-weight: 500;
margin-top: 4px; margin-top: 4px;
} }
/* Section Layouts */ /* Bento Grid Showcase */
.section-header { .section-header {
text-align: center; text-align: center;
margin-bottom: 56px; margin-bottom: 56px;
@@ -292,81 +285,79 @@ class LandingPage
.section-tag { .section-tag {
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: #FBBF24; color: var(--apple-cyan);
background: rgba(245, 158, 11, 0.1); background: rgba(0, 245, 212, 0.1);
border: 1px solid rgba(245, 158, 11, 0.25); border: 1px solid rgba(0, 245, 212, 0.25);
padding: 5px 16px; padding: 5px 16px;
border-radius: 980px; border-radius: 980px;
display: inline-block; display: inline-block;
margin-bottom: 14px; margin-bottom: 14px;
} }
.section-title { .section-title {
font-size: clamp(26px, 4vw, 38px); font-size: clamp(28px, 4vw, 42px);
font-weight: 900; font-weight: 800;
color: #FFFFFF; color: var(--apple-text-white);
letter-spacing: -0.5px; letter-spacing: -0.025em;
margin-bottom: 14px; margin-bottom: 14px;
} }
.section-subtitle { .section-subtitle {
font-size: 16px; font-size: 16px;
color: var(--text-muted); color: var(--apple-text-silver);
max-width: 680px; max-width: 660px;
margin: 0 auto; margin: 0 auto;
line-height: 1.7; line-height: 1.7;
} }
/* Apple Grid Cards */ .bento-grid {
.features-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px; gap: 20px;
margin-bottom: 90px; margin-bottom: 96px;
} }
.feature-card { .bento-card {
background: var(--bg-glass); background: var(--apple-surface-card);
border: 1px solid var(--border-glass); border: 1px solid var(--apple-border);
border-radius: 24px; border-radius: 28px;
padding: 36px; padding: 38px;
backdrop-filter: blur(20px); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.feature-card:hover { .bento-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
border-color: rgba(6, 182, 212, 0.4); border-color: var(--apple-border-focus);
background: var(--bg-glass-hover); background: var(--apple-surface-hover);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
} }
.card-icon { .bento-icon {
width: 52px; width: 50px;
height: 52px; height: 50px;
border-radius: 16px; border-radius: 14px;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-glass-bright); border: 1px solid rgba(255, 255, 255, 0.1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 24px; font-size: 22px;
margin-bottom: 22px; margin-bottom: 22px;
} }
.card-title { .bento-title {
font-size: 19px; font-size: 19px;
font-weight: 800; font-weight: 700;
color: #FFFFFF; color: var(--apple-text-white);
margin-bottom: 10px; margin-bottom: 10px;
letter-spacing: -0.3px; letter-spacing: -0.02em;
} }
.card-desc { .bento-desc {
font-size: 14px; font-size: 14px;
color: var(--text-secondary); color: var(--apple-text-silver);
line-height: 1.75; line-height: 1.75;
font-weight: 400; font-weight: 400;
} }
/* Institutional Special Feature Banner */ /* Institutional Banner */
.b2g-banner { .military-banner {
background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(31, 41, 55, 0.8) 100%); background: linear-gradient(135deg, #121214 0%, #1A1A1E 100%);
border: 1px solid rgba(245, 158, 11, 0.35); border: 1px solid rgba(245, 158, 11, 0.35);
border-radius: 28px; border-radius: 28px;
padding: 48px; padding: 48px;
@@ -374,20 +365,19 @@ class LandingPage
grid-template-columns: 1.3fr 1fr; grid-template-columns: 1.3fr 1fr;
gap: 40px; gap: 40px;
align-items: center; align-items: center;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
margin-bottom: 90px; margin-bottom: 96px;
backdrop-filter: blur(20px);
} }
@media (max-width: 880px) { @media (max-width: 880px) {
.b2g-banner { grid-template-columns: 1fr; padding: 32px; gap: 28px; } .military-banner { grid-template-columns: 1fr; padding: 32px; gap: 28px; }
} }
.b2g-badge { .banner-pill {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-size: 12px; font-size: 12px;
font-weight: 800; font-weight: 700;
background: rgba(245, 158, 11, 0.15); background: rgba(245, 158, 11, 0.15);
border: 1px solid rgba(245, 158, 11, 0.35); border: 1px solid rgba(245, 158, 11, 0.35);
color: #FBBF24; color: #FBBF24;
@@ -395,24 +385,24 @@ class LandingPage
border-radius: 980px; border-radius: 980px;
margin-bottom: 18px; margin-bottom: 18px;
} }
.b2g-title { .banner-title {
font-size: 28px; font-size: 28px;
font-weight: 900; font-weight: 800;
color: #FFFFFF; color: var(--apple-text-white);
margin-bottom: 14px; margin-bottom: 14px;
line-height: 1.35; line-height: 1.35;
letter-spacing: -0.5px; letter-spacing: -0.025em;
} }
.b2g-desc { .banner-desc {
font-size: 15px; font-size: 15px;
color: var(--text-secondary); color: var(--apple-text-silver);
line-height: 1.75; line-height: 1.75;
margin-bottom: 24px; margin-bottom: 24px;
} }
.b2g-btn { .banner-btn {
padding: 13px 30px; padding: 13px 30px;
font-size: 14.5px; font-size: 14.5px;
font-weight: 800; font-weight: 600;
border-radius: 980px; border-radius: 980px;
text-decoration: none; text-decoration: none;
background: linear-gradient(135deg, #F59E0B, #D97706); background: linear-gradient(135deg, #F59E0B, #D97706);
@@ -423,44 +413,44 @@ class LandingPage
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
} }
.b2g-btn:hover { .banner-btn:hover {
transform: translateY(-2px); transform: scale(1.02);
box-shadow: 0 10px 28px rgba(245, 158, 11, 0.5); box-shadow: 0 10px 28px rgba(245, 158, 11, 0.5);
} }
.b2g-card-stat { .banner-card-box {
background: rgba(3, 7, 18, 0.6); background: rgba(0, 0, 0, 0.6);
border: 1px solid var(--border-glass); border: 1px solid var(--apple-border);
border-radius: 20px; border-radius: 20px;
padding: 26px; padding: 26px;
} }
.b2g-stat-item { .banner-stat-row {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 14px; gap: 14px;
margin-bottom: 18px; margin-bottom: 18px;
} }
.b2g-stat-item:last-child { margin-bottom: 0; } .banner-stat-row:last-child { margin-bottom: 0; }
.b2g-icon-check { .banner-check-icon {
width: 28px; width: 26px;
height: 28px; height: 26px;
border-radius: 8px; border-radius: 50%;
background: rgba(6, 182, 212, 0.15); background: rgba(0, 245, 212, 0.15);
color: #22D3EE; color: var(--apple-cyan);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 900; font-weight: 800;
font-size: 14px; font-size: 13px;
flex-shrink: 0; flex-shrink: 0;
} }
/* Apple Luxury Footer */ /* Apple Footer */
footer { footer {
border-top: 1px solid var(--border-glass); border-top: 1px solid var(--apple-border);
background: #020617; background: #000000;
padding: 56px 0 28px; padding: 56px 0 28px;
color: var(--text-muted); color: var(--apple-text-muted);
font-size: 13px; font-size: 13px;
} }
.footer-grid { .footer-grid {
@@ -472,24 +462,24 @@ class LandingPage
@media (max-width: 768px) { @media (max-width: 768px) {
.footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-grid { grid-template-columns: 1fr; gap: 32px; }
} }
.footer-col-title { .footer-title {
font-size: 14px; font-size: 13.5px;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: var(--apple-text-white);
margin-bottom: 16px; margin-bottom: 16px;
} }
.footer-links { .footer-list {
list-style: none; list-style: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
} }
.footer-links a { .footer-list a {
color: var(--text-muted); color: var(--apple-text-muted);
text-decoration: none; text-decoration: none;
transition: color 0.2s; transition: color 0.2s;
} }
.footer-links a:hover { color: #22D3EE; } .footer-list a:hover { color: var(--apple-text-white); }
.footer-bottom { .footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 24px; padding-top: 24px;
@@ -512,11 +502,11 @@ class LandingPage
</a> </a>
<div class="nav-actions"> <div class="nav-actions">
<a href="/military-culture" class="nav-btn nav-btn-gold"> <a href="/military-culture" class="apple-pill-btn btn-nav-military">
<span>🇯🇴 خطة الثقافة العسكرية</span> <span>🇯🇴 خطة الثقافة العسكرية</span>
</a> </a>
<a href="/teacher" class="nav-btn nav-btn-ghost">استوديو المعلمين</a> <a href="/teacher" class="apple-pill-btn btn-nav-ghost">استوديو المعلمين</a>
<a href="/student" class="nav-btn nav-btn-primary">دخول الطلاب 🚀</a> <a href="/student" class="apple-pill-btn btn-nav-primary">دخول الطلاب 🚀</a>
</div> </div>
</div> </div>
</div> </div>
@@ -525,14 +515,14 @@ class LandingPage
<!-- Apple 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="apple-badge">
<span class="pill-dot"></span> <span class="badge-dot"></span>
<span>الجيل الثاني لمنصات التمكين الأكاديمي والتوجيهي في الأردن</span> <span>الجيل الثاني لمنصات التمكين الأكاديمي والتوجيهي في الأردن</span>
</div> </div>
<h1 class="hero-title"> <h1 class="hero-title">
لا نكتفي بعرض الفيديوهات.. <br> لا نكتفي بعرض الفيديوهات.. <br>
نحن <span class="gradient-text-cyan">نصقل فهم الطالب</span> ونضمن <span class="gradient-text-gold">جاهزيته للوزاري</span> <span class="hero-title-gradient">نحن نصقل فهم الطالب</span> ونضمن <span class="hero-cyan-glow">جاهزيته للوزاري</span>
</h1> </h1>
<p class="hero-desc"> <p class="hero-desc">
@@ -540,40 +530,40 @@ class LandingPage
</p> </p>
<div class="hero-cta-group"> <div class="hero-cta-group">
<a href="/student" class="cta-btn-apple-main"> <a href="/student" class="apple-main-btn">
<span>ابدأ رحلة التميز كطالب ←</span> <span>ابدأ رحلة التميز كطالب ←</span>
</a> </a>
<a href="/teacher" class="cta-btn-apple-secondary"> <a href="/teacher" class="apple-secondary-btn">
<span>انضم كأستاذ معتمد (استوديو صَقِل) 👨‍🏫</span> <span>انضم كأستاذ معتمد (استوديو صَقِل) 👨‍🏫</span>
</a> </a>
<a href="/military-culture" class="cta-btn-apple-secondary" style="border-color: rgba(245, 158, 11, 0.4); color: #FBBF24;"> <a href="/military-culture" class="apple-secondary-btn" style="border-color: rgba(245, 158, 11, 0.35); color: #FBBF24;">
<span>مبادرة مديرية الثقافة العسكرية 🇯🇴</span> <span>مبادرة مديرية الثقافة العسكرية 🇯🇴</span>
</a> </a>
</div> </div>
<!-- Trust Metrics Bar --> <!-- Apple Metric Bar -->
<div class="trust-bar"> <div class="metrics-grid">
<div class="trust-item"> <div class="metric-col">
<span class="trust-num">100%</span> <span class="metric-val">100%</span>
<span class="trust-label">حماية محتوى DRM ضد التسريب</span> <span class="metric-label">حماية محتوى DRM ضد التسريب</span>
</div> </div>
<div class="trust-item"> <div class="metric-col">
<span class="trust-num">0ms</span> <span class="metric-val">0ms</span>
<span class="trust-label">تأخير في الشات المباشر (Workerman)</span> <span class="metric-label">تأخير في الشات المباشر (Workerman)</span>
</div> </div>
<div class="trust-item"> <div class="metric-col">
<span class="trust-num">4 مستويات</span> <span class="metric-val">4 مستويات</span>
<span class="trust-label">هرمية الامتحانات والتقييم المعرفي</span> <span class="metric-label">هرمية الامتحانات والتقييم المعرفي</span>
</div> </div>
<div class="trust-item"> <div class="metric-col">
<span class="trust-num">91.4%</span> <span class="metric-val">91.4%</span>
<span class="trust-label">متوسط إتقان واستيعاب المفاهيم</span> <span class="metric-label">متوسط إتقان واستيعاب المفاهيم</span>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Core Pillars --> <!-- Core Pillars Bento Grid -->
<section style="padding: 20px 0 60px;"> <section style="padding: 20px 0 60px;">
<div class="container"> <div class="container">
<div class="section-header"> <div class="section-header">
@@ -584,97 +574,97 @@ class LandingPage
</p> </p>
</div> </div>
<div class="features-grid"> <div class="bento-grid">
<!-- Card 1 --> <!-- Card 1 -->
<div class="feature-card"> <div class="bento-card">
<div class="card-icon">🎬</div> <div class="bento-icon">🎬</div>
<h3 class="card-title">محرك التثبيت المعرفي السقراطي (Active Recall)</h3> <h3 class="bento-title">محرك التثبيت المعرفي السقراطي (Active Recall)</h3>
<p class="card-desc"> <p class="bento-desc">
فحص لحظي ذكي لاستيعاب الطالب أثناء الحصة؛ يُلزم الطالب بالاشتباك الذهني وتأكيد فهم كل مفهوم قبل الانتقال إلى الفكرة التالية لضمان التمكن التام. فحص لحظي ذكي لاستيعاب الطالب أثناء الحصة؛ يُلزم الطالب بالاشتباك الذهني وتأكيد فهم كل مفهوم قبل الانتقال إلى الفكرة التالية لضمان التمكن التام.
</p> </p>
</div> </div>
<!-- Card 2 --> <!-- Card 2 -->
<div class="feature-card"> <div class="bento-card">
<div class="card-icon">🧠</div> <div class="bento-icon">🧠</div>
<h3 class="card-title">مؤشر الجاهزية للوزاري (Tawjihi Readiness)</h3> <h3 class="bento-title">مؤشر الجاهزية للوزاري (Tawjihi Readiness)</h3>
<p class="card-desc"> <p class="bento-desc">
تحليل تراكمي دقيق لمستوى فهم الطالب في كل مبحث، يرصد نقاط القوة والضعف ويحدد بدقة نسبة الجاهزية لدخول الامتحان الوزاري بتفوق. تحليل تراكمي دقيق لمستوى فهم الطالب في كل مبحث، يرصد نقاط القوة والضعف ويحدد بدقة نسبة الجاهزية لدخول الامتحان الوزاري بتفوق.
</p> </p>
</div> </div>
<!-- Card 3 --> <!-- Card 3 -->
<div class="feature-card"> <div class="bento-card">
<div class="card-icon">⚡</div> <div class="bento-icon">⚡</div>
<h3 class="card-title">قناة الإشراف والتواصل المباشر مع المعلمين</h3> <h3 class="bento-title">قناة الإشراف والتواصل المباشر مع المعلمين</h3>
<p class="card-desc"> <p class="bento-desc">
بيئة تفاعلية لحظية تتيح للطالب الاستفسار المباشر من أستاذه ومناقشة المسائل المعقدة دون أي عوائق تقنية أو تأخير. بيئة تفاعلية لحظية تتيح للطالب الاستفسار المباشر من أستاذه ومناقشة المسائل المعقدة دون أي عوائق تقنية أو تأخير.
</p> </p>
</div> </div>
<!-- Card 4 --> <!-- Card 4 -->
<div class="feature-card"> <div class="bento-card">
<div class="card-icon">🔒</div> <div class="bento-icon">🔒</div>
<h3 class="card-title">حماية المحتوى والأمان الرقمي (DRM Shield)</h3> <h3 class="bento-title">حماية المحتوى والأمان الرقمي (DRM Shield)</h3>
<p class="card-desc"> <p class="bento-desc">
بنية تحتية سيادية مشفرة بالكامل تحمي المواد التعليمية وحقوق المعلمين والمؤسسات من أي تسريب أو تصوير غير مصرح به. بنية تحتية سيادية مشفرة بالكامل تحمي المواد التعليمية وحقوق المعلمين والمؤسسات من أي تسريب أو تصوير غير مصرح به.
</p> </p>
</div> </div>
<!-- Card 5 --> <!-- Card 5 -->
<div class="feature-card"> <div class="bento-card">
<div class="card-icon">📲</div> <div class="bento-icon">📲</div>
<h3 class="card-title">الدخول الذكي المعتمد (Passwordless Access)</h3> <h3 class="bento-title">الدخول الذكي المعتمد (Passwordless Access)</h3>
<p class="card-desc"> <p class="bento-desc">
تجربة وصول فائقة السلاسة والأمان عبر بطاقات التوثيق المعتمدة على الواتساب وبصمة الجهاز الموحدة وفق أعلى معايير الخصوصية. تجربة وصول فائقة السلاسة والأمان عبر بطاقات التوثيق المعتمدة على الواتساب وبصمة الجهاز الموحدة وفق أعلى معايير الخصوصية.
</p> </p>
</div> </div>
<!-- Card 6 --> <!-- Card 6 -->
<div class="feature-card"> <div class="bento-card">
<div class="card-icon">👨‍👩‍👧</div> <div class="bento-icon">👨‍👩‍👧</div>
<h3 class="card-title">منظومة إشعار ومتابعة أولياء الأمور</h3> <h3 class="bento-title">منظومة إشعار ومتابعة أولياء الأمور</h3>
<p class="card-desc"> <p class="bento-desc">
تقارير دورية موجزة تصل لولي الأمر لإبقائه في قلب المسيرة التعليمية ومتابعة تحصيل ابنه وساعات دراسته ومؤشر تفوقه. تقارير دورية موجزة تصل لولي الأمر لإبقائه في قلب المسيرة التعليمية ومتابعة تحصيل ابنه وساعات دراسته ومؤشر تفوقه.
</p> </p>
</div> </div>
</div> </div>
<!-- B2G Institutional Banner --> <!-- B2G Institutional Banner -->
<div class="b2g-banner"> <div class="military-banner">
<div> <div>
<div class="b2g-badge">🇯🇴 مبادرة الشراكة الاستراتيجية والمؤسسية</div> <div class="banner-pill">🇯🇴 مبادرة الشراكة الاستراتيجية والمؤسسية</div>
<h2 class="b2g-title">حلول مخصصة لمديرية التربية والتعليم والثقافة العسكرية</h2> <h2 class="banner-title">حلول مخصصة لمديرية التربية والتعليم والثقافة العسكرية</h2>
<p class="b2g-desc"> <p class="banner-desc">
نقدم للمديرية نموذجاً متكاملاً لشراء المخرجات والإنتاج بأقل التكاليف التشغيلية، مع توحيد جودة التعليم في مدارس البادية والمحافظات وغرفة عمليات مركزية لمتابعة إنجاز كل طالب. نقدم للمديرية نموذجاً متكاملاً لشراء المخرجات والإنتاج بأقل التكاليف التشغيلية، مع توحيد جودة التعليم في مدارس البادية والمحافظات وغرفة عمليات مركزية لمتابعة إنجاز كل طالب.
</p> </p>
<a href="/military-culture" class="b2g-btn"> <a href="/military-culture" class="banner-btn">
<span>استعرض ملف المبادرة الاستراتيجية الكاملة ←</span> <span>استعرض ملف المبادرة الاستراتيجية الكاملة ←</span>
</a> </a>
</div> </div>
<div class="b2g-card-stat"> <div class="banner-card-box">
<div class="b2g-stat-item"> <div class="banner-stat-row">
<div class="b2g-icon-check">✓</div> <div class="banner-check-icon">✓</div>
<div> <div>
<strong style="color: #FFF; font-size: 14px; display: block;">عدالة تعليمية شاملة</strong> <strong style="color: #FFFFFF; font-size: 14px; display: block;">عدالة تعليمية شاملة</strong>
<span style="font-size: 12.5px; color: var(--text-muted);">نفس جودة نخبة المعلمين لجميع أبناء القوات المسلحة في كل المحافظات.</span> <span style="font-size: 12.5px; color: var(--apple-text-muted);">نفس جودة نخبة المعلمين لجميع أبناء القوات المسلحة في كل المحافظات.</span>
</div> </div>
</div> </div>
<div class="b2g-stat-item"> <div class="banner-stat-row">
<div class="b2g-icon-check">✓</div> <div class="banner-check-icon">✓</div>
<div> <div>
<strong style="color: #FFF; font-size: 14px; display: block;">لوحة قيادة مركزية للضباط</strong> <strong style="color: #FFFFFF; font-size: 14px; display: block;">لوحة قيادة مركزية للضباط</strong>
<span style="font-size: 12.5px; color: var(--text-muted);">متابعة تحصيل كل مدرسة وشعبة لحظياً بمؤشرات أداء واضحة.</span> <span style="font-size: 12.5px; color: var(--apple-text-muted);">متابعة تحصيل كل مدرسة وشعبة لحظياً بمؤشرات أداء واضحة.</span>
</div> </div>
</div> </div>
<div class="b2g-stat-item"> <div class="banner-stat-row">
<div class="b2g-icon-check">✓</div> <div class="banner-check-icon">✓</div>
<div> <div>
<strong style="color: #FFF; font-size: 14px; display: block;">توفير 80% من التكاليف</strong> <strong style="color: #FFFFFF; font-size: 14px; display: block;">توفير 80% من التكاليف</strong>
<span style="font-size: 12.5px; color: var(--text-muted);">إلغاء تكاليف المراكز والتنقل والطباعة مع مخرجات أعلى جودة.</span> <span style="font-size: 12.5px; color: var(--apple-text-muted);">إلغاء تكاليف المراكز والتنقل والطباعة مع مخرجات أعلى جودة.</span>
</div> </div>
</div> </div>
</div> </div>
@@ -683,23 +673,23 @@ class LandingPage
</div> </div>
</section> </section>
<!-- Footer --> <!-- Apple Footer -->
<footer> <footer>
<div class="container"> <div class="container">
<div class="footer-grid"> <div class="footer-grid">
<div> <div>
<div class="logo-area" style="margin-bottom: 14px;"> <div class="logo-area" style="margin-bottom: 14px;">
<div class="logo-badge" style="width: 36px; height: 36px; font-size: 18px;">صـ</div> <div class="logo-badge" style="width: 34px; height: 34px; font-size: 17px;">صـ</div>
<span class="brand-title" style="font-size: 19px;">منصة صَقِل</span> <span class="brand-title" style="font-size: 18px;">منصة صَقِل</span>
</div> </div>
<p style="font-size: 13.5px; line-height: 1.7; max-width: 380px;"> <p style="font-size: 13px; line-height: 1.7; max-width: 380px; color: var(--apple-text-muted);">
المنظومة الأردنية الرائدة في التمكين الأكاديمي والتعليم السقراطي الذكي لطلبة التوجيهي والمراحل الثانوية. المنظومة الأردنية الرائدة في التمكين الأكاديمي والتعليم السقراطي الذكي لطلبة التوجيهي والمراحل الثانوية.
</p> </p>
</div> </div>
<div> <div>
<h4 class="footer-col-title">البوابات والخدمات</h4> <h4 class="footer-title">البوابات والخدمات</h4>
<ul class="footer-links"> <ul class="footer-list">
<li><a href="/student">بوابة الطالب الذكية</a></li> <li><a href="/student">بوابة الطالب الذكية</a></li>
<li><a href="/teacher">استوديو المعلمين ونظام الشراكة</a></li> <li><a href="/teacher">استوديو المعلمين ونظام الشراكة</a></li>
<li><a href="/military-culture">ملف مديرية الثقافة العسكرية</a></li> <li><a href="/military-culture">ملف مديرية الثقافة العسكرية</a></li>
@@ -707,8 +697,8 @@ class LandingPage
</div> </div>
<div> <div>
<h4 class="footer-col-title">الأمان والخصوصية</h4> <h4 class="footer-title">الأمان والخصوصية</h4>
<ul class="footer-links"> <ul class="footer-list">
<li><a href="#">حماية المحتوى DRM</a></li> <li><a href="#">حماية المحتوى DRM</a></li>
<li><a href="#">السيادة الرقمية وتشفير البيانات</a></li> <li><a href="#">السيادة الرقمية وتشفير البيانات</a></li>
<li><a href="#">معايير Zero-Trust</a></li> <li><a href="#">معايير Zero-Trust</a></li>
@@ -718,7 +708,7 @@ class LandingPage
<div class="footer-bottom"> <div class="footer-bottom">
<span>جميع الحقوق محفوظة © لمنصة صَقِل التعليمية 2026</span> <span>جميع الحقوق محفوظة © لمنصة صَقِل التعليمية 2026</span>
<span style="color: #22D3EE;">بنية تحتية سحابية موثوقة • عمان، الأردن 🇯🇴</span> <span style="color: var(--apple-text-silver);">بنية تحتية سحابية موثوقة • عمان، الأردن 🇯🇴</span>
</div> </div>
</div> </div>
</footer> </footer>