From ed93c5646ae691d56584e6ad27834cf5d1530829 Mon Sep 17 00:00:00 2001 From: Web-serfer Date: Mon, 6 Apr 2026 21:28:31 +0500 Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B=20?= =?UTF-8?q?=D0=B1=D0=BB=D0=BE=D0=B3=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/blog/BlogCard.astro | 225 ++++++++++++++++++ .../src/components/blog/BlogCategories.astro | 127 ++++++++++ frontend/src/components/blog/BlogHero.astro | 178 ++++++++++++++ .../src/components/blog/BlogPagination.astro | 187 +++++++++++++++ frontend/src/data/blogData.ts | 105 ++++++++ frontend/src/pages/auth/sig-up.astro | 2 +- frontend/src/pages/auth/sign-in.astro | 2 +- frontend/src/pages/blog/index.astro | 147 ++++++++++++ frontend/src/pages/contacts.astro | 2 +- frontend/src/pages/reviews.astro | 117 ++++++--- 10 files changed, 1058 insertions(+), 34 deletions(-) create mode 100644 frontend/src/components/blog/BlogCard.astro create mode 100644 frontend/src/components/blog/BlogCategories.astro create mode 100644 frontend/src/components/blog/BlogHero.astro create mode 100644 frontend/src/components/blog/BlogPagination.astro create mode 100644 frontend/src/data/blogData.ts create mode 100644 frontend/src/pages/blog/index.astro diff --git a/frontend/src/components/blog/BlogCard.astro b/frontend/src/components/blog/BlogCard.astro new file mode 100644 index 0000000..682cfb6 --- /dev/null +++ b/frontend/src/components/blog/BlogCard.astro @@ -0,0 +1,225 @@ +--- +export interface Props { + title: string; + description: string; + category: string; + categoryColor?: string; + date: string; + readTime: string; + imageUrl?: string; + slug?: string; +} + +const { + title, + description, + category, + categoryColor = 'bg-gold', + date, + readTime, + imageUrl = '/images/blog/default.avif', + slug = '#' +} = Astro.props; + +// Форматируем дату +const formatDate = (dateStr: string) => { + const d = new Date(dateStr); + return d.toLocaleDateString('ru-RU', { + day: 'numeric', + month: 'long', + year: 'numeric' + }); +}; +--- + +
+ + +
+ {title} + {category} +
+ + +
+

{title}

+

{description}

+ +
+ + + + + + + + {formatDate(date)} + + + + + + + {readTime} + +
+
+ +
+ + diff --git a/frontend/src/components/blog/BlogCategories.astro b/frontend/src/components/blog/BlogCategories.astro new file mode 100644 index 0000000..339d435 --- /dev/null +++ b/frontend/src/components/blog/BlogCategories.astro @@ -0,0 +1,127 @@ +--- +export interface Props { + categories: string[]; + activeCategory?: string; +} + +const { categories, activeCategory = 'Все' } = Astro.props; +--- + +
+
+ {categories.map((cat) => ( + + ))} +
+
+ + + + diff --git a/frontend/src/components/blog/BlogHero.astro b/frontend/src/components/blog/BlogHero.astro new file mode 100644 index 0000000..bd9613f --- /dev/null +++ b/frontend/src/components/blog/BlogHero.astro @@ -0,0 +1,178 @@ +--- +const badgeText = "БЛОГ И СТАТЬИ"; +const titleWhite = "Полезные статьи"; +const titleGold = "для автовладельцев"; +const description = "Разбираем сложные юридические вопросы простым языком. Советы юриста по автоспорам, ДТП, ОСАГО и защите прав водителей."; +--- + +
+
+ +
+
+ + {badgeText} +
+ +

+ {titleWhite} +
+ {titleGold} +

+ +

{description}

+
+
+ + + + diff --git a/frontend/src/components/blog/BlogPagination.astro b/frontend/src/components/blog/BlogPagination.astro new file mode 100644 index 0000000..db13263 --- /dev/null +++ b/frontend/src/components/blog/BlogPagination.astro @@ -0,0 +1,187 @@ +--- +export interface Props { + currentPage: number; + totalPages: number; +} + +const { currentPage, totalPages } = Astro.props; + +const getPages = () => { + const pages: (number | string)[] = []; + for (let i = 1; i <= totalPages; i++) { + if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) { + pages.push(i); + } else if (pages[pages.length - 1] !== '...') { + pages.push('...'); + } + } + return pages; +}; +--- + + + + diff --git a/frontend/src/data/blogData.ts b/frontend/src/data/blogData.ts new file mode 100644 index 0000000..432eab8 --- /dev/null +++ b/frontend/src/data/blogData.ts @@ -0,0 +1,105 @@ +export interface BlogPost { + title: string; + description: string; + category: string; + categoryColor: string; + date: string; + readTime: string; + imageUrl: string; + slug: string; +} + +export const blogPosts: BlogPost[] = [ + { + title: "Что делать при ДТП: пошаговая инструкция 2024", + description: "Подробный разбор действий после дорожно-транспортного происшествия. Как оформить ДТП, какие документы собрать и куда обращаться за компенсацией.", + category: "ДТП", + categoryColor: "bg-red", + date: "2024-03-20", + readTime: "8 мин", + imageUrl: "/images/blog/dtp-instruction.avif", + slug: "/blog/dtp-instruction-2024" + }, + { + title: "Как оспорить лишение водительских прав", + description: "Разбираем основные основания для лишения прав и способы защиты в суде. Сроки обжалования, необходимые документы и типичные ошибки водителей.", + category: "Лишение прав", + categoryColor: "bg-blue", + date: "2024-03-15", + readTime: "12 мин", + imageUrl: "/images/blog/license-appeal.avif", + slug: "/blog/license-appeal" + }, + { + title: "ОСАГО: как получить полную выплату от страховой", + description: "Почему страховые компании занижают выплаты и как добиться справедливой компенсации. Независимая экспертиза и судебная практика.", + category: "ОСАГО", + categoryColor: "bg-gold", + date: "2024-03-10", + readTime: "10 мин", + imageUrl: "/images/blog/osago-payout.avif", + slug: "/blog/osago-full-payout" + }, + { + title: "Спор с ГИБДД: как обжаловать штраф с камеры", + description: "Камеры фотофиксации часто ошибаются. Рассказываем, как правильно обжаловать штраф, полученные с автоматических комплексов.", + category: "Штрафы", + categoryColor: "bg-green", + date: "2024-03-05", + readTime: "7 мин", + imageUrl: "/images/blog/camera-fine.avif", + slug: "/blog/camera-fine-appeal" + }, + { + title: "Возврат прав после лишения: новая процедура", + description: "Изменения в законодательстве 2024 года. Новый порядок возврата водительского удостоверения после окончания срока лишения.", + category: "Лишение прав", + categoryColor: "bg-blue", + date: "2024-02-28", + readTime: "9 мин", + imageUrl: "/images/blog/license-return.avif", + slug: "/blog/license-return-2024" + }, + { + title: "Спор с автосалоном: как вернуть неисправный автомобиль", + description: "Права потребителя при покупке автомобиля с дефектами. Закон «О защите прав потребителей» и судебная практика в Сургуте.", + category: "Автосалоны", + categoryColor: "bg-gold", + date: "2024-02-20", + readTime: "11 мин", + imageUrl: "/images/blog/car-dealer-dispute.avif", + slug: "/blog/car-dealer-dispute" + }, + { + title: "Независимая экспертиза после ДТП: зачем и когда нужна", + description: "Когда страховая занижает ущерб — поможет независимая оценка. Как выбрать эксперта, сколько стоит и как использовать в суде.", + category: "ДТП", + categoryColor: "bg-red", + date: "2024-02-15", + readTime: "6 мин", + imageUrl: "/images/blog/independent-expertise.avif", + slug: "/blog/independent-expertise" + }, + { + title: "Что делать, если виновник ДТП не имеет ОСАГО", + description: "Как получить компенсацию, если у виновника аварии нет полиса ОСАГО. Судебный иск, взыскание ущерба и практические советы юриста.", + category: "ОСАГО", + categoryColor: "bg-gold", + date: "2024-02-08", + readTime: "8 мин", + imageUrl: "/images/blog/no-osago.avif", + slug: "/blog/no-osago-at-fault" + }, + { + title: "Обжалование протокола ГИБДД: типичные ошибки инспекторов", + description: "Какие нарушения допускают сотрудники ГИБДД при составлении протокола и как использовать это в свою пользу при обжаловании.", + category: "Штрафы", + categoryColor: "bg-green", + date: "2024-02-01", + readTime: "10 мин", + imageUrl: "/images/blog/protocol-errors.avif", + slug: "/blog/protocol-errors" + } +]; + +export const categories = ['Все', 'ДТП', 'ОСАГО', 'Лишение прав', 'Штрафы', 'Автосалоны']; diff --git a/frontend/src/pages/auth/sig-up.astro b/frontend/src/pages/auth/sig-up.astro index 1742c09..6b5aff0 100644 --- a/frontend/src/pages/auth/sig-up.astro +++ b/frontend/src/pages/auth/sig-up.astro @@ -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 { diff --git a/frontend/src/pages/auth/sign-in.astro b/frontend/src/pages/auth/sign-in.astro index a7502b5..cae62ee 100644 --- a/frontend/src/pages/auth/sign-in.astro +++ b/frontend/src/pages/auth/sign-in.astro @@ -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 { diff --git a/frontend/src/pages/blog/index.astro b/frontend/src/pages/blog/index.astro new file mode 100644 index 0000000..df0878d --- /dev/null +++ b/frontend/src/pages/blog/index.astro @@ -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'; +--- + + + + + + +
+
+
+ {blogPosts.map((post) => ( + + ))} +
+ + + +
+
+ + +
+
+
+

Нужна консультация юриста?

+

+ Не нашли ответ на свой вопрос? Запишитесь на бесплатную консультацию — мы поможем разобраться в вашей ситуации +

+ +
+
+
+ + + diff --git a/frontend/src/pages/contacts.astro b/frontend/src/pages/contacts.astro index 7a2d0ca..e5677a3 100644 --- a/frontend/src/pages/contacts.astro +++ b/frontend/src/pages/contacts.astro @@ -165,7 +165,7 @@ const isAuthorized = false; // Измените на true, чтобы увиде

Форма доступна только клиентам

Чтобы отправить сообщение напрямую юристу, пожалуйста, авторизуйтесь в личном кабинете.

- Войти в кабинет + Войти в кабинет )} diff --git a/frontend/src/pages/reviews.astro b/frontend/src/pages/reviews.astro index 5f2aaea..87d968a 100644 --- a/frontend/src/pages/reviews.astro +++ b/frontend/src/pages/reviews.astro @@ -12,17 +12,25 @@ import { reviewsData, votingSummary } from '@data/reviewsData'; canonicalLink={`${SITE_URL}/reviews`} >
-
- -
- Отзывы клиентов -

- Реальные истории водителей из Сургута -

-

- Узнайте, как мы помогли нашим клиентам решить их проблемы с автоспорами -

+ +
+
+
+
+ + ОТЗЫВЫ КЛИЕНТОВ +
+

+ Реальные истории водителей из Сургута +

+

+ Узнайте, как мы помогли нашим клиентам решить их проблемы с автоспорами +

+
+
+ +
.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;