diff --git a/.agents/skills/apple-ui-design-system/SKILL.md b/.agents/skills/apple-ui-design-system/SKILL.md new file mode 100644 index 0000000..8519892 --- /dev/null +++ b/.agents/skills/apple-ui-design-system/SKILL.md @@ -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); +} +``` diff --git a/.agents/skills/flutter-luxury-ui/SKILL.md b/.agents/skills/flutter-luxury-ui/SKILL.md new file mode 100644 index 0000000..05a3737 --- /dev/null +++ b/.agents/skills/flutter-luxury-ui/SKILL.md @@ -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). diff --git a/backend/app/Views/LandingPage.php b/backend/app/Views/LandingPage.php index 0fdbcc2..6b6a99a 100644 --- a/backend/app/Views/LandingPage.php +++ b/backend/app/Views/LandingPage.php @@ -17,63 +17,59 @@ class LandingPage - + - +