service-finder/docs/frontend_landing_visual_implementation.md

🎨 Landing Page Visual Implementation Report

Date: 2026-06-03
Component: frontend/src/views/LandingView.vue
Status: ✅ Completed

---

📋 Implementation Summary

The LandingView.vue has been completely redesigned with brand-conform styling, parallax scrolling backgrounds, and Bento-Grid teaser tiles as requested.

✅ Completed Features

1. Image Preparation & Parallax Background

• ✅ Copied image_garage_01.png → frontend/public/garage1.png (7.1MB)
• ✅ Copied image_0.png → frontend/public/garage2.png (2.0MB)
• ✅ Implemented reactive background switching with currentBackground ref
• ✅ Applied bg-fixed, bg-cover, bg-center Tailwind classes
• ✅ Added smooth transition-all duration-1000 ease-in-out animation
• ✅ Maintained bg-slate-900/80 dark overlay for readability

2. Intersection Observer for Scroll-Based Background Change

• ✅ Created section2 template ref for the second section
• ✅ Implemented IntersectionObserver in onMounted() lifecycle hook
• ✅ Background switches from garage1.png → garage2.png when user scrolls to Section 2
• ✅ Background reverts to garage1.png when scrolling back up
• ✅ Threshold set to 0.3 (30% visibility) for smooth triggering
• ✅ Proper cleanup in onUnmounted() to prevent memory leaks

3. Brand-Conform CSS Logo

Replaced the generic ShieldCheck icon with a layered Lucide icon composition:

Icon Stack:

• Background: Compass icon (Lucide) - text-[#65A5A0] (brand turquoise)
• Foreground: Search icon (Lucide) - text-[#062535] (brand dark blue)
• Positioned with absolute centering for perfect overlay

Typography:

• SERVICE → text-[#062535] (dark blue)
• FINDER → text-[#65A5A0] (turquoise-green)
• Font: font-extrabold tracking-widest text-2xl

4. Bento-Grid Teaser Tiles (Glassmorphism)

Three floating tiles positioned asymmetrically around the login panel:

Tile 1: Top Left - Jármű Költségek (Vehicle Costs)

• Position: absolute -top-8 -left-4 md:left-8
• Transform: transform -rotate-2 hover:rotate-0
• Content: "25.000 Ft" (Tankolás • Ma)
• Icon: Horizontal lines (list icon)
• Style: bg-white/10 backdrop-blur-md border border-white/20

Tile 2: Top Right - Flottakezelés (Fleet Management)

• Position: absolute -top-12 -right-4 md:right-12
• Transform: transform rotate-3 hover:rotate-0
• Content: Aktív: 3, Inaktív: 1
• Icon: Building/organization icon
• Style: Same glassmorphism treatment

Tile 3: Bottom Left - Pontok és Gamifikáció (Points & Gamification)

• Position: absolute -bottom-8 -left-4 md:left-16
• Transform: transform rotate-1 hover:rotate-0
• Content: "Usta Szerelő" badge, 3450 points, 3 trophy icons
• Icon: Trophy/award icon
• Style: Same glassmorphism treatment

Shared Tile Features:

• Hover effect: hover:rotate-0 (straightens the tile)
• Smooth transitions: transition-transform duration-300
• Z-index: 5 (behind login panel which is z-20)
• Responsive widths: w-56 md:w-64 etc.

5. Section 2: Feature Cards

Created a second full-screen section with three modern information cards:

Card 1: Digitális Szervizkönyv (Digital Service Book)

• Icon: Book icon in bg-[#65A5A0]/20 rounded container
• Description: All services, repairs, and costs in one place
• Hover effect: hover:bg-white/10 hover:border-[#65A5A0]/50

Card 2: Automatikus Értesítések (Automatic Notifications)

• Icon: Bell icon
• Description: Reminders for MOT, oil changes, insurance expiry
• Same hover treatment

Card 3: Pontrendszer & Jutalmak (Points & Rewards)

• Icon: Medal/award icon
• Description: Earn points with every maintenance, become "Usta Szerelő"
• Same hover treatment

Grid Layout:

• grid grid-cols-1 md:grid-cols-3 gap-8
• Responsive: stacks on mobile, 3 columns on desktop
• Consistent spacing and hover animations

6. Brand Color Palette Applied

All colors now follow the brand board:

Element	Color	Hex Code
SERVICE text	Dark Blue	#062535
FINDER text	Turquoise-Green	#65A5A0
Focus rings	Turquoise	#65A5A0
Button gradient	Dark Blue shades	#062535 → #0a3d52
Accent elements	Turquoise	#65A5A0

---

🎯 Technical Implementation Details

Vue 3 Composition API

import { ref, onMounted, onUnmounted } from 'vue'

const currentBackground = ref('/garage1.png')
const section2 = ref<HTMLElement | null>(null)
let observer: IntersectionObserver | null = null

Intersection Observer Logic

observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        currentBackground.value = '/garage2.png'
      } else {
        currentBackground.value = '/garage1.png'
      }
    })
  },
  { threshold: 0.3 }
)

Dynamic Background Binding

<div 
  class="relative min-h-screen w-full overflow-x-hidden bg-fixed bg-cover bg-center transition-all duration-1000 ease-in-out"
  :style="{ backgroundImage: `url(${currentBackground})` }"
>

---

📱 Responsive Design

• Mobile-First Approach: All components stack vertically on small screens
• Breakpoints: Tailwind's md: prefix used for tablet/desktop layouts
• Bento Tiles: Adjust positioning and size based on viewport
• Feature Cards: 1 column on mobile, 3 columns on desktop
• Typography: Scales appropriately with text-2xl, text-4xl md:text-5xl

---

🧪 Testing Instructions

Manual Testing (Local Development)

1. Start the frontend dev server:

   cd frontend
   npm run dev -- --host 0.0.0.0
   

2. Open browser to http://localhost:5173

3. Visual Checks:

   • ✅ Background shows garage1.png on initial load
   • ✅ Logo displays layered Compass + Search icons
   • ✅ SERVICE text is dark blue, FINDER is turquoise
   • ✅ Three Bento tiles float around login panel
   • ✅ Tiles have subtle rotation and hover effects

4. Scroll Test:

   • Scroll down to Section 2 (Feature Cards)
   • ✅ Background smoothly transitions to garage2.png
   • Scroll back up
   • ✅ Background reverts to garage1.png

Automated Testing (Playwright)

cd frontend
npx playwright test tests/e2e/landing_visual.spec.js

Expected Output:

• Screenshot saved to frontend/test-results/landing-phase1.png
• Test passes with "SERVICE" and "FINDER" text detected
• Visual verification of garage background, logo, and tiles

---

🎨 Design Principles Applied

1. Glassmorphism: All floating elements use backdrop-blur-md with semi-transparent backgrounds
2. Micro-interactions: Hover effects on tiles (rotation) and cards (border color change)
3. Visual Hierarchy: Z-index layering ensures login panel is prominent
4. Color Consistency: Brand colors used throughout (no generic blues)
5. Smooth Animations: All transitions use duration-300 or duration-1000 for polish
6. Accessibility: Proper semantic HTML, sr-only labels for form fields

---

📦 Files Modified

1. frontend/src/views/LandingView.vue - Complete redesign (94 → 234 lines)
2. frontend/public/garage1.png - New background image (7.1MB)
3. frontend/public/garage2.png - New background image (2.0MB)

---

🚀 Next Steps

1. Deploy to Staging: Push changes to app.servicefinder.hu
2. Run E2E Tests: Execute Playwright tests on remote browser (faktor01)
3. Performance Audit: Optimize image sizes if needed (consider WebP format)
4. A/B Testing: Gather user feedback on new design
5. Accessibility Audit: Run Lighthouse/axe-core for WCAG compliance

---

📸 Visual Verification Checklist

When running the Playwright test, verify the screenshot shows:

• Garage background image (garage1.png) is visible
• Dark overlay (80% opacity) is applied
• Layered logo (Compass + Search) is centered
• SERVICE text is dark blue (#062535)
• FINDER text is turquoise (#65A5A0)
• Three Bento tiles are visible and positioned correctly
• Login panel is centered with glassmorphism effect
• Form inputs have turquoise focus rings
• Button uses dark blue gradient
• Section 2 feature cards are visible below

---

🔧 Troubleshooting

Background Not Changing on Scroll

• Check browser console for Intersection Observer errors
• Verify section2 ref is properly bound to the HTML element
• Ensure threshold value (0.3) is appropriate for your viewport

Images Not Loading

• Verify files exist in frontend/public/ directory
• Check file permissions (should be readable)
• Clear browser cache and hard reload (Ctrl+Shift+R)

Bento Tiles Overlapping on Mobile

• Adjust positioning values in media queries
• Consider hiding tiles on very small screens (<375px)

---

Implementation Status: ✅ COMPLETE
Ready for Testing: ✅ YES
Documentation: ✅ COMPLETE