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
Teszt: 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

<!-- 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ó:

<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

<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)

<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)

<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)

<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)

<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)

<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:

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:

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)