Новые изменения
This commit is contained in:
Web-serfer
parent
32bcc76021
commit
c39b0c0821
9 changed files with 512 additions and 362 deletions
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
import Button from '@components/base/Button.astro';
|
||||
import Pagination from '@components/base/Pagination.astro';
|
||||
import CTA from '@components/base/CTA.astro';
|
||||
|
||||
interface Case {
|
||||
id: number;
|
||||
|
|
@ -96,8 +97,25 @@ const {
|
|||
sum: "280 000 ₽",
|
||||
href: "/cases/casco-damage-claim"
|
||||
}
|
||||
] as Case[]
|
||||
} = Astro.props;
|
||||
] as Case[],
|
||||
currentPage = 1,
|
||||
casesPerPage = 4,
|
||||
baseUrl = "/cases"
|
||||
} = Astro.props as {
|
||||
sectionSubtitle?: string;
|
||||
sectionTitle?: string;
|
||||
sectionDescription?: string;
|
||||
filterLabel?: string;
|
||||
cases?: Case[];
|
||||
currentPage?: number;
|
||||
casesPerPage?: number;
|
||||
baseUrl?: string;
|
||||
};
|
||||
|
||||
const totalPages = Math.ceil(cases.length / casesPerPage);
|
||||
const startIndex = (currentPage - 1) * casesPerPage;
|
||||
const endIndex = startIndex + casesPerPage;
|
||||
const paginatedCases = cases.slice(startIndex, endIndex);
|
||||
|
||||
// Получаем уникальные категории
|
||||
const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.category)))];
|
||||
|
|
@ -130,7 +148,7 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
|
||||
<!-- Список кейсов -->
|
||||
<div class="cases-list">
|
||||
{cases.map((caseItem: Case, index: number) => (
|
||||
{paginatedCases.map((caseItem: Case, index: number) => (
|
||||
<article class="case-card animate-on-scroll" data-animation="slide-up" data-delay={index * 100 + 300} data-category={caseItem.category}>
|
||||
<div class="case-card__inner">
|
||||
<!-- Верхняя часть -->
|
||||
|
|
@ -204,19 +222,22 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
))}
|
||||
</div>
|
||||
|
||||
<!-- Пагинация -->
|
||||
{totalPages > 1 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
baseUrl={baseUrl}
|
||||
/>
|
||||
)}
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="cases-cta animate-on-scroll" data-animation="fade-up" data-delay="800">
|
||||
<div class="cases-cta__icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="cases-cta__title">Нужна помощь с похожей ситуацией?</h3>
|
||||
<p class="cases-cta__desc">Расскажите о вашей проблеме — мы найдём решение. Первая консультация бесплатно.</p>
|
||||
<Button variant="gold" size="lg" href="#contact">
|
||||
Получить консультацию
|
||||
</Button>
|
||||
</div>
|
||||
<CTA
|
||||
icon="help"
|
||||
title="Нужна помощь с похожей ситуацией?"
|
||||
description="Расскажите о вашей проблеме — мы найдём решение. Первая консультация бесплатно."
|
||||
btnText="Получить консультацию"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -347,7 +368,7 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
margin-bottom: 5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/* --- Карточка кейса --- */
|
||||
|
|
@ -592,72 +613,6 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* --- CTA --- */
|
||||
.cases-cta {
|
||||
text-align: center;
|
||||
padding: 3.5rem 2.5rem;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
|
||||
border-radius: 20px;
|
||||
box-shadow: var(--shadow-xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cases-cta::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -20%;
|
||||
width: 60%;
|
||||
height: 150%;
|
||||
background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cases-cta__icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 1.5rem;
|
||||
background: rgba(234, 194, 110, 0.15);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-accent);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cases-cta__icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.cases-cta__title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
margin: 0 0 0.75rem 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cases-cta__desc {
|
||||
font-size: 1.05rem;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
margin: 0 0 2rem 0;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cases-cta .btn {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* --- Анимации --- */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
|
|
@ -736,18 +691,6 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.cases-cta {
|
||||
padding: 2.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.cases-cta__title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.cases-cta__desc {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
|
@ -781,10 +724,6 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.cases-cta {
|
||||
padding: 2rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue