From 4598caaec495079fdf97db298cbf5637a5cbcc22 Mon Sep 17 00:00:00 2001
From: valitovgaziz <valitovgaziz@yandex.ru>
Date: Thu, 2 Oct 2025 13:10:47 +0500
Subject: [PATCH] 	modified:  
 begushiybashkir/bbvue/src/views/Reviews.vue Create reviews page for
 begushiybashkir site

---
 begushiybashkir/bbvue/src/views/Reviews.vue | 1628 ++++++++++++++++++-
 1 file changed, 1588 insertions(+), 40 deletions(-)

diff --git a/begushiybashkir/bbvue/src/views/Reviews.vue b/begushiybashkir/bbvue/src/views/Reviews.vue
index 19c0ba8..68ea515 100644
--- a/begushiybashkir/bbvue/src/views/Reviews.vue
+++ b/begushiybashkir/bbvue/src/views/Reviews.vue
@@ -1,77 +1,902 @@
 <template>
-  <div class="page">
-    <h1>⭐ Отзывы</h1>
-    <p>Что говорят наши участники</p>
-    
-    <div class="reviews-list">
-      <div v-for="review in reviews" :key="review.id" class="review-card">
-        <div class="review-header">
-          <span class="review-author">{{ review.author }}</span>
-          <span class="review-rating">⭐ {{ review.rating }}/5</span>
+  <div class="reviews-page">
+    <!-- Герой-секция -->
+    <section class="hero-section">
+      <div class="container">
+        <div class="hero-content">
+          <h1 class="hero-title">⭐ Отзывы участников</h1>
+          <p class="hero-subtitle">Реальные истории и достижения наших бегунов</p>
+          <div class="hero-stats">
+            <div class="stat">
+              <div class="stat-number">{{ averageRating }}</div>
+              <div class="stat-label">Средний рейтинг</div>
+            </div>
+            <div class="stat">
+              <div class="stat-number">{{ totalReviews }}</div>
+              <div class="stat-label">Отзывов</div>
+            </div>
+            <div class="stat">
+              <div class="stat-number">{{ successStories }}</div>
+              <div class="stat-label">Историй успеха</div>
+            </div>
+          </div>
         </div>
-        <p class="review-text">{{ review.text }}</p>
-        <p class="review-date">{{ review.date }}</p>
       </div>
-    </div>
+    </section>
 
-    <div class="review-actions">
-      <button class="btn" @click="$router.push('/login')">✍️ Оставить отзыв</button>
-      <button class="btn btn-secondary">📊 Все отзывы</button>
-    </div>
+    <!-- Основной контент -->
+    <section class="reviews-section">
+      <div class="container">
+        <div class="reviews-header">
+          <h2 class="section-title">Что говорят наши участники</h2>
+          <div class="reviews-controls">
+            <div class="sort-controls">
+              <label for="sort">Сортировка:</label>
+              <select id="sort" v-model="sortBy" @change="sortReviews">
+                <option value="newest">Сначала новые</option>
+                <option value="oldest">Сначала старые</option>
+                <option value="highest">Высокий рейтинг</option>
+                <option value="lowest">Низкий рейтинг</option>
+              </select>
+            </div>
+            <div class="filter-controls">
+              <button 
+                v-for="filter in ratingFilters" 
+                :key="filter.value"
+                :class="['filter-btn', { 'active': activeRatingFilter === filter.value }]"
+                @click="filterByRating(filter.value)"
+              >
+                {{ filter.label }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Сетка отзывов -->
+        <div class="reviews-grid">
+          <div 
+            v-for="review in paginatedReviews" 
+            :key="review.id"
+            class="review-card"
+            :class="getReviewCardClass(review.rating)"
+          >
+            <div class="review-header">
+              <div class="reviewer-info">
+                <div class="reviewer-avatar">
+                  {{ getInitials(review.author) }}
+                </div>
+                <div class="reviewer-details">
+                  <h4 class="review-author">{{ review.author }}</h4>
+                  <p class="reviewer-achievement" v-if="review.achievement">
+                    🏆 {{ review.achievement }}
+                  </p>
+                  <p class="review-membership">
+                    Участник {{ review.membership }}
+                  </p>
+                </div>
+              </div>
+              <div class="review-rating">
+                <div class="stars">
+                  <span 
+                    v-for="star in 5" 
+                    :key="star"
+                    :class="['star', { 'filled': star <= review.rating }]"
+                  >
+                    ★
+                  </span>
+                </div>
+                <span class="rating-value">{{ review.rating }}/5</span>
+              </div>
+            </div>
+
+            <div class="review-content">
+              <p class="review-text">{{ review.text }}</p>
+              
+              <div class="review-meta">
+                <div class="meta-items">
+                  <span class="meta-item" v-if="review.distance">
+                    🏃 {{ review.distance }}
+                  </span>
+                  <span class="meta-item" v-if="review.improvement">
+                    📈 {{ review.improvement }}
+                  </span>
+                  <span class="meta-item" v-if="review.trainings">
+                    💪 {{ review.trainings }} тренировок
+                  </span>
+                </div>
+                <span class="review-date">{{ formatDate(review.date) }}</span>
+              </div>
+
+              <div class="review-actions" v-if="review.verified">
+                <span class="verified-badge">✅ Проверенный отзыв</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Пагинация -->
+        <div class="pagination" v-if="totalPages > 1">
+          <button 
+            class="pagination-btn"
+            :disabled="currentPage === 1"
+            @click="changePage(currentPage - 1)"
+          >
+            ‹
+          </button>
+          
+          <button 
+            v-for="page in visiblePages" 
+            :key="page"
+            :class="['pagination-btn', { 'active': currentPage === page }]"
+            @click="changePage(page)"
+          >
+            {{ page }}
+          </button>
+          
+          <button 
+            class="pagination-btn"
+            :disabled="currentPage === totalPages"
+            @click="changePage(currentPage + 1)"
+          >
+            ›
+          </button>
+        </div>
+
+        <!-- Статистика отзывов -->
+        <div class="reviews-stats">
+          <h3>📊 Распределение оценок</h3>
+          <div class="rating-bars">
+            <div 
+              v-for="rating in 5" 
+              :key="rating"
+              class="rating-bar"
+            >
+              <div class="rating-label">
+                <span class="stars-small">
+                  <span 
+                    v-for="star in 5" 
+                    :key="star"
+                    :class="['star-small', { 'filled': star <= (6 - rating) }]"
+                  >
+                    ★
+                  </span>
+                </span>
+              </div>
+              <div class="bar-container">
+                <div 
+                  class="bar-fill"
+                  :style="{ width: getRatingPercentage(6 - rating) + '%' }"
+                ></div>
+              </div>
+              <div class="rating-count">
+                {{ getRatingCount(6 - rating) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Форма отзыва -->
+    <section class="add-review-section" id="add-review">
+      <div class="container">
+        <div class="add-review-content">
+          <div class="form-header">
+            <h2 class="section-title">✍️ Поделитесь своим опытом</h2>
+            <p>Расскажите о своих достижениях и впечатлениях от тренировок</p>
+          </div>
+
+          <form class="review-form" @submit.prevent="submitReview" v-if="!isAuthenticated">
+            <div class="auth-required">
+              <div class="auth-message">
+                <h3>🔐 Войдите, чтобы оставить отзыв</h3>
+                <p>Только участники клуба могут оставлять отзывы</p>
+              </div>
+              <div class="auth-actions">
+                <router-link to="/login" class="btn btn-primary">
+                  🔑 Войти в аккаунт
+                </router-link>
+                <router-link to="/register" class="btn btn-secondary">
+                  🏃 Стать участником
+                </router-link>
+              </div>
+            </div>
+          </form>
+
+          <form class="review-form" @submit.prevent="submitReview" v-else>
+            <div class="form-group">
+              <label>Ваша оценка *</label>
+              <div class="rating-input">
+                <button 
+                  v-for="star in 5" 
+                  :key="star"
+                  type="button"
+                  :class="['star-btn', { 'active': newReview.rating >= star }]"
+                  @click="newReview.rating = star"
+                >
+                  ★
+                </button>
+              </div>
+            </div>
+
+            <div class="form-row">
+              <div class="form-group">
+                <label for="achievement">Ваше достижение</label>
+                <input 
+                  id="achievement"
+                  v-model="newReview.achievement"
+                  type="text" 
+                  placeholder="Например: пробежал первый марафон"
+                >
+              </div>
+              <div class="form-group">
+                <label for="distance">Любимая дистанция</label>
+                <select id="distance" v-model="newReview.distance">
+                  <option value="">Выберите дистанцию</option>
+                  <option value="5 км">5 км</option>
+                  <option value="10 км">10 км</option>
+                  <option value="21.1 км">Полумарафон (21.1 км)</option>
+                  <option value="42.2 км">Марафон (42.2 км)</option>
+                  <option value="Трейл">Трейл</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label for="review-text">Ваш отзыв *</label>
+              <textarea 
+                id="review-text"
+                v-model="newReview.text"
+                rows="5"
+                placeholder="Расскажите о вашем опыте в клубе, достижениях, атмосфере..."
+                required
+              ></textarea>
+              <div class="char-counter">
+                {{ newReview.text.length }}/500 символов
+              </div>
+            </div>
+
+            <div class="form-actions">
+              <button 
+                type="submit" 
+                class="btn btn-primary"
+                :disabled="!isFormValid || submitting"
+              >
+                <span v-if="submitting">📤 Отправка...</span>
+                <span v-else>📝 Опубликовать отзыв</span>
+              </button>
+              <button 
+                type="button" 
+                class="btn btn-outline"
+                @click="resetForm"
+              >
+                🗑️ Очистить
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+
+    <!-- Призыв к действию -->
+    <section class="cta-section">
+      <div class="container">
+        <div class="cta-content">
+          <h2>Готовы присоединиться к нашему сообществу?</h2>
+          <p>Станьте следующей историей успеха в нашем клубе!</p>
+          
+          <div class="success-stories-preview">
+            <div class="story-card">
+              <div class="story-avatar">А</div>
+              <div class="story-content">
+                <h4>Анна</h4>
+                <p>"С нуля до марафона за 1 год! Спасибо тренеру и команде!"</p>
+                <span class="story-achievement">🏅 Марафон 4:20:15</span>
+              </div>
+            </div>
+            <div class="story-card">
+              <div class="story-avatar">Д</div>
+              <div class="story-content">
+                <h4>Данил</h4>
+                <p>"Нашел друзей и улучшил результат на 10км на 15 минут"</p>
+                <span class="story-achievement">⚡ 10км за 42:30</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="cta-features">
+            <div class="cta-feature">
+              <div class="feature-icon">👨‍🏫</div>
+              <div class="feature-text">
+                <strong>Профессиональный тренер</strong>
+                <span>Мастер спорта с индивидуальным подходом</span>
+              </div>
+            </div>
+            <div class="cta-feature">
+              <div class="feature-icon">👥</div>
+              <div class="feature-text">
+                <strong>Дружное сообщество</strong>
+                <span>Поддержка и мотивация единомышленников</span>
+              </div>
+            </div>
+            <div class="cta-feature">
+              <div class="feature-icon">📈</div>
+              <div class="feature-text">
+                <strong>Личный прогресс</strong>
+                <span>Регулярное улучшение результатов</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="cta-actions">
+            <router-link to="/training" class="btn btn-primary btn-large">
+              🏃 Записаться на тренировку
+            </router-link>
+            <router-link to="/register" class="btn btn-secondary">
+              👥 Вступить в клуб
+            </router-link>
+          </div>
+
+          <div class="cta-contacts">
+            <p>Есть вопросы? Свяжитесь с нами:</p>
+            <div class="contact-links">
+              <a href="https://t.me/begushiybashkir" class="contact-link">📱 Telegram</a>
+              <a href="tel:+79273093095" class="contact-link">📞 +7 (927) 30-93-095</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script>
 export default {
-  // eslint-disable-next-line vue/multi-word-component-names
   name: 'Reviews',
   data() {
     return {
+      isAuthenticated: false, // В реальном приложении получать из store/auth
+      sortBy: 'newest',
+      activeRatingFilter: 'all',
+      currentPage: 1,
+      reviewsPerPage: 6,
+      submitting: false,
+      ratingFilters: [
+        { value: 'all', label: 'Все оценки' },
+        { value: '5', label: '⭐ 5 звезд' },
+        { value: '4', label: '⭐ 4+ звезды' },
+        { value: '3', label: '⭐ 3+ звезды' }
+      ],
+      newReview: {
+        rating: 0,
+        text: '',
+        achievement: '',
+        distance: ''
+      },
       reviews: [
-        { id: 1, author: 'Анна', rating: 5, text: 'Отличный клуб! За 3 месяца улучшила результат на 10км на 8 минут!', date: '15.01.2025' },
-        { id: 2, author: 'Михаил', rating: 5, text: 'Профессиональный тренер и дружеская атмосфера. Рекомендую!', date: '12.01.2025' },
-        { id: 3, author: 'Елена', rating: 4, text: 'Очень нравятся групповые тренировки, всегда есть с кем побегать', date: '10.01.2025' }
+        {
+          id: 1,
+          author: 'Анна',
+          rating: 5,
+          text: 'Пришла в клуб с нулевым опытом бега. За год прошла путь от 0 до марафона! Тренер Загир - профессионал своего дела, всегда поддерживает и дает ценные советы. Атмосфера в клубе невероятная!',
+          date: '2025-01-15',
+          achievement: 'Первый марафон за 4:20:15',
+          distance: '42.2 км',
+          improvement: '+8 мин на 10км',
+          trainings: 45,
+          membership: '1 год',
+          verified: true
+        },
+        {
+          id: 2,
+          author: 'Михаил',
+          rating: 5,
+          text: 'Искал профессиональный подход к тренировкам и нашел его здесь. Индивидуальные программы, работа над техникой, регулярные соревнования. За 6 месяцев улучшил результат на полумарафоне на 25 минут!',
+          date: '2025-01-12',
+          achievement: 'Полумарафон 1:35:20',
+          distance: '21.1 км',
+          improvement: '+25 мин на 21км',
+          trainings: 32,
+          membership: '6 месяцев',
+          verified: true
+        },
+        {
+          id: 3,
+          author: 'Елена',
+          rating: 5,
+          text: 'Очень нравятся групповые тренировки - всегда есть с кем побегать и пообщаться. Тренер внимательно следит за техникой, что помогло избежать травм. За 3 месяца похудела на 8 кг и полюбила бег!',
+          date: '2025-01-10',
+          achievement: 'Похудение на 8 кг',
+          distance: '10 км',
+          improvement: '+12 мин на 5км',
+          trainings: 24,
+          membership: '3 месяца',
+          verified: true
+        },
+        {
+          id: 4,
+          author: 'Сергей',
+          rating: 5,
+          text: 'Как опытный бегун могу сказать - тренер Загир один из лучших в Уфе. Его методики действительно работают. Благодаря клубу пробежал ультрамарафон и нашел единомышленников.',
+          date: '2025-01-08',
+          achievement: 'Ультрамарафон 80 км',
+          distance: 'Трейл',
+          improvement: 'Новый уровень',
+          trainings: 68,
+          membership: '2 года',
+          verified: true
+        },
+        {
+          id: 5,
+          author: 'Ғаяз',
+          rating: 4,
+          text: 'Хороший клуб с сильным тренером. Немного не хватает вечерних тренировок в будни. В остальном - отличная атмосфера и профессиональный подход.',
+          date: '2025-01-05',
+          achievement: 'Марафон 3:34:33',
+          distance: '42.2 км',
+          improvement: '+15 мин на марафоне',
+          trainings: 52,
+          membership: '1.5 года',
+          verified: true
+        },
+        {
+          id: 6,
+          author: 'Данил',
+          rating: 5,
+          text: 'Лучшее решение - присоединиться к этому клубу! Нашел друзей, улучшил результаты, участвую в забегах. Отдельное спасибо за подготовку к трейлам - незабываемые впечатления!',
+          date: '2025-01-03',
+          achievement: 'Трейл 120 км',
+          distance: 'Трейл',
+          improvement: '+18 мин на 10км',
+          trainings: 41,
+          membership: '10 месяцев',
+          verified: true
+        },
+        {
+          id: 7,
+          author: 'Ильвира',
+          rating: 5,
+          text: 'Как маме двоих детей было сложно найти время для спорта. В клубе подобрали удобный график, поддержали морально. Теперь бегаю регулярно и чувствую себя прекрасно!',
+          date: '2024-12-28',
+          achievement: 'Первый полумарафон',
+          distance: '21.1 км',
+          improvement: 'С нуля до 21км',
+          trainings: 18,
+          membership: '5 месяцев',
+          verified: true
+        },
+        {
+          id: 8,
+          author: 'Булат',
+          rating: 4,
+          text: 'Нравится системный подход к тренировкам. Есть небольшие замечания по организации некоторых мероприятий, но в целом - хороший клуб с перспективой развития.',
+          date: '2024-12-25',
+          achievement: 'Полумарафон 1:45:48',
+          distance: '21.1 км',
+          improvement: '+10 мин на 10км',
+          trainings: 29,
+          membership: '8 месяцев',
+          verified: true
+        }
       ]
     }
+  },
+  computed: {
+    totalReviews() {
+      return this.reviews.length
+    },
+    averageRating() {
+      if (this.reviews.length === 0) return 0
+      const sum = this.reviews.reduce((acc, review) => acc + review.rating, 0)
+      return (sum / this.reviews.length).toFixed(1)
+    },
+    successStories() {
+      return this.reviews.filter(review => review.achievement && review.rating >= 4).length
+    },
+    filteredReviews() {
+      let filtered = this.reviews
+
+      // Фильтрация по рейтингу
+      if (this.activeRatingFilter !== 'all') {
+        const minRating = parseInt(this.activeRatingFilter)
+        filtered = filtered.filter(review => review.rating >= minRating)
+      }
+
+      // Сортировка
+      switch (this.sortBy) {
+        case 'newest':
+          filtered.sort((a, b) => new Date(b.date) - new Date(a.date))
+          break
+        case 'oldest':
+          filtered.sort((a, b) => new Date(a.date) - new Date(b.date))
+          break
+        case 'highest':
+          filtered.sort((a, b) => b.rating - a.rating || new Date(b.date) - new Date(a.date))
+          break
+        case 'lowest':
+          filtered.sort((a, b) => a.rating - b.rating || new Date(b.date) - new Date(a.date))
+          break
+      }
+
+      return filtered
+    },
+    paginatedReviews() {
+      const startIndex = (this.currentPage - 1) * this.reviewsPerPage
+      return this.filteredReviews.slice(startIndex, startIndex + this.reviewsPerPage)
+    },
+    totalPages() {
+      return Math.ceil(this.filteredReviews.length / this.reviewsPerPage)
+    },
+    visiblePages() {
+      const pages = []
+      const startPage = Math.max(1, this.currentPage - 2)
+      const endPage = Math.min(this.totalPages, startPage + 4)
+      
+      for (let i = startPage; i <= endPage; i++) {
+        pages.push(i)
+      }
+      return pages
+    },
+    isFormValid() {
+      return this.newReview.rating > 0 && 
+             this.newReview.text.length >= 10 && 
+             this.newReview.text.length <= 500
+    }
+  },
+  methods: {
+    getInitials(name) {
+      return name.split(' ').map(n => n[0]).join('').toUpperCase()
+    },
+    getReviewCardClass(rating) {
+      return `rating-${rating}`
+    },
+    formatDate(dateString) {
+      const date = new Date(dateString)
+      return date.toLocaleDateString('ru-RU', {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric'
+      })
+    },
+    sortReviews() {
+      this.currentPage = 1
+    },
+    filterByRating(rating) {
+      this.activeRatingFilter = rating
+      this.currentPage = 1
+    },
+    changePage(page) {
+      this.currentPage = page
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    },
+    getRatingCount(rating) {
+      return this.reviews.filter(review => review.rating === rating).length
+    },
+    getRatingPercentage(rating) {
+      const count = this.getRatingCount(rating)
+      return (count / this.totalReviews) * 100
+    },
+    async submitReview() {
+      if (!this.isFormValid) return
+      
+      this.submitting = true
+      
+      try {
+        // Имитация запроса к API
+        await new Promise(resolve => setTimeout(resolve, 1500))
+        
+        const newReview = {
+          id: this.reviews.length + 1,
+          author: 'Вы', // В реальном приложении брать из профиля
+          rating: this.newReview.rating,
+          text: this.newReview.text,
+          date: new Date().toISOString().split('T')[0],
+          achievement: this.newReview.achievement,
+          distance: this.newReview.distance,
+          improvement: '',
+          trainings: 0,
+          membership: 'Новый участник',
+          verified: false
+        }
+        
+        this.reviews.unshift(newReview)
+        this.resetForm()
+        
+        // Показать уведомление об успехе
+        alert('Спасибо за ваш отзыв! После проверки модератором он будет опубликован.')
+        
+      } catch (error) {
+        console.error('Ошибка при отправке отзыва:', error)
+        alert('Произошла ошибка при отправке отзыва. Попробуйте еще раз.')
+      } finally {
+        this.submitting = false
+      }
+    },
+    resetForm() {
+      this.newReview = {
+        rating: 0,
+        text: '',
+        achievement: '',
+        distance: ''
+      }
+    },
+    login() {
+      // В реальном приложении перенаправлять на страницу логина
+      this.isAuthenticated = true
+    }
+  },
+  mounted() {
+    // В реальном приложении проверять авторизацию
+    // this.checkAuth()
   }
 }
 </script>
 
 <style scoped>
-.reviews-list {
-  max-width: 600px;
-  margin: 2rem auto;
+.reviews-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;
+}
+
+.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 {
+  font-size: 2.5rem;
+  color: #2e8b57;
+  margin-bottom: 1rem;
+  font-weight: 700;
+}
+
+/* Заголовок отзывов */
+.reviews-header {
+  margin-bottom: 3rem;
+}
+
+.reviews-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2rem;
+}
+
+.sort-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.sort-controls label {
+  font-weight: 600;
+  color: #333;
+}
+
+.sort-controls select {
+  padding: 8px 12px;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  background: white;
+  cursor: pointer;
+}
+
+.filter-controls {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.filter-btn {
+  padding: 8px 16px;
+  border: 2px solid #e9ecef;
+  background: white;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 0.9rem;
+}
+
+.filter-btn:hover {
+  border-color: #2e8b57;
+}
+
+.filter-btn.active {
+  background: #2e8b57;
+  color: white;
+  border-color: #2e8b57;
+}
+
+/* Сетка отзывов */
+.reviews-section {
+  padding: 4rem 0;
+}
+
+.reviews-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 2rem;
+  margin-bottom: 3rem;
 }
 
 .review-card {
   background: white;
-  padding: 1.5rem;
-  margin: 1rem 0;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  text-align: left;
+  border-radius: 15px;
+  padding: 2rem;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.review-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+}
+
+/* Стили по рейтингу */
+.review-card.rating-5 {
+  border-color: #ffd700;
+  background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
+}
+
+.review-card.rating-4 {
+  border-color: #a8e6cf;
+  background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e9 100%);
+}
+
+.review-card.rating-3 {
+  border-color: #ffd8b2;
+  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
 }
 
 .review-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+}
+
+.reviewer-info {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.reviewer-avatar {
+  width: 50px;
+  height: 50px;
+  background: #2e8b57;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 1.2rem;
+  flex-shrink: 0;
+}
+
+.review-author {
+  color: #2e8b57;
+  margin: 0 0 0.3rem 0;
+  font-size: 1.2rem;
+}
+
+.reviewer-achievement {
+  color: #e74c3c;
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin: 0 0 0.3rem 0;
+}
+
+.review-membership {
+  color: #666;
+  font-size: 0.8rem;
+  margin: 0;
+}
+
+.review-rating {
+  text-align: right;
+}
+
+.stars {
+  display: flex;
+  gap: 2px;
+  margin-bottom: 0.5rem;
+  justify-content: flex-end;
+}
+
+.star {
+  color: #ddd;
+  font-size: 1.2rem;
+}
+
+.star.filled {
+  color: #ffd700;
+}
+
+.rating-value {
+  font-weight: bold;
+  color: #333;
+  font-size: 1.1rem;
+}
+
+.review-content {
+  space-y: 1rem;
+}
+
+.review-text {
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 1.5rem;
+}
+
+.review-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
 }
 
-.review-author {
-  font-weight: bold;
+.meta-items {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.meta-item {
+  background: rgba(46, 139, 87, 0.1);
   color: #2e8b57;
-}
-
-.review-rating {
-  color: #ffd700;
-  font-weight: bold;
-}
-
-.review-text {
-  margin-bottom: 1rem;
-  line-height: 1.5;
+  padding: 0.3rem 0.8rem;
+  border-radius: 15px;
+  font-size: 0.8rem;
+  font-weight: 600;
 }
 
 .review-date {
@@ -80,6 +905,729 @@ export default {
 }
 
 .review-actions {
+  border-top: 1px solid #e9ecef;
+  padding-top: 1rem;
+}
+
+.verified-badge {
+  color: #27ae60;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+/* Пагинация */
+.pagination {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  margin: 3rem 0;
+}
+
+.pagination-btn {
+  padding: 10px 15px;
+  border: 2px solid #e9ecef;
+  background: white;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: 600;
+}
+
+.pagination-btn:hover:not(:disabled) {
+  border-color: #2e8b57;
+  background: #f8fff8;
+}
+
+.pagination-btn.active {
+  background: #2e8b57;
+  color: white;
+  border-color: #2e8b57;
+}
+
+.pagination-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Статистика оценок */
+.reviews-stats {
+  background: white;
+  padding: 2rem;
+  border-radius: 15px;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+  margin-bottom: 3rem;
+}
+
+.reviews-stats h3 {
+  color: #2e8b57;
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.rating-bars {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.rating-bar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.8rem;
+}
+
+.rating-label {
+  width: 80px;
+}
+
+.stars-small {
+  display: flex;
+  gap: 1px;
+}
+
+.star-small {
+  color: #ddd;
+  font-size: 0.8rem;
+}
+
+.star-small.filled {
+  color: #ffd700;
+}
+
+.bar-container {
+  flex: 1;
+  height: 8px;
+  background: #e9ecef;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.bar-fill {
+  height: 100%;
+  background: #2e8b57;
+  border-radius: 4px;
+  transition: width 0.5s ease;
+}
+
+.rating-count {
+  width: 30px;
+  text-align: right;
+  font-weight: 600;
+  color: #333;
+}
+
+/* Форма отзыва */
+.add-review-section {
+  background: white;
+  padding: 4rem 0;
+  border-top: 1px solid #e9ecef;
+}
+
+.add-review-content {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.form-header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.form-header p {
+  color: #666;
+  font-size: 1.1rem;
+}
+
+.review-form {
+  background: #f8fff8;
+  padding: 2rem;
+  border-radius: 15px;
+  border: 2px solid #e9ecef;
+}
+
+.auth-required {
+  text-align: center;
+  padding: 2rem;
+}
+
+.auth-message {
+  margin-bottom: 2rem;
+}
+
+.auth-message h3 {
+  color: #2e8b57;
+  margin-bottom: 1rem;
+}
+
+.auth-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.rating-input {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.star-btn {
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: #ddd;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0.2rem;
+}
+
+.star-btn.active {
+  color: #ffd700;
+  transform: scale(1.1);
+}
+
+.star-btn:hover {
+  transform: scale(1.2);
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  width: 100%;
+  padding: 12px 15px;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: border-color 0.3s ease;
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #2e8b57;
+}
+
+.char-counter {
+  text-align: right;
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 0.5rem;
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* CTA секция */
+.cta-section {
+  background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
+  color: white;
+  padding: 80px 0;
+  text-align: center;
+}
+
+.cta-content h2 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.cta-content p {
+  font-size: 1.2rem;
+  opacity: 0.9;
+  margin-bottom: 3rem;
+}
+
+.success-stories-preview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.story-card {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 1.5rem;
+  border-radius: 10px;
+  backdrop-filter: blur(10px);
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  text-align: left;
+}
+
+.story-avatar {
+  width: 40px;
+  height: 40px;
+  background: #ffd700;
+  color: #333;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.story-content h4 {
+  margin: 0 0 0.5rem 0;
+  color: white;
+}
+
+.story-content p {
+  font-size: 0.9rem;
+  opacity: 0.9;
+  margin: 0 0 0.5rem 0;
+  line-height: 1.4;
+}
+
+.story-achievement {
+  color: #ffd700;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.cta-features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  margin-bottom: 3rem;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cta-feature {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  text-align: left;
+}
+
+.feature-icon {
+  font-size: 2.5rem;
+  flex-shrink: 0;
+}
+
+.feature-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.feature-text strong {
+  font-size: 1.1rem;
+  margin-bottom: 0.3rem;
+}
+
+.feature-text span {
+  opacity: 0.8;
+  font-size: 0.9rem;
+}
+
+.cta-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+}
+
+.cta-contacts p {
+  margin-bottom: 1rem;
+  opacity: 0.8;
+}
+
+.contact-links {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.contact-link {
+  color: #ffd700;
+  text-decoration: none;
+  font-weight: 600;
+  transition: opacity 0.3s ease;
+}
+
+.contact-link:hover {
+  opacity: 0.8;
+}
+
+/* Кнопки */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 24px;
+  border-radius: 50px;
+  text-decoration: none;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  gap: 0.5rem;
+  font-size: 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);
+}
+
+.btn-large {
+  padding: 15px 30px;
+  font-size: 1.1rem;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.2rem;
+  }
+  
+  .hero-stats {
+    gap: 2rem;
+  }
+  
+  .stat-number {
+    font-size: 2rem;
+  }
+  
+  .reviews-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .sort-controls {
+    justify-content: space-between;
+  }
+  
+  .filter-controls {
+    justify-content: center;
+  }
+  
+  .reviews-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+  
+  .review-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  
+  .review-rating {
+    align-self: flex-end;
+  }
+  
+  .success-stories-preview {
+    grid-template-columns: 1fr;
+  }
+  
+  .cta-features {
+    grid-template-columns: 1fr;
+  }
+  
+  .cta-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .btn {
+    width: 100%;
+    max-width: 300px;
+  }
+  
+  .auth-actions {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero-section {
+    padding: 60px 0 40px;
+  }
+  
+  .hero-title {
+    font-size: 1.8rem;
+  }
+  
+  .section-title {
+    font-size: 2rem;
+  }
+  
+  .container {
+    padding: 0 15px;
+  }
+  
+  .review-card {
+    padding: 1.5rem;
+  }
+  
+  .reviewer-info {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .reviewer-avatar {
+    align-self: center;
+  }
+  
+  .review-meta {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+  
+  .meta-items {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
+
+/* Анимации */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.review-card {
+  animation: fadeInUp 0.6s ease;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.star-btn:hover {
+  animation: pulse 0.3s ease;
+}
+
+/* Задержки для анимаций карточек */
+.review-card:nth-child(odd) {
+  animation-delay: 0.1s;
+}
+
+.review-card:nth-child(even) {
+  animation-delay: 0.2s;
+}
+
+/* Состояния загрузки */
+.loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* Улучшения доступности */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Фокус-стили */
+button:focus-visible,
+a:focus-visible,
+select:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid #2e8b57;
+  outline-offset: 2px;
+}
+
+/* Темная тема */
+@media (prefers-color-scheme: dark) {
+  .reviews-page {
+    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  }
+  
+  .review-card {
+    background: #2d2d2d;
+    color: #ffffff;
+  }
+  
+  .review-text {
+    color: #cccccc;
+  }
+  
+  .form-group input,
+  .form-group select,
+  .form-group textarea {
+    background: #3d3d3d;
+    border-color: #555;
+    color: white;
+  }
+  
+  .review-form {
+    background: #2d2d2d;
+    border-color: #555;
+  }
+}
+
+/* Кастомный скроллбар */
+.reviews-section::-webkit-scrollbar {
+  width: 8px;
+}
+
+.reviews-section::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.reviews-section::-webkit-scrollbar-thumb {
+  background: #2e8b57;
+  border-radius: 4px;
+}
+
+.reviews-section::-webkit-scrollbar-thumb:hover {
+  background: #26734a;
+}
+
+/* Утилитарные классы */
+.text-center {
+  text-align: center;
+}
+
+.mb-2 {
+  margin-bottom: 2rem;
+}
+
+.mt-2 {
   margin-top: 2rem;
 }
+
+/* Состояния валидации формы */
+.form-group.error input,
+.form-group.error textarea,
+.form-group.error select {
+  border-color: #e74c3c;
+}
+
+.error-message {
+  color: #e74c3c;
+  font-size: 0.8rem;
+  margin-top: 0.5rem;
+}
+
+/* Уведомления */
+.notification {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: #27ae60;
+  color: white;
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+  animation: slideInRight 0.3s ease;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Адаптация для печати */
+@media print {
+  .hero-section,
+  .add-review-section,
+  .cta-section,
+  .review-actions,
+  .pagination {
+    display: none;
+  }
+  
+  .review-card {
+    break-inside: avoid;
+    box-shadow: none;
+    border: 1px solid #ddd;
+  }
+}
 </style>
\ No newline at end of file