147 lines
3.5 KiB
Text
147 lines
3.5 KiB
Text
---
|
||
import Layout from '@layouts/Layout.astro';
|
||
import { SITE_URL } from '@constants';
|
||
import BlogHero from '@components/blog/BlogHero.astro';
|
||
import BlogCategories from '@components/blog/BlogCategories.astro';
|
||
import BlogCard from '@components/blog/BlogCard.astro';
|
||
import BlogPagination from '@components/blog/BlogPagination.astro';
|
||
import { blogPosts, categories } from '@data/blogData';
|
||
---
|
||
|
||
<Layout
|
||
title="Блог — автоюрист в Сургуте"
|
||
description="Полезные статьи и советы по автоспорам, ДТП, ОСАГО, лишению прав и защите прав водителей."
|
||
canonicalLink={`${SITE_URL}/blog`}
|
||
>
|
||
<BlogHero />
|
||
<BlogCategories categories={categories} />
|
||
|
||
<!-- Сетка статей -->
|
||
<section class="blog-grid-section">
|
||
<div class="site-container">
|
||
<div class="blog-grid">
|
||
{blogPosts.map((post) => (
|
||
<BlogCard
|
||
title={post.title}
|
||
description={post.description}
|
||
category={post.category}
|
||
categoryColor={post.categoryColor}
|
||
date={post.date}
|
||
readTime={post.readTime}
|
||
imageUrl={post.imageUrl}
|
||
slug={post.slug}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
<!-- Пагинация -->
|
||
<BlogPagination currentPage={1} totalPages={3} />
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA-блок -->
|
||
<section class="blog-cta">
|
||
<div class="site-container">
|
||
<div class="cta-content">
|
||
<h2 class="cta-title">Нужна консультация юриста?</h2>
|
||
<p class="cta-text">
|
||
Не нашли ответ на свой вопрос? Запишитесь на бесплатную консультацию — мы поможем разобраться в вашей ситуации
|
||
</p>
|
||
<button class="cta-button" id="consultation-btn" data-modal-target="consultation-modal">
|
||
Записаться на консультацию
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Layout>
|
||
|
||
<style>
|
||
.blog-grid-section {
|
||
padding: 3rem 0 0;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.blog-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
}
|
||
|
||
/* ===== CTA ===== */
|
||
.blog-cta {
|
||
padding: 5rem 0;
|
||
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.blog-cta::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -30%;
|
||
left: -10%;
|
||
width: 500px;
|
||
height: 500px;
|
||
background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.cta-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
text-align: center;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.cta-title {
|
||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
margin: 0 0 1rem;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.cta-text {
|
||
color: rgba(255, 255, 255, 0.75);
|
||
font-size: 1.1rem;
|
||
line-height: 1.6;
|
||
margin: 0 0 2rem;
|
||
}
|
||
|
||
.cta-button {
|
||
background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
|
||
color: #1e293b;
|
||
border: none;
|
||
padding: 1rem 2.5rem;
|
||
border-radius: 0.75rem;
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
|
||
}
|
||
|
||
.cta-button:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
|
||
}
|
||
|
||
/* ===== RESPONSIVE ===== */
|
||
@media (max-width: 1024px) {
|
||
.blog-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.blog-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.blog-cta {
|
||
padding: 3rem 0;
|
||
}
|
||
}
|
||
</style>
|