265 lines
15 KiB
Vue
265 lines
15 KiB
Vue
<template>
|
|
<div class="home-view min-h-screen bg-sf-wall/80 bg-sf-wall-pattern p-4 md:p-8">
|
|
<!-- Hero Section with Logo and Slogan -->
|
|
<div class="text-center mb-10">
|
|
<div class="flex justify-center items-center mb-4">
|
|
<img src="/SF_logo.png" alt="Service Finder Logo" class="h-20 w-auto object-contain" />
|
|
<div class="ml-6 text-left">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-sf-blue">SERVICE<span class="text-sf-green"> FINDER</span></h1>
|
|
<p class="text-lg text-sf-accent font-semibold mt-2">ONLINE JÁRMŰNYILVÁNTARTÓ & SZERVIZKERESŐ</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-xl text-sf-gray-dark max-w-2xl mx-auto">
|
|
{{ isCorporate
|
|
? 'Manage your vehicle fleet with powerful analytics and cost tracking.'
|
|
: 'Your personal garage dashboard - track costs, manage vehicles, and earn rewards.'
|
|
}}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bento Grid Dashboard -->
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 auto-rows-[minmax(180px,auto)]">
|
|
|
|
<!-- Costs Tile (2x1) -->
|
|
<div class="md:col-span-2 rounded-2xl bg-sf-wall/80 backdrop-blur-md shadow-lg border border-gray-100 overflow-hidden">
|
|
<div class="bg-sf-blue text-white p-5">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-xl font-bold">Monthly Costs</h2>
|
|
<span class="text-sm bg-sf-green/20 text-sf-green px-3 py-1 rounded-full">April 2026</span>
|
|
</div>
|
|
<p class="text-sf-green/80 text-sm mt-1">Track your vehicle expenses</p>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between border-b border-gray-100 pb-3">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center mr-3">
|
|
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4 4 0 003 15z"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold">Fuel</h3>
|
|
<p class="text-sm text-gray-500">Last: 2 days ago</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold text-lg">€ 128.50</p>
|
|
<p class="text-sm text-green-600">-12% vs last month</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between border-b border-gray-100 pb-3">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center mr-3">
|
|
<svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold">Oil Change</h3>
|
|
<p class="text-sm text-gray-500">Due in 14 days</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold text-lg">€ 89.00</p>
|
|
<p class="text-sm text-gray-500">Regular maintenance</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 rounded-lg bg-purple-50 flex items-center justify-center mr-3">
|
|
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold">Insurance</h3>
|
|
<p class="text-sm text-gray-500">Annual payment</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold text-lg">€ 420.00</p>
|
|
<p class="text-sm text-blue-600">Next: June 15</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Tile (1x1) -->
|
|
<div class="rounded-2xl bg-sf-wall/80 backdrop-blur-md shadow-lg border border-gray-100 flex flex-col items-center justify-center p-6">
|
|
<div class="relative mb-4">
|
|
<div class="w-24 h-24 rounded-full border-4 border-sf-blue overflow-hidden">
|
|
<div class="w-full h-full bg-gradient-to-br from-sf-blue to-sf-teal flex items-center justify-center text-white text-2xl font-bold">
|
|
JD
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-0 right-0 w-8 h-8 bg-sf-green rounded-full border-2 border-white flex items-center justify-center">
|
|
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-800">John Driver</h3>
|
|
<p class="text-gray-500 text-sm mb-4">Premium Member</p>
|
|
<div class="flex space-x-2">
|
|
<span class="px-3 py-1 bg-sf-blue/10 text-sf-blue text-xs rounded-full">2 Vehicles</span>
|
|
<span class="px-3 py-1 bg-sf-green/10 text-sf-green text-xs rounded-full">245 Points</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fleet Tile (1x2) -->
|
|
<div class="md:row-span-2 rounded-2xl bg-sf-wall/80 backdrop-blur-md shadow-lg border border-gray-100 p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-xl font-bold text-gray-800">My Fleet</h2>
|
|
<button class="text-sf-blue hover:text-sf-blue/80 text-sm font-medium">+ Add Vehicle</button>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center p-4 rounded-xl bg-blue-50/50 border border-blue-100">
|
|
<div class="w-12 h-12 rounded-lg bg-white flex items-center justify-center mr-4 shadow-sm">
|
|
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="font-semibold">Volkswagen Golf</h3>
|
|
<p class="text-sm text-gray-500">ABC-123 • 1.6 TDI</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold">€ 2.45/km</p>
|
|
<p class="text-xs text-green-600">Good condition</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center p-4 rounded-xl bg-gray-50/50 border border-gray-100">
|
|
<div class="w-12 h-12 rounded-lg bg-white flex items-center justify-center mr-4 shadow-sm">
|
|
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="font-semibold">Ford Transit</h3>
|
|
<p class="text-sm text-gray-500">DEF-456 • 2.0 EcoBlue</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold">€ 3.20/km</p>
|
|
<p class="text-xs text-amber-600">Service due</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center p-4 rounded-xl bg-green-50/50 border border-green-100">
|
|
<div class="w-12 h-12 rounded-lg bg-white flex items-center justify-center mr-4 shadow-sm">
|
|
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="font-semibold">Tesla Model 3</h3>
|
|
<p class="text-sm text-gray-500">GHI-789 • Electric</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold">€ 1.85/km</p>
|
|
<p class="text-xs text-green-600">Excellent</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center pt-4 border-t border-gray-100">
|
|
<button class="text-sf-blue hover:text-sf-blue/80 text-sm font-medium flex items-center justify-center w-full">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
|
</svg>
|
|
Add another vehicle
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gamification Tile (2x1) -->
|
|
<div class="md:col-span-2 rounded-2xl bg-gradient-to-r from-sf-blue/10 to-sf-teal/10 backdrop-blur-md shadow-lg border border-gray-100 p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="text-xl font-bold text-gray-800">Points & Rewards</h2>
|
|
<p class="text-gray-500">Complete tasks to earn badges and discounts</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-3xl font-bold text-sf-blue">1,245</div>
|
|
<div class="text-sm text-gray-500">Total Points</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
|
|
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-3">
|
|
<svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="font-semibold text-sf-blue">Gold Member</h4>
|
|
<p class="text-xs text-gray-500">Top 10%</p>
|
|
</div>
|
|
|
|
<div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
|
|
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-3">
|
|
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="font-semibold text-sf-green">Security Expert</h4>
|
|
<p class="text-xs text-gray-500">Verified account</p>
|
|
</div>
|
|
|
|
<div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
|
|
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-3">
|
|
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="font-semibold text-sf-blue">Fast Responder</h4>
|
|
<p class="text-xs text-gray-500">Quick actions</p>
|
|
</div>
|
|
|
|
<div class="bg-sf-wall/80 rounded-xl p-4 text-center border border-gray-100">
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-3">
|
|
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h4 class="font-semibold text-sf-purple">Time Saver</h4>
|
|
<p class="text-xs text-gray-500">Efficient user</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<button class="bg-sf-green hover:bg-sf-green/90 text-white font-medium py-2 px-6 rounded-lg transition-colors">
|
|
View All Rewards
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const isCorporate = ref(false)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home-view {
|
|
background-image: url('/garazs.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-blend-mode: overlay;
|
|
}
|
|
|
|
.bg-sf-wall-pattern {
|
|
background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
|
|
linear-gradient(to bottom left, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
}
|
|
</style> |