Files

Roo 59a30ac428 2026.06.04 frontend építés közben

2026-06-04 07:26:22 +00:00

5.1 KiB

Raw Blame History

🎨 Custom SVG Logo Implementation - Service Finder

📋 Összefoglaló

A 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)
1. vonal: (5,78) → (19,70)
1. 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:

<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

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

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

5.1 KiB Raw Blame History