service-finder/docs/frontend_bento_grid_implementation.md

# Landing Page - Clean Garage & Bento HUD Implementation

**Dátum:** 2026-06-03  
**Komponens:** [`frontend/src/views/LandingView.vue`](../frontend/src/views/LandingView.vue)  
**Teszt:** [`frontend/tests/e2e/landing-bento-grid.spec.ts`](../frontend/tests/e2e/landing-bento-grid.spec.ts)

## 🎯 Cél

A Landing Page átdolgozása egy modern, 2-oszlopos elrendezésre, ahol:
- **Bal oldal:** Szöveges tartalom (Hero section)
- **Jobb oldal:** Bento-Grid stílusú HUD kártyák (5 db)
- **Háttér:** Tiszta garázs fotó (`garage_clean.png`) aszimmetrikus overlay-vel

## 🎨 Vizuális Elemek

### 1. Háttérkép és Overlay
```vue
<!-- Fixed background with asymmetric gradient -->
<div class="fixed inset-0 bg-[url('/garage_clean.png')] bg-cover bg-center bg-fixed bg-no-repeat">
  <div class="absolute inset-0 bg-gradient-to-r from-[#062535]/95 via-[#062535]/70 to-transparent"></div>
</div>
```

**Jellemzők:**
- `bg-fixed`: Parallax hatás görgetéskor
- `from-[#062535]/95`: Bal oldal sötét (95% átlátszatlanság) → szöveg olvasható
- `to-transparent`: Jobb oldal átlátszó → garázs látszik

### 2. CSS Logó (Compass + Search)

A Top Bar bal oldalán egy tisztán CSS-ből és SVG-ből épített logó:

```vue
<div class="relative w-10 h-10">
  <!-- Compass (háttér) - Türkiz #65A5A0 -->
  <svg class="absolute inset-0 w-10 h-10 text-[#65A5A0]">
    <circle cx="12" cy="12" r="10"/>
    <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/>
  </svg>
  
  <!-- Search (előtér) - Sötétkék #062535, kitöltött -->
  <svg class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-5 h-5 text-[#062535]" fill="currentColor">
    <circle cx="11" cy="11" r="8"/>
    <path d="m21 21-4.35-4.35"/>
  </svg>
</div>
```

**Koncepció:** Az iránytű (compass) a "keresés" és "navigáció" szimbóluma, a nagyító (search) pedig a "szolgáltatás keresés" funkciót jelképezi.

### 3. Két-Oszlopos Hero Layout

```vue
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 min-h-screen items-center pt-20 pb-12">
  <!-- BAL: Szöveg -->
  <div class="space-y-6">
    <h1>Digitális Flotta<br/><span class="text-[#65A5A0]">Menedzsment</span></h1>
    <p>Valós idejű költségkövetés...</p>
    <button>Garázs Nyitása →</button>
  </div>
  
  <!-- JOBB: Bento-Grid Kártyák -->
  <div class="grid grid-cols-2 gap-4 auto-rows-auto">
    <!-- 5 kártya -->
  </div>
</div>
```

**Reszponzivitás:**
- **Desktop (lg+):** 2 oszlop (50-50%)
- **Mobile:** 1 oszlop (stack)

## 📊 Bento-Grid Kártyák (5 db)

### Kártya 1: Statisztika (Teljes szélesség, fent)
```vue
<div class="col-span-2 bg-[#062535]/40 backdrop-blur-md border border-[#65A5A0]/30 ...">
  <div class="text-white/60 text-sm">Rendszerünkben kezelt járművek</div>
  <div class="text-[#65A5A0] text-5xl font-bold font-mono">1,245+</div>
  <svg><!-- TrendingUp ikon --></svg>
</div>
```

**Tartalom:** Összesített jármű statisztika + növekvő trend ikon (zöld)

### Kártya 2: Üzemanyag Költség (Közép-bal)
```vue
<div class="bg-[#062535]/40 backdrop-blur-md ...">
  <svg><!-- Fuel ikon --></svg>
  <span>Üzemanyag (E havi)</span>
  <div class="text-3xl font-bold">32.500</div>
  <div class="text-xs">Ft</div>
</div>
```

**Tartalom:** Aktuális havi üzemanyag költség

### Kártya 3: Szerviz Költség (Közép-jobb)
```vue
<div class="bg-[#062535]/40 backdrop-blur-md ...">
  <svg><!-- Wrench ikon --></svg>
  <span>Várható Szerviz</span>
  <div class="text-3xl font-bold">48.000</div>
  <div class="text-xs">Ft</div>
</div>
```

**Tartalom:** Következő várható szerviz költség

### Kártya 4: Security Badge (Lent-bal)
```vue
<div class="bg-[#062535]/40 backdrop-blur-md ...">
  <svg><!-- Shield Check ikon --></svg>
  <div>
    <div class="font-semibold">Security by Design</div>
    <div class="text-xs">100% E2E titkosítás</div>
  </div>
</div>
```

**Tartalom:** Biztonság és adatvédelem kiemelése

### Kártya 5: Flotta Radar (Lent-jobb)
```vue
<div class="bg-[#062535]/40 backdrop-blur-md ...">
  <div class="text-xs">Flotta Radar</div>
  <div>
    <svg><!-- Car ikon --></svg>
    <span>Aktív</span>
    <span class="text-[#65A5A0] text-2xl">3</span>
  </div>
  <div>
    <svg><!-- Car ikon (halványabb) --></svg>
    <span>Inaktív</span>
    <span class="text-white/40 text-2xl">1</span>
  </div>
</div>
```

**Tartalom:** Aktív/Inaktív járművek száma

## 🎨 Glassmorphism Stílus

Minden kártya egységes stílust követ:

```css
bg-[#062535]/40          /* Sötétkék, 40% átlátszó */
backdrop-blur-md         /* Háttér elmosás */
border border-[#65A5A0]/30  /* Türkiz keret, 30% átlátszó */
shadow-[0_4px_20px_rgba(0,0,0,0.3)]  /* Mély árnyék */
rounded-xl               /* Lekerekített sarkok */
p-4 / p-5 / p-6         /* Padding (kártya mérettől függően) */
```

## 🎯 Színséma

| Szín | HEX | Használat |
|------|-----|-----------|
| **Sötétkék** | `#062535` | Háttér overlay, logó középső része, gombok szövege |
| **Türkiz** | `#65A5A0` | Logó, kiemelések, gombok háttere, border |
| **Világos Türkiz** | `#7bc4be` | Hover állapotok, gradientek |
| **Fehér** | `#ffffff` | Szövegek (különböző átlátszósággal: /90, /80, /70, /60, /50, /40) |
| **Zöld** | `green-400` | TrendingUp ikon (növekedés jelzése) |

## 📱 Reszponzivitás

### Desktop (lg: 1024px+)
- 2 oszlopos grid
- Kártyák jobb oldalon, kompakt elrendezés
- Teljes háttérkép látható

### Tablet (md: 768px - 1023px)
- 2 oszlopos grid (szűkebb gap)
- Kártyák kisebb padding

### Mobile (< 768px)
- 1 oszlopos stack
- Szöveg fent, kártyák alatta
- Kártyák továbbra is 2 oszlopos grid (col-span-2 → teljes szélesség)

## 🧪 Tesztelés

Az új implementációt 11 E2E teszt ellenőrzi:

1. ✅ Sticky header logóval és gombbal
2. ✅ 2-oszlopos hero layout
3. ✅ 5 Bento-Grid kártya megjelenítése
4. ✅ Tiszta garázs háttér aszimmetrikus overlay-vel
5. ✅ Login modal megnyitása
6. ✅ Modal bezárása (backdrop kattintás)
7. ✅ Modal bezárása (X gomb)
8. ✅ Glassmorphism stílusok ellenőrzése
9. ✅ Lucide ikonok megjelenítése
10. ✅ Mobil reszponzivitás
11. ✅ Színséma ellenőrzése

**Teszt futtatás:**
```bash
docker compose exec sf_public_frontend npx playwright test tests/e2e/landing-bento-grid.spec.ts --config=playwright.remote.config.ts
```

**Képernyőfotók helye:**
- `frontend/test-results/screenshots/header-with-logo.png`
- `frontend/test-results/screenshots/landing-two-column-layout.png`
- `frontend/test-results/screenshots/bento-grid-cards.png`
- `frontend/test-results/screenshots/clean-garage-background.png`
- `frontend/test-results/screenshots/login-modal-with-logo.png`
- `frontend/test-results/screenshots/card-glassmorphism-detail.png`
- `frontend/test-results/screenshots/landing-mobile-view.png`

## 🔄 Változások az Előző Verzióhoz Képest

### Eltávolítva:
- ❌ 3 lebegő kártya (rotált, aszimmetrikus elhelyezés)
- ❌ Központi hero tartalom
- ❌ Gamifikációs kártya (progress ring)

### Hozzáadva:
- ✅ 2-oszlopos grid layout
- ✅ 5 Bento-Grid kártya (strukturált elrendezés)
- ✅ Tiszta garázs háttérkép
- ✅ Aszimmetrikus gradient overlay
- ✅ CSS logó a headerben (Compass + Search)
- ✅ "Online Járműnyilvántartó" szlogen a logó alatt

### Megtartva:
- ✅ Sticky header
- ✅ Login modal
- ✅ Glassmorphism stílus
- ✅ Türkiz-sötétkék színséma
- ✅ Lucide ikonok

## 🚀 Következő Lépések

1. **Animációk:** Kártyák belépési animációja (fade-in, slide-up)
2. **Interaktivitás:** Kártyák hover effektusai (scale, glow)
3. **Valós adatok:** API integráció a statisztikákhoz
4. **Többnyelvűség:** i18n támogatás a szövegekhez
5. **Dark/Light Mode:** Téma váltó (jelenleg csak dark)

## 📝 Megjegyzések

- A háttérkép (`garage_clean.png`) 7.33 MB, optimalizálás javasolt (WebP formátum, 1-2 MB)
- A logó SVG-k inline-ban vannak, fontold meg külön komponensbe kiszervezést
- A Bento-Grid kártyák tartalma jelenleg statikus, backend integráció szükséges
- A tesztek a távoli Playwright szerverrel futnak (`playwright.remote.config.ts`)