66 lines
2.9 KiB
Vue
66 lines
2.9 KiB
Vue
<template>
|
|
<div class="flex items-center gap-4 relative -mb-8 z-50 group cursor-pointer">
|
|
|
|
<svg
|
|
viewBox="0 0 240 240"
|
|
class="w-24 h-24 drop-shadow-[0_10px_20px_rgba(0,0,0,0.5)] transition-transform duration-500 group-hover:scale-105"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<defs>
|
|
<linearGradient id="sf-green" x1="0%" y1="100%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#418890" />
|
|
<stop offset="100%" stop-color="#79B085" />
|
|
</linearGradient>
|
|
<linearGradient id="sf-white" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#FFFFFF" />
|
|
<stop offset="100%" stop-color="#D1D5DB" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<path d="M 80 180 L 30 210" stroke="url(#sf-green)" stroke-width="8" stroke-linecap="round"/>
|
|
<circle cx="15" cy="219" r="4" fill="url(#sf-green)"/>
|
|
|
|
<path d="M 110 205 L 40 245" stroke="url(#sf-green)" stroke-width="12" stroke-linecap="round"/>
|
|
<circle cx="20" cy="255" r="6" fill="url(#sf-green)"/>
|
|
|
|
<path d="M 140 225 L 90 255" stroke="url(#sf-green)" stroke-width="6" stroke-linecap="round"/>
|
|
<circle cx="75" cy="264" r="3" fill="url(#sf-green)"/>
|
|
|
|
<polygon points="120,30 108,50 132,50" fill="url(#sf-white)"/>
|
|
<polygon points="120,210 108,190 132,190" fill="url(#sf-white)"/>
|
|
<polygon points="30,120 50,108 50,132" fill="url(#sf-white)"/>
|
|
<polygon points="65,65 85,78 70,88" fill="url(#sf-white)"/>
|
|
|
|
<circle cx="120" cy="120" r="70" stroke="url(#sf-white)" stroke-width="14"/>
|
|
|
|
<text x="90" y="155" font-family="Arial, Helvetica, sans-serif" font-weight="900" font-size="95" text-anchor="middle" fill="url(#sf-white)">S</text>
|
|
<text x="155" y="155" font-family="Arial, Helvetica, sans-serif" font-weight="900" font-size="95" text-anchor="middle" fill="url(#sf-green)">F</text>
|
|
|
|
<path d="M 170 170 L 215 215" stroke="url(#sf-white)" stroke-width="26" stroke-linecap="round"/>
|
|
<path d="M 180 180 L 210 210" stroke="#062535" stroke-width="6" stroke-linecap="round"/>
|
|
|
|
<circle cx="125" cy="110" r="15" fill="url(#sf-white)"/>
|
|
<circle cx="125" cy="110" r="6" fill="#062535"/>
|
|
|
|
<polygon points="215,25 125,110 95,70" fill="#2C5A63"/>
|
|
|
|
<polygon points="215,25 125,110 165,140" fill="url(#sf-green)"/>
|
|
|
|
</svg>
|
|
|
|
<div class="hidden sm:flex flex-col justify-center mt-3">
|
|
<div class="font-black tracking-widest text-3xl leading-none drop-shadow-md">
|
|
<span class="text-white">SERVICE</span> <span class="text-[#75A882]">FINDER</span>
|
|
</div>
|
|
<div class="text-[#75A882] text-[0.65rem] tracking-[0.25em] font-bold mt-2 uppercase opacity-90">
|
|
Online Járműnyilvántartó & Szervizkereső
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Tiszta, újrahasználható, kézzel optimalizált SVG logó.
|
|
</script> |