From e531cd22c93c87ac108ece462609ba43350a00e4 Mon Sep 17 00:00:00 2001
From: Web-serfer <user@example.com>
Date: Tue, 31 Mar 2026 17:53:37 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=BE=D0=B2=D0=BE=D0=B5=20=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=BC=D0=BD=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=B2=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/home/WhyUs.astro      |  4 +-
 .../layouts/header/MobileMenu.astro           | 70 ++++++++++++++-----
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/home/WhyUs.astro b/frontend/src/components/home/WhyUs.astro
index 0e92844..89e5725 100644
--- a/frontend/src/components/home/WhyUs.astro
+++ b/frontend/src/components/home/WhyUs.astro
@@ -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>
diff --git a/frontend/src/components/layouts/header/MobileMenu.astro b/frontend/src/components/layouts/header/MobileMenu.astro
index 777c9fb..5d7d232 100644
--- a/frontend/src/components/layouts/header/MobileMenu.astro
+++ b/frontend/src/components/layouts/header/MobileMenu.astro
@@ -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>