redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Создана страница - Документы

Browse source
This commit is contained in:
Web-serfer 2026-04-11 20:05:17 +05:00
parent b252ae3430
commit ed01ec28ed
9 changed files with 1839 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

310
frontend/src/pages/documents.astro Normal file
View file

@ -0,0 +1,310 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import DocCard from '@components/documents/DocCard.astro';
import DocCategories from '@components/documents/DocCategories.astro';
import Pagination from '@components/base/Pagination.astro';
import SearchDocumentsModal from '@components/documents/SearchDocumentsModal.astro';
import { documents, getCategories, filterByCategory, DOCUMENTS_PER_PAGE } from '@data/documents';
const url = new URL(Astro.request.url);
const categoryParam: string = url.searchParams.get('category') || 'Все';
const pageParam: string | null = url.searchParams.get('page');
const activeCategory = categoryParam;
const currentPage: number = pageParam ? parseInt(pageParam, 10) : 1;
const filteredDocs = filterByCategory(activeCategory);
const totalPages = Math.ceil(filteredDocs.length / DOCUMENTS_PER_PAGE);
const validPage = Math.max(1, Math.min(currentPage, totalPages));
const startIndex = (validPage - 1) * DOCUMENTS_PER_PAGE;
const endIndex = startIndex + DOCUMENTS_PER_PAGE;
const paginatedDocs = filteredDocs.slice(startIndex, endIndex);
const categories = getCategories();
---
<Layout
title="Документы для скачивания"
description="Скачайте необходимые документы: договоры, доверенности, памятки, шаблоны заявлений и другую полезную информацию"
canonicalLink={`${SITE_URL}/documents`}
breadcrumbs={[
{ label: 'Главная', href: '/' },
{ label: 'Документы' }
]}
>
<section class="documents-section">
<div class="site-container">
<!-- Заголовок секции -->
<div class="section-header">
<div class="subtitle-wrapper animate-on-scroll" data-animation="fade-up">
<div class="subtitle-line"></div>
<span class="subtitle">ДОКУМЕНТЫ</span>
<div class="subtitle-line"></div>
</div>
<div class="title-wrapper animate-on-scroll" data-animation="fade-up" data-delay="100">
<h1 class="title">
Документы для скачивания
</h1>
</div>
<p class="section-description animate-on-scroll" data-animation="fade-up" data-delay="150">
Здесь вы можете скачать все необходимые документы, договоры, памятки и шаблоны в удобном формате
</p>
</div>
<!-- Фильтры по категориям -->
<DocCategories categories={categories} activeCategory={activeCategory} />
<!-- Сетка документов -->
<div class="documents-grid" id="documents-grid">
{paginatedDocs.map((doc) => (
<DocCard
id={doc.id}
title={doc.title}
description={doc.description}
fileSize={doc.fileSize}
fileType={doc.fileType}
downloadUrl={doc.downloadUrl}
category={doc.category}
/>
))}
</div>
<!-- Пагинация -->
{totalPages > 1 && (
<Pagination
currentPage={validPage}
totalPages={totalPages}
baseUrl="/documents"
/>
)}
</div>
</section>
<SearchDocumentsModal />
</Layout>
<style>
:root {
--color-primary-docs: #0f172a;
--color-secondary-docs: #1e293b;
--color-accent-docs: #eac26e;
--color-accent-dark-docs: #ce9f40;
--color-light-docs: #ffffff;
--color-gray-docs: #94a3b8;
--color-card-bg-docs: rgba(255, 255, 255, 0.04);
--color-card-border-docs: rgba(255, 255, 255, 0.08);
--gradient-docs-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.documents-section {
padding: 6rem 1.5rem 4rem;
background: var(--gradient-docs-bg);
position: relative;
overflow: hidden;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
min-height: 100vh;
}
.documents-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-accent-docs), transparent);
opacity: 0.3;
}
.site-container {
max-width: var(--site-max-width, 1400px);
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Заголовок секции */
.section-header {
margin-bottom: 3rem;
text-align: center;
}
.subtitle-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}
.subtitle-line {
width: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-accent-docs), transparent);
}
.subtitle {
color: var(--color-accent-docs);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 4px;
}
.title-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.title {
color: var(--color-light-docs);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 800;
margin: 0;
line-height: 1.2;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-description {
color: var(--color-gray-docs);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
/* Сетка документов */
.documents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.25rem;
margin-bottom: 3rem;
}
/* Анимации при скроллинге */
.animate-on-scroll {
opacity: 0;
will-change: opacity, transform;
}
[data-animation="fade-up"] {
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Пагинация */
:global(.pagination) {
padding: 2rem 0 4rem;
}
/* Адаптивность */
@media (max-width: 1024px) {
.documents-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}
@media (max-width: 768px) {
.documents-section {
padding: 4rem 1rem 3rem;
}
.section-header {
margin-bottom: 2.5rem;
}
.title-wrapper {
flex-direction: column;
gap: 1rem;
}
.documents-grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
}
</style>
<script>
const setupAnimations = () => {
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target as HTMLElement;
const delay = parseInt(el.dataset.delay || '0');
setTimeout(() => {
el.classList.add('is-visible');
}, delay);
observer.unobserve(el);
}
});
}, observerOptions);
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
observer.observe(el);
});
};
const setupFilter = () => {
const buttons = document.querySelectorAll('.category-btn');
const cards = document.querySelectorAll('.doc-card');
buttons.forEach((btn) => {
btn.addEventListener('click', (e) => {
e.preventDefault();
const category = btn.getAttribute('data-category');
if (!category) return;
const url = new URL(window.location.href);
if (category === 'Все') {
url.searchParams.delete('category');
} else {
url.searchParams.set('category', category);
}
url.searchParams.set('page', '1');
window.location.href = url.toString();
});
});
};
setupAnimations();
setupFilter();
document.addEventListener('astro:after-swap', () => {
setupAnimations();
setupFilter();
});
</script>

135
frontend/src/pages/faq.astro
View file

@ -1,16 +1,133 @@
---
import Layout from '@layouts/Layout.astro';
import { SITE_URL } from '@constants';
import Faq from '@components/faq/FaqItem.astro';
import Pagination from '@components/base/Pagination.astro';
const ITEMS_PER_PAGE = 10;
const allFaqItems = [
{
question: "Сколько стоит первичная консультация?",
answer: "Первичная консультация проводится бесплатно. Мы оценим вашу ситуацию, расскажем о перспективах дела и предложим оптимальную стратегию защиты. Это ни к чему вас не обязывает."
},
{
question: "Какие документы нужны для начала работы?",
answer: "Для анализа ситуации потребуются: протокол об административном правонарушении, постановление по делу, материалы ДТП (если есть), страховой полис ОСАГО/КАСКО, а также любые другие документы, относящиеся к вашему делу."
},
{
question: "Каковы шансы на успех моего дела?",
answer: "После изучения документов мы честно расскажем о реальных перспективах. По статистике, около 98% дел завершаются успешно. Если видим, что шансов нет — так и скажем, чтобы вы не тратили время и деньги."
},
{
question: "Сколько времени занимает рассмотрение дела?",
answer: "Сроки зависят от сложности: простые консультации и составление жалоб — 1-3 дня, представление интересов в суде — от 2 недель до 2 месяцев. Точные сроки назовем после анализа вашей ситуации."
},
{
question: "Работаете ли вы с делами, где уже вынесено решение?",
answer: "Да, мы помогаем обжаловать постановления и решения судов. Срок на обжалование обычно составляет 10 дней с момента вынесения постановления, но есть возможности восстановления срока и в более поздний период."
},
{
question: "Можно ли решить вопрос без суда?",
answer: "Во многих случаях — да. Мы ведём переговоры со страховыми компаниями, ГИБДД, автосалонами и другими участниками. Досудебное урегулирование часто быстрее и выгоднее для клиента."
},
{
question: "Как записаться на консультацию?",
answer: "Записаться можно через форму на сайте, по телефону или через мессенджеры. Мы свяжемся с вами в ближайшее время и согласуем удобное время для консультации."
},
{
question: "Какие гарантии вы предоставляете?",
answer: "Мы гарантируем конфиденциальность, профессиональный подход и честную оценку перспектив дела. Результат зависит от конкретной ситуации, но мы делаем всё возможное для защиты ваших интересов."
},
{
question: "Сколько стоят ваши услуги?",
answer: "Стоимость зависит от сложности дела. Первичная консультация бесплатна, после неё мы назовём точную цену. Возможна оплата в рассрочку."
},
{
question: "Можно ли получить консультацию онлайн?",
answer: "Да, мы проводим консультации по видеосвязи (WhatsApp, Telegram, Zoom). Это удобно, если вы находитесь в другом городе или не можете приехать лично."
},
{
question: "Что делать, если я пропустил срок обжалования?",
answer: "Срок можно восстановить при наличии уважительных причин: болезнь, командировка, неполучение копии постановления. Мы поможем составить ходатайство о восстановлении срока."
},
{
question: "Нужно ли лично присутствовать на суде?",
answer: "Не всегда. По многим делам мы можем представлять ваши интересы без вашего присутствия. Однако в некоторых случаях ваше участие может быть полезно."
},
{
question: "Вы работаете только в Сургуте?",
answer: "Основная практика в Сургуте и ХМАО, но мы можем консультировать клиентов из других регионов. Представительство в суде зависит от конкретного дела."
},
{
question: "Как быстро вы сможете взяться за моё дело?",
answer: "Обычно мы готовы приступить к работе в день обращения или на следующий день. Срочные случаи обсуждаются индивидуально."
},
{
question: "Можете ли вы помочь с лишением прав за пьянку?",
answer: "Да, мы берёмся за такие дела. Всё зависит от обстоятельств и доказательной базы. На бесплатной консультации мы оценим шансы и предложим стратегию."
},
{
question: "Что входит в пакет «под ключ»?",
answer: "В пакет «под ключ» входит: сбор документов, подготовка заявлений и жалоб, представительство в суде, взаимодействие с госорганами и полное сопровождение дела."
},
{
question: "Можно ли оплатить услуги после выигрыша дела?",
answer: "По некоторым категориям дел возможна оплата по результату. Это обсуждается индивидуально на консультации."
},
{
question: "Какие ещё услуги вы предоставляете?",
answer: "Помимо автоюристов, мы помогаем со спорами со страховыми (ОСАГО/КАСКО), взысканием ущерба при ДТП, обжалованием штрафов, защитой прав потребителей при покупке авто."
}
];
const url = new URL(Astro.request.url);
const pageParam = url.searchParams.get('page');
const currentPage = pageParam ? parseInt(pageParam, 10) : 1;
const totalPages = Math.ceil(allFaqItems.length / ITEMS_PER_PAGE);
const validPage = Math.max(1, Math.min(currentPage, totalPages));
const startIndex = (validPage - 1) * ITEMS_PER_PAGE;
const endIndex = startIndex + ITEMS_PER_PAGE;
const currentFaqItems = allFaqItems.slice(startIndex, endIndex);
---
<Layout
title="Частые вопросы (FAQ)"
description="Ответы на частые вопросы по возврату водительских прав, спорам со страховыми, ДТП и другим юридическим услугам для автовладельцев в Сургуте."
canonicalLink={`${SITE_URL}/faq`}
breadcrumbs={[
{ label: 'Главная', href: '/' },
{ label: 'Частые вопросы' }
]}
title="Частые вопросы (FAQ)"
description="Ответы на частые вопросы по возврату водительских прав, спорам со страховыми, ДТП и другим юридическим услугам для автовладельцев в Сургуте."
canonicalLink={`${SITE_URL}/faq`}
breadcrumbs={[
{ label: 'Главная', href: '/' },
{ label: 'Частые вопросы' }
]}
>
<h1>FAQ</h1>
</Layout>
<section class="faq-page-section">
<Faq
sectionSubtitle="ОТВЕТЫ НА ВОПРОСЫ"
sectionTitle="Часто задаваемые вопросы"
faqItems={currentFaqItems}
/>
{totalPages > 1 && (
<div class="site-container">
<Pagination
currentPage={validPage}
totalPages={totalPages}
baseUrl="/faq"
/>
</div>
)}
</section>
</Layout>
<style>
.faq-page-section {
background: linear-gradient(135deg, #0a2540 0%, #1e3050 100%);
}
.faq-page-section :global(.pagination) {
padding-top: 2rem;
padding-bottom: 4rem;
}
</style>