diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider1.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider1.jpg
new file mode 100644
index 0000000..2797af6
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider1.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider10.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider10.jpg
new file mode 100644
index 0000000..14cfe00
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider10.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider11.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider11.jpg
new file mode 100644
index 0000000..01c22e2
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider11.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider12.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider12.jpg
new file mode 100644
index 0000000..6875d82
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider12.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider13.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider13.jpg
new file mode 100644
index 0000000..1bf5930
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider13.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider14.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider14.jpg
new file mode 100644
index 0000000..fe7d322
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider14.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider15.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider15.jpg
new file mode 100644
index 0000000..c2476b0
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider15.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider16.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider16.jpg
new file mode 100644
index 0000000..66a1173
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider16.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider17.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider17.jpg
new file mode 100644
index 0000000..455bde7
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider17.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider18.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider18.jpg
new file mode 100644
index 0000000..54317c0
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider18.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider19.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider19.jpg
new file mode 100644
index 0000000..71d1e61
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider19.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider2.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider2.jpg
new file mode 100644
index 0000000..91f7804
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider2.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider20.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider20.jpg
new file mode 100644
index 0000000..3d847f7
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider20.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider21.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider21.jpg
new file mode 100644
index 0000000..d428bb9
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider21.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider22.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider22.jpg
new file mode 100644
index 0000000..22ff5d8
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider22.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider23.png b/begushiybashkir/bbvue/src/assets/images/slider/slider23.png
new file mode 100644
index 0000000..92363bf
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider23.png differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider24.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider24.jpg
new file mode 100644
index 0000000..9fe3f20
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider24.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider4.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider4.jpg
new file mode 100644
index 0000000..3beca15
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider4.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider5.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider5.jpg
new file mode 100644
index 0000000..eaead00
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider5.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider6.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider6.jpg
new file mode 100644
index 0000000..31315e0
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider6.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider7.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider7.jpg
new file mode 100644
index 0000000..a43417b
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider7.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider8.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider8.jpg
new file mode 100644
index 0000000..7107550
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider8.jpg differ
diff --git a/begushiybashkir/bbvue/src/assets/images/slider/slider9.jpg b/begushiybashkir/bbvue/src/assets/images/slider/slider9.jpg
new file mode 100644
index 0000000..4dd7f6d
Binary files /dev/null and b/begushiybashkir/bbvue/src/assets/images/slider/slider9.jpg differ
diff --git a/begushiybashkir/bbvue/src/views/Gallery.vue b/begushiybashkir/bbvue/src/views/Gallery.vue
index 0832118..91e739f 100644
--- a/begushiybashkir/bbvue/src/views/Gallery.vue
+++ b/begushiybashkir/bbvue/src/views/Gallery.vue
@@ -1,47 +1,986 @@
 <template>
-  <div class="page">
-    <h1>📸 Галерея</h1>
-    <p>Моменты из жизни нашего клуба</p>
-    
-    <div class="gallery-grid">
-      <div v-for="n in 6" :key="n" class="gallery-item">
-        <img :src="`https://via.placeholder.com/300x200/2e8b57/ffffff?text=Фото+${n}`" 
-             alt="Галерея"
-             style="width: 100%; border-radius: 8px;">
+  <div class="gallery-page">
+    <!-- Герой-секция -->
+    <section class="hero-section">
+      <div class="container">
+        <h1 class="hero-title">📸 Наша галерея</h1>
+        <p class="hero-subtitle">Запечатленные моменты тренировок, соревнований и дружеских встреч</p>
+        <div class="hero-stats">
+          <div class="stat">
+            <div class="stat-number">24+</div>
+            <div class="stat-label">Фотографий</div>
+          </div>
+          <div class="stat">
+            <div class="stat-number">12+</div>
+            <div class="stat-label">Мероприятий</div>
+          </div>
+          <div class="stat">
+            <div class="stat-number">100%</div>
+            <div class="stat-label">Эмоций</div>
+          </div>
+        </div>
       </div>
+    </section>
+
+    <!-- Основной слайдер -->
+    <section class="slider-section">
+      <div class="container">
+        <h2 class="section-title">Лучшие моменты</h2>
+        <div class="slider-container">
+          <div class="slider" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
+            <div 
+              v-for="(slide, index) in slides" 
+              :key="index"
+              class="slide"
+              :class="{ 'active': currentSlide === index }"
+            >
+              <img 
+                :src="getImageUrl(slide.src)" 
+                :alt="slide.alt"
+                class="slide-image"
+                @load="imageLoaded(index)"
+              >
+              <div class="slide-overlay">
+                <div class="slide-content">
+                  <h3>{{ slide.title }}</h3>
+                  <p>{{ slide.description }}</p>
+                  <span class="slide-date">{{ slide.date }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Навигация слайдера -->
+          <button class="slider-nav prev" @click="prevSlide" aria-label="Предыдущее фото">
+            ‹
+          </button>
+          <button class="slider-nav next" @click="nextSlide" aria-label="Следующее фото">
+            ›
+          </button>
+
+          <!-- Индикаторы -->
+          <div class="slider-indicators">
+            <button 
+              v-for="(slide, index) in slides" 
+              :key="index"
+              :class="['indicator', { 'active': currentSlide === index }]"
+              @click="goToSlide(index)"
+              :aria-label="`Перейти к фото ${index + 1}`"
+            ></button>
+          </div>
+
+          <!-- Счетчик -->
+          <div class="slider-counter">
+            {{ currentSlide + 1 }} / {{ slides.length }}
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Мини-галерея -->
+    <section class="gallery-section">
+      <div class="container">
+        <h2 class="section-title">Все фотографии</h2>
+        
+        <!-- Фильтры -->
+        <div class="gallery-filters">
+          <button 
+            v-for="filter in filters" 
+            :key="filter.value"
+            :class="['filter-btn', { 'active': activeFilter === filter.value }]"
+            @click="setFilter(filter.value)"
+          >
+            {{ filter.label }}
+          </button>
+        </div>
+
+        <!-- Сетка фотографий -->
+        <div class="gallery-grid">
+          <div 
+            v-for="(image, index) in filteredImages" 
+            :key="index"
+            class="gallery-item"
+            @click="openLightbox(index)"
+          >
+            <img 
+              :src="getImageUrl(image.src)" 
+              :alt="image.alt"
+              class="gallery-image"
+              loading="lazy"
+            >
+            <div class="gallery-overlay">
+              <div class="overlay-content">
+                <span class="image-date">{{ image.date }}</span>
+                <button class="zoom-btn" aria-label="Увеличить фото">
+                  🔍
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Кнопка загрузки еще -->
+        <div class="load-more" v-if="visibleImages < allImages.length">
+          <button class="btn btn-outline" @click="loadMore">
+            📁 Загрузить еще фото
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <!-- Лайтбокс -->
+    <div class="lightbox" :class="{ 'active': lightboxActive }" v-if="lightboxActive">
+      <div class="lightbox-content">
+        <button class="lightbox-close" @click="closeLightbox" aria-label="Закрыть">
+          ✕
+        </button>
+        <button class="lightbox-nav prev" @click="prevLightbox" aria-label="Предыдущее фото">
+          ‹
+        </button>
+        
+        <div class="lightbox-image-container">
+          <img 
+            :src="getImageUrl(currentLightboxImage.src)" 
+            :alt="currentLightboxImage.alt"
+            class="lightbox-image"
+          >
+          <div class="lightbox-info">
+            <h3>{{ currentLightboxImage.title }}</h3>
+            <p>{{ currentLightboxImage.description }}</p>
+            <span class="lightbox-date">{{ currentLightboxImage.date }}</span>
+          </div>
+        </div>
+
+        <button class="lightbox-nav next" @click="nextLightbox" aria-label="Следующее фото">
+          ›
+        </button>
+      </div>
+      <div class="lightbox-overlay" @click="closeLightbox"></div>
     </div>
 
-    <div class="gallery-actions">
-      <button class="btn">📁 Альбомы</button>
-      <button class="btn">🎥 Видео</button>
-    </div>
+    <!-- Призыв к действию -->
+    <section class="cta-section">
+      <div class="container">
+        <div class="cta-content">
+          <h2>Хочешь попасть в нашу галерею?</h2>
+          <p>Присоединяйся к нашей беговой семье и стань частью этих ярких моментов!</p>
+          <div class="cta-buttons">
+            <router-link to="/training" class="btn btn-primary">
+              📅 Посмотреть расписание
+            </router-link>
+            <router-link to="/register" class="btn btn-secondary">
+              🏃 Вступить в клуб
+            </router-link>
+          </div>
+          <div class="cta-features">
+            <div class="feature">✅ Бесплатная первая тренировка</div>
+            <div class="feature">✅ Профессиональный тренер</div>
+            <div class="feature">✅ Дружеская атмосфера</div>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script>
 export default {
   // eslint-disable-next-line vue/multi-word-component-names
-  name: 'Gallery'
+  name: 'Gallery',
+  data() {
+    return {
+      currentSlide: 0,
+      lightboxActive: false,
+      currentLightboxIndex: 0,
+      activeFilter: 'all',
+      visibleImages: 12,
+      slides: [
+        {
+          src: 'slider/slider24.jpg',
+          alt: 'Беговой клуб Бегущий Башкир, РосХим Стерлитамак Забег 2025',
+          title: 'РосХим Стерлитамак 2025',
+          description: 'Наши участники на крупном забеге',
+          date: 'Январь 2025'
+        },
+        {
+          src: 'slider/slider23.png',
+          alt: 'Беговой клуб, общее фото УММ 2025',
+          title: 'Уфимский марафон 2025',
+          description: 'Командное фото после успешного забега',
+          date: 'Январь 2025'
+        },
+        {
+          src: 'slider/slider1.jpg',
+          alt: 'Беговой клуб, общее фото',
+          title: 'Тренировка в парке',
+          description: 'Регулярные занятия на свежем воздухе',
+          date: 'Декабрь 2024'
+        },
+        {
+          src: 'slider/slider2.jpg',
+          alt: 'Беговой клуб, общее фото',
+          title: 'Техника бега',
+          description: 'Работа над правильной техникой',
+          date: 'Декабрь 2024'
+        },
+        {
+          src: 'slider/slider4.jpg',
+          alt: 'Беговой клуб, общее фото',
+          title: 'Групповая тренировка',
+          description: 'Поддержка и мотивация в команде',
+          date: 'Ноябрь 2024'
+        },
+        {
+          src: 'slider/slider5.jpg',
+          alt: 'Беговой клуб, общее фото',
+          title: 'Соревнования',
+          description: 'Участие в городских забегах',
+          date: 'Ноябрь 2024'
+        }
+      ],
+      allImages: [
+        // Первые 6 - это слайды, остальные - дополнительные фото
+        { src: 'slider/slider1.jpg', alt: 'Тренировка в парке', date: 'Декабрь 2024', category: 'training' },
+        { src: 'slider/slider2.jpg', alt: 'Техника бега', date: 'Декабрь 2024', category: 'training' },
+        { src: 'slider/slider4.jpg', alt: 'Групповая тренировка', date: 'Ноябрь 2024', category: 'training' },
+        { src: 'slider/slider5.jpg', alt: 'Соревнования', date: 'Ноябрь 2024', category: 'events' },
+        { src: 'slider/slider6.jpg', alt: 'Награждение', date: 'Ноябрь 2024', category: 'events' },
+        { src: 'slider/slider7.jpg', alt: 'Командный дух', date: 'Октябрь 2024', category: 'community' },
+        { src: 'slider/slider8.jpg', alt: 'Вечерняя пробежка', date: 'Октябрь 2024', category: 'training' },
+        { src: 'slider/slider9.jpg', alt: 'Растяжка после бега', date: 'Октябрь 2024', category: 'training' },
+        { src: 'slider/slider10.jpg', alt: 'Общение после тренировки', date: 'Сентябрь 2024', category: 'community' },
+        { src: 'slider/slider11.jpg', alt: 'Индивидуальные занятия', date: 'Сентябрь 2024', category: 'training' },
+        { src: 'slider/slider12.jpg', alt: 'Подготовка к старту', date: 'Сентябрь 2024', category: 'events' },
+        { src: 'slider/slider13.jpg', alt: 'Победа!', date: 'Август 2024', category: 'events' },
+        { src: 'slider/slider14.jpg', alt: 'Трейл раннинг', date: 'Август 2024', category: 'training' },
+        { src: 'slider/slider15.jpg', alt: 'Горные маршруты', date: 'Июль 2024', category: 'training' },
+        { src: 'slider/slider16.jpg', alt: 'Летние тренировки', date: 'Июль 2024', category: 'training' },
+        { src: 'slider/slider17.jpg', alt: 'Восстановление', date: 'Июнь 2024', category: 'training' },
+        { src: 'slider/slider18.jpg', alt: 'Мастер-класс', date: 'Июнь 2024', category: 'events' },
+        { src: 'slider/slider19.jpg', alt: 'Новички клуба', date: 'Май 2024', category: 'community' },
+        { src: 'slider/slider20.jpg', alt: 'Весенний забег', date: 'Май 2024', category: 'events' },
+        { src: 'slider/slider21.jpg', alt: 'Работа в группе', date: 'Апрель 2024', category: 'training' },
+        { src: 'slider/slider22.jpg', alt: 'Совместный отдых', date: 'Апрель 2024', category: 'community' },
+        { src: 'slider/slider23.png', alt: 'Уфимский марафон', date: 'Март 2024', category: 'events' },
+        { src: 'slider/slider24.jpg', alt: 'РосХим Стерлитамак', date: 'Январь 2025', category: 'events' }
+      ],
+      filters: [
+        { value: 'all', label: 'Все фото' },
+        { value: 'training', label: 'Тренировки' },
+        { value: 'events', label: 'Соревнования' },
+        { value: 'community', label: 'Мероприятия' }
+      ],
+      slideInterval: null
+    }
+  },
+  computed: {
+    filteredImages() {
+      let filtered = this.allImages
+      
+      if (this.activeFilter !== 'all') {
+        filtered = filtered.filter(image => image.category === this.activeFilter)
+      }
+      
+      return filtered.slice(0, this.visibleImages)
+    },
+    currentLightboxImage() {
+      return this.allImages[this.currentLightboxIndex] || {}
+    }
+  },
+  methods: {
+    getImageUrl(path) {
+      // В продакшене замените на правильный путь
+      return `./src/assets/images/${path}`
+    },
+    nextSlide() {
+      this.currentSlide = (this.currentSlide + 1) % this.slides.length
+    },
+    prevSlide() {
+      this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length
+    },
+    goToSlide(index) {
+      this.currentSlide = index
+    },
+    openLightbox(index) {
+      this.currentLightboxIndex = index
+      this.lightboxActive = true
+      document.body.style.overflow = 'hidden'
+    },
+    closeLightbox() {
+      this.lightboxActive = false
+      document.body.style.overflow = ''
+    },
+    nextLightbox() {
+      this.currentLightboxIndex = (this.currentLightboxIndex + 1) % this.allImages.length
+    },
+    prevLightbox() {
+      this.currentLightboxIndex = (this.currentLightboxIndex - 1 + this.allImages.length) % this.allImages.length
+    },
+    setFilter(filter) {
+      this.activeFilter = filter
+      this.visibleImages = 12
+    },
+    loadMore() {
+      this.visibleImages += 6
+    },
+    startAutoSlide() {
+      this.slideInterval = setInterval(() => {
+        this.nextSlide()
+      }, 5000)
+    },
+    stopAutoSlide() {
+      if (this.slideInterval) {
+        clearInterval(this.slideInterval)
+        this.slideInterval = null
+      }
+    },
+    imageLoaded(index) {
+      console.log(`Image ${index} loaded successfully`)
+    },
+    handleKeydown(event) {
+      if (!this.lightboxActive) return
+      
+      switch(event.key) {
+        case 'Escape':
+          this.closeLightbox()
+          break
+        case 'ArrowLeft':
+          this.prevLightbox()
+          break
+        case 'ArrowRight':
+          this.nextLightbox()
+          break
+      }
+    }
+  },
+  mounted() {
+    this.startAutoSlide()
+    document.addEventListener('keydown', this.handleKeydown)
+  },
+  beforeUnmount() {
+    this.stopAutoSlide()
+    document.removeEventListener('keydown', this.handleKeydown)
+    document.body.style.overflow = ''
+  }
 }
 </script>
 
 <style scoped>
+.gallery-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
+}
+
+/* Герой-секция */
+.hero-section {
+  background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
+  color: white;
+  padding: 80px 0 60px;
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  font-weight: 800;
+}
+
+.hero-subtitle {
+  font-size: 1.3rem;
+  opacity: 0.9;
+  margin-bottom: 2rem;
+}
+
+.hero-stats {
+  display: flex;
+  justify-content: center;
+  gap: 3rem;
+  flex-wrap: wrap;
+  margin-top: 2rem;
+}
+
+.stat {
+  text-align: center;
+}
+
+.stat-number {
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: #ffd700;
+  margin-bottom: 0.5rem;
+}
+
+.stat-label {
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+
+/* Основные стили */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.section-title {
+  text-align: center;
+  font-size: 2.5rem;
+  color: #2e8b57;
+  margin-bottom: 3rem;
+  font-weight: 700;
+}
+
+/* Слайдер */
+.slider-section {
+  padding: 4rem 0;
+}
+
+.slider-container {
+  position: relative;
+  max-width: 900px;
+  margin: 0 auto;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.slider {
+  display: flex;
+  transition: transform 0.5s ease;
+  height: 500px;
+}
+
+.slide {
+  flex: 0 0 100%;
+  position: relative;
+  height: 100%;
+}
+
+.slide-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.slide-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+  color: white;
+  padding: 2rem;
+}
+
+.slide-content h3 {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.slide-content p {
+  opacity: 0.9;
+  margin-bottom: 0.5rem;
+}
+
+.slide-date {
+  font-size: 0.9rem;
+  opacity: 0.7;
+}
+
+/* Навигация слайдера */
+.slider-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  font-size: 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+.slider-nav:hover {
+  background: white;
+  transform: translateY(-50%) scale(1.1);
+}
+
+.slider-nav.prev {
+  left: 20px;
+}
+
+.slider-nav.next {
+  right: 20px;
+}
+
+/* Индикаторы */
+.slider-indicators {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 10px;
+  z-index: 10;
+}
+
+.indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid white;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.indicator.active {
+  background: white;
+  transform: scale(1.2);
+}
+
+.slider-counter {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  z-index: 10;
+}
+
+/* Галерея */
+.gallery-section {
+  padding: 4rem 0;
+  background: white;
+}
+
+.gallery-filters {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 3rem;
+  flex-wrap: wrap;
+}
+
+.filter-btn {
+  padding: 12px 24px;
+  border: 2px solid #e9ecef;
+  background: white;
+  border-radius: 25px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 1rem;
+}
+
+.filter-btn:hover {
+  border-color: #2e8b57;
+}
+
+.filter-btn.active {
+  background: #2e8b57;
+  color: white;
+  border-color: #2e8b57;
+}
+
 .gallery-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1rem;
-  margin: 2rem 0;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 3rem;
 }
 
 .gallery-item {
-  transition: transform 0.3s;
+  position: relative;
+  border-radius: 15px;
+  overflow: hidden;
+  cursor: pointer;
+  aspect-ratio: 4/3;
+  transition: all 0.3s ease;
 }
 
 .gallery-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.gallery-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.gallery-item:hover .gallery-image {
   transform: scale(1.05);
 }
 
-.gallery-actions {
-  margin-top: 2rem;
+.gallery-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  display: flex;
+  align-items: flex-end;
+  padding: 1rem;
+}
+
+.gallery-item:hover .gallery-overlay {
+  opacity: 1;
+}
+
+.overlay-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  color: white;
+}
+
+.image-date {
+  font-size: 0.9rem;
+  opacity: 0.9;
+}
+
+.zoom-btn {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  padding: 8px;
+  border-radius: 50%;
+  cursor: pointer;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.zoom-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.load-more {
+  text-align: center;
+}
+
+/* Лайтбокс */
+.lightbox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+}
+
+.lightbox.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.lightbox-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(5px);
+}
+
+.lightbox-content {
+  position: relative;
+  z-index: 1001;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.lightbox-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  font-size: 2rem;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1002;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.lightbox-close:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.lightbox-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+  font-size: 2rem;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1002;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.lightbox-nav:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.lightbox-nav.prev {
+  left: 20px;
+}
+
+.lightbox-nav.next {
+  right: 20px;
+}
+
+.lightbox-image-container {
+  max-width: 90%;
+  max-height: 90%;
+  position: relative;
+}
+
+.lightbox-image {
+  max-width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+  border-radius: 10px;
+}
+
+.lightbox-info {
+  background: rgba(255, 255, 255, 0.95);
+  padding: 1.5rem;
+  border-radius: 0 0 10px 10px;
+  margin-top: -5px;
+}
+
+.lightbox-info h3 {
+  color: #2e8b57;
+  margin-bottom: 0.5rem;
+}
+
+.lightbox-info p {
+  color: #666;
+  margin-bottom: 0.5rem;
+}
+
+.lightbox-date {
+  color: #999;
+  font-size: 0.9rem;
+}
+
+/* CTA секция */
+.cta-section {
+  background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
+  color: white;
+  padding: 4rem 0;
+  text-align: center;
+}
+
+.cta-content h2 {
+  font-size: 2.2rem;
+  margin-bottom: 1rem;
+}
+
+.cta-content p {
+  font-size: 1.2rem;
+  opacity: 0.9;
+  margin-bottom: 2rem;
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+}
+
+.cta-features {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.feature {
+  font-size: 1.1rem;
+  opacity: 0.9;
+}
+
+/* Кнопки */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 15px 30px;
+  border-radius: 50px;
+  text-decoration: none;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  gap: 0.5rem;
+  font-size: 1.1rem;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background: #ffd700;
+  color: #333;
+}
+
+.btn-primary:hover {
+  background: #e6c200;
+  transform: translateY(-2px);
+}
+
+.btn-secondary {
+  background: transparent;
+  color: white;
+  border-color: white;
+}
+
+.btn-secondary:hover {
+  background: white;
+  color: #2e8b57;
+  transform: translateY(-2px);
+}
+
+.btn-outline {
+  background: transparent;
+  color: #2e8b57;
+  border-color: #2e8b57;
+}
+
+.btn-outline:hover {
+  background: #2e8b57;
+  color: white;
+  transform: translateY(-2px);
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.2rem;
+  }
+  
+  .hero-stats {
+    gap: 2rem;
+  }
+  
+  .stat-number {
+    font-size: 2rem;
+  }
+  
+  .slider {
+    height: 300px;
+  }
+  
+  .slider-nav {
+    width: 40px;
+    height: 40px;
+    font-size: 1.2rem;
+  }
+  
+  .gallery-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
+  }
+  
+  .cta-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .btn {
+    width: 100%;
+    max-width: 300px;
+  }
+  
+  .lightbox-nav {
+    width: 50px;
+    height: 50px;
+    font-size: 1.5rem;
+  }
+  
+  .lightbox-content {
+    padding: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-section {
+    padding: 60px 0 40px;
+  }
+  
+  .hero-title {
+    font-size: 1.8rem;
+  }
+  
+  .section-title {
+    font-size: 2rem;
+  }
+  
+  .gallery-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .gallery-filters {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .filter-btn {
+    width: 100%;
+    max-width: 200px;
+  }
+  
+  .cta-features {
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+/* Анимации */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.gallery-item {
+  animation: fadeIn 0.6s ease;
 }
 </style>
\ No newline at end of file