Создание страницы блога
This commit is contained in:
Web-serfer
parent
f84c24e91f
commit
ed93c5646a
10 changed files with 1058 additions and 34 deletions
|
|
@ -107,7 +107,7 @@ import { SITE_URL } from '@constants';
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
padding: 8rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ import { SITE_URL } from '@constants';
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
padding: 8rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
|
|
|
|||
147
frontend/src/pages/blog/index.astro
Normal file
147
frontend/src/pages/blog/index.astro
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
---
|
||||
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>
|
||||
|
|
@ -165,7 +165,7 @@ const isAuthorized = false; // Измените на true, чтобы увиде
|
|||
</div>
|
||||
<h3 class="lock-title">Форма доступна только клиентам</h3>
|
||||
<p class="lock-text">Чтобы отправить сообщение напрямую юристу, пожалуйста, авторизуйтесь в личном кабинете.</p>
|
||||
<a href="/login" class="auth-button">Войти в кабинет</a>
|
||||
<a href="/auth/sign-in" class="auth-button">Войти в кабинет</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,17 +12,25 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
|
|||
canonicalLink={`${SITE_URL}/reviews`}
|
||||
>
|
||||
<section class="reviews-page">
|
||||
<div class="site-container">
|
||||
<!-- Заголовок страницы -->
|
||||
<div class="page-header">
|
||||
<span class="subtitle animate-on-scroll" data-animation="fade-up">Отзывы клиентов</span>
|
||||
<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
Реальные истории водителей из Сургута
|
||||
</h1>
|
||||
<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||||
Узнайте, как мы помогли нашим клиентам решить их проблемы с автоспорами
|
||||
</p>
|
||||
<!-- Hero-секция -->
|
||||
<section class="reviews-hero">
|
||||
<div class="site-container">
|
||||
<div class="hero-content">
|
||||
<div class="badge animate-on-scroll" data-animation="fade-up">
|
||||
<span class="status-dot"></span>
|
||||
ОТЗЫВЫ КЛИЕНТОВ
|
||||
</div>
|
||||
<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
Реальные истории <span class="text-gold">водителей</span> из Сургута
|
||||
</h1>
|
||||
<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||||
Узнайте, как мы помогли нашим клиентам решить их проблемы с автоспорами
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="site-container">
|
||||
|
||||
<!-- Блок статистики голосования -->
|
||||
<VotingSummary
|
||||
|
|
@ -65,45 +73,88 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
|
|||
|
||||
<style>
|
||||
.reviews-page {
|
||||
padding: 8rem 0 4rem 0;
|
||||
padding: 0;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
/* ===== HERO ===== */
|
||||
.reviews-hero {
|
||||
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
|
||||
padding: 8rem 0 4rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: inline-block;
|
||||
color: #d4af37;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 1rem;
|
||||
.reviews-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
background-color: rgba(234, 194, 110, 0.15);
|
||||
border: 1px solid rgba(234, 194, 110, 0.3);
|
||||
color: #eac26e;
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #22c55e;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
|
||||
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
|
||||
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #1e293b;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
margin: 0 0 1rem 0;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
margin: 0 0 1.5rem;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.text-gold { color: #eac26e; }
|
||||
|
||||
.description {
|
||||
color: #64748b;
|
||||
font-size: 1.125rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ===== GRID ===== */
|
||||
|
||||
.reviews-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
|
|
@ -180,6 +231,10 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
|
|||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.reviews-hero {
|
||||
padding: 7rem 0 3rem;
|
||||
}
|
||||
|
||||
.reviews-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue