Загрузка...
Интерактивная карточка сервиса с иконкой, заголовком и ссылкой. Адаптивный дизайн, эффекты при наведении. Для списков услуг, портфолио.
<a href="#"
class="service-card group hover:border-[#67c4e8]/30 hover:shadow-xl hover:-translate-y-1 block overflow-hidden bg-white h-full border-slate-200 border rounded-xl pt-8 pr-8 pb-8 pl-8 relative">
<div class="relative w-16 h-16 mb-6 flex items-center justify-center">
<div class="absolute inset-0 bg-[#f0f6fa] icon-blob z-0"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="building"
class="lucide lucide-building service-icon relative w-7 h-7 text-[#1e2a4a] z-10 transition-colors duration-300">
<path d="M12 10h.01" class=""></path>
<path d="M12 14h.01" class=""></path>
<path d="M12 6h.01" class=""></path>
<path d="M16 10h.01" class=""></path>
<path d="M16 14h.01" class=""></path>
<path d="M16 6h.01" class=""></path>
<path d="M8 10h.01" class=""></path>
<path d="M8 14h.01" class=""></path>
<path d="M8 6h.01" class=""></path>
<path d="M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" class=""></path>
<rect x="4" y="2" width="16" height="20" rx="2" class=""></rect>
</svg>
</div>
<h3 class="text-lg font-bold text-[#1e2a4a] mb-3 group-hover:text-[#67c4e8] transition-colors">Strata Cleaning</h3>
<p class="text-sm text-slate-500 leading-relaxed mb-6">
Complete common area maintenance for residential and commercial strata schemes. We handle foyers, lifts, and
corridors with care.
</p>
<div
class="flex items-center text-xs font-bold text-[#1e2a4a] uppercase tracking-wide mt-auto group-hover:translate-x-1 transition-transform">
Learn More <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right"
class="lucide lucide-arrow-right w-3.5 h-3.5 ml-1 text-[#67c4e8]">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</div>
</a>