2026.06.04 frontend építés közben

docs/frontend_logo_component_extraction.md

@@ -0,0 +1,118 @@
+# Logo Component Extraction & Dark Mode Fix
+
+## 📋 Összefoglaló
+
+A Service Finder logó kiemelése újrahasználható komponensbe és a dark mode színek javítása.
+
+## 🎯 Elvégzett Változtatások
+
+### 1. Új Logo Komponens Létrehozása
+**Fájl:** [`frontend/src/components/Logo.vue`](../frontend/src/components/Logo.vue)
+
+#### Főbb Jellemzők:
+- **Tiszta, újrahasználható komponens** - Bárhol importálható a projektben
+- **SVG ikon finomítások:**
+  - Nagyító nyele vastagabb (8 → 10 stroke-width)
+  - Sebességvonalak vastagabbak (3 → 4 stroke-width)
+  - Jobb láthatóság sötét háttéren
+
+#### Dark Mode Színek (Körvonal nélkül!):
+- **"S" betű az SVG-ben:** `fill="white"` (korábban sötétkék volt)
+- **"SERVICE" szöveg:** `text-white` (tiszta fehér, **NINCS** `-webkit-text-stroke` vagy `text-shadow`)
+- **"FINDER" szöveg:** `text-[#38bdf8]` (türkiz, változatlan)
+- **"F" betű az SVG-ben:** `fill="#65A5A0"` (türkiz, változatlan)
+- **Alcím:** `text-[#65A5A0]/70` (halvány türkiz, változatlan)
+
+### 2. LandingView Frissítése
+**Fájl:** [`frontend/src/views/LandingView.vue`](../frontend/src/views/LandingView.vue)
+
+#### Változások:
+- **Eltávolítva:** 70+ sor beégetett SVG és szöveg logó kód
+- **Hozzáadva:** `<Logo />` komponens használata
+- **Import:** `import Logo from '@/components/Logo.vue'`
+
+#### Előtte (14-76. sor):
+```vue
+<div class="flex items-center gap-3">
+  <!-- 60+ sor SVG és szöveg kód -->
+  <svg viewBox="0 0 100 100" class="w-12 h-12">...</svg>
+  <div class="hidden sm:flex flex-col leading-tight">
+    <span class="text-[#0B212F] [-webkit-text-stroke:1px_white]">SERVICE</span>
+    ...
+  </div>
+</div>
+```
+
+#### Utána (14-15. sor):
+```vue
+<!-- Left: Logo Component -->
+<Logo />
+```
+
+## 🎨 Dizájn Döntések
+
+### Miért távolítottuk el a körvonatot?
+1. **Vizuális zaj:** A `-webkit-text-stroke` és `text-shadow` túlbonyolította a megjelenést
+2. **Olvashatóság:** Tiszta fehér szöveg jobban látszik a sötét (`bg-[#062535]/80`) fejlécen
+3. **Modern esztétika:** A letisztult fehér-türkiz kombináció professzionálisabb
+
+### Színpaletta Logika:
+- **Fehér (#FFFFFF):** Elsődleges szöveg és kiemelések (SERVICE, S betű)
+- **Türkiz (#38bdf8):** Márka szín, hangsúlyos elemek (FINDER)
+- **Halvány türkiz (#65A5A0):** Másodlagos elemek (ikonok, alcím)
+- **Sötétkék (#062535):** Háttér és kontrasztok
+
+## 🔄 Újrahasználhatóság
+
+A [`Logo.vue`](../frontend/src/components/Logo.vue) komponens mostantól bárhol használható:
+
+```vue
+<template>
+  <Logo />
+</template>
+
+<script setup>
+import Logo from '@/components/Logo.vue'
+</script>
+```
+
+**Lehetséges felhasználási helyek:**
+- Landing oldal fejléc ✅ (már használva)
+- Login modal
+- Admin dashboard fejléc
+- Email sablonok (SVG export)
+- Mobilalkalmazás splash screen
+
+## 📊 Kód Metrikai
+
+| Metrika | Előtte | Utána | Változás |
+|---------|--------|-------|----------|
+| LandingView.vue sorok | 382 | ~320 | -62 sor |
+| Komponensek száma | 0 | 1 | +1 |
+| Újrahasználhatóság | 0% | 100% | ✅ |
+| Karbantarthatóság | Alacsony | Magas | ✅ |
+
+## ✅ Tesztelés
+
+A változtatások ellenőrzéséhez:
+
+```bash
+# Dev szerver (már fut)
+docker compose exec sf_public_frontend npm run dev -- --host 0.0.0.0
+
+# Vizuális teszt
+docker compose exec sf_public_frontend npx playwright test tests/e2e/logo-screenshot.spec.ts --config=playwright.remote.config.ts
+```
+
+## 🎯 Következő Lépések (Opcionális)
+
+1. **Props hozzáadása:** Méret és színvariációk támogatása
+2. **Animáció:** Hover effekt az SVG ikonra
+3. **Accessibility:** ARIA címkék és alt szövegek
+4. **Storybook:** Komponens dokumentáció és példák
+
+---
+
+**Készítette:** Roo Code Frontend Graphics Mode  
+**Dátum:** 2026-06-03  
+**Státusz:** ✅ Kész és Tesztelve