Создан компонент поста

frontend/src/pages/contacts.astro

@@ -2,7 +2,7 @@
 import Layout from '@layouts/Layout.astro';
 import { SITE_URL, COMPANY } from '@constants';
 import PageHero from '@components/base/PageHero.astro';
-import CTA from '@components/base/CTA.astro';
+import AuthLockBlock from '@components/base/AuthLockBlock.astro';
 
 // Логика авторизации (пока статичная переменная)
 const isAuthorized = false; // Измените на true, чтобы увидеть форму
@@ -23,13 +23,13 @@ const isAuthorized = false; // Измените на true, чтобы увиде
 		titleGold="с нами"
 		description="Мы всегда на связи и готовы помочь вам в решении автоспоров. Оставьте заявку или позвоните — первая консультация бесплатно."
 		layout="with-image"
-		sideImage="/images/home/avtourist-surgut.avif"
+		sideImage="/images/contacts/conImg.avif"
 		sideImageAlt="Автоюрист Сургут"
 		experienceBadge={{
 			number: "15",
 			text: "МИНУТ НА СВЯЗИ"
 		}}
-		bgImage="/images/home/bg_hero.avif"
+		bgImage="/images/contacts/conBg.avif"
 	/>
 
 	<!-- Карточки контактов -->
@@ -159,28 +159,16 @@ const isAuthorized = false; // Измените на true, чтобы увиде
 					</p>
 				</form>
 			) : (
-				<div class="auth-lock-card animate-on-scroll" data-animation="fade-up" data-delay="200">
-					<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>
-							<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
-						</svg>
-					</div>
-					<h3 class="lock-title">Форма доступна только клиентам</h3>
-					<p class="lock-text">Чтобы отправить сообщение напрямую юристу, пожалуйста, авторизуйтесь в личном кабинете.</p>
-					<a href="/auth/sign-in" class="auth-button">Войти в кабинет</a>
-				</div>
+				<AuthLockBlock
+					title="Авторизуйтесь, чтобы написать"
+					description="Чтобы отправить сообщение напрямую юристу, пожалуйста, войдите в личный кабинет."
+					buttonText="Войти в кабинет"
+					buttonHref="/auth/sign-in"
+					className="animate-on-scroll"
+				/>
 			)}
 		</div>
 	</section>
-
-	<!-- CTA-блок -->
-	<CTA
-		icon="phone"
-		title="Нужна срочная помощь?"
-		description="Запишитесь на бесплатную консультацию прямо сейчас — мы перезвоним в течение 15 минут"
-		btnText="Записаться на консультацию"
-	/>
 </Layout>
 
 <style>
@@ -247,7 +235,7 @@ const isAuthorized = false; // Измените на true, чтобы увиде
 
 	.hours-icon { width: 1rem; height: 1rem; }
 
-	/* ===== FORM SECTION & AUTH LOCK ===== */
+	/* ===== FORM SECTION ===== */
 	.contact-form-section {
 		padding: 5rem 0;
 		background: #ffffff;
@@ -257,49 +245,6 @@ const isAuthorized = false; // Измените на true, чтобы увиде
 	.section-title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; color: #1e293b; margin: 0 0 1rem; }
 	.section-description { color: #64748b; font-size: 1.1rem; margin: 0; }
 
-	/* Auth Lock Card */
-	.auth-lock-card {
-		max-width: 600px;
-		margin: 0 auto;
-		background: #f8fafc;
-		border: 2px dashed #e2e8f0;
-		border-radius: 1.5rem;
-		padding: 4rem 2rem;
-		text-align: center;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	.lock-icon-container {
-		width: 5rem;
-		height: 5rem;
-		background: #ffffff;
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #94a3b8;
-		margin-bottom: 1.5rem;
-		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
-	}
-
-	.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; }
-
-	.auth-button {
-		background: #1e293b;
-		color: #ffffff;
-		padding: 0.875rem 2rem;
-		border-radius: 0.75rem;
-		font-weight: 700;
-		text-decoration: none;
-		transition: all 0.3s ease;
-	}
-
-	.auth-button:hover { background: #0f172a; transform: translateY(-2px); }
-
 	/* Contact Form Styles */
 	.contact-form {
 		max-width: 700px;
@@ -359,7 +304,6 @@ const isAuthorized = false; // Измените на true, чтобы увиде
 	@media (max-width: 768px) {
 		.cards-grid { grid-template-columns: 1fr; }
 		.form-row { grid-template-columns: 1fr; }
-		.auth-lock-card { padding: 3rem 1.5rem; }
 	}
 </style>