# Landing Page Design System — دانشیار من

## Brand Identity
- **Primary**: `#0EA678` (Spring Mint Green)
- **Dark BG**: `#060F1E` (very dark navy, hero bg)
- **Dark BG 2**: `#0A1628`
- **White**: `#FFFFFF`
- **Soft BG**: `#F8FAFC`
- **Text**: `#111827`
- **Muted**: `#64748B`
- **Border**: `#E2E8F0`

## Typography
- **Font**: Vazirmatn (RTL Persian)
- **H1 Hero**: 64–80px, weight 900, line-height 1.1
- **H2 Section**: 40–52px, weight 900
- **H3 Card**: 18–20px, weight 800
- **Body**: 16–18px, weight 400, line-height 1.8
- **Label/Eyebrow**: 13px, weight 800, uppercase-style tracking

## Page Structure

```
[Header]          — glassmorphism, sticky, blur
[Hero]            — dark bg, huge text, floating animated cards (right), 2 CTAs
[Stats Bar]       — white bg, 4 big numbers
[Features]        — light gray bg, 6 cards (3-col)
[How It Works]    — white bg, 3 steps with connecting line
[CTA Banner]      — green gradient, white text
[Footer]          — dark navy bg, 4-col grid
```

## Header
- Height: ~70px
- BG: `rgba(255,255,255,0.9)` + `backdrop-filter: blur(18px)`
- Left: Logo (icon + wordmark + tagline)
- Right: Nav links + "ورود" soft btn + "خرید اشتراک" green btn
- Mobile: hamburger

## Hero
- Background: `linear-gradient(140deg, #060F1E 0%, #0D1F14 100%)`
- Mesh glows: green blob top-right, blue blob bottom-left
- Layout: 2-col grid, text right (RTL start), visual left
- Text side: eyebrow label → H1 → subtitle → 2 buttons → trust badges
- Visual side: floating animated UI cards (CSS keyframe `translateY`)
  - Main dashboard card (main panel look)
  - 3 small floating notification/stat cards offset around it
  - Cards: `rgba(255,255,255,0.06)` + `backdrop-filter: blur(20px)` + white border

## Stats Bar
- White bg, border-bottom
- 4 stats: schools / students / modules / support
- Bold green numbers, light label

## Feature Cards
- 3×2 grid
- White card, shadow, `border-radius: 20px`
- Top: colored icon circle
- Bold title + muted description
- Hover: lift `translateY(-4px)` + stronger shadow

## How It Works
- 3 steps in a row
- Each: number circle (green) → title → description
- Connecting line between circles (CSS `::after` pseudo-element)

## CTA Section
- `background: linear-gradient(135deg, #0EA678, #0B8C66)`
- White text, one large white CTA button

## Footer
- `background: #060F1E`
- 4-col: Brand description | Features | Support | Legal
- Bottom: copyright + tech credits
- Text: `rgba(255,255,255,0.6)` muted links, white on hover

## Animations
- Hero cards: CSS `@keyframes` float (translateY -14px over 4s, ease-in-out, infinite)
- Each card: different duration + delay for organic feel
- Feature cards: hover lift transition 200ms
- Buttons: hover scale(1.02) 150ms
- No JS required for animations

## Mobile Breakpoints
- < 768px: hero becomes single-column (visual hides), smaller text
- < 480px: single-column everything, hamburger menu