redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Создание страницы блога

Browse source
This commit is contained in:
Web-serfer 2026-04-06 21:28:31 +05:00
parent f84c24e91f
commit ed93c5646a
10 changed files with 1058 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

117
frontend/src/pages/reviews.astro
View file

@ -12,17 +12,25 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
canonicalLink={`${SITE_URL}/reviews`}
>
<section class="reviews-page">
<div class="site-container">
<!-- Заголовок страницы -->
<div class="page-header">
<span class="subtitle animate-on-scroll" data-animation="fade-up">Отзывы клиентов</span>
<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
Реальные истории водителей из Сургута
</h1>
<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
Узнайте, как мы помогли нашим клиентам решить их проблемы с автоспорами
</p>
<!-- 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>
<div class="site-container">
<!-- Блок статистики голосования -->
<VotingSummary
@ -65,45 +73,88 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
<style>
.reviews-page {
padding: 8rem 0 4rem 0;
padding: 0;
background: #f8fafc;
}
.page-header {
text-align: center;
margin-bottom: 3rem;
/* ===== HERO ===== */
.reviews-hero {
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
padding: 8rem 0 4rem;
position: relative;
overflow: hidden;
}
.subtitle {
display: inline-block;
color: #d4af37;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 1rem;
.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;
background: rgba(212, 175, 55, 0.1);
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 {
color: #1e293b;
font-size: clamp(2rem, 4vw, 3rem);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
margin: 0 0 1rem 0;
line-height: 1.2;
color: #ffffff;
margin: 0 0 1.5rem;
line-height: 1.15;
letter-spacing: -0.02em;
}
.text-gold { color: #eac26e; }
.description {
color: #64748b;
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto;
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));
@ -180,6 +231,10 @@ 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;