Продолжение: Дополнительные блоки и функциональность

10. Блок «Часто задаваемые вопросы» (FAQ)

HTML структура:

<section class="faq" id="faq">
    <div class="container">
        <h2 class="section-title">Часто задаваемые вопросы</h2>
        <p class="section-subtitle">Ответы на популярные вопросы о наших услугах</p>
        
        <div class="faq-wrapper">
            <div class="faq-categories">
                <button class="faq-category-btn active" data-category="all">
                    <i class="fas fa-th"></i>
                    Все вопросы
                </button>
                <button class="faq-category-btn" data-category="prices">
                    <i class="fas fa-ruble-sign"></i>
                    Цены и оплата
                </button>
                <button class="faq-category-btn" data-category="process">
                    <i class="fas fa-tasks"></i>
                    Процесс работы
                </button>
                <button class="faq-category-btn" data-category="materials">
                    <i class="fas fa-hammer"></i>
                    Материалы
                </button>
                <button class="faq-category-btn" data-category="warranty">
                    <i class="fas fa-shield-alt"></i>
                    Гарантии
                </button>
            </div>

            <div class="faq-content">
                <!-- Вопросы по ценам -->
                <div class="faq-item" data-category="prices">
                    <div class="faq-question">
                        <h3>Как формируется стоимость ремонта?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Стоимость ремонта зависит от нескольких факторов:</p>
                        <ul>
                            <li>Площадь помещения</li>
                            <li>Объем работ (косметический или капитальный ремонт)</li>
                            <li>Выбранные материалы</li>
                            <li>Сложность дизайн-проекта</li>
                            <li>Дополнительные услуги</li>
                        </ul>
                        <p>Для точного расчета мы предлагаем бесплатный выезд специалиста на объект.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="prices">
                    <div class="faq-question">
                        <h3>Какие формы оплаты вы принимаете?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Мы принимаем следующие формы оплаты:</p>
                        <ul>
                            <li>Наличный расчет</li>
                            <li>Безналичный перевод на расчетный счет</li>
                            <li>Оплата картой</li>
                            <li>Рассрочка платежа (обсуждается индивидуально)</li>
                        </ul>
                        <p>Оплата производится поэтапно согласно договору.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="prices">
                    <div class="faq-question">
                        <h3>Входят ли материалы в стоимость работ?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>У нас есть два варианта работы:</p>
                        <ul>
                            <li><strong>Только работы</strong> - вы самостоятельно закупаете материалы</li>
                            <li><strong>"Под ключ"</strong> - мы берем на себя закупку всех материалов с предоставлением скидок от поставщиков</li>
                        </ul>
                        <p>Рекомендуем второй вариант, так как мы работаем с проверенными поставщиками и получаем оптовые цены.</p>
                    </div>
                </div>

                <!-- Вопросы по процессу -->
                <div class="faq-item" data-category="process">
                    <div class="faq-question">
                        <h3>Сколько времени занимает ремонт?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Сроки зависят от типа и объема работ:</p>
                        <ul>
                            <li><strong>Косметический ремонт однокомнатной квартиры</strong> - 2-3 недели</li>
                            <li><strong>Капитальный ремонт однокомнатной квартиры</strong> - 1-2 месяца</li>
                            <li><strong>Ремонт двухкомнатной квартиры</strong> - 1.5-3 месяца</li>
                            <li><strong>Ремонт трехкомнатной квартиры</strong> - 2-4 месяца</li>
                        </ul>
                        <p>Точные сроки указываются в договоре после осмотра объекта.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="process">
                    <div class="faq-question">
                        <h3>Нужно ли мне присутствовать на объекте?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Ваше постоянное присутствие не требуется. Мы работаем самостоятельно и держим вас в курсе всех этапов:</p>
                        <ul>
                            <li>Еженедельные отчеты с фотографиями</li>
                            <li>Оперативная связь через мессенджеры</li>
                            <li>Согласование важных решений</li>
                            <li>Приемка работ на ключевых этапах</li>
                        </ul>
                        <p>Вы можете приезжать на объект в любое удобное время.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="process">
                    <div class="faq-question">
                        <h3>Как происходит контроль качества?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Контроль качества осуществляется на всех этапах:</p>
                        <ul>
                            <li>Ежедневный контроль прораба</li>
                            <li>Проверка каждого этапа работ перед переходом к следующему</li>
                            <li>Использование профессиональных инструментов для проверки (уровни, лазерные нивелиры)</li>
                            <li>Финальная приемка с составлением акта выполненных работ</li>
                        </ul>
                    </div>
                </div>

                <!-- Вопросы по материалам -->
                <div class="faq-item" data-category="materials">
                    <div class="faq-question">
                        <h3>Какие материалы вы используете?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Мы работаем только с проверенными брендами:</p>
                        <ul>
                            <li><strong>Краски:</strong> Dulux, Tikkurila, Caparol</li>
                            <li><strong>Штукатурки и шпаклевки:</strong> Knauf, Ceresit, Weber</li>
                            <li><strong>Напольные покрытия:</strong> Quick-Step, Tarkett, Pergo</li>
                            <li><strong>Сантехника:</strong> Grohe, Hansgrohe, Geberit</li>
                            <li><strong>Электрика:</strong> Legrand, Schneider Electric, ABB</li>
                        </ul>
                        <p>Все материалы сертифицированы и имеют гарантию производителя.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="materials">
                    <div class="faq-question">
                        <h3>Могу ли я выбрать свои материалы?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Конечно! У вас есть полная свобода выбора:</p>
                        <ul>
                            <li>Мы предоставляем список рекомендуемых материалов</li>
                            <li>Вы можете выбрать любые материалы по своему вкусу и бюджету</li>
                            <li>Наш дизайнер поможет с подбором и сочетанием материалов</li>
                            <li>Мы можем сопровождать вас при выборе в магазинах</li>
                        </ul>
                    </div>
                </div>

                <!-- Вопросы по гарантиям -->
                <div class="faq-item" data-category="warranty">
                    <div class="faq-question">
                        <h3>Какую гарантию вы предоставляете?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Мы предоставляем официальную гарантию:</p>
                        <ul>
                            <li><strong>На все виды работ</strong> - 2 года</li>
                            <li><strong>На скрытые работы</strong> (электрика, сантехника) - 3 года</li>
                            <li><strong>На материалы</strong> - гарантия производителя</li>
                        </ul>
                        <p>Гарантия прописывается в договоре и подтверждается гарантийным талоном.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="warranty">
                    <div class="faq-question">
                        <h3>Что делать, если после ремонта возникли проблемы?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>В случае возникновения проблем в гарантийный период:</p>
                        <ol>
                            <li>Свяжитесь с нами любым удобным способом</li>
                            <li>Опишите проблему и отправьте фотографии</li>
                            <li>Мы выезжаем на объект в течение 24 часов</li>
                            <li>Устраняем недостатки бесплатно в кратчайшие сроки</li>
                        </ol>
                        <p>Мы дорожим своей репутацией и всегда идем навстречу клиентам.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="warranty">
                    <div class="faq-question">
                        <h3>Заключаете ли вы официальный договор?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Да, мы работаем только по официальному договору, который включает:</p>
                        <ul>
                            <li>Подробную смету с указанием всех работ и материалов</li>
                            <li>Сроки выполнения работ с указанием этапов</li>
                            <li>Условия оплаты</li>
                            <li>Гарантийные обязательства</li>
                            <li>Ответственность сторон</li>
                        </ul>
                        <p>Договор заключается в двух экземплярах с печатями и подписями.</p>
                    </div>
                </div>

                <!-- Общие вопросы -->
                <div class="faq-item" data-category="all">
                    <div class="faq-question">
                        <h3>Работаете ли вы в выходные дни?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Да, мы можем работать в выходные дни по согласованию. Это особенно актуально для:</p>
                        <ul>
                            <li>Срочных объектов</li>
                            <li>Коммерческих помещений</li>
                            <li>Объектов с ограниченным временем доступа</li>
                        </ul>
                        <p>График работы обсуждается индивидуально и фиксируется в договоре.</p>
                    </div>
                </div>

                <div class="faq-item" data-category="all">
                    <div class="faq-question">
                        <h3>Убираете ли вы мусор после ремонта?</h3>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Да, вывоз мусора входит в наши услуги:</p>
                        <ul>
                            <li>Ежедневная уборка рабочей зоны</li>
                            <li>Вывоз строительного мусора</li>
                            <li>Финальная уборка после завершения работ</li>
                            <li>При необходимости - клининг с профессиональной техникой</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Блок с дополнительным вопросом -->
        <div class="faq-cta">
            <div class="faq-cta-content">
                <h3>Не нашли ответ на свой вопрос?</h3>
                <p>Свяжитесь с нами, и мы с радостью ответим на все ваши вопросы</p>
                <div class="faq-cta-buttons">
                    <a href="tel:+79001234567" class="btn btn-primary">
                        <i class="fas fa-phone-alt"></i>
                        Позвонить
                    </a>
                    <button class="btn btn-outline" data-modal="callback">
                        <i class="fas fa-comment"></i>
                        Задать вопрос
                    </button>
                </div>
            </div>
            <div class="faq-cta-image">
                <img src="images/support.svg" alt="Поддержка">
            </div>
        </div>
    </div>
</section>

CSS стили:

/* FAQ */
.faq {
    padding: 80px 0;
    background: #f8f9fa;
}

.faq-wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 40px;
    margin-top: 50px;
}

/* Категории */
.faq-categories {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 100px;
    height: fit-content;
}

.faq-category-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.faq-category-btn i {
    font-size: 18px;
    color: var(--primary-color);
}

.faq-category-btn:hover {
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.faq-category-btn.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-color: transparent;
    color: white;
}

.faq-category-btn.active i {
    color: white;
}

/* Вопросы */
.faq-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.faq-item.hidden {
    display: none;
}

.faq-item:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer;
    user-select: none;
}

.faq-question h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    flex: 1;
}

.faq-question i {
    font-size: 16px;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 1000px;
    padding: 0 30px 25px;
}

.faq-answer p {
    font-size: 15px;
    line-height: 1.8;
    color: #6c757d;
    margin-bottom: 15px;
}

.faq-answer ul,
.faq-answer ol {
    margin: 15px 0;
    padding-left: 25px;
}

.faq-answer li {
    font-size: 15px;
    line-height: 1.8;
    color: #6c757d;
    margin-bottom: 10px;
}

.faq-answer strong {
    color: var(--text-color);
    font-weight: 600;
}

/* CTA блок */
.faq-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 50px;
    border-radius: 20px;
    margin-top: 50px;
    color: white;
}

.faq-cta-content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.faq-cta-content p {
    font-size: 16px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.faq-cta-buttons {
    display: flex;
    gap: 15px;
}

.faq-cta-buttons .btn {
    padding: 15px 30px;
}

.faq-cta-buttons .btn-primary {
    background: white;
    color: var(--primary-color);
}

.faq-cta-buttons .btn-primary:hover {
    background: #f8f9fa;
}

.faq-cta-buttons .btn-outline {
    border: 2px solid white;
    color: white;
}

.faq-cta-buttons .btn-outline:hover {
    background: white;
    color: var(--primary-color);
}

.faq-cta-image img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* Адаптивность */
@media (max-width: 992px) {
    .faq-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .faq-categories {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 10px;
    }
    
    .faq-category-btn {
        white-space: nowrap;
    }
    
    .faq-cta {
        grid-template-columns: 1fr;
        padding: 40px 30px;
    }
    
    .faq-cta-image {
        order: -1;
    }
}

@media (max-width: 768px) {
    .faq-question {
        padding: 20px;
    }
    
    .faq-question h3 {
        font-size: 16px;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 20px 20px;
    }
    
    .faq-cta-buttons {
        flex-direction: column;
    }
    
    .faq-cta-buttons .btn {
        width: 100%;
    }
}

JavaScript для FAQ:

// FAQ функциональность
class FAQ {
    constructor() {
        this.items = document.querySelectorAll('.faq-item');
        this.categoryBtns = document.querySelectorAll('.faq-category-btn');
        this.init();
    }
    
    init() {
        // Открытие/закрытие вопросов
        this.items.forEach(item => {
            const question = item.querySelector('.faq-question');
            question.addEventListener('click', () => this.toggleItem(item));
        });
        
        // Фильтрация по категориям
        this.categoryBtns.forEach(btn => {
            btn.addEventListener('click', () => this.filterByCategory(btn));
        });
        
        // Открыть первый вопрос по умолчанию
        if (this.items.length > 0) {
            this.items[0].classList.add('active');
        }
    }
    
    toggleItem(item) {
        const isActive = item.classList.contains('active');
        
        // Закрыть все остальные (опционально)
        // this.items.forEach(i => i.classList.remove('active'));
        
        // Переключить текущий
        if (isActive) {
            item.classList.remove('active');
        } else {
            item.classList.add('active');
            
            // Плавная прокрутка к элементу
            setTimeout(() => {
                item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }, 100);
        }
    }
    
    filterByCategory(btn) {
        const category = btn.dataset.category;
        
        // Обновить активную кнопку
        this.categoryBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        
        // Фильтровать вопросы
        this.items.forEach(item => {
            const itemCategory = item.dataset.category;
            
            if (category === 'all' || itemCategory === category) {
                item.classList.remove('hidden');
                // Анимация появления
                item.style.animation = 'fadeInUp 0.5s ease';
            } else {
                item.classList.add('hidden');
            }
        });
    }
}

// Инициализация FAQ
document.addEventListener('DOMContentLoaded', () => {
    new FAQ();
});

—

11. Блок «Блог/Статьи»

HTML структура:

<section class="blog" id="blog">
    <div class="container">
        <h2 class="section-title">Полезные статьи</h2>
        <p class="section-subtitle">Советы и рекомендации от наших экспертов</p>
        
        <div class="blog-grid">
            <!-- Статья 1 -->
            <article class="blog-card">
                <div class="blog-image">
                    <img src="images/blog1.jpg" alt="Статья">
                    <div class="blog-category">Советы</div>
                </div>
                <div class="blog-content">
                    <div class="blog-meta">
                        <span class="blog-date">
                            <i class="far fa-calendar"></i>
                            15 марта 2024
                        </span>
                        <span class="blog-reading-time">
                            <i class="far fa-clock"></i>
                            5 мин чтения
                        </span>
                    </div>
                    <h3 class="blog-title">
                        <a href="blog-single.html">10 ошибок при ремонте квартиры, которых следует избегать</a>
                    </h3>
                    <p class="blog-excerpt">
                        Рассказываем о самых распространенных ошибках, которые допускают при ремонте, 
                        и как их избежать, чтобы сэкономить время и деньги.
                    </p>
                    <div class="blog-footer">
                        <div class="blog-author">
                            <img src="images/author1.jpg" alt="Автор">
                            <span>Иван Петров</span>
                        </div>
                        <a href="blog-single.html" class="blog-read-more">
                            Читать далее
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </article>

            <!-- Статья 2 -->
            <article class="blog-card">
                <div class="blog-image">
                    <img src="images/blog2.jpg" alt="Статья">
                    <div class="blog-category">Тренды</div>
                </div>
                <div class="blog-content">
                    <div class="blog-meta">
                        <span class="blog-date">
                            <i class="far fa-calendar"></i>
                            12 марта 2024
                        </span>
                        <span class="blog-reading-time">
                            <i class="far fa-clock"></i>
                            7 мин чтения
                        </span>
                    </div>
                    <h3 class="blog-title">
                        <a href="blog-single.html">Тренды дизайна интерьера 2024: что будет популярно</a>
                    </h3>
                    <p class="blog-excerpt">
                        Обзор главных трендов в дизайне интерьера на 2024 год: цвета, материалы, 
                        стили и решения, которые будут актуальны.
                    </p>
                    <div class="blog-footer">
                        <div class="blog-author">
                            <img src="images/author2.jpg" alt="Автор">
                            <span>Анна Смирнова</span>
                        </div>
                        <a href="blog-single.html" class="blog-read-more">
                            Читать далее
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </article>

            <!-- Статья 3 -->
            <article class="blog-card">
                <div class="blog-image">
                    <img src="images/blog3.jpg" alt="Статья">
                    <div class="blog-category">Инструкции</div>
                </div>
                <div class="blog-content">
                    <div class="blog-meta">
                        <span class="blog-date">
                            <i class="far fa-calendar"></i>
                            8 марта 2024
                        </span>
                        <span class="blog-reading-time">
                            <i class="far fa-clock"></i>
                            10 мин чтения
                        </span>
                    </div>
                    <h3 class="blog-title">
                        <a href="blog-single.html">Как выбрать материалы для ремонта: полное руководство</a>
                    </h3>
                    <p class="blog-excerpt">
                        Подробный гид по выбору материалов для ремонта: от напольных покрытий 
                        до отделочных материалов. Советы профессионалов.
                    </p>
                    <div class="blog-footer">
                        <div class="blog-author">
                            <img src="images/author3.jpg" alt="Автор">
                            <span>Дмитрий Козлов</span>
                        </div>
                        <a href="blog-single.html" class="blog-read-more">
                            Читать далее
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </article>

            <!-- Статья 4 -->
            <article class="blog-card">
                <div class="blog-image">
                    <img src="images/blog4.jpg" alt="Статья">
                    <div class="blog-category">Экономия</div>
                </div>
                <div class="blog-content">
                    <div class="blog-meta">
                        <span class="blog-date">
                            <i class="far fa-calendar"></i>
                            5 марта 2024
                        </span>
                        <span class="blog-reading-time">
                            <i class="far fa-clock"></i>
                            6 мин чтения
                        </span>
                    </div>
                    <h3 class="blog-title">
                        <a href="blog-single.html">Как сэкономить на ремонте без потери качества</a>
                    </h3>
                    <p class="blog-excerpt">
                        Практические советы, как снизить стоимость ремонта, не жертвуя качеством 
                        работ и материалов. Реальные примеры экономии.
                    </p>
                    <div class="blog-footer">
                        <div class="blog-author">
                            <img src="images/author1.jpg" alt="Автор">
                            <span>Иван Петров</span>
                        </div>
                        <a href="blog-single.html" class="blog-read-more">
                            Читать далее
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </article>

            <!-- Статья 5 -->
            <article class="blog-card">
                <div class="blog-image">
                    <img src="images/blog5.jpg" alt="Статья">
                    <div class="blog-category">Планирование</div>
                </div>
                <div class="blog-content">
                    <div class="blog-meta">
                        <span class="blog-date">
                            <i class="far fa-calendar"></i>
                            1 марта 2024
                        </span>
                        <span class="blog-reading-time">
                            <i class="far fa-clock"></i>
                            8 мин чтения
                        </span>
                    </div>
                    <h3 class="blog-title">
                        <a href="blog-single.html">Этапы ремонта квартиры: от планирования до сдачи</a>
                    </h3>
                    <p class="blog-excerpt">
                        Пошаговое руководство по всем этапам ремонта: что нужно знать и делать 
                        на каждом этапе для успешного результата.
                    </p>
                    <div class="blog-footer">
                        <div class="blog-author">
                            <img src="images/author2.jpg" alt="Автор">
                            <span>Анна Смирнова</span>
                        </div>
                        <a href="blog-single.html" class="blog-read-more">
                            Читать далее
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </article>

            <!-- Статья 6 -->
            <article class="blog-card">
                <div class="blog-image">
                    <img src="images/blog6.jpg" alt="Статья">
                    <div class="blog-category">Дизайн</div>
                </div>
                <div class="blog-content">
                    <div class="blog-meta">
                        <span class="blog-date">
                            <i class="far fa-calendar"></i>
                            25 февраля 2024
                        </span>
                        <span class="blog-reading-time">
                            <i class="far fa-clock"></i>
                            9 мин чтения
                        </span>
                    </div>
                    <h3 class="blog-title">
                        <a href="blog-single.html">Маленькая квартира: 15 идей для визуального расширения пространства</a>
                    </h3>
                    <p class="blog-excerpt">
                        Дизайнерские приемы и хитрости, которые помогут визуально увеличить 
                        пространство небольшой квартиры и сделать ее уютнее.
                    </p>
                    <div class="blog-footer">
                        <div class="blog-author">
                            <img src="images/author3.jpg" alt="Автор">
                            <span>Дмитрий Козлов</span>
                        </div>
                        <a href="blog-single.html" class="blog-read-more">
                            Читать далее
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </article>
        </div>

        <!-- Кнопка "Показать еще" -->
        <div class="blog-load-more">
            <button class="btn btn-outline" id="loadMoreBtn">
                <span>Показать еще статьи</span>
                <i class="fas fa-chevron-down"></i>
            </button>
        </div>
    </div>
</section>

CSS стили:

/* Блог */
.blog {
    padding: 80px 0;
    background: white;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

/* Карточка статьи */
.blog-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.blog-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.1);
}

.blog-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary-color);
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #6c757d;
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-meta i {
    color: var(--primary-color);
}

.blog-title {
    margin-bottom: 15px;
}

.blog-title a {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.blog-title a:hover {
    color: var(--primary-color);
}

.blog-excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: #6c757d;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-author img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-author span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.blog-read-more {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: gap 0.3s ease;
}

.blog-read-more:hover {
    gap: 12px;
}

.blog-read-more i {
    font-size: 12px;
}

/* Кнопка "Показать еще" */
.blog-load-more {
    text-align: center;
    margin-top: 50px;
}

.blog-load-more .btn {
    padding: 15px 40px;
}

/* Адаптивность */
@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .blog-image {
        height: 200px;
    }
    
    .blog-content {
        padding: 20px;
    }
    
    .blog-title a {
        font-size: 18px;
    }
}

JavaScript для блога:

// Функция "Показать еще"
class BlogLoader {
    constructor() {
        this.loadMoreBtn = document.getElementById('loadMoreBtn');
        this.blogGrid = document.querySelector('.blog-grid');
        this.articlesPerPage = 6;
        this.currentPage = 1;
        
        // Скрываем статьи после первой страницы
        this.hideExtraArticles();
        
        if (this.loadMoreBtn) {
            this.loadMoreBtn.addEventListener('click', () => this.loadMore());
        }
    }
    
    hideExtraArticles() {
        const articles = this.blogGrid.querySelectorAll('.blog-card');
        articles.forEach((article, index) => {
            if (index >= this.articlesPerPage) {
                article.style.display = 'none';
            }
        });
    }
    
    loadMore() {
        const articles = this.blogGrid.querySelectorAll('.blog-card');
        const start = this.currentPage * this.articlesPerPage;
        const end = start + this.articlesPerPage;
        
        // Показываем следующую порцию статей
        for (let i = start; i < end && i < articles.length; i++) {
            articles[i].style.display = 'flex';
            articles[i].style.animation = 'fadeInUp 0.5s ease';
        }
        
        this.currentPage++;
        
        // Скрываем кнопку, если больше нет статей
        if (end >= articles.length) {
            this.loadMoreBtn.style.display = 'none';
        }
        
        // Обновляем текст кнопки
        const remaining = articles.length - end;
        if (remaining > 0) {
            this.loadMoreBtn.querySelector('span').textContent = 
                `Показать еще (${remaining})`;
        }
    }
}

// Инициализация
document.addEventListener('DOMContentLoaded', () => {
    new BlogLoader();
});