From acb7b88ff105c3116a5dec4b390115220383c2e9 Mon Sep 17 00:00:00 2001
From: Web-serfer <user@example.com>
Date: Wed, 29 Apr 2026 03:02:40 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=BE=D0=B2=D1=8B=D0=B5=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=B2=20=D0=BA=D0=BE=D0=BC=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/base/AuthLockBlock.astro   | 68 ++++++++++---------
 frontend/src/components/base/Pagination.astro |  2 +-
 .../reviews/ReviewFormContainer.tsx           | 28 +++-----
 frontend/src/layouts/Layout.astro             | 16 +++++
 frontend/src/pages/blog/page/[page].astro     |  9 ---
 frontend/src/styles/global.css                |  4 ++
 6 files changed, 68 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/base/AuthLockBlock.astro b/frontend/src/components/base/AuthLockBlock.astro
index 76f3eda..172358e 100644
--- a/frontend/src/components/base/AuthLockBlock.astro
+++ b/frontend/src/components/base/AuthLockBlock.astro
@@ -23,12 +23,12 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
 ---
 
 <div 
-  class={`auth-lock-card animate-on-scroll ${className}`}
+  class={`auth-lock-card animate-on-scroll w-full max-w-[700px] mx-auto px-4 md:px-0 ${className}`}
   data-animation={dataAnimation}
   data-delay={delay}
 >
   <div class="lock-icon-container">
-    <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <svg class="w-8 h-8 md:w-10 md:h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
     </svg>
   </div>
@@ -47,12 +47,10 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
 
 <style>
   .auth-lock-card {
-    max-width: 700px;
-    margin: 0 auto;
     background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
     border: 1px solid #e2e8f0;
     border-radius: 1.5rem;
-    padding: 2rem;
+    padding: 1.5rem;
     text-align: center;
     display: flex;
     flex-direction: column;
@@ -66,8 +64,8 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
   }
 
   .lock-icon-container {
-    width: 5rem;
-    height: 5rem;
+    width: 4rem;
+    height: 4rem;
     background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);
     border-radius: 50%;
     display: flex;
@@ -77,19 +75,39 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
     margin-bottom: 1.5rem;
     box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.15);
   }
-   
+
+  @media (min-width: 768px) {
+    .lock-icon-container {
+      width: 5rem;
+      height: 5rem;
+    }
+  }
+    
   .lock-title { 
     color: #0f172a; 
-    font-size: 1.375rem; 
+    font-size: 1.125rem;
     font-weight: 700; 
     margin: 0 0 0.75rem; 
   }
+
+  @media (min-width: 768px) {
+    .lock-title {
+      font-size: 1.375rem;
+    }
+  }
   
   .lock-text { 
     color: #475569; 
     line-height: 1.6; 
     margin: 0 0 1.75rem; 
     max-width: 420px;
+    font-size: 0.875rem;
+  }
+
+  @media (min-width: 768px) {
+    .lock-text {
+      font-size: 1rem;
+    }
   }
 
   .auth-button {
@@ -98,15 +116,22 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
     justify-content: center;
     background: linear-gradient(to bottom, #2563eb, #1e40af);
     color: #ffffff;
-    padding: 0.875rem 2rem;
-    border-radius: 0.75rem;
+    padding: 0.75rem 1.25rem;
+    border-radius: 0.5rem;
     font-weight: 600;
-    font-size: 1rem;
+    font-size: 0.875rem;
     text-decoration: none;
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
   }
 
+  @media (min-width: 768px) {
+    .auth-button {
+      padding: 0.875rem 2rem;
+      font-size: 1rem;
+    }
+  }
+
   .auth-button:hover { 
     background: linear-gradient(to bottom, #1d4ed8, #1e3a8a);
     transform: translateY(-2px);
@@ -130,23 +155,4 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
     color: #1d4ed8;
     text-decoration: underline;
   }
-
-  @media (max-width: 640px) {
-    .auth-lock-card {
-      padding: 2rem 1.25rem;
-    }
-
-    .lock-title {
-      font-size: 1.125rem;
-    }
-
-    .lock-text {
-      font-size: 0.875rem;
-    }
-
-    .auth-button {
-      font-size: 0.8125rem;
-      padding: 0.75rem 1rem;
-    }
-  }
 </style>
diff --git a/frontend/src/components/base/Pagination.astro b/frontend/src/components/base/Pagination.astro
index ff592bb..d868419 100644
--- a/frontend/src/components/base/Pagination.astro
+++ b/frontend/src/components/base/Pagination.astro
@@ -83,7 +83,7 @@ const getPages = () => {
 
 <style>
     .pagination {
-        padding: 3rem 0;
+        padding: 5rem 0 3rem;
         display: flex;
         justify-content: center;
     }
diff --git a/frontend/src/components/reviews/ReviewFormContainer.tsx b/frontend/src/components/reviews/ReviewFormContainer.tsx
index 72464be..4f782b8 100644
--- a/frontend/src/components/reviews/ReviewFormContainer.tsx
+++ b/frontend/src/components/reviews/ReviewFormContainer.tsx
@@ -102,42 +102,34 @@ export default function ReviewFormContainer() {
       </Show>
 
       <Show when={!isLoading()}>
-        <Show when={isAuthenticated()} fallback={
-          <div class="mx-auto" style="max-width: 700px;">
-            <div class="bg-linear-to-br from-gray-50 to-gray-100 rounded-2xl p-8 md:p-12 border border-gray-200 text-center" style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);">
-              <div class="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center" style="background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);">
-                <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+<Show when={isAuthenticated()} fallback={
+          <div class="mx-auto w-full max-w-[700px]">
+            <div class="bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border border-slate-200 p-6 md:p-12 text-center">
+              <div class="w-16 md:w-20 mx-auto mb-4 md:mb-6 rounded-full flex items-center justify-center bg-gradient-to-br from-blue-500/20 to-blue-900/30">
+                <svg class="w-8 md:w-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                 </svg>
               </div>
-              <h4 class="text-xl font-semibold text-gray-900 mb-3">
+              <h4 class="text-lg md:!text-xl font-semibold text-slate-900 mb-2 md:mb-3">
                 Авторизуйтесь, чтобы оставить отзыв
               </h4>
-              <p class="text-gray-600 mb-6">
+              <p class="text-slate-600 mb-4 md:mb-6 text-sm md:!text-base">
                 Чтобы поделиться своим опытом, пожалуйста, войдите в аккаунт.
               </p>
               <a
                 href={`/auth/sign-in?redirect=${encodeURIComponent(window.location.pathname)}`}
-                class="inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-md cursor-pointer px-6 py-3 text-lg auth-login-btn"
-                style="background: linear-gradient(to bottom, #2563eb, #1e40af); color: white; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3); transition: all 0.3s ease;"
+                class="inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-lg cursor-pointer px-4 py-3 md:px-6 md:py-3 text-sm md:!text-base text-white bg-gradient-to-b from-blue-600 to-blue-800 shadow-md hover:shadow-lg hover:-translate-y-0.5"
               >
-                <style>{`
-                  .auth-login-btn:hover {
-                    transform: translateY(-2px);
-                    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
-                  }
-                `}</style>
                 <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
                 </svg>
                 Войдите в аккаунт
               </a>
-              <p class="mt-4 text-sm text-gray-600">
+              <p class="mt-4 text-sm text-slate-600">
                 Нет аккаунта?{" "}
                 <a
                   href={`/auth/sign-up?redirect=${encodeURIComponent(window.location.pathname)}`}
-                  class="font-medium hover:underline"
-                  style="color: #2563eb;"
+                  class="font-medium text-blue-600 hover:underline"
                 >
                   Зарегистрироваться
                 </a>
diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index 8cdce37..98ce1b5 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import "@styles/global.css";
 import { SITE_TITLE_SUFFIX } from "@constants";
+import { ClientRouter } from 'astro:transitions';
 
 import Header from "@components/layout/header/Header.astro";
 import Footer from "@components/layout/footer/Footer.astro";
@@ -34,6 +35,7 @@ const { title, description, canonicalLink, breadcrumbs } = Astro.props;
     <link rel="sitemap" href="/sitemap-index.xml" />
     <!-- Yandex  верификация -->
     <meta name="yandex-verification" content="be3edfd138348e43" />
+    <ClientRouter />
   </head>
   <body>
     <Toast />
@@ -64,6 +66,20 @@ const { title, description, canonicalLink, breadcrumbs } = Astro.props;
 </style>
 
 <script>
+  // Сохраняем позицию скролла перед переходом
+  document.addEventListener('astro:before-preparation', (e) => {
+    sessionStorage.setItem('scrollPosition', String(window.scrollY));
+  });
+
+  // Восстанавливаем позицию скролла после перехода
+  document.addEventListener('astro:after-swap', () => {
+    const savedPosition = sessionStorage.getItem('scrollPosition');
+    if (savedPosition) {
+      window.scrollTo(0, parseInt(savedPosition));
+      sessionStorage.removeItem('scrollPosition');
+    }
+  });
+
   // Клиентский скрипт для открытия модального окна
   document.addEventListener("DOMContentLoaded", () => {
     const btn = document.getElementById("consultation-btn");
diff --git a/frontend/src/pages/blog/page/[page].astro b/frontend/src/pages/blog/page/[page].astro
index 59c215d..57473a3 100644
--- a/frontend/src/pages/blog/page/[page].astro
+++ b/frontend/src/pages/blog/page/[page].astro
@@ -5,7 +5,6 @@ import PageHero from '@components/base/PageHero.astro';
 import BlogCategories from '@components/blog/BlogCategories.astro';
 import BlogCard from '@components/blog/BlogCard.astro';
 import Pagination from '@components/base/Pagination.astro';
-import CTA from '@components/base/CTA.astro';
 import SearchModal from '@components/base/SearchModal.astro';
 import { getPosts, getAllCategories, getPostImageUrl } from '@lib/pb';
 
@@ -83,14 +82,6 @@ const formatDate = (date: string) => {
 		</div>
 	</section>
 
-	<!-- CTA-блок -->
-	<CTA
-		icon="consult"
-		title="Нужна консультация юриста?"
-		description="Не нашли ответ на свой вопрос? Запишитесь на бесплатную консультацию — мы поможем разобраться в вашей ситуации"
-		btnText="Записаться на консультацию"
-	/>
-
 	<SearchModal />
 </Layout>
 
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 8b2e5d8..52ec07d 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1,5 +1,9 @@
 @import "tailwindcss";
 
+html {
+  scroll-behavior: smooth;
+}
+
 :root {
   --site-max-width: 1400px;
   --color-light: #ffffff;