redi/astro_autoservices
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Новые правки

Browse source
This commit is contained in:
Web-serfer 2026-05-11 20:20:23 +05:00
parent 9488afe2f3
commit 0bc0e1dca6
2 changed files with 13 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/Navbar.astro
View file

@ -36,34 +36,34 @@ const navItems = [
</div>
</nav>
<div id="mobile-bottom-bar" class="fixed bottom-4 left-4 right-4 md:hidden z-40">
<div class="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg border border-white/20 px-2 py-3">
<div class="flex justify-between items-center gap-1">
<div id="mobile-bottom-bar" class="fixed bottom-2 left-2 right-2 xs:bottom-3 xs:left-3 xs:right-3 md:hidden z-40">
<div class="bg-white/95 backdrop-blur-md rounded-xl xs:rounded-2xl shadow-lg border border-white/20 px-1.5 py-2 xs:px-2 xs:py-2.5">
<div class="flex justify-between items-center gap-0.5 xs:gap-1">
{navItems.map((item) => (
<a href={item.href} class="mobile-nav-item flex flex-col items-center gap-1.5 p-3 rounded-2xl hover:bg-[#E51937] active:bg-[#c41230] transition-all duration-150 group flex-1 hover:scale-105 active:scale-95">
<div class="w-12 h-12 rounded-full bg-[#1a1a1a] group-hover:bg-white flex items-center justify-center transition-all duration-150 shadow-md group-hover:shadow-lg">
<a href={item.href} class="mobile-nav-item flex flex-col items-center gap-1 p-1.5 xs:p-2 rounded-lg xs:rounded-xl hover:bg-[#E51937] active:bg-[#c41230] transition-all duration-150 group flex-1 hover:scale-105 active:scale-95">
<div class="w-8 h-8 xs:w-9 xs:h-9 sm:w-10 sm:h-10 rounded-full bg-[#1a1a1a] group-hover:bg-white flex items-center justify-center transition-all duration-150 shadow-sm group-hover:shadow-md">
{item.name === 'Услуги' && (
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white group-hover:text-[#E51937] transition-colors duration-150">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" xs:width-16 xs:height-16 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white group-hover:text-[#E51937] transition-colors duration-150">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
</svg>
)}
{item.name === 'О нас' && (
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white group-hover:text-[#E51937] transition-colors duration-150">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" xs:width-16 xs:height-16 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white group-hover:text-[#E51937] transition-colors duration-150">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
</svg>
)}
{item.name === 'Преимущества' && (
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white group-hover:text-[#E51937] transition-colors duration-150">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" xs:width-16 xs:height-16 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white group-hover:text-[#E51937] transition-colors duration-150">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/>
</svg>
)}
{item.name === 'Контакты' && (
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white group-hover:text-[#E51937] transition-colors duration-150">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" xs:width-16 xs:height-16 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white group-hover:text-[#E51937] transition-colors duration-150">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
)}
</div>
<span class="text-[11px] font-bold text-gray-700 group-hover:text-white transition-colors duration-150 text-center leading-tight">{item.name}</span>
<span class="text-[8px] xs:text-[9px] sm:text-[10px] font-bold text-gray-700 group-hover:text-white transition-colors duration-150 text-center leading-tight">{item.name}</span>
</a>
))}
</div>

3
tailwind.config.mjs
View file

@ -11,6 +11,9 @@ export default {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
},
screens: {
'xs': '380px',
},
},
},
plugins: [],