Создание страницы - Контакты
This commit is contained in:
Web-serfer
parent
6828b990a9
commit
f84c24e91f
11 changed files with 1733 additions and 75 deletions
|
|
@ -1,13 +1,230 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { SITE_URL } from '@constants';
|
||||
import ReviewCard from '@components/reviews/ReviewCard.astro';
|
||||
import VotingSummary from '@components/reviews/VotingSummary.astro';
|
||||
import { reviewsData, votingSummary } from '@data/reviewsData';
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Отзывы клиентов — автоюрист в Сургуте"
|
||||
description="Отзывы реальных клиентов о нашей юридической помощи по автоспорам в Сургуте."
|
||||
description="Отзывы реальных клиентов о нашей юридической помощи по автоспорам в Сургуте. Реальные истории и голосования."
|
||||
canonicalLink={`${SITE_URL}/reviews`}
|
||||
>
|
||||
<h1>Отзывы</h1>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Блок статистики голосования -->
|
||||
<VotingSummary
|
||||
averageRating={votingSummary.averageRating}
|
||||
totalVotes={votingSummary.totalVotes}
|
||||
totalReviews={votingSummary.totalReviews}
|
||||
ratingDistribution={votingSummary.ratingDistribution}
|
||||
/>
|
||||
|
||||
<!-- Сетка отзывов -->
|
||||
<div class="reviews-grid">
|
||||
{reviewsData.map((review, index) => (
|
||||
<ReviewCard
|
||||
name={review.name}
|
||||
car={review.car}
|
||||
text={review.text}
|
||||
rating={review.rating}
|
||||
initial={review.initial}
|
||||
color={review.color}
|
||||
date={review.date}
|
||||
votesCount={review.votesCount}
|
||||
isHelpful={review.isHelpful}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- CTA блок -->
|
||||
<div class="cta-section animate-on-scroll" data-animation="fade-up" data-delay="300">
|
||||
<h2 class="cta-title">Хотите оставить отзыв?</h2>
|
||||
<p class="cta-text">
|
||||
Поделитесь своим опытом работы с нами. Ваш отзыв поможет другим водителям принять правильное решение.
|
||||
</p>
|
||||
<a href="/contacts" class="cta-button">
|
||||
Оставить отзыв
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
.reviews-page {
|
||||
padding: 8rem 0 4rem 0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: inline-block;
|
||||
color: #d4af37;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #1e293b;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
font-weight: 800;
|
||||
margin: 0 0 1rem 0;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #64748b;
|
||||
font-size: 1.125rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.reviews-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
/* CTA блок */
|
||||
.cta-section {
|
||||
margin-top: 4rem;
|
||||
padding: 3rem;
|
||||
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
||||
border-radius: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
color: #ffffff;
|
||||
font-size: clamp(1.5rem, 3vw, 2rem);
|
||||
font-weight: 800;
|
||||
margin: 0 0 1rem 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.cta-text {
|
||||
color: #cbd5e1;
|
||||
font-size: 1.125rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-block;
|
||||
padding: 1rem 2.5rem;
|
||||
background: linear-gradient(135deg, #d4af37 0%, #fbbf24 100%);
|
||||
color: #1e293b;
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
text-decoration: none;
|
||||
border-radius: 0.75rem;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
|
||||
}
|
||||
|
||||
/* Анимации */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
[data-animation="fade-up"] {
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.animate-on-scroll.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-on-scroll {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.reviews-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Intersection Observer для анимаций при скроллинге
|
||||
const setupAnimations = () => {
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -50px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target as HTMLElement;
|
||||
const delay = parseInt(el.dataset.delay || '0');
|
||||
|
||||
setTimeout(() => {
|
||||
el.classList.add('is-visible');
|
||||
}, delay);
|
||||
|
||||
observer.unobserve(el);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
};
|
||||
|
||||
// Запуск
|
||||
setupAnimations();
|
||||
|
||||
// Для поддержки View Transitions в Astro
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
setupAnimations();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue