Новый дизан

frontend/src/pages/contacts.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '@layouts/Layout.astro';
 import { SITE_URL, COMPANY } from '@constants';
+import PageHero from '@components/base/PageHero.astro';
 
 // Логика авторизации (пока статичная переменная)
 const isAuthorized = false; // Измените на true, чтобы увидеть форму
@@ -15,23 +16,20 @@ const isAuthorized = false; // Измените на true, чтобы увиде
 		{ label: 'Контакты' }
 	]}
 >
-	<!-- Hero-секция -->
-	<section class="contacts-hero">
-		<div class="site-container">
-			<div class="hero-content">
-				<div class="badge animate-on-scroll" data-animation="fade-up">
-					<span class="status-dot"></span>
-					БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ
-				</div>
-				<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
-					Свяжитесь <span class="text-gold">с нами</span>
-				</h1>
-				<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
-					Мы всегда на связи и готовы помочь вам в решении автоспоров. Оставьте заявку или позвоните — первая консультация бесплатно.
-				</p>
-			</div>
-		</div>
-	</section>
+	<PageHero
+		badgeText="БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ"
+		titleWhite="Свяжитесь"
+		titleGold="с нами"
+		description="Мы всегда на связи и готовы помочь вам в решении автоспоров. Оставьте заявку или позвоните — первая консультация бесплатно."
+		layout="with-image"
+		sideImage="/images/home/avtourist-surgut.avif"
+		sideImageAlt="Автоюрист Сургут"
+		experienceBadge={{
+			number: "15",
+			text: "МИНУТ НА СВЯЗИ"
+		}}
+		bgImage="/images/home/bg_hero.avif"
+	/>
 
 	<!-- Карточки контактов -->
 	<section class="contact-cards">
@@ -194,82 +192,6 @@ const isAuthorized = false; // Измените на true, чтобы увиде
 </Layout>
 
 <style>
-	/* ===== HERO ===== */
-	.contacts-hero {
-		background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
-		padding: 8rem 0 4rem;
-		position: relative;
-		overflow: hidden;
-	}
-
-	.contacts-hero::before {
-		content: '';
-		position: absolute;
-		top: -50%;
-		right: -10%;
-		width: 600px;
-		height: 600px;
-		background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
-		border-radius: 50%;
-	}
-
-	.hero-content {
-		position: relative;
-		z-index: 1;
-		text-align: center;
-		max-width: 700px;
-		margin: 0 auto;
-	}
-
-	.badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.6rem;
-		background-color: rgba(234, 194, 110, 0.15);
-		border: 1px solid rgba(234, 194, 110, 0.3);
-		color: #eac26e;
-		padding: 0.5rem 1rem;
-		border-radius: 6px;
-		font-size: 0.8rem;
-		font-weight: 700;
-		letter-spacing: 1.5px;
-		margin-bottom: 2rem;
-	}
-
-	.status-dot {
-		width: 10px;
-		height: 10px;
-		background: #22c55e;
-		border-radius: 50%;
-		animation: pulse 2s ease-in-out infinite;
-		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
-		flex-shrink: 0;
-	}
-
-	@keyframes pulse {
-		0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
-		70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
-		100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
-	}
-
-	.title {
-		font-size: clamp(2.5rem, 5vw, 4rem);
-		font-weight: 800;
-		color: #ffffff;
-		margin: 0 0 1.5rem;
-		line-height: 1.15;
-		letter-spacing: -0.02em;
-	}
-
-	.text-gold { color: #eac26e; }
-
-	.description {
-		color: rgba(255, 255, 255, 0.8);
-		font-size: 1.15rem;
-		line-height: 1.6;
-		margin: 0;
-	}
-
 	/* ===== CONTACT CARDS ===== */
 	.contact-cards {
 		padding: 5rem 0;
@@ -497,4 +419,4 @@ const isAuthorized = false; // Измените на true, чтобы увиде
 		setupAnimations();
 		setupForm();
 	});
-</script>
+</script>