Новый дизан

This commit is contained in:
Web-serfer 2026-04-08 20:15:49 +05:00
parent 0678c81284
commit 32bcc76021
11 changed files with 1639 additions and 622 deletions

View file

@ -1,6 +1,7 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import PageHero from '@components/base/PageHero.astro';
import ReviewCard from '@components/reviews/ReviewCard.astro';
import VotingSummary from '@components/reviews/VotingSummary.astro';
import { reviewsData, votingSummary } from '@data/reviewsData';
@ -15,29 +16,26 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
{ label: 'Отзывы' }
]}
>
<section class="reviews-page">
<!-- Hero-секция -->
<section class="reviews-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: "95%",
text: "ДОВОЛЬНЫХ КЛИЕНТОВ"
}}
bgImage="/images/home/bg_hero.avif"
/>
<section class="reviews-page">
<div class="site-container">
<!-- Блок статистики голосования -->
<VotingSummary
<VotingSummary
averageRating={votingSummary.averageRating}
totalVotes={votingSummary.totalVotes}
totalReviews={votingSummary.totalReviews}
@ -81,84 +79,7 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
background: #f8fafc;
}
/* ===== HERO ===== */
.reviews-hero {
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
padding: 8rem 0 4rem;
position: relative;
overflow: hidden;
}
.reviews-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;
}
/* ===== GRID ===== */
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
@ -235,10 +156,6 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
}
@media (max-width: 768px) {
.reviews-hero {
padding: 7rem 0 3rem;
}
.reviews-grid {
grid-template-columns: 1fr;
gap: 1.5rem;