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

frontend/src/components/base/Pagination.astro

@@ -14,7 +14,10 @@ const {
 } = Astro.props as PaginationProps;
 
 const getPageUrl = (page: number) => {
-    if (page === 1) return baseUrl;
+    if (baseUrl === '/documents' || baseUrl === '/faq') {
+        if (page === 1) return baseUrl;
+        return `${baseUrl}?page=${page}`;
+    }
     return `${baseUrl}/page/${page}`;
 };
 

frontend/src/components/documents/DocCard.astro

@@ -0,0 +1,217 @@
+---
+interface Props {
+    id: string;
+    title: string;
+    description: string;
+    fileSize: string;
+    fileType: 'pdf' | 'docx' | 'xlsx' | 'zip';
+    downloadUrl: string;
+    category: string;
+}
+
+const {
+    id,
+    title,
+    description,
+    fileSize,
+    fileType,
+    downloadUrl,
+    category
+} = Astro.props as Props;
+
+const fileTypeIcons: Record<string, string> = {
+    pdf: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" fill="#ef4444" stroke="#dc2626" stroke-width="1.5"/>
+        <path d="M14 2v6h6M9 13h6M9 17h6M9 9h2" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/>
+    </svg>`,
+    docx: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" fill="#3b82f6" stroke="#2563eb" stroke-width="1.5"/>
+        <path d="M14 2v6h6M9 13h6M9 17h4" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/>
+    </svg>`,
+    xlsx: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" fill="#10b981" stroke="#059669" stroke-width="1.5"/>
+        <path d="M14 2v6h6M10 12l4 4M14 12l-4 4" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/>
+    </svg>`,
+    zip: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" fill="#f59e0b" stroke="#d97706" stroke-width="1.5"/>
+        <path d="M14 2v6h6M12 10v4M10 14h4M12 14v4" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"/>
+    </svg>`
+};
+---
+
+<article class="doc-card" data-category={category} data-doc-id={id}>
+    <div class="doc-card-header">
+        <div class="file-icon" set:html={fileTypeIcons[fileType]} />
+        <div class="doc-info">
+            <h3 class="doc-title">{title}</h3>
+            <p class="doc-description">{description}</p>
+        </div>
+    </div>
+    <div class="doc-card-footer">
+        <div class="doc-meta">
+            <span class="doc-category">{category}</span>
+            <span class="doc-type">{fileType.toUpperCase()}</span>
+            <span class="doc-size">{fileSize}</span>
+        </div>
+        <a
+            href={downloadUrl}
+            class="download-btn"
+            download
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 4v12m0 0l-4-4m4 4l4-4M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            <span>Скачать</span>
+        </a>
+    </div>
+</article>
+
+<style>
+    .doc-card {
+        background: rgba(255, 255, 255, 0.04);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 16px;
+        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1.25rem;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .doc-card:hover {
+        border-color: rgba(234, 194, 110, 0.3);
+        box-shadow: 0 0 30px rgba(234, 194, 110, 0.15);
+        transform: translateY(-4px);
+    }
+
+    .doc-card-header {
+        display: flex;
+        gap: 1rem;
+        align-items: flex-start;
+    }
+
+    .file-icon {
+        flex-shrink: 0;
+        width: 48px;
+        height: 48px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    .file-icon svg {
+        width: 100%;
+        height: 100%;
+    }
+
+    .doc-info {
+        flex: 1;
+    }
+
+    .doc-title {
+        color: #ffffff;
+        font-size: 1.05rem;
+        font-weight: 600;
+        margin: 0 0 0.5rem 0;
+        line-height: 1.4;
+    }
+
+    .doc-description {
+        color: #94a3b8;
+        font-size: 0.85rem;
+        line-height: 1.5;
+        margin: 0;
+    }
+
+    .doc-card-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-top: 1rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    .doc-meta {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+    }
+
+    .doc-category {
+        color: #eac26e;
+        font-size: 0.7rem;
+        font-weight: 600;
+        padding: 0.2rem 0.5rem;
+        background: rgba(234, 194, 110, 0.1);
+        border-radius: 4px;
+    }
+
+    .doc-type {
+        color: #94a3b8;
+        font-size: 0.7rem;
+        font-weight: 700;
+        text-transform: uppercase;
+    }
+
+    .doc-size {
+        color: #64748b;
+        font-size: 0.8rem;
+    }
+
+    .download-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.625rem 1.25rem;
+        background: linear-gradient(135deg, #eac26e 0%, #ce9f40 100%);
+        color: #0f172a;
+        font-size: 0.85rem;
+        font-weight: 600;
+        text-decoration: none;
+        border-radius: 8px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        white-space: nowrap;
+    }
+
+    .download-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 20px rgba(234, 194, 110, 0.4);
+    }
+
+    .download-btn svg {
+        width: 16px;
+        height: 16px;
+    }
+
+    @media (max-width: 768px) {
+        .doc-card {
+            padding: 1.25rem;
+        }
+
+        .doc-card-header {
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+
+        .doc-card-footer {
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .download-btn {
+            width: 100%;
+            justify-content: center;
+        }
+
+        .doc-meta {
+            justify-content: center;
+        }
+    }
+</style>

frontend/src/components/documents/DocCategories.astro

@@ -0,0 +1,126 @@
+---
+interface Props {
+    categories: string[];
+    activeCategory: string;
+    showSearch?: boolean;
+}
+
+const { categories, activeCategory, showSearch = true } = Astro.props as Props;
+---
+
+<nav class="doc-categories">
+    <div class="site-container">
+        <div class="categories-inner animate-on-scroll" data-animation="fade-up">
+            <div class="categories-list">
+                {categories.map((category: string) => (
+                    <button
+                        class={`category-btn ${category === activeCategory ? 'active' : ''}`}
+                        data-category={category}
+                    >
+                        {category}
+                    </button>
+                ))}
+            </div>
+
+            {showSearch && (
+                <button class="search-icon-btn" id="open-search-btn" aria-label="Поиск документов">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                </button>
+            )}
+        </div>
+    </div>
+</nav>
+
+<style>
+    .doc-categories {
+        padding: 2rem 0;
+        background: rgba(255, 255, 255, 0.02);
+    }
+
+    .categories-inner {
+        max-width: var(--site-max-width, 1400px);
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+        padding: 0 1.5rem;
+    }
+
+    .categories-list {
+        display: contents;
+    }
+
+    .category-btn {
+        padding: 0.6rem 1.25rem;
+        border: 2px solid rgba(255, 255, 255, 0.1);
+        border-radius: 2rem;
+        background: rgba(255, 255, 255, 0.03);
+        color: #94a3b8;
+        font-size: 0.875rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        white-space: nowrap;
+    }
+
+    .category-btn:hover {
+        border-color: rgba(234, 194, 110, 0.3);
+        color: #eac26e;
+        transform: translateY(-2px);
+    }
+
+    .category-btn.active {
+        background: linear-gradient(135deg, #eac26e 0%, #ce9f40 100%);
+        border-color: #eac26e;
+        color: #0f172a;
+        box-shadow: 0 4px 12px rgba(234, 194, 110, 0.3);
+    }
+
+    .search-icon-btn {
+        background: rgba(255, 255, 255, 0.05);
+        border: 2px solid rgba(234, 194, 110, 0.3);
+        color: #eac26e;
+        width: 42px;
+        height: 42px;
+        border-radius: 2rem;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .search-icon-btn:hover {
+        background: rgba(234, 194, 110, 0.1);
+        border-color: #eac26e;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(234, 194, 110, 0.3);
+    }
+
+    @media (max-width: 768px) {
+        .category-btn {
+            padding: 0.5rem 1rem;
+            font-size: 0.8rem;
+        }
+    }
+</style>
+
+<script>
+    function initSearch() {
+        const searchBtn = document.getElementById('open-search-btn');
+        if (searchBtn) {
+            searchBtn.addEventListener('click', () => {
+                window.dispatchEvent(new CustomEvent('open-modal', { detail: 'search-modal' }));
+            });
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', initSearch);
+    document.addEventListener('astro:page-load', initSearch);
+</script>

frontend/src/components/documents/SearchDocumentsModal.astro

@@ -0,0 +1,409 @@
+---
+import { documents } from '@data/documents';
+
+const searchData = documents.map(doc => ({
+    title: doc.title,
+    description: doc.description,
+    downloadUrl: doc.downloadUrl,
+    category: doc.category,
+    fileType: doc.fileType,
+    fileSize: doc.fileSize,
+    tags: doc.tags?.join(', ') || ''
+}));
+
+const title = 'Поиск документов';
+const postsJson = JSON.stringify(searchData);
+---
+
+<div id="search-modal" class="modal-overlay" aria-hidden="true">
+    <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="search-modal-title">
+        <button class="modal-close" aria-label="Закрыть" id="search-modal-close-btn">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+        </button>
+
+        <div class="modal-content">
+            <h2 id="search-modal-title" class="modal-title">{title}</h2>
+            <p class="modal-description">
+                Найдите нужный документ по названию, описанию или категории
+            </p>
+
+            <div class="search-form">
+                <div class="search-input-wrapper">
+                    <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="11" cy="11" r="8"></circle>
+                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                    <input
+                        type="text"
+                        id="search-input"
+                        class="search-input"
+                        placeholder="Например: договор, доверенность, ДТП..."
+                        autocomplete="off"
+                    />
+                </div>
+            </div>
+
+            <!-- Контейнер для динамических результатов -->
+            <div class="search-results" id="search-results">
+            </div>
+        </div>
+    </div>
+</div>
+
+<script define:vars={{ postsJson }}>
+    (function() {
+        const modal = document.getElementById('search-modal');
+        const closeBtn = document.getElementById('search-modal-close-btn');
+        const searchInput = document.getElementById('search-input');
+        const resultsContainer = document.getElementById('search-results');
+        const docs = JSON.parse(postsJson);
+
+        if (!modal || !searchInput || !resultsContainer) return;
+
+        function openModal() {
+            modal.setAttribute('aria-hidden', 'false');
+            modal.classList.add('active');
+            document.body.style.overflow = 'hidden';
+            setTimeout(() => searchInput.focus(), 200);
+        }
+
+        function closeModal() {
+            modal.classList.remove('active');
+            modal.setAttribute('aria-hidden', 'true');
+            document.body.style.overflow = '';
+            searchInput.value = '';
+            resultsContainer.innerHTML = '';
+        }
+
+        function getFileTypeIcon(fileType) {
+            const icons = {
+                pdf: '📄',
+                docx: '📝',
+                xlsx: '📊',
+                zip: '📦'
+            };
+            return icons[fileType] || '📄';
+        }
+
+        function handleSearch(query) {
+            const trimmed = query.trim().toLowerCase();
+
+            if (trimmed.length < 2) {
+                resultsContainer.innerHTML = '';
+                return;
+            }
+
+            const filtered = docs.filter(doc =>
+                doc.title.toLowerCase().includes(trimmed) ||
+                doc.description.toLowerCase().includes(trimmed) ||
+                doc.category.toLowerCase().includes(trimmed) ||
+                doc.tags.toLowerCase().includes(trimmed)
+            );
+
+            if (filtered.length === 0) {
+                resultsContainer.innerHTML = `
+                    <div class="no-results">
+                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" style="margin-bottom: 1rem; opacity: 0.5;">
+                            <circle cx="11" cy="11" r="8"></circle>
+                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                        </svg>
+                        <p>По запросу <strong>"${query}"</strong> ничего не найдено</p>
+                    </div>`;
+                return;
+            }
+
+            resultsContainer.innerHTML = filtered.map(doc => `
+                <a href="${doc.downloadUrl}" class="search-result-item" download target="_blank" rel="noopener noreferrer">
+                    <div class="result-header">
+                        <span class="result-icon">${getFileTypeIcon(doc.fileType)}</span>
+                        <h4 class="result-title">${doc.title}</h4>
+                    </div>
+                    <p class="result-description">${doc.description}</p>
+                    <div class="result-footer">
+                        <span class="result-meta">
+                            <span class="result-category">${doc.category}</span>
+                            <span class="result-type">${doc.fileType.toUpperCase()}</span>
+                            <span class="result-size">${doc.fileSize}</span>
+                        </span>
+                        <span class="result-arrow">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M12 4v12m0 0l-4-4m4 4l4-4M4 18h16"/>
+                            </svg>
+                        </span>
+                    </div>
+                </a>
+            `).join('');
+        }
+
+        let timeout;
+        searchInput.addEventListener('input', (e) => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => handleSearch(e.target.value), 200);
+        });
+
+        window.addEventListener('open-modal', (e) => {
+            console.log('open-modal event received:', e.detail);
+            if (e.detail === 'search-modal') {
+                console.log('Opening modal...');
+                openModal();
+            }
+        });
+
+        closeBtn.addEventListener('click', closeModal);
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) closeModal();
+        });
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && modal.classList.contains('active')) closeModal();
+        });
+    })();
+</script>
+
+<style is:global>
+    .modal-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(10, 25, 41, 0.85);
+        backdrop-filter: blur(8px);
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        z-index: 9999;
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        padding: 2rem 1rem;
+    }
+
+    .modal-overlay.active { opacity: 1; visibility: visible; }
+
+    .modal-container {
+        background: #ffffff;
+        border-radius: 24px;
+        width: 100%;
+        max-width: 720px;
+        max-height: 85vh;
+        box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.4);
+        position: relative;
+        transform: translateY(-20px);
+        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .modal-overlay.active .modal-container { transform: translateY(0); }
+
+    .modal-close {
+        position: absolute;
+        top: 1.25rem;
+        right: 1.25rem;
+        background: #f1f5f9;
+        border: none;
+        cursor: pointer;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #64748b;
+        z-index: 10;
+        transition: all 0.2s ease;
+    }
+
+    .modal-close:hover { background: #e2e8f0; color: #0f172a; transform: rotate(90deg); }
+
+    .modal-content {
+        padding: 3rem 2.5rem 2rem;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .modal-title {
+        font-size: 1.85rem;
+        font-weight: 800;
+        color: #0f172a;
+        margin: 0 0 0.5rem;
+        letter-spacing: -0.02em;
+    }
+
+    .modal-description { color: #64748b; margin-bottom: 2rem; font-size: 1.05rem; }
+
+    .search-input-wrapper { position: relative; margin-bottom: 2rem; }
+
+    .search-icon {
+        position: absolute;
+        left: 1.25rem;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #d4af37;
+    }
+
+    .search-input {
+        width: 100%;
+        padding: 1.1rem 1.1rem 1.1rem 3.75rem;
+        border: 2px solid #e2e8f0;
+        border-radius: 16px;
+        font-size: 1.15rem;
+        transition: all 0.3s ease;
+        outline: none;
+        background: #f8fafc;
+    }
+
+    .search-input:focus {
+        border-color: #d4af37;
+        background: #fff;
+        box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
+    }
+
+    .search-results {
+        overflow-y: auto;
+        flex: 1;
+        padding-right: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .search-result-item {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        padding: 20px;
+        border-radius: 12px;
+        text-decoration: none;
+        background: #ffffff;
+        border: 1px solid #eef2f6;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+    }
+
+    .search-result-item::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        background: linear-gradient(180deg, #d4af37 0%, #f4d03f 100%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        border-radius: 4px 0 0 4px;
+    }
+
+    .search-result-item:hover {
+        border-color: #cbd5e1;
+        transform: translateX(4px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+
+    .search-result-item:hover::before {
+        opacity: 1;
+    }
+
+    .result-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .result-icon {
+        font-size: 1.5rem;
+    }
+
+    .result-title {
+        font-size: 1.15rem;
+        font-weight: 700;
+        color: #0f172a;
+        margin: 0;
+        line-height: 1.4;
+    }
+
+    .result-description {
+        font-size: 0.9rem;
+        color: #64748b;
+        margin: 0;
+        line-height: 1.6;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        padding-right: 28px;
+    }
+
+    .result-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 8px;
+    }
+
+    .result-meta {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .result-category {
+        font-size: 0.75rem;
+        color: #94a3b8;
+        font-weight: 600;
+        padding: 0.2rem 0.5rem;
+        background: #f1f5f9;
+        border-radius: 4px;
+    }
+
+    .result-type {
+        font-size: 0.7rem;
+        color: #d4af37;
+        font-weight: 700;
+        text-transform: uppercase;
+        padding: 0.2rem 0.4rem;
+        background: rgba(212, 175, 55, 0.1);
+        border-radius: 4px;
+    }
+
+    .result-size {
+        font-size: 0.8rem;
+        color: #94a3b8;
+    }
+
+    .result-arrow {
+        color: #cbd5e1;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .search-result-item:hover .result-arrow {
+        color: #d4af37;
+        transform: translateX(4px);
+    }
+
+    .no-results {
+        padding: 4rem 1rem;
+        text-align: center;
+        color: #64748b;
+        background: #f8fafc;
+        border-radius: 20px;
+        border: 2px dashed #e2e8f0;
+    }
+
+    .search-results::-webkit-scrollbar { width: 6px; }
+    .search-results::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
+
+    @media (max-width: 640px) {
+        .modal-content { padding: 2.5rem 1.5rem 1.5rem; }
+        .modal-title { font-size: 1.5rem; }
+        .search-result-item { padding: 16px; }
+        .result-title { font-size: 1.05rem; }
+        .result-description { padding-right: 0; -webkit-line-clamp: 1; }
+    }
+</style>

frontend/src/components/faq/FaqItem.astro

@@ -0,0 +1,447 @@
+---
+interface FaqItem {
+    question: string;
+    answer: string;
+}
+
+const {
+    sectionSubtitle = "ОТВЕТЫ НА ВОПРОСЫ",
+    sectionTitle = "Часто задаваемые вопросы",
+    faqItems = [
+        {
+            question: "Сколько стоит первичная консультация?",
+            answer: "Первичная консультация проводится бесплатно. Мы оценим вашу ситуацию, расскажем о перспективах дела и предложим оптимальную стратегию защиты. Это ни к чему вас не обязывает."
+        },
+        {
+            question: "Какие документы нужны для начала работы?",
+            answer: "Для анализа ситуации потребуются: протокол об административном правонарушении, постановление по делу, материалы ДТП (если есть), страховой полис ОСАГО/КАСКО, а также любые другие документы, относящиеся к вашему делу."
+        },
+        {
+            question: "Каковы шансы на успех моего дела?",
+            answer: "После изучения документов мы честно расскажем о реальных перспективах. По статистике, около 98% дел завершаются успешно. Если видим, что шансов нет — так и скажем, чтобы вы не тратили время и деньги."
+        },
+        {
+            question: "Сколько времени занимает рассмотрение дела?",
+            answer: "Сроки зависят от сложности: простые консультации и составление жалоб — 1-3 дня, представление интересов в суде — от 2 недель до 2 месяцев. Точные сроки назовем после анализа вашей ситуации."
+        },
+        {
+            question: "Работаете ли вы с делами, где уже вынесено решение?",
+            answer: "Да, мы помогаем обжаловать постановления и решения судов. Срок на обжалование обычно составляет 10 дней с момента вынесения постановления, но есть возможности восстановления срока и в более поздний период."
+        },
+        {
+            question: "Можно ли решить вопрос без суда?",
+            answer: "Во многих случаях — да. Мы ведём переговоры со страховыми компаниями, ГИБДД, автосалонами и другими участниками. Досудебное урегулирование часто быстрее и выгоднее для клиента."
+        }
+    ] as FaqItem[]
+} = Astro.props;
+---
+
+<section class="faq-section" id="faq">
+    <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">{sectionSubtitle}</span>
+                <div class="subtitle-line"></div>
+            </div>
+            <h2 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">{sectionTitle}</h2>
+            <p class="section-description animate-on-scroll" data-animation="fade-up" data-delay="150">
+                Собрали ответы на самые частые вопросы наших клиентов. Не нашли ответ? Позвоните — проконсультируем бесплатно
+            </p>
+        </div>
+
+        <!-- Аккордеон FAQ -->
+        <div class="faq-container">
+            {faqItems.map((item: FaqItem, index: number) => (
+                    <div class="faq-item animate-on-scroll" data-animation="fade-up" data-delay={index * 80 + 200}>
+                        <button class="faq-question" aria-expanded="false" data-faq-toggle>
+                            <span class="question-text">{item.question}</span>
+                            <span class="faq-icon">
+                            <svg class="icon-plus" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </span>
+                        </button>
+                        <div class="faq-answer" data-faq-content>
+                            <div class="answer-inner">
+                                <p class="answer-text">{item.answer}</p>
+                            </div>
+                        </div>
+                    </div>
+            ))}
+        </div>
+    </div>
+</section>
+
+<style>
+    :root {
+        --color-primary: #0a2540;
+        --color-primary-light: #1e3050;
+        --color-accent: #eac26e;
+        --color-accent-dark: #ce9f40;
+        --color-accent-glow: rgba(234, 194, 110, 0.3);
+        --color-light: #ffffff;
+        --color-gray: #94a3b8;
+        --color-gray-dark: #64748b;
+        --gradient-bg: linear-gradient(135deg, #0a2540 0%, #1e3050 100%);
+        --gradient-accent: linear-gradient(135deg, #eac26e 0%, #ce9f40 100%);
+        --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+        --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        --shadow-glow: 0 0 40px rgba(234, 194, 110, 0.2);
+    }
+
+    .faq-section {
+        padding: 6rem 1.5rem 2rem;
+        background: var(--gradient-bg);
+        position: relative;
+        overflow: hidden;
+        font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    }
+
+    .faq-section::before {
+        content: '';
+        position: absolute;
+        top: -50%;
+        right: -20%;
+        width: 80%;
+        height: 150%;
+        background: radial-gradient(circle, rgba(234, 194, 110, 0.03) 0%, transparent 70%);
+        pointer-events: none;
+        border-radius: 50%;
+    }
+
+    .faq-section::after {
+        content: '';
+        position: absolute;
+        bottom: -30%;
+        left: -10%;
+        width: 60%;
+        height: 100%;
+        background: radial-gradient(circle, rgba(234, 194, 110, 0.02) 0%, transparent 70%);
+        pointer-events: none;
+    }
+
+    .site-container {
+        max-width: var(--site-max-width, 1400px);
+        margin: 0 auto;
+        position: relative;
+        z-index: 2;
+    }
+
+    /* Заголовок секции */
+    .section-header {
+        margin-bottom: 4rem;
+        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), transparent);
+    }
+
+    .subtitle {
+        color: var(--color-accent);
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 4px;
+    }
+
+    .title {
+        color: var(--color-light);
+        font-size: clamp(2rem, 4vw, 3.5rem);
+        font-weight: 800;
+        margin: 0 0 1rem 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);
+        font-size: 1.1rem;
+        max-width: 700px;
+        margin: 0 auto;
+        line-height: 1.6;
+    }
+
+    /* Анимации при скроллинге */
+    .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);
+    }
+
+    /* Контейнер FAQ */
+    .faq-container {
+        max-width: 900px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    /* Элемент FAQ */
+    .faq-item {
+        background: rgba(255, 255, 255, 0.03);
+        backdrop-filter: blur(10px);
+        border-radius: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        overflow: hidden;
+        transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+        background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .faq-item:hover {
+        background: rgba(255, 255, 255, 0.05);
+        border-color: rgba(234, 194, 110, 0.2);
+    }
+
+    .faq-item.active {
+        border-color: rgba(234, 194, 110, 0.3);
+        box-shadow: var(--shadow-glow);
+    }
+
+    /* Вопрос */
+    .faq-question {
+        width: 100%;
+        padding: 1.5rem 2rem;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1.5rem;
+        transition: background 0.3s ease;
+    }
+
+    .faq-question:hover {
+        background: rgba(234, 194, 110, 0.05);
+    }
+
+    .question-text {
+        color: var(--color-light);
+        font-size: 1.125rem;
+        font-weight: 600;
+        text-align: left;
+        line-height: 1.4;
+        flex: 1;
+    }
+
+    .faq-icon {
+        flex-shrink: 0;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-accent);
+        transition: transform 0.3s ease, color 0.3s ease;
+    }
+
+    .faq-item.active .faq-icon {
+        transform: rotate(45deg);
+        color: var(--color-light);
+    }
+
+    .icon-plus {
+        width: 100%;
+        height: 100%;
+    }
+
+    /*
+        КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: ИСПОЛЬЗУЕМ GRID ВМЕСТО MAX-HEIGHT
+        Это полностью устраняет дерганье и делает анимацию плавной
+    */
+    .faq-answer {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .faq-answer.open {
+        grid-template-rows: 1fr;
+    }
+
+    /* Внутренний контейнер для предотвращения сжатия содержимого */
+    .answer-inner {
+        overflow: hidden;
+    }
+
+    .answer-text {
+        padding: 0 2rem 1.5rem;
+        color: var(--color-gray);
+        font-size: 1rem;
+        line-height: 1.7;
+        margin: 0;
+    }
+
+    /* Адаптивность */
+    @media (max-width: 1024px) {
+        .faq-container {
+            gap: 1rem;
+        }
+
+        .faq-question {
+            padding: 1.25rem 1.5rem;
+        }
+
+        .answer-text {
+            padding: 0 1.5rem 1.25rem;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .faq-section {
+            padding: 4rem 1rem;
+        }
+
+        .section-header {
+            margin-bottom: 2rem;
+        }
+
+        .subtitle-wrapper {
+            gap: 0.5rem;
+        }
+
+        .subtitle-line {
+            width: 30px;
+        }
+
+        .section-description {
+            font-size: 1rem;
+        }
+
+        .question-text {
+            font-size: 1rem;
+        }
+
+        .faq-question {
+            padding: 1rem 1.25rem;
+            gap: 1rem;
+        }
+
+        .faq-icon {
+            width: 28px;
+            height: 28px;
+        }
+
+        .answer-text {
+            padding: 0 1.25rem 1rem;
+            font-size: 0.95rem;
+        }
+    }
+
+    /* Уважаем prefers-reduced-motion */
+    @media (prefers-reduced-motion: reduce) {
+        .animate-on-scroll {
+            opacity: 1;
+            transform: none;
+            transition: none;
+        }
+
+        .faq-item,
+        .faq-question,
+        .faq-answer,
+        .faq-icon {
+            transition: none;
+        }
+
+        .faq-answer {
+            transition: none;
+            grid-template-rows: none;
+        }
+
+        .faq-answer.open {
+            grid-template-rows: none;
+        }
+    }
+</style>
+
+<script>
+    // Intersection Observer для анимаций при скроллинге
+    const observerOptions = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.15
+    };
+
+    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);
+    });
+
+    // Аккордеон FAQ - улучшенная версия
+    document.querySelectorAll('[data-faq-toggle]').forEach((button) => {
+        button.addEventListener('click', () => {
+            const faqItem = button.closest('.faq-item');
+            const answer = faqItem?.querySelector('[data-faq-content]');
+            const isExpanded = button.getAttribute('aria-expanded') === 'true';
+
+            // Если этот элемент уже открыт, просто закрываем его
+            if (isExpanded) {
+                faqItem?.classList.remove('active');
+                button.setAttribute('aria-expanded', 'false');
+                answer?.classList.remove('open');
+                return;
+            }
+
+            // Закрываем все другие открытые элементы
+            document.querySelectorAll('.faq-item.active').forEach((item) => {
+                if (item !== faqItem) {
+                    item.classList.remove('active');
+                    const otherButton = item.querySelector('[data-faq-toggle]');
+                    const otherAnswer = item.querySelector('[data-faq-content]');
+                    if (otherButton) otherButton.setAttribute('aria-expanded', 'false');
+                    if (otherAnswer) otherAnswer.classList.remove('open');
+                }
+            });
+
+            // Открываем текущий
+            faqItem?.classList.add('active');
+            button.setAttribute('aria-expanded', 'true');
+            answer?.classList.add('open');
+        });
+    });
+</script>

frontend/src/components/layout/footer/Footer.astro

@@ -12,11 +12,9 @@ const legalLinks = [
     { label: 'Условия использования', href: '/terms' },
 ];
 
-const infoLinks = [
+const otherLinks  = [
     { label: 'Часто задаваемые вопросы', href: '/faq' },
-    { label: 'Политика конфиденциальности', href: '/privacy' },
-    { label: 'Условия использования', href: '/terms' },
-    { label: 'Возврат средств', href: '#' },
+    { label: 'Правовые документы', href: '/documents' },
 ];
 
 const currentYear = new Date().getFullYear().toString();
@@ -51,9 +49,9 @@ const currentYear = new Date().getFullYear().toString();
 
             <!-- Колонка 3: Правовая информация -->
             <div class="footer-col">
-                <h4 class="col-title">Правовая информация</h4>
+                <h4 class="col-title">Разное</h4>
                 <ul class="footer-links">
-                    {infoLinks.map(link => (
+                    {otherLinks .map(link => (
                             <li><a href={link.href}>{link.label}</a></li>
                     ))}
                 </ul>

frontend/src/data/documents.ts

@@ -0,0 +1,196 @@
+export interface DocumentItem {
+    id: string;
+    title: string;
+    description: string;
+    fileSize: string;
+    fileType: 'pdf' | 'docx' | 'xlsx' | 'zip';
+    downloadUrl: string;
+    category: string;
+    tags?: string[];
+}
+
+export const documents: DocumentItem[] = [
+    {
+        id: 'doc-1',
+        title: 'Договор на оказание юридических услуг',
+        description: 'Типовой договор на предоставление юридических услуг для физических лиц',
+        fileSize: '245 КБ',
+        fileType: 'pdf',
+        downloadUrl: 'https://example.com/documents/contract.pdf',
+        category: 'Договоры',
+        tags: ['договор', 'услуги', 'юрист', 'физические лица']
+    },
+    {
+        id: 'doc-2',
+        title: 'Доверенность на представление интересов',
+        description: 'Образец доверенности для представления интересов в суде и государственных органах',
+        fileSize: '180 КБ',
+        fileType: 'docx',
+        downloadUrl: 'https://example.com/documents/power-of-attorney.docx',
+        category: 'Доверенности',
+        tags: ['доверенность', 'суд', 'представительство']
+    },
+    {
+        id: 'doc-3',
+        title: 'Согласие на обработку персональных данных',
+        description: 'Форма согласия на обработку персональных данных в соответствии с ФЗ-152',
+        fileSize: '120 КБ',
+        fileType: 'pdf',
+        downloadUrl: 'https://example.com/documents/privacy-consent.pdf',
+        category: 'Документы',
+        tags: ['персональные данные', 'согласие', 'фз-152']
+    },
+    {
+        id: 'doc-4',
+        title: 'Прайс-лист на юридические услуги 2024',
+        description: 'Актуальные цены на все виды предоставляемых юридических услуг',
+        fileSize: '320 КБ',
+        fileType: 'xlsx',
+        downloadUrl: 'https://example.com/documents/price-list.xlsx',
+        category: 'Информация',
+        tags: ['цены', 'стоимость', 'прайс', 'услуги']
+    },
+    {
+        id: 'doc-5',
+        title: 'Памятка клиента при ДТП',
+        description: 'Пошаговая инструкция: что делать при ДТП, какие документы собирать, куда обращаться',
+        fileSize: '1.2 МБ',
+        fileType: 'pdf',
+        downloadUrl: 'https://example.com/documents/dtp-memo.pdf',
+        category: 'Памятки',
+        tags: ['дтп', 'авария', 'инструкция', 'документы']
+    },
+    {
+        id: 'doc-6',
+        title: 'Заявление на обжалование постановления',
+        description: 'Образец заявления для обжалования постановления об административном правонарушении',
+        fileSize: '210 КБ',
+        fileType: 'docx',
+        downloadUrl: 'https://example.com/documents/appeal-application.docx',
+        category: 'Шаблоны',
+        tags: ['обжалование', 'постановление', 'заявление']
+    },
+    {
+        id: 'doc-7',
+        title: 'Акт выполненных работ',
+        description: 'Унифицированная форма акта сдачи-приёмки выполненных работ',
+        fileSize: '150 КБ',
+        fileType: 'docx',
+        downloadUrl: 'https://example.com/documents/work-act.docx',
+        category: 'Договоры',
+        tags: ['акт', 'работы', 'сдача']
+    },
+    {
+        id: 'doc-8',
+        title: 'Реквизиты компании',
+        description: 'Полные реквизиты для оплаты юридических услуг',
+        fileSize: '95 КБ',
+        fileType: 'pdf',
+        downloadUrl: 'https://example.com/documents/details.pdf',
+        category: 'Информация',
+        tags: ['реквизиты', 'оплата', 'банк']
+    },
+    {
+        id: 'doc-9',
+        title: 'Жалоба в ГИБДД',
+        description: 'Образец жалобы на неправомерные действия сотрудников ГИБДД',
+        fileSize: '190 КБ',
+        fileType: 'docx',
+        downloadUrl: 'https://example.com/documents/gibdd-complaint.docx',
+        category: 'Шаблоны',
+        tags: ['жалоба', 'гибдд', 'неправомерные действия']
+    },
+    {
+        id: 'doc-10',
+        title: 'Памятка при лишении прав',
+        description: 'Что делать если вас лишают водительских прав: порядок действий и сроки',
+        fileSize: '980 КБ',
+        fileType: 'pdf',
+        downloadUrl: 'https://example.com/documents/license-revocation-memo.pdf',
+        category: 'Памятки',
+        tags: ['лишение прав', 'порядок действий', 'сроки']
+    },
+    {
+        id: 'doc-11',
+        title: 'Договор на ведение дела в суде',
+        description: 'Договор на представительство в судебных органах по гражданским делам',
+        fileSize: '280 КБ',
+        fileType: 'pdf',
+        downloadUrl: 'https://example.com/documents/court-contract.pdf',
+        category: 'Договоры',
+        tags: ['суд', 'представительство', 'гражданское дело']
+    },
+    {
+        id: 'doc-12',
+        title: 'Заявление в страховую компанию',
+        description: 'Образец заявления на получение выплаты по ОСАГО/КАСКО',
+        fileSize: '200 КБ',
+        fileType: 'docx',
+        downloadUrl: 'https://example.com/documents/insurance-application.docx',
+        category: 'Шаблоны',
+        tags: ['страховая', 'осаго', 'каско', 'выплата']
+    },
+    {
+        id: 'doc-13',
+        title: 'Доверенность на получение ТС',
+        description: 'Доверенность на получение транспортного средства из сервисного центра',
+        fileSize: '165 КБ',
+        fileType: 'docx',
+        downloadUrl: 'https://example.com/documents/vehicle-power-of-attorney.docx',
+        category: 'Доверенности',
+        tags: ['автомобиль', 'получение', 'сервис']
+    },
+    {
+        id: 'doc-14',
+        title: 'Список документов для обращения в суд',
+        description: 'Перечень необходимых документов для подачи искового заявления',
+        fileSize: '140 КБ',
+        fileType: 'pdf',
+        downloadUrl: 'https://example.com/documents/court-docs-list.pdf',
+        category: 'Памятки',
+        tags: ['суд', 'иск', 'документы', 'перечень']
+    },
+    {
+        id: 'doc-15',
+        title: 'Соглашение о конфиденциальности',
+        description: 'Документ о неразглашении информации, полученной в ходе оказания юридических услуг',
+        fileSize: '130 КБ',
+        fileType: 'pdf',
+        downloadUrl: 'https://example.com/documents/nda-agreement.pdf',
+        category: 'Документы',
+        tags: ['конфиденциальность', 'ndа', 'разглашение']
+    },
+    {
+        id: 'doc-16',
+        title: 'Архив шаблонов документов',
+        description: 'Полный архив всех шаблонов документов в формате ZIP',
+        fileSize: '4.5 МБ',
+        fileType: 'zip',
+        downloadUrl: 'https://example.com/documents/all-templates.zip',
+        category: 'Шаблоны',
+        tags: ['архив', 'шаблоны', 'все документы']
+    }
+];
+
+export const DOCUMENTS_PER_PAGE = 6;
+
+export function getCategories(): string[] {
+    return ['Все', ...Array.from(new Set(documents.map(doc => doc.category)))];
+}
+
+export function filterByCategory(category: string): DocumentItem[] {
+    if (category === 'Все') return documents;
+    return documents.filter(doc => doc.category === category);
+}
+
+export function searchDocuments(query: string): DocumentItem[] {
+    const trimmed = query.trim().toLowerCase();
+    if (trimmed.length < 2) return [];
+
+    return documents.filter(doc =>
+        doc.title.toLowerCase().includes(trimmed) ||
+        doc.description.toLowerCase().includes(trimmed) ||
+        doc.category.toLowerCase().includes(trimmed) ||
+        (doc.tags && doc.tags.some(tag => tag.toLowerCase().includes(trimmed)))
+    );
+}

frontend/src/pages/documents.astro

@@ -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>

frontend/src/pages/faq.astro

@@ -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>