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

Новое измнений в код

Browse source
This commit is contained in:
Web-serfer 2026-03-31 17:53:37 +05:00
parent 2dd8f36b99
commit e531cd22c9
2 changed files with 53 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/home/WhyUs.astro
View file

@ -73,11 +73,11 @@ const iconPaths: Record<string, string> = {
<!-- Правая колонка: Контент -->
<div>
<div class="mb-12">
<div class="mb-12 text-center lg:text-left">
<span class="inline-block px-4 py-2 bg-[var(--color-blue-primary)]/10 text-[var(--color-blue-primary)] text-xs font-bold uppercase tracking-wider rounded-full mb-4">
Наше преимущество
</span>
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
Почему выбирают <span class="text-[var(--color-blue-primary)]">нас?</span>
</h2>
</div>

70
frontend/src/components/layouts/header/MobileMenu.astro
View file

@ -11,18 +11,40 @@ const { links } = Astro.props;
>
</div>
<!-- ИЗМЕНЕНИЕ: Ширина уменьшена с 85% до 80% (w-[80%]) -->
<!-- ИЗМЕНЕНИЕ: Ширина на всю ширину экрана -->
<aside
id="mobile-menu"
class="fixed top-0 left-0 h-full w-[80%] max-w-[400px] bg-[#151b26] z-[105] py-8 px-6 flex flex-col overflow-y-auto shadow-2xl"
class="fixed inset-0 bg-[#151b26] z-[105] py-6 px-4 flex flex-col overflow-y-auto shadow-2xl"
>
<div
class="absolute inset-0 pointer-events-none opacity-5 bg-gradient-to-br from-white/5 to-transparent"
>
</div>
<!-- Кнопка закрытия -->
<button
id="menu-close-btn"
class="absolute top-4 right-4 w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 transition-colors z-50 cursor-pointer"
aria-label="Закрыть меню"
onclick="document.dispatchEvent(new CustomEvent('close-mobile-menu'))"
>
<svg
class="w-6 h-6 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
<!-- Логотип -->
<div class="mobile-link mb-10 relative z-10" style="--delay: 0.1s">
<div class="mobile-link mb-10 mt-2 relative z-10 flex items-center justify-center">
<span
class="text-xl md:text-2xl font-black tracking-tighter text-white uppercase leading-none"
>
@ -31,7 +53,7 @@ const { links } = Astro.props;
</div>
<!-- Навигация -->
<nav class="relative z-10 flex flex-col items-center space-y-5 w-full flex-1">
<nav class="relative z-10 flex flex-col items-center space-y-4 w-full flex-1">
{
links.map((link: any, index: number) =>
link.children ? (
@ -40,7 +62,7 @@ const { links } = Astro.props;
style={`--delay: ${0.2 + index * 0.08}s`}
>
<button
class={`mobile-submenu-toggle text-xl md:text-2xl font-black uppercase tracking-wider transition-colors text-center flex items-center gap-2 ${link.active ? "text-[#bf9b58]" : "text-white hover:text-[#bf9b58]"}`}
class={`mobile-submenu-toggle text-lg md:text-xl font-bold uppercase tracking-wide transition-colors text-center flex items-center gap-2 ${link.active ? "text-[#bf9b58]" : "text-white hover:text-[#bf9b58]"}`}
data-index={index}
>
{link.name}
@ -66,7 +88,7 @@ const { links } = Astro.props;
{link.children.map((child: any) => (
<a
href={child.href}
class="block text-center text-base font-bold uppercase tracking-wider text-gray-300 hover:text-[#bf9b58] transition-colors py-1"
class="block text-center text-sm font-medium uppercase tracking-wide text-gray-300 hover:text-[#bf9b58] transition-colors py-1"
onclick="document.dispatchEvent(new CustomEvent('close-mobile-menu'))"
>
<span class="mr-2">{child.icon}</span>
@ -75,7 +97,7 @@ const { links } = Astro.props;
))}
<a
href={link.href}
class="block text-center text-sm font-bold uppercase tracking-wider text-[#bf9b58] hover:text-white transition-colors mt-2 py-1"
class="block text-center text-xs font-bold uppercase tracking-wide text-[#bf9b58] hover:text-white transition-colors mt-2 py-1"
onclick="document.dispatchEvent(new CustomEvent('close-mobile-menu'))"
>
Все услуги →
@ -85,7 +107,7 @@ const { links } = Astro.props;
) : (
<a
href={link.href}
class="mobile-link text-xl md:text-2xl font-black uppercase tracking-wider transition-colors text-center"
class="mobile-link text-lg md:text-xl font-bold uppercase tracking-wide transition-colors text-center"
class:list={[
link.active
? "text-[#bf9b58]"
@ -151,16 +173,18 @@ const { links } = Astro.props;
style="--delay: 0.7s"
>
<div class="h-[1px] bg-white/10 w-full mb-4"></div>
<div id="mobile-guest-block" class="space-y-0.5 text-center hidden">
<p class="text-xs font-bold text-[#bf9b58] uppercase tracking-[0.2em]">
Срочная связь
</p>
<a
href="tel:+79222538375"
class="block text-lg font-bold text-white hover:text-[#bf9b58] transition-colors"
>
+7 (922) 253-83-75
</a>
<div id="mobile-guest-block" class="flex justify-center hidden">
<div class="flex flex-col items-center gap-1">
<p class="text-xs font-bold text-[#bf9b58] uppercase tracking-[0.2em]">
Срочная связь
</p>
<a
href="tel:+79222538375"
class="text-base font-bold text-white hover:text-[#bf9b58] transition-colors"
>
+7 (922) 253-83-75
</a>
</div>
</div>
</div>
</aside>
@ -168,7 +192,7 @@ const { links } = Astro.props;
<style>
#mobile-menu {
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
:global(body.menu-open) #mobile-menu {
transform: translateX(0);
@ -192,6 +216,14 @@ const { links } = Astro.props;
.arrow-icon.rotated {
transform: rotate(180deg);
}
#menu-close-btn {
opacity: 0;
transition: opacity 0.3s ease-out;
transition-delay: 0.3s;
}
:global(body.menu-open) #menu-close-btn {
opacity: 1;
}
</style>
<script>