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

---
 .../src/components/base/AuthLockBlock.astro   | 111 +++++++++++++++---
 .../components/base/ConsultationModal.astro   |   7 +-
 .../reviews/ReviewFormContainer.tsx           |   6 +-
 .../src/components/reviews/ReviewsList.tsx    |   4 -
 frontend/src/pages/contacts.astro             |   2 +
 5 files changed, 100 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/base/AuthLockBlock.astro b/frontend/src/components/base/AuthLockBlock.astro
index b9198cd..d97cefc 100644
--- a/frontend/src/components/base/AuthLockBlock.astro
+++ b/frontend/src/components/base/AuthLockBlock.astro
@@ -5,6 +5,8 @@ interface Props {
   buttonText: string;
   buttonHref: string;
   className?: string;
+  dataAnimation?: string;
+  dataDelay?: string | number;
 }
 
 const {
@@ -12,11 +14,19 @@ const {
   description = 'Для продолжения, пожалуйста, войдите в личный кабинет.',
   buttonText = 'Войти в кабинет',
   buttonHref = '/auth/sign-in',
-  className = ''
+  className = '',
+  dataAnimation = 'fade-up',
+  dataDelay = 0
 } = Astro.props;
+
+const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDelay)) || 0;
 ---
 
-<div class={`auth-lock-card ${className}`}>
+<div 
+  class={`auth-lock-card animate-on-scroll ${className}`}
+  data-animation={dataAnimation}
+  data-delay={delay}
+>
   <div class="lock-icon-container">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lock-icon">
       <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
@@ -24,50 +34,119 @@ const {
     </svg>
   </div>
   <h3 class="lock-title">{title}</h3>
-  <p class="lock-text" style={`display: ${description ? 'block' : 'none'}`}>{description}</p>
-  <a href={buttonHref} class="auth-button">{buttonText}</a>
+  <p class="lock-text">{description}</p>
+  <a href={buttonHref} class="auth-button">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="button-icon">
+      <path 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>
+    {buttonText}
+  </a>
+  <p class="auth-hint">
+    Нет аккаунта? <a href="/auth/sign-up" class="register-link">Зарегистрироваться</a>
+  </p>
 </div>
 
 <style>
   .auth-lock-card {
-    max-width: 600px;
+    max-width: 700px;
     margin: 0 auto;
-    background: #f8fafc;
-    border: 2px dashed #e2e8f0;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border: 1px solid #e2e8f0;
     border-radius: 1.5rem;
-    padding: 4rem 2rem;
+    padding: 2rem;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 
+  @media (min-width: 768px) {
+    .auth-lock-card {
+      padding: 3rem;
+    }
+  }
+
   .lock-icon-container {
     width: 5rem;
     height: 5rem;
-    background: #ffffff;
+    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #94a3b8;
+    color: #2563eb;
     margin-bottom: 1.5rem;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.15);
   }
 
   .lock-icon { width: 2rem; height: 2rem; }
-  .lock-title { color: #1e293b; font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
-  .lock-text { color: #64748b; line-height: 1.6; margin: 0 0 2rem; max-width: 400px; }
+  
+  .lock-title { 
+    color: #0f172a; 
+    font-size: 1.375rem; 
+    font-weight: 700; 
+    margin: 0 0 0.75rem; 
+  }
+  
+  .lock-text { 
+    color: #475569; 
+    line-height: 1.6; 
+    margin: 0 0 1.75rem; 
+    max-width: 420px;
+  }
 
   .auth-button {
-    background: #1e293b;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(to bottom, #2563eb, #1e40af);
     color: #ffffff;
     padding: 0.875rem 2rem;
     border-radius: 0.75rem;
-    font-weight: 700;
+    font-weight: 600;
+    font-size: 1rem;
     text-decoration: none;
     transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
   }
 
-  .auth-button:hover { background: #0f172a; transform: translateY(-2px); }
+  .auth-button:hover { 
+    background: linear-gradient(to bottom, #1d4ed8, #1e3a8a);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
+  }
+
+  .button-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.5rem;
+  }
+
+  .auth-hint {
+    margin: 1.25rem 0 0;
+    color: #64748b;
+    font-size: 0.875rem;
+  }
+
+  .register-link {
+    color: #2563eb;
+    font-weight: 500;
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+
+  .register-link:hover {
+    color: #1d4ed8;
+    text-decoration: underline;
+  }
+
+  @media (max-width: 640px) {
+    .auth-lock-card {
+      padding: 2.5rem 1.5rem;
+    }
+
+    .lock-title {
+      font-size: 1.25rem;
+    }
+  }
 </style>
diff --git a/frontend/src/components/base/ConsultationModal.astro b/frontend/src/components/base/ConsultationModal.astro
index d1a9fb9..ddfb824 100644
--- a/frontend/src/components/base/ConsultationModal.astro
+++ b/frontend/src/components/base/ConsultationModal.astro
@@ -185,19 +185,16 @@ const title = 'Бесплатная консультация';
     inset: 0;
     background: rgba(10, 25, 41, 0.85);
     backdrop-filter: blur(8px);
-    display: flex;
+    display: none;
     align-items: center;
     justify-content: center;
     z-index: 9999;
-    opacity: 0;
-    visibility: hidden;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     padding: 2rem 1rem;
   }
 
   .modal-overlay.active {
-    opacity: 1;
-    visibility: visible;
+    display: flex;
   }
 
   .modal-container {
diff --git a/frontend/src/components/reviews/ReviewFormContainer.tsx b/frontend/src/components/reviews/ReviewFormContainer.tsx
index aa7a74e..92858b2 100644
--- a/frontend/src/components/reviews/ReviewFormContainer.tsx
+++ b/frontend/src/components/reviews/ReviewFormContainer.tsx
@@ -99,15 +99,11 @@ export default function ReviewFormContainer() {
       </Show>
 
       <Show when={isLoading()}>
-        <div class="max-w-700px mx-auto text-center py-12">
-          <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
-          <p class="mt-4 text-gray-600">Загрузка...</p>
-        </div>
       </Show>
 
       <Show when={!isLoading()}>
         <Show when={isAuthenticated()} fallback={
-          <div class="max-w-700px mx-auto">
+          <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">
diff --git a/frontend/src/components/reviews/ReviewsList.tsx b/frontend/src/components/reviews/ReviewsList.tsx
index b1aad77..e29b4d9 100644
--- a/frontend/src/components/reviews/ReviewsList.tsx
+++ b/frontend/src/components/reviews/ReviewsList.tsx
@@ -94,10 +94,6 @@ export default function ReviewsList(props: ReviewsListProps) {
   return (
     <>
       <Show when={isLoading()}>
-        <div class="text-center py-12">
-          <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
-          <p class="mt-4 text-gray-600">Загрузка отзывов...</p>
-        </div>
       </Show>
 
       <Show when={error()}>
diff --git a/frontend/src/pages/contacts.astro b/frontend/src/pages/contacts.astro
index 218ca6e..c274f24 100644
--- a/frontend/src/pages/contacts.astro
+++ b/frontend/src/pages/contacts.astro
@@ -166,6 +166,8 @@ const isAuthorized = false; // Измените на true, чтобы увиде
 					buttonText="Войти в кабинет"
 					buttonHref="/auth/sign-in"
 					className="animate-on-scroll"
+					dataAnimation="fade-up"
+					dataDelay="200"
 				/>
 			)}
 		</div>