# Neo-Glassmorphism Landing Page - Visual Structure

## 🎨 Layout Overview

```
┌─────────────────────────────────────────────────────────────────────────────┐
│ STICKY HEADER (backdrop-blur-md bg-[#062535]/50)                           │
│ ┌──────────────────────────────────────────────────────────────────────┐   │
│ │  🧭 SERVICEFINDER                              [Garázs Nyitása] ▶   │   │
│ │  (Compass+Search Logo)                         (Türkiz gomb)        │   │
│ └──────────────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────────┐
│                    GRADIENT BACKGROUND                                      │
│              (from-[#062535] to-slate-900)                                  │
│                                                                             │
│  ┌──────────────────────┐                                                  │
│  │ CARD 1: HUD COSTS    │                                                  │
│  │ (rotate -3°)         │                                                  │
│  │ ┌────────────────┐   │                                                  │
│  │ │ 💰 HUD Költségek│  │         ┌─────────────────────────┐             │
│  │ ├────────────────┤   │         │   Digitális Flotta      │             │
│  │ │ Tankolás       │   │         │     MENEDZSMENT         │             │
│  │ │   25.000 Ft ◀──┼───┼─────────┤   (türkiz kiemelés)     │             │
│  │ │ Szerviz        │   │         │                         │             │
│  │ │   48.500 Ft    │   │         │  Valós idejű költség... │             │
│  │ │ Biztosítás     │   │         │                         │             │
│  │ │   12.000 Ft    │   │         │   [Kezdjük el →]        │             │
│  │ ├────────────────┤   │         │   (türkiz gradient)     │             │
│  │ │ Összesen       │   │         └─────────────────────────┘             │
│  │ │   85.500 Ft ◀──┼───┼─────────────────┐                               │
│  │ │ (türkiz, bold) │   │                 │                               │
│  │ └────────────────┘   │                 │                               │
│  │ (border-l-4 türkiz)  │                 │                               │
│  └──────────────────────┘                 │                               │
│                                            │                               │
│                                            │  ┌────────────────────────┐   │
│                                            │  │ CARD 2: FLEET RADAR    │   │
│                                            │  │ (rotate +2°)           │   │
│                                            │  │ ┌──────────────────┐   │   │
│                                            └──┤ │ 📊 Flotta Radar  │   │   │
│                                               │ ├──────────────────┤   │   │
│                                               │ │ ┌──────┬──────┐  │   │   │
│                                               │ │ │Aktív │Inakt.│  │   │   │
│                                               │ │ │  🚗  │  🚗  │  │   │   │
│                                               │ │ │  3   │  1   │  │   │   │
│                                               │ │ │(türk)│(fehér)│ │   │   │
│                                               │ │ └──────┴──────┘  │   │   │
│                                               │ ├──────────────────┤   │   │
│                                               │ │ Átlag km/hó      │   │   │
│                                               │ │   2.450 km       │   │   │
│                                               │ │ (monospace)      │   │   │
│                                               │ └──────────────────┘   │   │
│                                               │ (CSS grid pattern)     │   │
│                                               └────────────────────────┘   │
│                                                                             │
│                                                                             │
│                    ┌────────────────────────────────┐                      │
│                    │ CARD 3: GAMIFICATION           │                      │
│                    │ ┌──────────────────────────┐   │                      │
│                    │ │ 🏆 Gamifikáció           │   │                      │
│                    │ ├──────────────────────────┤   │                      │
│                    │ │  ⭕ CSS Progress Ring    │   │                      │
│                    │ │     (69% türkiz glow)    │   │                      │
│                    │ │                          │   │                      │
│                    │ │       3450 pont          │   │                      │
│                    │ │    Usta Szerelő          │   │                      │
│                    │ │                          │   │                      │
│                    │ │  🏆  🏆  🏆              │   │                      │
│                    │ │ (arany drop-shadow)      │   │                      │
│                    │ │                          │   │                      │
│                    │ │ Következő: 5000 pont     │   │                      │
│                    │ └──────────────────────────┘   │                      │
│                    └────────────────────────────────┘                      │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘
```

---

## 🔲 Login Modal (Overlay)

```
┌─────────────────────────────────────────────────────────────────────────────┐
│                                                                             │
│  ████████████████████ BACKDROP (blur + dark) ████████████████████████      │
│  ██                                                              ██         │
│  ██    ┌──────────────────────────────────────────────┐         ██         │
│  ██    │                                          [X] │         ██         │
│  ██    │                                              │         ██         │
│  ██    │              🧭 (Compass + Search)           │         ██         │
│  ██    │                                              │         ██         │
│  ██    │            SERVICEFINDER                     │         ██         │
│  ██    │         (fehér + türkiz)                     │         ██         │
│  ██    │                                              │         ██         │
│  ██    │        Lépj be a garázsodba                  │         ██         │
│  ██    │         (fehér/60, kicsi)                    │         ██         │
│  ██    │                                              │         ██         │
│  ██    │  ┌────────────────────────────────────┐     │         ██         │
│  ██    │  │ Email cím                          │     │         ██         │
│  ██    │  │ pelda@email.com                    │     │         ██         │
│  ██    │  └────────────────────────────────────┘     │         ██         │
│  ██    │                                              │         ██         │
│  ██    │  ┌────────────────────────────────────┐     │         ██         │
│  ██    │  │ Jelszó                             │     │         ██         │
│  ██    │  │ ••••••••                           │     │         ██         │
│  ██    │  └────────────────────────────────────┘     │         ██         │
│  ██    │                                              │         ██         │
│  ██    │  ┌────────────────────────────────────┐     │         ██         │
│  ██    │  │         Belépés                    │     │         ██         │
│  ██    │  │  (türkiz gradient, glow)           │     │         ██         │
│  ██    │  └────────────────────────────────────┘     │         ██         │
│  ██    │                                              │         ██         │
│  ██    │      Elfelejtetted a jelszavad?              │         ██         │
│  ██    │         (türkiz link)                        │         ██         │
│  ██    │                                              │         ██         │
│  ██    │      © 2026 Service Finder                   │         ██         │
│  ██    │         (fehér/40)                           │         ██         │
│  ██    │                                              │         ██         │
│  ██    └──────────────────────────────────────────────┘         ██         │
│  ██                                                              ██         │
│  ████████████████████████████████████████████████████████████████          │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘
```

---

## 🎨 Color Palette

```
┌─────────────────────────────────────────────────────────────┐
│ BRAND COLORS                                                │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ███████  #062535  Sötétkék (Primary Dark)                 │
│  ███████  Háttér, modal, szöveg kontraszthoz               │
│                                                             │
│  ███████  #65A5A0  Türkiz (Primary Accent)                 │
│  ███████  Gombok, kiemelések, szegélyek, progress          │
│                                                             │
│  ███████  #7bc4be  Világos Türkiz (Hover)                  │
│  ███████  Hover állapotok, gradient végpontok              │
│                                                             │
│  ███████  #ffffff  Fehér (Text)                            │
│  ███████  Szövegek (opacity: /90, /70, /60, /50, /40)      │
│                                                             │
│  ███████  #eab308  Arany (Gamification)                    │
│  ███████  Trophy ikonok, jutalmak                          │
│                                                             │
│  ███████  #1e293b  Slate-900 (Gradient End)                │
│  ███████  Háttér gradient végpont                          │
│                                                             │
└─────────────────────────────────────────────────────────────┘
```

---

## 🔧 Glassmorphism Effect Breakdown

```
┌─────────────────────────────────────────────────────────────┐
│ GLASSMORPHISM CARD ANATOMY                                  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌───────────────────────────────────────────────────┐     │
│  │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │     │
│  │ ░                                               ░ │     │
│  │ ░  1. Background: bg-white/5 (5% opacity)      ░ │     │
│  │ ░  2. Backdrop Blur: backdrop-blur-lg          ░ │     │
│  │ ░  3. Border: border-[#65A5A0]/40              ░ │     │
│  │ ░  4. Shadow: shadow-[0_0_15px_rgba(...)]      ░ │     │
│  │ ░  5. Rounded: rounded-xl                      ░ │     │
│  │ ░                                               ░ │     │
│  │ ░  Result: Frosted glass effect with glow      ░ │     │
│  │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │     │
│  └───────────────────────────────────────────────────┘     │
│                                                             │
└─────────────────────────────────────────────────────────────┘
```

---

## 📐 Responsive Breakpoints

```
┌─────────────────────────────────────────────────────────────┐
│ MOBILE (< 768px)                                            │
├─────────────────────────────────────────────────────────────┤
│  • Header logo: csak ikon (szöveg rejtve)                  │
│  • Kártyák: szélen pozicionálva (left-0)                   │
│  • Főcím: text-5xl                                          │
│  • Stack layout (vertical)                                  │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ TABLET (≥ 768px) - md:                                      │
├─────────────────────────────────────────────────────────────┤
│  • Header logo: ikon + szöveg                               │
│  • Kártyák: beljebb (left-8, right-12)                     │
│  • Főcím: text-7xl                                          │
│  • Grid layout (horizontal)                                 │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ DESKTOP (≥ 1024px) - lg:                                    │
├─────────────────────────────────────────────────────────────┤
│  • Teljes layout optimalizálva                             │
│  • Nagyobb padding és spacing                              │
│  • Hover effektek aktívak                                  │
└─────────────────────────────────────────────────────────────┘
```

---

## 🎬 Interaction States

```
┌─────────────────────────────────────────────────────────────┐
│ CARD HOVER ANIMATION                                        │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  Initial:  transform: rotate(-3deg)                         │
│            scale: 1                                         │
│            ↓                                                │
│  Hover:    transform: rotate(0deg)                          │
│            scale: 1.05                                      │
│            transition: all 300ms ease                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ BUTTON HOVER ANIMATION                                      │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  Initial:  bg-[#65A5A0]                                     │
│            shadow: normal                                   │
│            ↓                                                │
│  Hover:    bg-[#7bc4be]                                     │
│            shadow: 0 0 25px rgba(101,165,160,0.5)          │
│            ↓                                                │
│  Active:   scale: 0.98                                      │
│                                                             │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│ MODAL OPEN/CLOSE ANIMATION                                  │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  Enter:    opacity: 0 → 1                                   │
│            scale: 0.9 → 1                                   │
│            duration: 300ms                                  │
│            ↓                                                │
│  Leave:    opacity: 1 → 0                                   │
│            scale: 1 → 0.9                                   │
│            duration: 300ms                                  │
│                                                             │
└─────────────────────────────────────────────────────────────┘
```

---

## 📊 Component Hierarchy

```
LandingView.vue
├── Header (Sticky)
│   ├── Logo (Compass + Search SVG)
│   ├── Brand Text ("SERVICEFINDER")
│   └── CTA Button ("Garázs Nyitása")
│
├── Hero Section
│   ├── Main Heading ("Digitális Flotta Menedzsment")
│   ├── Subheading (Description)
│   ├── CTA Button ("Kezdjük el")
│   │
│   ├── Card 1: HUD Costs (Absolute positioned)
│   │   ├── Icon (DollarSign)
│   │   ├── Title ("HUD Költségek")
│   │   ├── Cost Items (Monospace)
│   │   └── Total (Türkiz, Bold)
│   │
│   ├── Card 2: Fleet Radar (Absolute positioned)
│   │   ├── Icon (FileText)
│   │   ├── Title ("Flotta Radar")
│   │   ├── Grid (Aktív/Inaktív)
│   │   └── Average km (Monospace)
│   │
│   └── Card 3: Gamification (Absolute positioned)
│       ├── Icon (Trophy)
│       ├── Title ("Gamifikáció")
│       ├── CSS Progress Ring (SVG)
│       │   ├── Background Circle
│       │   └── Progress Circle (69%)
│       ├── Points Display ("3450 pont")
│       ├── Rank ("Usta Szerelő")
│       └── Trophy Icons (3x, Gold)
│
└── Login Modal (v-if="showLoginModal")
    ├── Backdrop (Blur overlay)
    └── Modal Content
        ├── Close Button (X)
        ├── Logo (Compass + Search)
        ├── Brand Text
        ├── Subtitle ("Lépj be a garázsodba")
        ├── Form
        │   ├── Email Input
        │   ├── Password Input
        │   └── Submit Button ("Belépés")
        ├── Forgot Password Link
        └── Footer ("© 2026 Service Finder")
```

---

**Készítette:** Roo Code (Frontend Graphics Mode)  
**Dátum:** 2026-06-03  
**Fájl:** Visual Structure Documentation