Новые правки страницы - Возврат прав
This commit is contained in:
Web-serfer
parent
f5669e196f
commit
24be657ac6
20 changed files with 3219 additions and 45 deletions
174
frontend/src/components/services/ArticlesList.astro
Normal file
174
frontend/src/components/services/ArticlesList.astro
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
---
|
||||
const articles = [
|
||||
{ icon: "🍺", title: "Ст. 12.8 — Управление в состоянии опьянения", desc: "Оспариваем результаты освидетельствования, проверяем соблюдение процедуры медосвидетельствования.", chance: "Высокий шанс" },
|
||||
{ icon: "🚫", title: "Ст. 12.26 — Отказ от медосвидетельствования", desc: "Анализируем законность требований о прохождении освидетельствования, ищем нарушения процедуры.", chance: "Высокий шанс" },
|
||||
{ icon: "🚦", title: "Ст. 12.12 — Проезд на красный свет", desc: "Проверяем работу камер, анализируем материалы дела, ищем свидетелей.", chance: "Средний шанс" },
|
||||
{ icon: "🔄", title: "Ст. 12.15 — Выезд на встречную полосу", desc: "Анализируем дорожную разметку, знаки, показания инспекторов.", chance: "Высокий шанс" },
|
||||
{ icon: "🚗", title: "Ст. 12.27 — Оставление места ДТП", desc: "Доказываем отсутствие умысла или необходимость покинуть место по уважительной причине.", chance: "Средний шанс" },
|
||||
{ icon: "⚠️", title: "Другие статьи", desc: "Работаем с любыми статьями КоАП — каждая ситуация индивидуальна и требует анализа.", chance: "Зависит от дела" }
|
||||
];
|
||||
---
|
||||
|
||||
<section class="articles-section" id="articles">
|
||||
<div class="articles-section-inner">
|
||||
<div class="section-header animate-on-scroll" data-animation="fade-up">
|
||||
<span class="section-label center">Работаем со статьями</span>
|
||||
<h2>По каким статьям КоАП возвращаем права</h2>
|
||||
<p class="section-desc">Оспариваем лишение по всем основным статьям КоАП РФ</p>
|
||||
</div>
|
||||
<div class="articles-grid">
|
||||
{articles.map((article, index) => (
|
||||
<div class="article-card animate-on-scroll" data-animation="fade-up" data-delay={100 + index * 100}>
|
||||
<div class="article-icon">{article.icon}</div>
|
||||
<h3>{article.title}</h3>
|
||||
<p>{article.desc}</p>
|
||||
<span class="article-chance">{article.chance}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.articles-section {
|
||||
background: #ffffff;
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
.articles-section-inner {
|
||||
max-width: var(--site-max-width, 1400px);
|
||||
margin: 0 auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
display: inline-block;
|
||||
color: #eac26e;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(234, 194, 110, 0.1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.section-label.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
color: #0a2540;
|
||||
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
|
||||
font-weight: 800;
|
||||
margin: 0 0 1rem 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: #64748b;
|
||||
font-size: 1.05rem;
|
||||
max-width: 650px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background: #f8fafc;
|
||||
border-radius: 12px;
|
||||
padding: 1.75rem;
|
||||
border: 1px solid #e2e8f0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
border-color: rgba(234, 194, 110, 0.3);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.article-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.article-card h3 {
|
||||
color: #0a2540;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.75rem 0;
|
||||
}
|
||||
|
||||
.article-card p {
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.article-chance {
|
||||
display: inline-block;
|
||||
padding: 0.4rem 0.75rem;
|
||||
background: rgba(234, 194, 110, 0.1);
|
||||
color: #ce9f40;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.articles-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.articles-section {
|
||||
padding: 3.5rem 0;
|
||||
}
|
||||
|
||||
.articles-section-inner {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.articles-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.article-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.articles-section {
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
.articles-section-inner {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue