Spaces:
Running
Running
🐳 06/05 - 18:53 - замени везде ГБОУ СОШ № 625 на Школа №625 Невского района Санкт-Петербурга
80a2baa verified | <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Музей "Боевое братство" — Школа №625 Невского района Санкт-Петербурга</title> | |
| <meta name="description" content="Школьный музей Боевое братство Школа №625 Невского района Санкт-Петербурга. Патриотическое воспитание, сохранение памяти о воинах-интернационалистах."> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="css/style.css"> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800 bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-white/95 backdrop-blur-md border-b border-gray-200 transition-all duration-300" id="navbar"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-20"> | |
| <!-- Logo --> | |
| <div class="flex items-center space-x-4"> | |
| <img src="https://i.postimg.cc/k4zfRqj5/emblem.jpg" | |
| alt="Эмблема музея Боевое братство" | |
| class="h-16 w-auto object-contain"> | |
| <div class="hidden md:block"> | |
| <h1 class="text-lg font-bold text-gray-900 leading-tight">МУЗЕЙ «БОЕВОЕ БРАТСТВО»</h1> | |
| <p class="text-xs text-gray-600">Школа №625 Невского района Санкт-Петербурга</p> | |
| </div> | |
| </div> | |
| <!-- Desktop Menu --> | |
| <div class="hidden lg:flex items-center space-x-8"> | |
| <a href="#about" class="text-gray-700 hover:text-red-800 font-medium transition-colors">Историческая справка</a> | |
| <a href="#exhibits" class="text-gray-700 hover:text-red-800 font-medium transition-colors">Экспозиция</a> | |
| <a href="#activities" class="text-gray-700 hover:text-red-800 font-medium transition-colors">Экскурсии</a> | |
| <a href="#documents" class="text-gray-700 hover:text-red-800 font-medium transition-colors">Документы</a> | |
| <a href="#contacts" class="text-gray-700 hover:text-red-800 font-medium transition-colors">Контакты</a> | |
| <a href="#contacts" class="bg-red-900 text-white px-6 py-2.5 rounded-lg hover:bg-red-800 transition-all transform hover:scale-105 font-medium shadow-lg shadow-red-900/20"> | |
| Записаться на экскурсию | |
| </a> | |
| </div> | |
| <!-- Mobile Menu Button --> | |
| <button class="lg:hidden p-2 rounded-md text-gray-700 hover:text-red-800 focus:outline-none" id="mobile-menu-btn"> | |
| <i data-lucide="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="lg:hidden hidden bg-white border-t border-gray-200" id="mobile-menu"> | |
| <div class="px-4 pt-2 pb-6 space-y-2"> | |
| <a href="#about" class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-red-800 hover:bg-gray-50 rounded-md">Историческая справка</a> | |
| <a href="#exhibits" class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-red-800 hover:bg-gray-50 rounded-md">Экспозиция</a> | |
| <a href="#activities" class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-red-800 hover:bg-gray-50 rounded-md">Экскурсии</a> | |
| <a href="#documents" class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-red-800 hover:bg-gray-50 rounded-md">Документы</a> | |
| <a href="#map" class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-red-800 hover:bg-gray-50 rounded-md">Карта</a> | |
| <a href="#contacts" class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-red-800 hover:bg-gray-50 rounded-md">Контакты</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative pt-20 min-h-screen flex items-center bg-gradient-to-br from-gray-900 via-gray-800 to-red-950 text-white overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/monochrome/1920x1080/1')] bg-cover bg-center"></div> | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent"></div> | |
| <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-32"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div class="space-y-8 animate-fade-in-up"> | |
| <div class="inline-flex items-center space-x-2 bg-red-800/30 backdrop-blur-sm px-4 py-2 rounded-full border border-red-700/50"> | |
| <i data-lucide="award" class="w-5 h-5 text-yellow-500"></i> | |
| <span class="text-sm font-medium text-yellow-100">Школьный музей при Школа №625 Невского района Санкт-Петербурга</span> | |
| </div> | |
| <h1 class="text-5xl lg:text-7xl font-serif font-black leading-tight"> | |
| Сохраняя <span class="text-yellow-500">память</span> о героях | |
| </h1> | |
| <p class="text-xl text-gray-300 leading-relaxed max-w-2xl"> | |
| Музей «Боевое братство» — живой памятник мужеству и самоотверженности воинов-интернационалистов. | |
| Мы храним историю для будущих поколений. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#about" class="inline-flex items-center justify-center px-8 py-4 bg-red-700 hover:bg-red-600 text-white font-semibold rounded-lg transition-all transform hover:scale-105 shadow-xl shadow-red-900/30"> | |
| Узнать историю | |
| <i data-lucide="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| <a href="#activities" class="inline-flex items-center justify-center px-8 py-4 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white font-semibold rounded-lg border border-white/30 transition-all"> | |
| Мероприятия | |
| </a> | |
| </div> | |
| <div class="flex items-center space-x-8 pt-8 border-t border-white/10"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-yellow-500">2012</div> | |
| <div class="text-sm text-gray-400">Год открытия</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-yellow-500">1000+</div> | |
| <div class="text-sm text-gray-400">Учеников в год</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-yellow-500">12+</div> | |
| <div class="text-sm text-gray-400">Лет работы</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative hidden lg:block"> | |
| <div class="relative z-10"> | |
| <img src="https://i.postimg.cc/k4zfRqj5/emblem.jpg" | |
| alt="Эмблема музея" | |
| class="rounded-2xl shadow-2xl border-4 border-white/20 w-full max-w-lg mx-auto"> | |
| </div> | |
| <div class="absolute -bottom-6 -left-6 w-24 h-24 bg-yellow-500 rounded-full opacity-20 blur-2xl"></div> | |
| <div class="absolute -top-6 -right-6 w-32 h-32 bg-red-600 rounded-full opacity-20 blur-3xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-gray-50 to-transparent"></div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="text-sm font-bold text-red-800 tracking-widest uppercase mb-3">О музее</h2> | |
| <h3 class="text-4xl font-serif font-bold text-gray-900 mb-6">Историческая справка</h3> | |
| <div class="w-24 h-1 bg-yellow-500 mx-auto"></div> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> | |
| <div class="space-y-6 text-lg text-gray-700 leading-relaxed"> | |
| <p> | |
| В <strong>Школа №625 Невского района Санкт-Петербурга</strong> Невского района Санкт-Петербурга функционирует школьный музей | |
| <strong>«Боевое братство»</strong>. Его открытие состоялось <span class="text-red-800 font-semibold">5 июня 2012 года</span> | |
| при активном участии Всероссийской общественной организации ветеранов «Боевое братство». | |
| </p> | |
| <p> | |
| В музее представлена информация о региональных вооруженных конфликтах периода новейшей истории: | |
| военные действия в <strong>Афганистане</strong>, боевые действия на <strong>Северном Кавказе</strong>. | |
| </p> | |
| <div class="bg-gray-50 border-l-4 border-red-800 p-6 rounded-r-lg my-8"> | |
| <p class="italic text-gray-800 font-serif text-xl"> | |
| «Наша цель – передать память о стойкости и самоотверженности героев боевых действий новым поколениям» | |
| </p> | |
| </div> | |
| <p> | |
| Руководство музеем ставит перед собой множество задач, касающихся патриотического воспитания и просвещения. | |
| Но главной миссией прежде всего является <strong>сохранение памяти</strong> о людях, ставших для нас настоящими героями. | |
| </p> | |
| </div> | |
| <div class="relative bg-gray-100 rounded-2xl"> | |
| <img src="https://i.postimg.cc/k4zfRqj5/emblem.jpg" alt="Эмблема музея Боевое братство" class="rounded-2xl shadow-2xl w-full object-contain h-[500px] p-8"> | |
| <div class="absolute -bottom-8 -right-8 bg-white p-6 rounded-xl shadow-xl max-w-xs hidden md:block"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="p-2 bg-red-100 rounded-lg"> | |
| <i data-lucide="users" class="w-6 h-6 text-red-800"></i> | |
| </div> | |
| <span class="font-bold text-gray-900">Встречи с ветеранами</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Регулярные встречи с ветеранами Великой Отечественной войны и локальных конфликтов</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mission Section --> | |
| <section class="py-20 bg-gray-900 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10 hover:bg-white/10 transition-all group"> | |
| <div class="w-14 h-14 bg-red-800 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="shield" class="w-7 h-7 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Патриотическое воспитание</h3> | |
| <p class="text-gray-400">Формирование у подрастающего поколения чувства гордости за историю страны и уважения к защитникам Отечества</p> | |
| </div> | |
| <div class="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10 hover:bg-white/10 transition-all group"> | |
| <div class="w-14 h-14 bg-yellow-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="book-open" class="w-7 h-7 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Сохранение памяти</h3> | |
| <p class="text-gray-400">Сбор, систематизация и популяризация материалов о военных конфликтах и подвигах воинов-интернационалистов</p> | |
| </div> | |
| <div class="bg-white/5 backdrop-blur-sm p-8 rounded-2xl border border-white/10 hover:bg-white/10 transition-all group"> | |
| <div class="w-14 h-14 bg-red-800 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform"> | |
| <i data-lucide="heart-handshake" class="w-7 h-7 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Нравственные ориентиры</h3> | |
| <p class="text-gray-400">Мужество и доблесть участников боевых действий служат примером для морально-нравственного развития учащихся</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Exhibits Section --> | |
| <section id="exhibits" class="py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="text-sm font-bold text-red-800 tracking-widest uppercase mb-3">Коллекция</h2> | |
| <h3 class="text-4xl font-serif font-bold text-gray-900 mb-6">Музейная экспозиция</h3> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Уникальные артефакты, рассказывающие о боевом пути воинов-интернационалистов. | |
| Предметы, которые хранят память о подвигах и жертвах. | |
| </p> | |
| <!-- Filter buttons --> | |
| <div class="flex flex-wrap justify-center gap-3 mb-12"> | |
| <button class="exhibit-filter active px-6 py-2 bg-red-800 text-white rounded-full font-medium transition-all" data-filter="all">Все</button> | |
| <button class="exhibit-filter px-6 py-2 bg-gray-200 text-gray-700 hover:bg-gray-300 rounded-full font-medium transition-all" data-filter="afghanistan">Афганистан</button> | |
| <button class="exhibit-filter px-6 py-2 bg-gray-200 text-gray-700 hover:bg-gray-300 rounded-full font-medium transition-all" data-filter="caucasus">Северный Кавказ</button> | |
| <button class="exhibit-filter px-6 py-2 bg-gray-200 text-gray-700 hover:bg-gray-300 rounded-full font-medium transition-all" data-filter="personal">Личные вещи</button> | |
| <button class="exhibit-filter px-6 py-2 bg-gray-200 text-gray-700 hover:bg-gray-300 rounded-full font-medium transition-all" data-filter="documents">Документы</button> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="exhibits-grid"> | |
| <!-- Exhibit 1 --> | |
| <div class="exhibit-item group cursor-pointer" data-category="afghanistan" onclick="openExhibitModal(1)"> | |
| <div class="relative overflow-hidden rounded-2xl bg-gray-100 aspect-[4/3] mb-4"> | |
| <img src="http://static.photos/indoor/640x480/201" alt="Боевая экипировка" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300"> | |
| <span class="inline-flex items-center px-3 py-1 bg-yellow-500 text-white text-sm font-semibold rounded-full"> | |
| <i data-lucide="zoom-in" class="w-4 h-4 mr-1"></i> | |
| Подробнее | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-red-800 uppercase tracking-wider">Афганистан</span> | |
| <span class="text-xs text-gray-500">№ 001</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-red-800 transition-colors">Боевая экипировка советского солдата</h4> | |
| <p class="text-gray-600 text-sm line-clamp-2">Полный комплект экипировки военнослужащего ОКСВА: бронежилет, каска, разгрузочная система...</p> | |
| </div> | |
| <!-- Exhibit 2 --> | |
| <div class="exhibit-item group cursor-pointer" data-category="personal" onclick="openExhibitModal(2)"> | |
| <div class="relative overflow-hidden rounded-2xl bg-gray-100 aspect-[4/3] mb-4"> | |
| <img src="http://static.photos/technology/640x480/202" alt="Автомат Калашникова" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300"> | |
| <span class="inline-flex items-center px-3 py-1 bg-yellow-500 text-white text-sm font-semibold rounded-full"> | |
| <i data-lucide="zoom-in" class="w-4 h-4 mr-1"></i> | |
| Подробнее | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-red-800 uppercase tracking-wider">Оружие</span> | |
| <span class="text-xs text-gray-500">№ 002</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-red-800 transition-colors">Автомат Калашникова АК-74</h4> | |
| <p class="text-gray-600 text-sm line-clamp-2">Основное стрелковое оружие советских войск в Афганистане. Экспонат с боевым следованием...</p> | |
| </div> | |
| <!-- Exhibit 3 --> | |
| <div class="exhibit-item group cursor-pointer" data-category="documents" onclick="openExhibitModal(3)"> | |
| <div class="relative overflow-hidden rounded-2xl bg-gray-100 aspect-[4/3] mb-4"> | |
| <img src="http://static.photos/history/640x480/203" alt="Боевая книжка" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300"> | |
| <span class="inline-flex items-center px-3 py-1 bg-yellow-500 text-white text-sm font-semibold rounded-full"> | |
| <i data-lucide="zoom-in" class="w-4 h-4 mr-1"></i> | |
| Подробнее | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-red-800 uppercase tracking-wider">Документы</span> | |
| <span class="text-xs text-gray-500">№ 003</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-red-800 transition-colors">Боевая книжка военнослужащего</h4> | |
| <p class="text-gray-600 text-sm line-clamp-2">Личный документ сержанта Иванова А.В., проходившего службу в Кандагаре в 1986-1987 гг...</p> | |
| </div> | |
| <!-- Exhibit 4 --> | |
| <div class="exhibit-item group cursor-pointer" data-category="caucasus" onclick="openExhibitModal(4)"> | |
| <div class="relative overflow-hidden rounded-2xl bg-gray-100 aspect-[4/3] mb-4"> | |
| <img src="http://static.photos/outdoor/640x480/204" alt="Горная форма" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300"> | |
| <span class="inline-flex items-center px-3 py-1 bg-yellow-500 text-white text-sm font-semibold rounded-full"> | |
| <i data-lucide="zoom-in" class="w-4 h-4 mr-1"></i> | |
| Подробнее | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-red-800 uppercase tracking-wider">Северный Кавказ</span> | |
| <span class="text-xs text-gray-500">№ 004</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-red-800 transition-colors">Горная форма разведчика</h4> | |
| <p class="text-gray-600 text-sm line-clamp-2">Специальная экипировка разведывательной группы, действовавшей в горах Чечни...</p> | |
| </div> | |
| <!-- Exhibit 5 --> | |
| <div class="exhibit-item group cursor-pointer" data-category="personal" onclick="openExhibitModal(5)"> | |
| <div class="relative overflow-hidden rounded-2xl bg-gray-100 aspect-[4/3] mb-4"> | |
| <img src="http://static.photos/workspace/640x480/205" alt="Письма с фронта" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300"> | |
| <span class="inline-flex items-center px-3 py-1 bg-yellow-500 text-white text-sm font-semibold rounded-full"> | |
| <i data-lucide="zoom-in" class="w-4 h-4 mr-1"></i> | |
| Подробнее | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-red-800 uppercase tracking-wider">Личные вещи</span> | |
| <span class="text-xs text-gray-500">№ 005</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-red-800 transition-colors">Письма военнослужащих</h4> | |
| <p class="text-gray-600 text-sm line-clamp-2">Подборка писем солдат, отправленных из Афганистана родным в Ленинград. 1985-1988 гг...</p> | |
| </div> | |
| <!-- Exhibit 6 --> | |
| <div class="exhibit-item group cursor-pointer" data-category="afghanistan" onclick="openExhibitModal(6)"> | |
| <div class="relative overflow-hidden rounded-2xl bg-gray-100 aspect-[4/3] mb-4"> | |
| <img src="http://static.photos/indoor/640x480/206" alt="Медицинская сумка" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300"> | |
| <span class="inline-flex items-center px-3 py-1 bg-yellow-500 text-white text-sm font-semibold rounded-full"> | |
| <i data-lucide="zoom-in" class="w-4 h-4 mr-1"></i> | |
| Подробнее | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-red-800 uppercase tracking-wider">Афганистан</span> | |
| <span class="text-xs text-gray-500">№ 006</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-red-800 transition-colors">Медицинская сумка санитара</h4> | |
| <p class="text-gray-600 text-sm line-clamp-2">Индивидуальная медицинская сумка (ИМС) санитара роты. Содержит оригинальные медикаменты...</p> | |
| </div> | |
| <!-- Exhibit 7 --> | |
| <div class="exhibit-item group cursor-pointer" data-category="caucasus" onclick="openExhibitModal(7)"> | |
| <div class="relative overflow-hidden rounded-2xl bg-gray-100 aspect-[4/3] mb-4"> | |
| <img src="http://static.photos/technology/640x480/207" alt="Радиостанция" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300"> | |
| <span class="inline-flex items-center px-3 py-1 bg-yellow-500 text-white text-sm font-semibold rounded-full"> | |
| <i data-lucide="zoom-in" class="w-4 h-4 mr-1"></i> | |
| Подробнее | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-red-800 uppercase tracking-wider">Северный Кавказ</span> | |
| <span class="text-xs text-gray-500">№ 007</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-red-800 transition-colors">Полевая радиостанция Р-148</h4> | |
| <p class="text-gray-600 text-sm line-clamp-2">Ультракоротковолновая радиостанция, использовавшаяся для связи в горных условиях...</p> | |
| </div> | |
| <!-- Exhibit 8 --> | |
| <div class="exhibit-item group cursor-pointer" data-category="personal" onclick="openExhibitModal(8)"> | |
| <div class="relative overflow-hidden rounded-2xl bg-gray-100 aspect-[4/3] mb-4"> | |
| <img src="http://static.photos/indoor/640x480/208" alt="Фотоальбом" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300"> | |
| <span class="inline-flex items-center px-3 py-1 bg-yellow-500 text-white text-sm font-semibold rounded-full"> | |
| <i data-lucide="zoom-in" class="w-4 h-4 mr-1"></i> | |
| Подробнее | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-red-800 uppercase tracking-wider">Личные вещи</span> | |
| <span class="text-xs text-gray-500">№ 008</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-red-800 transition-colors">Фотоальбом офицера</h4> | |
| <p class="text-gray-600 text-sm line-clamp-2">Личный альбом капитана Петрова В.С. с фотографиями службы в Гармском районе...</p> | |
| </div> | |
| <!-- Exhibit 9 --> | |
| <div class="exhibit-item group cursor-pointer" data-category="documents" onclick="openExhibitModal(9)"> | |
| <div class="relative overflow-hidden rounded-2xl bg-gray-100 aspect-[4/3] mb-4"> | |
| <img src="http://static.photos/history/640x480/209" alt="Грамота" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> | |
| <div class="absolute bottom-4 left-4 right-4 transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300"> | |
| <span class="inline-flex items-center px-3 py-1 bg-yellow-500 text-white text-sm font-semibold rounded-full"> | |
| <i data-lucide="zoom-in" class="w-4 h-4 mr-1"></i> | |
| Подробнее | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-xs font-semibold text-red-800 uppercase tracking-wider">Награды</span> | |
| <span class="text-xs text-gray-500">№ 009</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-2 group-hover:text-red-800 transition-colors">Комплект наград и грамот</h4> | |
| <p class="text-gray-600 text-sm line-clamp-2">Медали "За отвагу", "За боевые заслуги" и грамоты майора Соколова Д.И., погибшего при исполнении...</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-600 mb-6">Всего в фондах музея более <strong class="text-red-800">200 уникальных экспонатов</strong></p> | |
| <a href="#contacts" class="inline-flex items-center px-8 py-4 bg-red-800 text-white font-semibold rounded-lg hover:bg-red-700 transition-all transform hover:scale-105 shadow-lg"> | |
| Записаться на экскурсию | |
| <i data-lucide="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Exhibit Modal --> | |
| <div id="exhibit-modal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"> | |
| <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeExhibitModal()"></div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"> | |
| <div class="relative"> | |
| <img id="modal-image" src="" alt="" class="w-full h-64 sm:h-80 object-cover"> | |
| <button onclick="closeExhibitModal()" class="absolute top-4 right-4 w-10 h-10 bg-white/90 rounded-full flex items-center justify-center hover:bg-white transition-colors"> | |
| <i data-lucide="x" class="w-6 h-6 text-gray-800"></i> | |
| </button> | |
| <div class="absolute top-4 left-4"> | |
| <span id="modal-category" class="px-4 py-1 bg-red-800 text-white text-sm font-semibold rounded-full"></span> | |
| </div> | |
| </div> | |
| <div class="px-6 py-6 sm:px-10 sm:py-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 id="modal-title" class="text-2xl font-bold text-gray-900 font-serif"></h3> | |
| <span id="modal-number" class="text-sm text-gray-500 font-mono"></span> | |
| </div> | |
| <div class="prose prose-red max-w-none"> | |
| <p id="modal-description" class="text-gray-600 text-lg leading-relaxed mb-6"></p> | |
| <div class="bg-gray-50 rounded-xl p-6 border-l-4 border-red-800"> | |
| <h4 class="font-bold text-gray-900 mb-2">Историческая справка</h4> | |
| <p id="modal-history" class="text-gray-700 text-sm leading-relaxed"></p> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-between items-center pt-6 border-t border-gray-200"> | |
| <span class="text-sm text-gray-500">Экспонат из фондов музея "Боевое братство"</span> | |
| <button onclick="closeExhibitModal()" class="px-6 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold rounded-lg transition-colors"> | |
| Закрыть | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activities Section --> | |
| <section id="activities" class="py-24 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="text-sm font-bold text-red-800 tracking-widest uppercase mb-3">Актив музея</h2> | |
| <h3 class="text-4xl font-serif font-bold text-gray-900 mb-6">Экскурсии и мероприятия</h3> | |
| <p class="text-lg text-gray-600"> | |
| На базе музея регулярно проходят разнообразные мероприятия: от научных конференций до культурно-досуговых встреч | |
| </p> | |
| </div> | |
| <!-- Permanent Tours Highlight --> | |
| <div class="bg-red-50 border-2 border-red-200 rounded-2xl p-8 mb-12"> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="p-3 bg-red-800 rounded-full"> | |
| <i data-lucide="route" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h4 class="text-2xl font-bold text-gray-900">Постоянные экскурсии</h4> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="flex items-start space-x-4 bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center"> | |
| <span class="font-bold text-red-800">1</span> | |
| </div> | |
| <div> | |
| <h5 class="font-bold text-gray-900 mb-2">Обзорная экскурсия по экспозиции музея</h5> | |
| <p class="text-gray-600 text-sm">Погружение в историю региональных вооруженных конфликтов, знакомство с уникальными экспонатами и документами</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4 bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center"> | |
| <span class="font-bold text-red-800">2</span> | |
| </div> | |
| <div> | |
| <h5 class="font-bold text-gray-900 mb-2">Обзорная экскурсия по территории парка «Боевое Братство»</h5> | |
| <p class="text-gray-600 text-sm">Познавательная прогулка по мемориальной территории с рассказом о создании и значении парка</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <a href="#contacts" class="inline-flex items-center text-red-800 font-semibold hover:text-red-700"> | |
| <i data-lucide="calendar-check" class="mr-2 w-5 h-5"></i> | |
| Записаться на экскурсию | |
| </a> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Activity 1 --> | |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group"> | |
| <div class="h-48 bg-gray-200 relative overflow-hidden"> | |
| <img src="http://static.photos/indoor/640x360/101" alt="Лекции и семинары" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute top-4 right-4 bg-red-800 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Научные | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center space-x-2 text-sm text-gray-500 mb-3"> | |
| <i data-lucide="calendar" class="w-4 h-4"></i> | |
| <span>Регулярно</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-3">Лекции и семинары</h4> | |
| <p class="text-gray-600 mb-4">Научно-популярные лекции о военной истории, пресс-конференции с участием историков и ветеранов</p> | |
| <a href="#" class="inline-flex items-center text-red-800 font-semibold hover:text-red-700"> | |
| Подробнее <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Activity 2 --> | |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group"> | |
| <div class="h-48 bg-gray-200 relative overflow-hidden"> | |
| <img src="http://static.photos/vintage/640x360/45" alt="Ветераны ВОВ на встрече" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute top-4 right-4 bg-yellow-600 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Встречи | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center space-x-2 text-sm text-gray-500 mb-3"> | |
| <i data-lucide="users" class="w-4 h-4"></i> | |
| <span>Ежемесячно</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-3">Встречи с ветеранами</h4> | |
| <p class="text-gray-600 mb-4">Живые встречи с ветеранами Великой Отечественной войны. Участники боевых действий делятся воспоминаниями о героическом прошлом</p> | |
| <a href="#" class="inline-flex items-center text-red-800 font-semibold hover:text-red-700"> | |
| Подробнее <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Activity 3 --> | |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group"> | |
| <div class="h-48 bg-gray-200 relative overflow-hidden"> | |
| <img src="http://static.photos/education/640x360/103" alt="Конкурсы чтецов" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute top-4 right-4 bg-blue-800 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Культурные | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center space-x-2 text-sm text-gray-500 mb-3"> | |
| <i data-lucide="mic" class="w-4 h-4"></i> | |
| <span>Ежеквартально</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-3">Конкурсы чтецов</h4> | |
| <p class="text-gray-600 mb-4">Литературно-музыкальные гостиные, конкурсы художественного слова, посвященные военной тематике</p> | |
| <a href="#" class="inline-flex items-center text-red-800 font-semibold hover:text-red-700"> | |
| Подробнее <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Activity 4 --> | |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group"> | |
| <div class="h-48 bg-gray-200 relative overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/104" alt="Кинопоказы" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute top-4 right-4 bg-purple-800 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Просвещение | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center space-x-2 text-sm text-gray-500 mb-3"> | |
| <i data-lucide="film" class="w-4 h-4"></i> | |
| <span>По расписанию</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-3">Документальные показы</h4> | |
| <p class="text-gray-600 mb-4">Просмотры документальных и художественных фильмов о военных конфликтах и героических подвигах</p> | |
| <a href="#" class="inline-flex items-center text-red-800 font-semibold hover:text-red-700"> | |
| Подробнее <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Activity 5 --> | |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group"> | |
| <div class="h-48 bg-gray-200 relative overflow-hidden"> | |
| <img src="http://static.photos/art/640x360/105" alt="Выставки" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute top-4 right-4 bg-green-700 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Выставки | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center space-x-2 text-sm text-gray-500 mb-3"> | |
| <i data-lucide="image" class="w-4 h-4"></i> | |
| <span>Сезонные</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-3">Тематические выставки</h4> | |
| <p class="text-gray-600 mb-4">Выставки работ учащихся, фотовыставки, экспозиции исторических артефактов и документов</p> | |
| <a href="#" class="inline-flex items-center text-red-800 font-semibold hover:text-red-700"> | |
| Подробнее <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Activity 6 --> | |
| <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group"> | |
| <div class="h-48 bg-gray-200 relative overflow-hidden"> | |
| <img src="http://static.photos/workspace/640x360/106" alt="Экскурсии" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute top-4 right-4 bg-red-800 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Экскурсии | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center space-x-2 text-sm text-gray-500 mb-3"> | |
| <i data-lucide="map" class="w-4 h-4"></i> | |
| <span>По предварительной записи</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-3">Экскурсии по музею</h4> | |
| <p class="text-gray-600 mb-4">Познавательные экскурсии для учащихся школ и гостей с демонстрацией экспонатов и рассказом о истории</p> | |
| <a href="#" class="inline-flex items-center text-red-800 font-semibold hover:text-red-700"> | |
| Подробнее <i data-lucide="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Documents Section --> | |
| <section id="documents" class="py-24 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="text-sm font-bold text-red-800 tracking-widest uppercase mb-3">Документация</h2> | |
| <h3 class="text-4xl font-serif font-bold text-gray-900 mb-6">Регламентирующие документы</h3> | |
| <p class="text-lg text-gray-600"> | |
| Официальные документы музея: устав, положения, информационные карты и методические материалы | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Document 1 --> | |
| <a href="#" class="flex items-center p-6 bg-gray-50 rounded-xl hover:bg-red-50 transition-colors border border-gray-200 hover:border-red-200 group"> | |
| <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-200 transition-colors"> | |
| <i data-lucide="file-text" class="w-6 h-6 text-red-800"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h4 class="text-lg font-semibold text-gray-900 group-hover:text-red-800 transition-colors">Устав музея</h4> | |
| <p class="text-sm text-gray-500">PDF, 2.4 МБ</p> | |
| </div> | |
| <i data-lucide="download" class="w-5 h-5 text-gray-400 group-hover:text-red-800 transition-colors"></i> | |
| </a> | |
| <!-- Document 2 --> | |
| <a href="#" class="flex items-center p-6 bg-gray-50 rounded-xl hover:bg-red-50 transition-colors border border-gray-200 hover:border-red-200 group"> | |
| <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-200 transition-colors"> | |
| <i data-lucide="file-text" class="w-6 h-6 text-red-800"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h4 class="text-lg font-semibold text-gray-900 group-hover:text-red-800 transition-colors">Положение о музее</h4> | |
| <p class="text-sm text-gray-500">PDF, 1.8 МБ</p> | |
| </div> | |
| <i data-lucide="download" class="w-5 h-5 text-gray-400 group-hover:text-red-800 transition-colors"></i> | |
| </a> | |
| <!-- Document 3 --> | |
| <a href="#" class="flex items-center p-6 bg-gray-50 rounded-xl hover:bg-red-50 transition-colors border border-gray-200 hover:border-red-200 group"> | |
| <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-200 transition-colors"> | |
| <i data-lucide="map" class="w-6 h-6 text-red-800"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h4 class="text-lg font-semibold text-gray-900 group-hover:text-red-800 transition-colors">Информационная карта</h4> | |
| <p class="text-sm text-gray-500">PDF, 3.2 МБ</p> | |
| </div> | |
| <i data-lucide="download" class="w-5 h-5 text-gray-400 group-hover:text-red-800 transition-colors"></i> | |
| </a> | |
| <!-- Document 4 --> | |
| <a href="#" class="flex items-center p-6 bg-gray-50 rounded-xl hover:bg-red-50 transition-colors border border-gray-200 hover:border-red-200 group"> | |
| <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-200 transition-colors"> | |
| <i data-lucide="clipboard-list" class="w-6 h-6 text-red-800"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h4 class="text-lg font-semibold text-gray-900 group-hover:text-red-800 transition-colors">План работы музея</h4> | |
| <p class="text-sm text-gray-500">PDF, 1.5 МБ</p> | |
| </div> | |
| <i data-lucide="download" class="w-5 h-5 text-gray-400 group-hover:text-red-800 transition-colors"></i> | |
| </a> | |
| <!-- Document 5 --> | |
| <a href="#" class="flex items-center p-6 bg-gray-50 rounded-xl hover:bg-red-50 transition-colors border border-gray-200 hover:border-red-200 group"> | |
| <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-200 transition-colors"> | |
| <i data-lucide="book" class="w-6 h-6 text-red-800"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h4 class="text-lg font-semibold text-gray-900 group-hover:text-red-800 transition-colors">Методические рекомендации</h4> | |
| <p class="text-sm text-gray-500">PDF, 4.1 МБ</p> | |
| </div> | |
| <i data-lucide="download" class="w-5 h-5 text-gray-400 group-hover:text-red-800 transition-colors"></i> | |
| </a> | |
| <!-- Document 6 --> | |
| <a href="#" class="flex items-center p-6 bg-gray-50 rounded-xl hover:bg-red-50 transition-colors border border-gray-200 hover:border-red-200 group"> | |
| <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center group-hover:bg-red-200 transition-colors"> | |
| <i data-lucide="award" class="w-6 h-6 text-red-800"></i> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h4 class="text-lg font-semibold text-gray-900 group-hover:text-red-800 transition-colors">Свидетельство о регистрации</h4> | |
| <p class="text-sm text-gray-500">PDF, 0.8 МБ</p> | |
| </div> | |
| <i data-lucide="download" class="w-5 h-5 text-gray-400 group-hover:text-red-800 transition-colors"></i> | |
| </a> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="http://45.153.71.159/?page_id=41" target="_blank" class="inline-flex items-center px-6 py-3 border-2 border-red-800 text-red-800 font-semibold rounded-lg hover:bg-red-800 hover:text-white transition-all"> | |
| Все документы | |
| <i data-lucide="external-link" class="ml-2 w-4 h-4"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Info Map Section --> | |
| <section id="map" class="py-24 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h2 class="text-sm font-bold text-red-800 tracking-widest uppercase mb-3">Локация</h2> | |
| <h3 class="text-4xl font-serif font-bold text-gray-900 mb-6">Информационная карта музея</h3> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Музей расположен на территории ГБОУ СОШ № 625 Невского района Санкт-Петербурга. | |
| Удобный доступ общественным транспортом, оборудованные экспозиционные залы. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center"> | |
| <i data-lucide="navigation" class="w-5 h-5 text-red-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-900">Адрес</h4> | |
| <p class="text-gray-600">193318, Санкт-Петербург, ул. Джона Рида, д. 6, лит. «А»</p> | |
| <p class="text-sm text-gray-500 mt-1">ГБОУ СОШ № 625, Невский район</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center"> | |
| <i data-lucide="clock" class="w-5 h-5 text-red-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-900">Режим работы</h4> | |
| <p class="text-gray-600">Пн-Пт: 9:00 — 17:00</p> | |
| <p class="text-sm text-gray-500 mt-1">По предварительной записи для групп</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-4"> | |
| <div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center"> | |
| <i data-lucide="info" class="w-5 h-5 text-red-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-900">Доступность</h4> | |
| <p class="text-gray-600">Адаптировано для лиц с ограниченными возможностями</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex space-x-4"> | |
| <a href="https://yandex.ru/maps/-/CDXm5Z~" target="_blank" class="inline-flex items-center px-6 py-3 bg-red-800 text-white font-semibold rounded-lg hover:bg-red-700 transition-all"> | |
| <i data-lucide="map-pin" class="mr-2 w-5 h-5"></i> | |
| Построить маршрут | |
| </a> | |
| <a href="http://45.153.71.159/?page_id=58" target="_blank" class="inline-flex items-center px-6 py-3 border-2 border-gray-300 text-gray-700 font-semibold rounded-lg hover:border-red-800 hover:text-red-800 transition-all"> | |
| Схема проезда | |
| </a> | |
| </div> | |
| </div> | |
| <div class="relative h-[500px] bg-gray-200 rounded-2xl overflow-hidden shadow-xl"> | |
| <iframe | |
| src="https://yandex.ru/map-widget/v1/?um=constructor%3A8f5e2d1f3c4b5a6e7d8c9b0a1f2e3d4c5b6a7980&source=constructor" | |
| width="100%" | |
| height="100%" | |
| frameborder="0" | |
| class="absolute inset-0" | |
| title="Карта расположения музея"> | |
| </iframe> | |
| <div class="absolute bottom-4 left-4 bg-white p-4 rounded-lg shadow-lg max-w-xs"> | |
| <p class="font-semibold text-gray-900">ГБОУ СОШ № 625</p> | |
| <p class="text-sm text-gray-600">Музей «Боевое братство»</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials/Opinions Section --> | |
| <section class="py-24 bg-white border-t border-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="text-sm font-bold text-red-800 tracking-widest uppercase mb-3">Отзывы</h2> | |
| <h3 class="text-4xl font-serif font-bold text-gray-900 mb-6">Что думают о нашем музее?</h3> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-2xl border border-gray-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-yellow-500"> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6 italic">"Благодарим коллектив музея за огромную работу по патриотическому воспитанию подрастающего поколения. Встречи с ветеранами - это бесценный опыт для детей."</p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-red-800 rounded-full flex items-center justify-center text-white font-bold">ВБ</div> | |
| <div class="ml-3"> | |
| <p class="font-semibold text-gray-900">Всероссийская организация ветеранов</p> | |
| <p class="text-sm text-gray-500">«Боевое братство»</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-2xl border border-gray-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-yellow-500"> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6 italic">"Экскурсии проводятся на высоком профессиональном уровне. Экспозиция содержит уникальные материалы о Афганской войне и конфликтах на Кавказе."</p> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-gray-600 rounded-full flex items-center justify-center text-white font-bold">ИК</div> | |
| <div class="ml-3"> | |
| <p class="font-semibold text-gray-900">Иванов К.П.</p> | |
| <p class="text-sm text-gray-500">Историк, методист</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-2xl border border-gray-100"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex text-yellow-500"> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| <i data-lucide="star" class="w-5 h-5 fill-current"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6 italic">"Наши ученики всегда с нетерпением ждут экскурсий в музей. Особенно ценны жив |