2026.06.04 frontend építés közben

docs/frontend_custom_logo_implementation.md

@@ -0,0 +1,140 @@
+# 🎨 Custom SVG Logo Implementation - Service Finder
+
+## 📋 Összefoglaló
+A [`LandingView.vue`](../frontend/src/views/LandingView.vue) fejléc logóját teljesen újraterveztük. Az eredeti Lucide ikonok helyett egy egyedi, kódolt SVG logót hoztunk létre, amely tükrözi a Service Finder brand identitását.
+
+## ✅ Megvalósított Változtatások
+
+### 1. **Egyedi SVG Logó (100x100 viewBox)**
+
+A logó a következő elemekből áll:
+
+#### 🔍 Nagyító (Magnifying Glass)
+- **Fő kör:** `cx="45" cy="45" r="28"` - türkiz körvonal (#65A5A0), 6px vastagság
+- **Nyél:** Jobb alsó sarokból indul (65,65) és (85,85)-ig tart, 8px vastag vonal
+
+#### ⚡ Sebességvonalak (Speed Lines)
+Három párhuzamos, dőlt vonal a bal alsó sarokban:
+- 1. vonal: (8,70) → (22,62)
+- 2. vonal: (5,78) → (19,70)
+- 3. vonal: (2,86) → (16,78)
+- Mindegyik 3px vastag, türkiz (#65A5A0)
+
+#### 🧭 Iránytű Mutatók (Compass Pointers)
+Három háromszög a kör körül:
+- **Felső:** `points="45,12 40,22 50,22"` (észak)
+- **Alsó:** `points="45,78 40,68 50,68"` (dél)
+- **Bal:** `points="12,45 22,40 22,50"` (nyugat)
+
+#### 🔤 SF Betűk
+- **Pozíció:** Középre igazítva (x="45", y="55")
+- **Betűtípus:** Arial, 28px, 900-as vastagság (Black)
+- **Színek:**
+  - **S:** Sötétkék (#0B212F)
+  - **F:** Türkiz (#65A5A0)
+
+### 2. **Szöveg Olvashatóság Javítása**
+
+#### Probléma
+A sötét háttéren (#062535) a sötétkék "SERVICE" szöveg (#0B212F) szinte láthatatlan volt.
+
+#### Megoldás
+Fehér körvonal (text-stroke) alkalmazása:
+```vue
+<span class="text-[#0B212F] [-webkit-text-stroke:1px_white] [text-shadow:0_0_8px_rgba(255,255,255,0.8)]">
+  SERVICE
+</span>
+```
+
+**Technikai részletek:**
+- `-webkit-text-stroke: 1px white` - 1 pixel vastag fehér körvonal
+- `text-shadow: 0 0 8px rgba(255,255,255,0.8)` - Puha fehér ragyogás a jobb láthatóságért
+- A "FINDER" szöveg marad élénk cyan (#38bdf8)
+
+## 🎨 Színpaletta
+
+| Elem | Szín | HEX Kód |
+|------|------|---------|
+| Háttér (Header) | Sötét tengerkék | `#062535` |
+| Logó forma (kör, nyél, vonalak) | Türkiz | `#65A5A0` |
+| "S" betű | Sötétkék | `#0B212F` |
+| "F" betű | Türkiz | `#65A5A0` |
+| "SERVICE" szöveg | Sötétkék + fehér körvonal | `#0B212F` + `white` |
+| "FINDER" szöveg | Élénk cyan | `#38bdf8` |
+
+## 📐 SVG Kód Struktúra
+
+```vue
+<svg viewBox="0 0 100 100" class="w-12 h-12" xmlns="http://www.w3.org/2000/svg">
+  <!-- Fő kör (nagyító teste) -->
+  <circle cx="45" cy="45" r="28" fill="none" stroke="#65A5A0" stroke-width="6"/>
+  
+  <!-- Nagyító nyele -->
+  <line x1="65" y1="65" x2="85" y2="85" stroke="#65A5A0" stroke-width="8" stroke-linecap="round"/>
+  
+  <!-- Sebességvonalak (3 db) -->
+  <line x1="8" y1="70" x2="22" y2="62" stroke="#65A5A0" stroke-width="3" stroke-linecap="round"/>
+  <line x1="5" y1="78" x2="19" y2="70" stroke="#65A5A0" stroke-width="3" stroke-linecap="round"/>
+  <line x1="2" y1="86" x2="16" y2="78" stroke="#65A5A0" stroke-width="3" stroke-linecap="round"/>
+  
+  <!-- Iránytű háromszögek -->
+  <polygon points="45,12 40,22 50,22" fill="#65A5A0"/>
+  <polygon points="45,78 40,68 50,68" fill="#65A5A0"/>
+  <polygon points="12,45 22,40 22,50" fill="#65A5A0"/>
+  
+  <!-- SF betűk -->
+  <text x="45" y="55" font-family="Arial, sans-serif" font-size="28" font-weight="900" text-anchor="middle">
+    <tspan fill="#0B212F">S</tspan>
+    <tspan fill="#65A5A0">F</tspan>
+  </text>
+</svg>
+```
+
+## 🔄 Előtte vs. Utána
+
+### ❌ Előtte (Problémák)
+- Két Lucide ikon egymásra rakva (Compass + Search)
+- Generikus, nem egyedi megjelenés
+- "SERVICE" szöveg láthatatlan a sötét háttéren
+- Nem tükrözte a brand identitását
+
+### ✅ Utána (Megoldások)
+- Egyedi, kézzel kódolt SVG logó
+- Egyedi brand elemek (sebességvonalak, iránytű)
+- "SERVICE" szöveg olvasható fehér körvonattal
+- Professzionális, márkaspecifikus megjelenés
+
+## 🧪 Tesztelés
+
+A változtatások ellenőrzéséhez futtasd:
+```bash
+docker compose exec sf_public_frontend npx playwright test tests/e2e/logo-screenshot.spec.ts --config=playwright.remote.config.ts
+```
+
+A screenshot itt található: `frontend/test-results/screenshots/custom-logo-header.png`
+
+## 📱 Reszponzivitás
+
+- **Desktop:** Teljes logó + szöveg látható
+- **Mobile (< 640px):** Csak az SVG logó látszik (`hidden sm:flex` a szövegen)
+- **Méret:** Fix 48x48px (w-12 h-12 Tailwind class)
+
+## 🎯 Brand Filozófia
+
+A logó elemei szimbolizálják a Service Finder küldetését:
+- **🔍 Nagyító:** Keresés, felfedezés (szolgáltatók keresése)
+- **⚡ Sebességvonalak:** Gyorsaság, hatékonyság
+- **🧭 Iránytű:** Navigáció, útmutatás (a megfelelő szerviz felé)
+- **SF Betűk:** Erős brand identitás
+
+## 📝 Megjegyzések
+
+- A logó teljes mértékben SVG-alapú, így skálázható és éles minden felbontáson
+- Nincs külső képfájl függőség
+- A színek konzisztensek a teljes landing page dizájnnal
+- A fehér text-stroke biztosítja az olvashatóságot minden háttéren
+
+---
+
+**Utolsó frissítés:** 2026-06-03  
+**Módosított fájl:** [`frontend/src/views/LandingView.vue`](../frontend/src/views/LandingView.vue:14-52)