Новые изменения в проекте
This commit is contained in:
Web-serfer
parent
92778a126b
commit
107b7f461f
11 changed files with 546 additions and 25 deletions
361
frontend/src/layouts/CaseLayout.astro
Normal file
361
frontend/src/layouts/CaseLayout.astro
Normal file
|
|
@ -0,0 +1,361 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { SITE_URL } from '@constants';
|
||||
import PageHero from "@components/base/PageHero.astro";
|
||||
import CaseSidebar from '@components/cases/CaseSidebar.astro';
|
||||
import RelatedCases from "@components/cases/RelatedCases.astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
canonicalPath: string;
|
||||
badgeText: string;
|
||||
titleWhite: string;
|
||||
titleGold: string;
|
||||
heroDescription: string;
|
||||
currentCaseId: number;
|
||||
category: string;
|
||||
duration: string;
|
||||
result: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description,
|
||||
canonicalPath,
|
||||
badgeText,
|
||||
titleWhite,
|
||||
titleGold,
|
||||
heroDescription,
|
||||
currentCaseId,
|
||||
category,
|
||||
duration,
|
||||
result
|
||||
} = Astro.props;
|
||||
|
||||
const breadcrumbs = [
|
||||
{ label: 'Главная', href: '/' },
|
||||
{ label: 'Кейсы', href: '/cases' },
|
||||
{ label: badgeText.replace('КЕЙС #', 'Кейс ') }
|
||||
];
|
||||
---
|
||||
|
||||
<Layout
|
||||
title={title}
|
||||
description={description}
|
||||
canonicalLink={`${SITE_URL}${canonicalPath}`}
|
||||
breadcrumbs={breadcrumbs}
|
||||
>
|
||||
<PageHero
|
||||
badgeText={badgeText}
|
||||
titleWhite={titleWhite}
|
||||
titleGold={titleGold}
|
||||
description={heroDescription}
|
||||
btnText="Получить консультацию"
|
||||
modalTarget="consultation-modal"
|
||||
layout="with-image"
|
||||
sideImage="/images/cases/casesImg.avif"
|
||||
sideImageAlt="Автоюрист Сургут"
|
||||
experienceBadge={{
|
||||
number: "95%",
|
||||
text: "УСПЕШНЫХ ДЕЛ"
|
||||
}}
|
||||
bgImage="/images/cases/casesBg.avif"
|
||||
icon="briefcase"
|
||||
/>
|
||||
|
||||
<div class="case-detail-page">
|
||||
<section class="case-content">
|
||||
<div class="site-container">
|
||||
<div class="case-grid">
|
||||
<article class="case-article">
|
||||
<slot />
|
||||
</article>
|
||||
|
||||
<aside class="case-sidebar">
|
||||
<CaseSidebar
|
||||
category={category}
|
||||
duration={duration}
|
||||
result={result}
|
||||
/>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<RelatedCases
|
||||
title="Другие кейсы"
|
||||
subtitle="ПОХОЖИЕ ДЕЛА"
|
||||
currentCaseId={currentCaseId}
|
||||
/>
|
||||
</Layout>
|
||||
|
||||
<style is:global>
|
||||
.case-detail-page {
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
.case-content {
|
||||
padding: 5rem 0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.case-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 380px;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.case-block {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.case-block:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.case-block--accent {
|
||||
background: linear-gradient(135deg, #0a2540, #1e3050);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.case-block--accent .case-block__title {
|
||||
color: #eac26e;
|
||||
}
|
||||
|
||||
.case-block--accent .case-block__content {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.case-block--accent p {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.case-block__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: #0a2540;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.case-block__icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.case-block__content p {
|
||||
color: #475569;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.case-block__content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.case-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.case-list li {
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.case-list li::before {
|
||||
content: '•';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #eac26e;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.case-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.case-step {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.case-step__number {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: rgba(234, 194, 110, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 900;
|
||||
color: #eac26e;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.case-step__content h3 {
|
||||
color: #ffffff;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.case-step__content p {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.case-verdict {
|
||||
background: rgba(234, 194, 110, 0.08);
|
||||
border: 1px solid rgba(234, 194, 110, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.case-verdict__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: #22c55e;
|
||||
color: #ffffff;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.case-verdict__badge svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.case-verdict p {
|
||||
color: #0a2540;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.case-sidebar {
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.case-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.case-sidebar {
|
||||
position: static;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.case-detail-page {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.case-content {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.case-grid {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.case-block {
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.case-block__title {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.case-block__content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.case-step {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.case-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.case-block {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.case-block__title {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.case-block__content p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.case-step {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.case-step__number {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.case-step__content h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.case-step__content p {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.case-verdict {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.case-verdict__badge {
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue