26 KiB
26 KiB
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