Новые страницы и компоенты сайта
This commit is contained in:
Web-serfer
parent
e695b9bc01
commit
7fd0e77620
10 changed files with 2825 additions and 1544 deletions
97
frontend/src/components/base/AdBanner.astro
Normal file
97
frontend/src/components/base/AdBanner.astro
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
interface AdBannerProps {
|
||||
width?: string;
|
||||
height?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
width = "300",
|
||||
height = "250",
|
||||
className = ""
|
||||
} = Astro.props as AdBannerProps;
|
||||
|
||||
const displayWidth = `${width}px`;
|
||||
const displayHeight = `${height}px`;
|
||||
const sizeLabel = `${width}×${height}`;
|
||||
---
|
||||
|
||||
<div class={`ad-banner ${className}`} style={`--ad-width: ${displayWidth}; --ad-height: ${displayHeight};`}>
|
||||
<div class="ad-banner__placeholder">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||||
<polyline points="21 15 16 10 5 21"/>
|
||||
</svg>
|
||||
<span>Рекламный блок</span>
|
||||
<span class="ad-banner__size">{sizeLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.ad-banner {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ad-banner__placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
min-height: calc(var(--ad-height, 250px) - 4px);
|
||||
min-width: calc(var(--ad-width, 300px) - 2px);
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
}
|
||||
|
||||
.ad-banner__placeholder svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ad-banner__placeholder span {
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.ad-banner__size {
|
||||
font-size: 0.75rem !important;
|
||||
color: #94a3b8 !important;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.ad-banner--dashed {
|
||||
border: 2px dashed #cbd5e1;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.ad-banner--dashed .ad-banner__placeholder {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ad-banner--horizontal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ad-banner--horizontal .ad-banner__placeholder {
|
||||
min-height: 90px;
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
|
||||
.ad-banner--vertical {
|
||||
min-height: var(--ad-height, 250px);
|
||||
}
|
||||
|
||||
.ad-banner--vertical .ad-banner__placeholder {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -357,18 +357,29 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
|
||||
/* --- Список кейсов --- */
|
||||
.cases-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/* --- Карточка кейса --- */
|
||||
.case-card__inner {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
border: 1px solid var(--color-gray-light);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.case-card {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.case-card.is-visible {
|
||||
|
|
@ -376,15 +387,11 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.case-card__inner {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem;
|
||||
border: 1px solid var(--color-gray-light);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
.case-card {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.case-card__inner::before {
|
||||
|
|
@ -578,8 +585,9 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
|
||||
/* Ссылка */
|
||||
.case-card__link {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid var(--color-gray-light);
|
||||
|
|
@ -588,6 +596,9 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
transition: color 0.3s ease;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.case-card__link svg {
|
||||
|
|
@ -646,6 +657,11 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cases-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.cases-header {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
|
@ -672,17 +688,17 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
}
|
||||
|
||||
.case-card__inner {
|
||||
padding: 2rem 1.5rem;
|
||||
padding: 1.75rem;
|
||||
}
|
||||
|
||||
.case-card__title {
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.case-card__result-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -710,7 +726,7 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
}
|
||||
|
||||
.case-card__inner {
|
||||
padding: 1.5rem 1.25rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.case-card__meta {
|
||||
|
|
@ -777,7 +793,7 @@ const categories = ["Все", ...Array.from(new Set(cases.map((c: Case) => c.cat
|
|||
const category = card.dataset.category;
|
||||
|
||||
if (filter === 'all' || category === filter) {
|
||||
card.style.display = 'block';
|
||||
card.style.display = 'flex';
|
||||
setTimeout(() => {
|
||||
card.classList.add('is-visible');
|
||||
}, 50);
|
||||
|
|
|
|||
242
frontend/src/components/cases/RelatedCases.astro
Normal file
242
frontend/src/components/cases/RelatedCases.astro
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
---
|
||||
interface Case {
|
||||
id: number;
|
||||
title: string;
|
||||
category: string;
|
||||
categoryIcon: string;
|
||||
description: string;
|
||||
resultLabel: string;
|
||||
duration: string;
|
||||
sum?: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
interface RelatedCasesProps {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
cases: Case[];
|
||||
currentCaseId: number;
|
||||
limit?: number;
|
||||
}
|
||||
|
||||
const {
|
||||
title = "Другие кейсы",
|
||||
subtitle = "Похожие дела",
|
||||
cases = [],
|
||||
currentCaseId = 0,
|
||||
limit = 3
|
||||
} = Astro.props as RelatedCasesProps;
|
||||
|
||||
function shuffleArray<T>(array: T[]): T[] {
|
||||
const shuffled = [...array];
|
||||
for (let i = shuffled.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
|
||||
}
|
||||
return shuffled;
|
||||
}
|
||||
|
||||
const otherCases = cases.filter(c => c.id !== currentCaseId);
|
||||
const shuffledCases = shuffleArray(otherCases);
|
||||
const relatedCases = shuffledCases.slice(0, limit);
|
||||
---
|
||||
|
||||
<section class="related-cases">
|
||||
<div class="site-container">
|
||||
<div class="related-cases__header">
|
||||
<span class="related-cases__subtitle">{subtitle}</span>
|
||||
<h3 class="related-cases__title">{title}</h3>
|
||||
</div>
|
||||
<div class="related-cases__grid">
|
||||
{relatedCases.map((caseItem) => (
|
||||
<a href={caseItem.href} class="related-case-card">
|
||||
<div class="related-case-card__header">
|
||||
<span class="related-case-card__category-icon">{caseItem.categoryIcon}</span>
|
||||
<span class="related-case-card__category">{caseItem.category}</span>
|
||||
</div>
|
||||
<h4 class="related-case-card__title">{caseItem.title}</h4>
|
||||
<p class="related-case-card__desc">{caseItem.description}</p>
|
||||
<div class="related-case-card__footer">
|
||||
<div class="related-case-card__meta">
|
||||
<span class="related-case-card__result">{caseItem.resultLabel}</span>
|
||||
<span class="related-case-card__duration">{caseItem.duration}</span>
|
||||
</div>
|
||||
<span class="related-case-card__link">
|
||||
Подробнее
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14"/>
|
||||
<path d="m12 5 7 7-7 7"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.related-cases {
|
||||
padding: 5rem 0;
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.site-container {
|
||||
max-width: var(--site-max-width, 1400px);
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.related-cases__header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.related-cases__subtitle {
|
||||
display: inline-block;
|
||||
color: #eac26e;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(234, 194, 110, 0.1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.related-cases__title {
|
||||
color: #0a2540;
|
||||
font-size: clamp(1.5rem, 3vw, 2rem);
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.related-cases__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.related-case-card {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.related-case-card:hover {
|
||||
border-color: rgba(234, 194, 110, 0.3);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.related-case-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.related-case-card__category-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.related-case-card__category {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #ce9f40;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.related-case-card__title {
|
||||
color: #0a2540;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.75rem 0;
|
||||
line-height: 1.4;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.related-case-card:hover .related-case-card__title {
|
||||
color: #eac26e;
|
||||
}
|
||||
|
||||
.related-case-card__desc {
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 1.5rem 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.related-case-card__footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.related-case-card__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.related-case-card__result {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.related-case-card__duration {
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.related-case-card__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #0a2540;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.related-case-card__link svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.related-case-card:hover .related-case-card__link {
|
||||
color: #eac26e;
|
||||
}
|
||||
|
||||
.related-case-card:hover .related-case-card__link svg {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.related-cases__grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.related-cases {
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.related-cases__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue