2026.06.04 frontend építés közben
This commit is contained in:
Roo
319
docs/screenshots/landing-visual-structure.md
Normal file
319
docs/screenshots/landing-visual-structure.md
Normal file
@@ -0,0 +1,319 @@
|
||||
# Neo-Glassmorphism Landing Page - Visual Structure
|
||||
|
||||
## 🎨 Layout Overview
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ STICKY HEADER (backdrop-blur-md bg-[#062535]/50) │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 🧭 SERVICEFINDER [Garázs Nyitása] ▶ │ │
|
||||
│ │ (Compass+Search Logo) (Türkiz gomb) │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────┘ │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ GRADIENT BACKGROUND │
|
||||
│ (from-[#062535] to-slate-900) │
|
||||
│ │
|
||||
│ ┌──────────────────────┐ │
|
||||
│ │ CARD 1: HUD COSTS │ │
|
||||
│ │ (rotate -3°) │ │
|
||||
│ │ ┌────────────────┐ │ │
|
||||
│ │ │ 💰 HUD Költségek│ │ ┌─────────────────────────┐ │
|
||||
│ │ ├────────────────┤ │ │ Digitális Flotta │ │
|
||||
│ │ │ Tankolás │ │ │ MENEDZSMENT │ │
|
||||
│ │ │ 25.000 Ft ◀──┼───┼─────────┤ (türkiz kiemelés) │ │
|
||||
│ │ │ Szerviz │ │ │ │ │
|
||||
│ │ │ 48.500 Ft │ │ │ Valós idejű költség... │ │
|
||||
│ │ │ Biztosítás │ │ │ │ │
|
||||
│ │ │ 12.000 Ft │ │ │ [Kezdjük el →] │ │
|
||||
│ │ ├────────────────┤ │ │ (türkiz gradient) │ │
|
||||
│ │ │ Összesen │ │ └─────────────────────────┘ │
|
||||
│ │ │ 85.500 Ft ◀──┼───┼─────────────────┐ │
|
||||
│ │ │ (türkiz, bold) │ │ │ │
|
||||
│ │ └────────────────┘ │ │ │
|
||||
│ │ (border-l-4 türkiz) │ │ │
|
||||
│ └──────────────────────┘ │ │
|
||||
│ │ │
|
||||
│ │ ┌────────────────────────┐ │
|
||||
│ │ │ CARD 2: FLEET RADAR │ │
|
||||
│ │ │ (rotate +2°) │ │
|
||||
│ │ │ ┌──────────────────┐ │ │
|
||||
│ └──┤ │ 📊 Flotta Radar │ │ │
|
||||
│ │ ├──────────────────┤ │ │
|
||||
│ │ │ ┌──────┬──────┐ │ │ │
|
||||
│ │ │ │Aktív │Inakt.│ │ │ │
|
||||
│ │ │ │ 🚗 │ 🚗 │ │ │ │
|
||||
│ │ │ │ 3 │ 1 │ │ │ │
|
||||
│ │ │ │(türk)│(fehér)│ │ │ │
|
||||
│ │ │ └──────┴──────┘ │ │ │
|
||||
│ │ ├──────────────────┤ │ │
|
||||
│ │ │ Átlag km/hó │ │ │
|
||||
│ │ │ 2.450 km │ │ │
|
||||
│ │ │ (monospace) │ │ │
|
||||
│ │ └──────────────────┘ │ │
|
||||
│ │ (CSS grid pattern) │ │
|
||||
│ └────────────────────────┘ │
|
||||
│ │
|
||||
│ │
|
||||
│ ┌────────────────────────────────┐ │
|
||||
│ │ CARD 3: GAMIFICATION │ │
|
||||
│ │ ┌──────────────────────────┐ │ │
|
||||
│ │ │ 🏆 Gamifikáció │ │ │
|
||||
│ │ ├──────────────────────────┤ │ │
|
||||
│ │ │ ⭕ CSS Progress Ring │ │ │
|
||||
│ │ │ (69% türkiz glow) │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ 3450 pont │ │ │
|
||||
│ │ │ Usta Szerelő │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ 🏆 🏆 🏆 │ │ │
|
||||
│ │ │ (arany drop-shadow) │ │ │
|
||||
│ │ │ │ │ │
|
||||
│ │ │ Következő: 5000 pont │ │ │
|
||||
│ │ └──────────────────────────┘ │ │
|
||||
│ └────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔲 Login Modal (Overlay)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ ████████████████████ BACKDROP (blur + dark) ████████████████████████ │
|
||||
│ ██ ██ │
|
||||
│ ██ ┌──────────────────────────────────────────────┐ ██ │
|
||||
│ ██ │ [X] │ ██ │
|
||||
│ ██ │ │ ██ │
|
||||
│ ██ │ 🧭 (Compass + Search) │ ██ │
|
||||
│ ██ │ │ ██ │
|
||||
│ ██ │ SERVICEFINDER │ ██ │
|
||||
│ ██ │ (fehér + türkiz) │ ██ │
|
||||
│ ██ │ │ ██ │
|
||||
│ ██ │ Lépj be a garázsodba │ ██ │
|
||||
│ ██ │ (fehér/60, kicsi) │ ██ │
|
||||
│ ██ │ │ ██ │
|
||||
│ ██ │ ┌────────────────────────────────────┐ │ ██ │
|
||||
│ ██ │ │ Email cím │ │ ██ │
|
||||
│ ██ │ │ pelda@email.com │ │ ██ │
|
||||
│ ██ │ └────────────────────────────────────┘ │ ██ │
|
||||
│ ██ │ │ ██ │
|
||||
│ ██ │ ┌────────────────────────────────────┐ │ ██ │
|
||||
│ ██ │ │ Jelszó │ │ ██ │
|
||||
│ ██ │ │ •••••••• │ │ ██ │
|
||||
│ ██ │ └────────────────────────────────────┘ │ ██ │
|
||||
│ ██ │ │ ██ │
|
||||
│ ██ │ ┌────────────────────────────────────┐ │ ██ │
|
||||
│ ██ │ │ Belépés │ │ ██ │
|
||||
│ ██ │ │ (türkiz gradient, glow) │ │ ██ │
|
||||
│ ██ │ └────────────────────────────────────┘ │ ██ │
|
||||
│ ██ │ │ ██ │
|
||||
│ ██ │ Elfelejtetted a jelszavad? │ ██ │
|
||||
│ ██ │ (türkiz link) │ ██ │
|
||||
│ ██ │ │ ██ │
|
||||
│ ██ │ © 2026 Service Finder │ ██ │
|
||||
│ ██ │ (fehér/40) │ ██ │
|
||||
│ ██ │ │ ██ │
|
||||
│ ██ └──────────────────────────────────────────────┘ ██ │
|
||||
│ ██ ██ │
|
||||
│ ████████████████████████████████████████████████████████████████ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Color Palette
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ BRAND COLORS │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ███████ #062535 Sötétkék (Primary Dark) │
|
||||
│ ███████ Háttér, modal, szöveg kontraszthoz │
|
||||
│ │
|
||||
│ ███████ #65A5A0 Türkiz (Primary Accent) │
|
||||
│ ███████ Gombok, kiemelések, szegélyek, progress │
|
||||
│ │
|
||||
│ ███████ #7bc4be Világos Türkiz (Hover) │
|
||||
│ ███████ Hover állapotok, gradient végpontok │
|
||||
│ │
|
||||
│ ███████ #ffffff Fehér (Text) │
|
||||
│ ███████ Szövegek (opacity: /90, /70, /60, /50, /40) │
|
||||
│ │
|
||||
│ ███████ #eab308 Arany (Gamification) │
|
||||
│ ███████ Trophy ikonok, jutalmak │
|
||||
│ │
|
||||
│ ███████ #1e293b Slate-900 (Gradient End) │
|
||||
│ ███████ Háttér gradient végpont │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Glassmorphism Effect Breakdown
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ GLASSMORPHISM CARD ANATOMY │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────┐ │
|
||||
│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │
|
||||
│ │ ░ ░ │ │
|
||||
│ │ ░ 1. Background: bg-white/5 (5% opacity) ░ │ │
|
||||
│ │ ░ 2. Backdrop Blur: backdrop-blur-lg ░ │ │
|
||||
│ │ ░ 3. Border: border-[#65A5A0]/40 ░ │ │
|
||||
│ │ ░ 4. Shadow: shadow-[0_0_15px_rgba(...)] ░ │ │
|
||||
│ │ ░ 5. Rounded: rounded-xl ░ │ │
|
||||
│ │ ░ ░ │ │
|
||||
│ │ ░ Result: Frosted glass effect with glow ░ │ │
|
||||
│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │
|
||||
│ └───────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📐 Responsive Breakpoints
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ MOBILE (< 768px) │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ • Header logo: csak ikon (szöveg rejtve) │
|
||||
│ • Kártyák: szélen pozicionálva (left-0) │
|
||||
│ • Főcím: text-5xl │
|
||||
│ • Stack layout (vertical) │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ TABLET (≥ 768px) - md: │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ • Header logo: ikon + szöveg │
|
||||
│ • Kártyák: beljebb (left-8, right-12) │
|
||||
│ • Főcím: text-7xl │
|
||||
│ • Grid layout (horizontal) │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ DESKTOP (≥ 1024px) - lg: │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ • Teljes layout optimalizálva │
|
||||
│ • Nagyobb padding és spacing │
|
||||
│ • Hover effektek aktívak │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎬 Interaction States
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ CARD HOVER ANIMATION │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Initial: transform: rotate(-3deg) │
|
||||
│ scale: 1 │
|
||||
│ ↓ │
|
||||
│ Hover: transform: rotate(0deg) │
|
||||
│ scale: 1.05 │
|
||||
│ transition: all 300ms ease │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ BUTTON HOVER ANIMATION │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Initial: bg-[#65A5A0] │
|
||||
│ shadow: normal │
|
||||
│ ↓ │
|
||||
│ Hover: bg-[#7bc4be] │
|
||||
│ shadow: 0 0 25px rgba(101,165,160,0.5) │
|
||||
│ ↓ │
|
||||
│ Active: scale: 0.98 │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ MODAL OPEN/CLOSE ANIMATION │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ Enter: opacity: 0 → 1 │
|
||||
│ scale: 0.9 → 1 │
|
||||
│ duration: 300ms │
|
||||
│ ↓ │
|
||||
│ Leave: opacity: 1 → 0 │
|
||||
│ scale: 1 → 0.9 │
|
||||
│ duration: 300ms │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Component Hierarchy
|
||||
|
||||
```
|
||||
LandingView.vue
|
||||
├── Header (Sticky)
|
||||
│ ├── Logo (Compass + Search SVG)
|
||||
│ ├── Brand Text ("SERVICEFINDER")
|
||||
│ └── CTA Button ("Garázs Nyitása")
|
||||
│
|
||||
├── Hero Section
|
||||
│ ├── Main Heading ("Digitális Flotta Menedzsment")
|
||||
│ ├── Subheading (Description)
|
||||
│ ├── CTA Button ("Kezdjük el")
|
||||
│ │
|
||||
│ ├── Card 1: HUD Costs (Absolute positioned)
|
||||
│ │ ├── Icon (DollarSign)
|
||||
│ │ ├── Title ("HUD Költségek")
|
||||
│ │ ├── Cost Items (Monospace)
|
||||
│ │ └── Total (Türkiz, Bold)
|
||||
│ │
|
||||
│ ├── Card 2: Fleet Radar (Absolute positioned)
|
||||
│ │ ├── Icon (FileText)
|
||||
│ │ ├── Title ("Flotta Radar")
|
||||
│ │ ├── Grid (Aktív/Inaktív)
|
||||
│ │ └── Average km (Monospace)
|
||||
│ │
|
||||
│ └── Card 3: Gamification (Absolute positioned)
|
||||
│ ├── Icon (Trophy)
|
||||
│ ├── Title ("Gamifikáció")
|
||||
│ ├── CSS Progress Ring (SVG)
|
||||
│ │ ├── Background Circle
|
||||
│ │ └── Progress Circle (69%)
|
||||
│ ├── Points Display ("3450 pont")
|
||||
│ ├── Rank ("Usta Szerelő")
|
||||
│ └── Trophy Icons (3x, Gold)
|
||||
│
|
||||
└── Login Modal (v-if="showLoginModal")
|
||||
├── Backdrop (Blur overlay)
|
||||
└── Modal Content
|
||||
├── Close Button (X)
|
||||
├── Logo (Compass + Search)
|
||||
├── Brand Text
|
||||
├── Subtitle ("Lépj be a garázsodba")
|
||||
├── Form
|
||||
│ ├── Email Input
|
||||
│ ├── Password Input
|
||||
│ └── Submit Button ("Belépés")
|
||||
├── Forgot Password Link
|
||||
└── Footer ("© 2026 Service Finder")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Készítette:** Roo Code (Frontend Graphics Mode)
|
||||
**Dátum:** 2026-06-03
|
||||
**Fájl:** Visual Structure Documentation
|
||||
Reference in New Issue
Block a user