Создание страницы - Контакты
This commit is contained in:
Web-serfer
parent
6828b990a9
commit
f84c24e91f
11 changed files with 1733 additions and 75 deletions
|
|
@ -1,31 +1,14 @@
|
|||
---
|
||||
// Данные отзывов
|
||||
const reviews = [
|
||||
{
|
||||
name: "Алексей М.",
|
||||
car: "Toyota Camry",
|
||||
text: "Помогли вернуть права после того, как инспектор незаконно составил протокол за встречку. Юрист нашел кучу ошибок в схеме ДТП. Огромное спасибо!",
|
||||
initial: "А",
|
||||
color: "bg-blue-100 text-blue-600"
|
||||
},
|
||||
{
|
||||
name: "Екатерина П.",
|
||||
car: "Hyundai Solaris",
|
||||
text: "Страховая выплатила копейки по ОСАГО. Обратилась сюда, сделали независимую экспертизу и через суд взыскали еще 120 тысяч. Профессионалы!",
|
||||
initial: "Е",
|
||||
color: "bg-teal-100 text-teal-600"
|
||||
},
|
||||
{
|
||||
name: "Игорь С.",
|
||||
car: "Lexus RX",
|
||||
text: "Грамотно разобрали сложное ДТП на перекрестке. Доказали, что я не виноват, хотя ГИБДД изначально решило иначе. Лучшие в Сургуте.",
|
||||
initial: "И",
|
||||
color: "bg-orange-100 text-orange-600"
|
||||
}
|
||||
];
|
||||
import { reviewsData } from '@data/reviewsData';
|
||||
import ReviewCard from '@components/reviews/ReviewCard.astro';
|
||||
|
||||
// Берём 6 последних отзывов (сортируем по дате, берём последние)
|
||||
const latestReviews = [...reviewsData]
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
.slice(0, 6);
|
||||
|
||||
// Для эффекта бесконечности клонируем элементы (один набор в начало, один в конец)
|
||||
const displayReviews = [...reviews, ...reviews, ...reviews];
|
||||
const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
|
||||
---
|
||||
|
||||
<section class="reviews-section py-16 bg-[#ffffff] overflow-hidden">
|
||||
|
|
@ -45,29 +28,24 @@ const displayReviews = [...reviews, ...reviews, ...reviews];
|
|||
|
||||
<!-- Окно просмотра -->
|
||||
<div id="sliderContainer" class="overflow-x-hidden scroll-smooth">
|
||||
<div id="sliderTrack" class="flex gap-6 py-4">
|
||||
<div id="sliderTrack" class="flex gap-6 py-4 items-stretch">
|
||||
{displayReviews.map((review, index) => (
|
||||
<div class="card-item min-w-full md:min-w-[calc(33.333%-1rem)] bg-white p-8 rounded-2xl shadow-sm border border-slate-100 flex flex-col justify-between select-none animate-on-scroll" data-animation="scale-up" data-delay={index * 100 + 300}>
|
||||
<div>
|
||||
<div class="flex gap-1 mb-5">
|
||||
{[...Array(5)].map(() => (
|
||||
<svg class="w-5 h-5 text-[#fbbf24] fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
|
||||
))}
|
||||
</div>
|
||||
<p class="text-slate-700 leading-relaxed italic text-[15px] mb-8">
|
||||
"{review.text}"
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class={`w-12 h-12 rounded-xl flex items-center justify-center font-bold text-lg shrink-0 ${review.color}`}>
|
||||
{review.initial}
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<h4 class="font-bold text-[#1e293b] leading-tight">{review.name}</h4>
|
||||
<p class="text-sm text-slate-400">{review.car}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="card-item min-w-full md:min-w-[calc(33.333%-1rem)] select-none animate-on-scroll"
|
||||
data-animation="scale-up"
|
||||
data-delay={index * 100 + 300}
|
||||
>
|
||||
<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 || 0}
|
||||
isHelpful={review.isHelpful || false}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -82,7 +60,7 @@ const displayReviews = [...reviews, ...reviews, ...reviews];
|
|||
</section>
|
||||
|
||||
<style>
|
||||
/* Скрываем скроллбар для всех браузеров */
|
||||
/* Скрываем скроллбар */
|
||||
#sliderContainer {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
|
@ -91,12 +69,24 @@ const displayReviews = [...reviews, ...reviews, ...reviews];
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Плавный скролл snap-эффект */
|
||||
/* Карточка в слайдере — полностью сохраняет оригинальный дизайн ReviewCard */
|
||||
.card-item {
|
||||
scroll-snap-align: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* --- ЗАГОЛОВОК СЕКЦИИ (как в Services) --- */
|
||||
/* Убедимся, что карточка растягивается на всю ширину слайда */
|
||||
.card-item :global(.review-card) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Уменьшаем имя для слайдера — влезает в одну строку */
|
||||
.card-item :global(.author-name) {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Заголовок секции */
|
||||
.section-header {
|
||||
margin-bottom: 4rem;
|
||||
text-align: center;
|
||||
|
|
@ -128,38 +118,33 @@ const displayReviews = [...reviews, ...reviews, ...reviews];
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/* --- АНИМАЦИИ ПРИ СКРОЛЛИНГЕ --- */
|
||||
/* Анимации при скроллинге */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
/* Fade Up - для заголовка */
|
||||
[data-animation="fade-up"] {
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Fade In - для кнопок */
|
||||
[data-animation="fade-in"] {
|
||||
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Scale Up - для карточек */
|
||||
[data-animation="scale-up"] {
|
||||
transform: translateY(40px) scale(0.95);
|
||||
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) scale(1);
|
||||
}
|
||||
|
||||
/* Уважаем prefers-reduced-motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-on-scroll {
|
||||
opacity: 1;
|
||||
|
|
@ -170,7 +155,7 @@ const displayReviews = [...reviews, ...reviews, ...reviews];
|
|||
</style>
|
||||
|
||||
<script>
|
||||
// Intersection Observer для анимаций при скроллинге
|
||||
// Intersection Observer для анимаций
|
||||
const setupAnimations = () => {
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
|
|
@ -205,13 +190,12 @@ const displayReviews = [...reviews, ...reviews, ...reviews];
|
|||
const prevBtn = document.getElementById('prevBtn');
|
||||
const cards = document.querySelectorAll('.card-item');
|
||||
|
||||
if (!container || !track || !nextBtn || !prevBtn) return;
|
||||
if (!container || !track || !nextBtn || !prevBtn || cards.length === 0) return;
|
||||
|
||||
const totalOriginal = cards.length / 3; // Так как мы отрисовали массив 3 раза
|
||||
const totalOriginal = cards.length / 3;
|
||||
const firstCard = cards[0] as HTMLElement;
|
||||
let cardWidth = firstCard.offsetWidth + 24; // Ширина + gap
|
||||
let cardWidth = firstCard.offsetWidth + 24;
|
||||
|
||||
// 1. Устанавливаем начальную позицию в центр (на реальный первый элемент)
|
||||
const initialScroll = cardWidth * totalOriginal;
|
||||
container.scrollLeft = initialScroll;
|
||||
|
||||
|
|
@ -223,19 +207,16 @@ const displayReviews = [...reviews, ...reviews, ...reviews];
|
|||
container.scrollLeft -= cardWidth;
|
||||
};
|
||||
|
||||
// 2. Логика "Бесконечности" (Сквозной скроллинг)
|
||||
container.addEventListener('scroll', () => {
|
||||
const scrollPos = container.scrollLeft;
|
||||
const maxScroll = container.scrollWidth - container.clientWidth;
|
||||
|
||||
// Если дошли почти до конца (правого края клонов), прыгаем в центр без анимации
|
||||
if (scrollPos >= maxScroll - 5) {
|
||||
container.style.scrollBehavior = 'auto';
|
||||
container.scrollLeft = initialScroll;
|
||||
container.style.scrollBehavior = 'smooth';
|
||||
}
|
||||
|
||||
// Если дошли до самого начала (левого края клонов), прыгаем в центр
|
||||
if (scrollPos <= 5) {
|
||||
container.style.scrollBehavior = 'auto';
|
||||
container.scrollLeft = initialScroll;
|
||||
|
|
@ -246,19 +227,19 @@ const displayReviews = [...reviews, ...reviews, ...reviews];
|
|||
nextBtn.addEventListener('click', handleNext);
|
||||
prevBtn.addEventListener('click', handlePrev);
|
||||
|
||||
// Пересчет ширины при ресайзе
|
||||
window.addEventListener('resize', () => {
|
||||
const firstCard = cards[0] as HTMLElement;
|
||||
cardWidth = firstCard.offsetWidth + 24;
|
||||
if (firstCard) {
|
||||
cardWidth = firstCard.offsetWidth + 24;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Запуск
|
||||
setupSlider();
|
||||
setupAnimations();
|
||||
// Для поддержки View Transitions в Astro
|
||||
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
setupSlider();
|
||||
setupAnimations();
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue