modified: src/views/Home.vue

Change Home page to UI/UX usefull  theam

begushiybashkir/bbvue/src/views/Home.vue

@@ -1,24 +1,209 @@
-
 <template>
-  <div class="page home-page">
+  <div class="home-page">
-    <h1>🏃 Добро пожаловать в Бегущий Башкир!</h1>
+    <!-- Герой-секция -->
-    <p>Присоединяйтесь к нашему беговому сообществу в Уфе</p>
+    <section class="hero-section">
-    
+      <div class="hero-overlay">
-    <div class="hero-section">
+        <div class="container">
-      <img src="../assets/images/Roshim2025_3.png" 
+          <div class="hero-content">
-           alt="Беговой клуб" 
+            <h1 class="hero-title">
-           style="width: 100%; border-radius: 10px; margin: 2rem 0;">
+              <span class="title-main">Стань лучшей версией себя</span>
-    </div>
+              <span class="title-sub">в беговом клубе "Бегущий Башкир"</span>
-
+            </h1>
-    <div class="quick-links">
+            <p class="hero-description">
-      <h2>Быстрые ссылки</h2>
+              Присоединяйся к самому дружному беговому сообществу Уфы. 
-      <div class="links-grid">
+              Начни свой путь к здоровью, новым достижениям и знакомствам с единомышленниками.
-        <router-link to="/training" class="btn">📅 Расписание тренировок</router-link>
+            </p>
-        <router-link to="/achievements" class="btn">🏆 Наши достижения</router-link>
+            <div class="hero-actions">
-        <router-link to="/members" class="btn">👥 Участники клуба</router-link>
+              <router-link to="/register" class="btn btn-primary btn-large">
-        <router-link to="/gallery" class="btn">📸 Галерея</router-link>
+                🏃 Начать бегать
+              </router-link>
+              <router-link to="/about" class="btn btn-outline btn-large">
+                👥 Узнать о клубе
+              </router-link>
+            </div>
+            <div class="hero-stats">
+              <div class="stat">
+                <div class="stat-number">150+</div>
+                <div class="stat-label">Участников</div>
+              </div>
+              <div class="stat">
+                <div class="stat-number">25+</div>
+                <div class="stat-label">Мероприятий в год</div>
+              </div>
+              <div class="stat">
+                <div class="stat-number">100%</div>
+                <div class="stat-label">Поддержка</div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </section>
+
+    <!-- Преимущества -->
+    <section class="benefits-section">
+      <div class="container">
+        <h2 class="section-title">Почему выбирают нас?</h2>
+        <div class="benefits-grid">
+          <div class="benefit-card">
+            <div class="benefit-icon">👨‍🏫</div>
+            <h3>Профессиональный тренер</h3>
+            <p>Мастер спорта с индивидуальным подходом к каждому участнику</p>
+          </div>
+          <div class="benefit-card">
+            <div class="benefit-icon">🌳</div>
+            <h3>Тренировки на природе</h3>
+            <p>Занятия в лучших парках Уфы с чистым воздухом</p>
+          </div>
+          <div class="benefit-card">
+            <div class="benefit-icon">🤝</div>
+            <h3>Дружное сообщество</h3>
+            <p>Поддержка и мотивация от таких же любителей бега</p>
+          </div>
+          <div class="benefit-card">
+            <div class="benefit-icon">📈</div>
+            <h3>Личный прогресс</h3>
+            <p>От первых километров до марафонских дистанций</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Ближайшие события -->
+    <section class="events-section">
+      <div class="container">
+        <h2 class="section-title">Ближайшие события</h2>
+        <div class="events-grid">
+          <div class="event-card">
+            <div class="event-date">
+              <span class="date-day">15</span>
+              <span class="date-month">Янв</span>
+            </div>
+            <div class="event-info">
+              <h3>Открытая тренировка для новичков</h3>
+              <p>🏞️ Парк Якутова • 19:30</p>
+              <span class="event-tag free">Бесплатно</span>
+            </div>
+          </div>
+          <div class="event-card">
+            <div class="event-date">
+              <span class="date-day">18</span>
+              <span class="date-month">Янв</span>
+            </div>
+            <div class="event-info">
+              <h3>Техника бега + ОФП</h3>
+              <p>🏟️ Стадион Динамо • 19:30</p>
+              <span class="event-tag regular">Для всех уровней</span>
+            </div>
+          </div>
+          <div class="event-card">
+            <div class="event-date">
+              <span class="date-day">20</span>
+              <span class="date-month">Янв</span>
+            </div>
+            <div class="event-info">
+              <h3>Воскресный длительный кросс</h3>
+              <p>🌲 Лесопарковая зона • 10:00</p>
+              <span class="event-tag long">15-20 км</span>
+            </div>
+          </div>
+        </div>
+        <div class="events-actions">
+          <router-link to="/training" class="btn btn-secondary">
+            📅 Все тренировки
+          </router-link>
+        </div>
+      </div>
+    </section>
+
+    <!-- История успеха -->
+    <section class="success-section">
+      <div class="container">
+        <h2 class="section-title">Истории успеха</h2>
+        <div class="success-stories">
+          <div class="story-card">
+            <div class="story-avatar">С</div>
+            <div class="story-content">
+              <h3>Сергей</h3>
+              <p class="story-achievement">Первый марафон за 3:27</p>
+              <p class="story-text">"Пришел в клуб с нуля, через год пробежал свой первый марафон. Спасибо тренеру и команде за поддержку!"</p>
+            </div>
+          </div>
+          <div class="story-card">
+            <div class="story-avatar">Д</div>
+            <div class="story-content">
+              <h3>Данил</h3>
+              <p class="story-achievement">Ультрамарафон 120 км</p>
+              <p class="story-text">"Никогда не думал, что смогу пробежать 120 км. В клубе нашел не только тренера, но и верных друзей."</p>
+            </div>
+          </div>
+          <div class="story-card">
+            <div class="story-avatar">А</div>
+            <div class="story-content">
+              <h3>Анна</h3>
+              <p class="story-achievement">Похудение на 15 кг</p>
+              <p class="story-text">"Бег изменил мою жизнь! Сбросила вес, нашла новых друзей и полюбила активный образ жизни."</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Призыв к действию -->
+    <section class="cta-section">
+      <div class="container">
+        <div class="cta-content">
+          <h2>Готовы изменить свою жизнь?</h2>
+          <p>Присоединяйся к 150+ участникам, которые уже начали свой беговой путь</p>
+          <div class="cta-features">
+            <div class="cta-feature">✅ Первая пробная тренировка бесплатно</div>
+            <div class="cta-feature">✅ Подбор программы под ваш уровень</div>
+            <div class="cta-feature">✅ Поддержка тренера и сообщества</div>
+          </div>
+          <div class="cta-actions">
+            <router-link to="/register" class="btn btn-primary btn-cta">
+              🏃 Начать бесплатно
+            </router-link>
+            <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>
+      </div>
+    </section>
+
+    <!-- Быстрые ссылки -->
+    <section class="quick-links-section">
+      <div class="container">
+        <h2 class="section-title">Исследуйте клуб</h2>
+        <div class="quick-links-grid">
+          <router-link to="/achievements" class="quick-link-card">
+            <div class="quick-link-icon">🏆</div>
+            <h3>Наши достижения</h3>
+            <p>Узнайте о рекордах и победах участников клуба</p>
+          </router-link>
+          <router-link to="/gallery" class="quick-link-card">
+            <div class="quick-link-icon">📸</div>
+            <h3>Фотогалерея</h3>
+            <p>Яркие моменты тренировок и соревнований</p>
+          </router-link>
+          <router-link to="/members" class="quick-link-card">
+            <div class="quick-link-icon">👥</div>
+            <h3>Участники</h3>
+            <p>Познакомьтесь с нашей беговой семьей</p>
+          </router-link>
+          <router-link to="/training" class="quick-link-card">
+            <div class="quick-link-icon">📅</div>
+            <h3>Тренировки</h3>
+            <p>Расписание и программы занятий</p>
+          </router-link>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -31,26 +216,519 @@ export default {
 
 <style scoped>
 .home-page {
+  overflow-x: hidden;
+}
+
+/* Герой-секция */
+.hero-section {
+  background: linear-gradient(135deg, rgba(46, 139, 87, 0.9) 0%, rgba(38, 115, 74, 0.9) 100%),
+              url('../assets/images/Roshim2025_3.png') center/cover no-repeat;
+  color: white;
+  padding: 120px 0 80px;
+  position: relative;
+}
+
+.hero-overlay {
+  position: relative;
+  z-index: 2;
+}
+
+.hero-content {
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.hero-title {
+  margin-bottom: 1.5rem;
+}
+
+.title-main {
+  display: block;
+  font-size: 3rem;
+  font-weight: 800;
+  line-height: 1.1;
+  margin-bottom: 0.5rem;
+}
+
+.title-sub {
+  display: block;
+  font-size: 1.5rem;
+  font-weight: 300;
+  opacity: 0.9;
+}
+
+.hero-description {
+  font-size: 1.2rem;
+  line-height: 1.6;
+  margin-bottom: 2.5rem;
+  opacity: 0.9;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 3rem;
+}
+
+.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;
+}
+
+.btn-large {
+  padding: 18px 35px;
+  font-size: 1.1rem;
+}
+
+.btn-primary {
+  background: #ffd700;
+  color: #333;
+  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
+}
+
+.btn-outline {
+  background: transparent;
+  color: white;
+  border-color: white;
+}
+
+.btn-outline:hover {
+  background: white;
+  color: #2e8b57;
+}
+
+.btn-secondary {
+  background: #6c757d;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #5a6268;
+  transform: translateY(-1px);
+}
+
+.hero-stats {
+  display: flex;
+  justify-content: center;
+  gap: 3rem;
+  flex-wrap: wrap;
+}
+
+.stat {
   text-align: center;
 }
 
-.hero-section {
+.stat-number {
-  margin: 2rem 0;
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: #ffd700;
+  margin-bottom: 0.5rem;
 }
 
-.links-grid {
+.stat-label {
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+
+/* Секции */
+.section-title {
+  text-align: center;
+  font-size: 2.5rem;
+  color: #2e8b57;
+  margin-bottom: 3rem;
+  font-weight: 700;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* Преимущества */
+.benefits-section {
+  padding: 80px 0;
+  background: #f8fff8;
+}
+
+.benefits-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1rem;
+  gap: 2rem;
-  margin-top: 2rem;
 }
 
-.links-grid .btn {
+.benefit-card {
+  background: white;
+  padding: 2.5rem 2rem;
+  border-radius: 15px;
+  text-align: center;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
+  transition: transform 0.3s ease;
+}
+
+.benefit-card:hover {
+  transform: translateY(-5px);
+}
+
+.benefit-icon {
+  font-size: 3rem;
+  margin-bottom: 1.5rem;
+}
+
+.benefit-card h3 {
+  color: #2e8b57;
+  margin-bottom: 1rem;
+  font-size: 1.3rem;
+}
+
+.benefit-card p {
+  color: #666;
+  line-height: 1.5;
+}
+
+/* События */
+.events-section {
+  padding: 80px 0;
+}
+
+.events-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+}
+
+.event-card {
+  display: flex;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+  transition: transform 0.3s ease;
+}
+
+.event-card:hover {
+  transform: translateY(-3px);
+}
+
+.event-date {
+  background: #2e8b57;
+  color: white;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 80px;
+}
+
+.date-day {
+  font-size: 1.8rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.date-month {
+  font-size: 0.9rem;
+  opacity: 0.9;
+}
+
+.event-info {
+  padding: 1.5rem;
+  flex: 1;
+}
+
+.event-info h3 {
+  color: #2e8b57;
+  margin-bottom: 0.5rem;
+}
+
+.event-info p {
+  color: #666;
+  margin-bottom: 0.5rem;
+}
+
+.event-tag {
+  display: inline-block;
+  padding: 0.3rem 0.8rem;
+  border-radius: 15px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.event-tag.free {
+  background: #e8f5e8;
+  color: #2e8b57;
+}
+
+.event-tag.regular {
+  background: #e3f2fd;
+  color: #1976d2;
+}
+
+.event-tag.long {
+  background: #fff3e0;
+  color: #f57c00;
+}
+
+.events-actions {
+  text-align: center;
+}
+
+/* Истории успеха */
+.success-section {
+  padding: 80px 0;
+  background: #f8fff8;
+}
+
+.success-stories {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 2rem;
+}
+
+.story-card {
+  background: white;
+  padding: 2rem;
+  border-radius: 15px;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+}
+
+.story-avatar {
+  width: 60px;
+  height: 60px;
+  background: #2e8b57;
+  color: white;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 1.5rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.story-content h3 {
+  color: #2e8b57;
+  margin-bottom: 0.5rem;
+}
+
+.story-achievement {
+  color: #ffd700;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.story-text {
+  color: #666;
+  line-height: 1.5;
+  font-style: italic;
+}
+
+/* CTA секция */
+.cta-section {
+  padding: 100px 0;
+  background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
+  color: white;
+  text-align: center;
+}
+
+.cta-content h2 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.cta-content > p {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+  opacity: 0.9;
+}
+
+.cta-features {
+  display: inline-flex;
+  flex-direction: column;
   gap: 0.5rem;
-  padding: 1rem;
+  margin-bottom: 2.5rem;
+  text-align: left;
+}
+
+.cta-feature {
+  font-size: 1.1rem;
+}
+
+.cta-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+}
+
+.btn-cta {
+  padding: 20px 40px;
+  font-size: 1.2rem;
+}
+
+.cta-contacts p {
+  margin-bottom: 1rem;
+  opacity: 0.9;
+}
+
+.contact-links {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.contact-link {
+  color: #ffd700;
   text-decoration: none;
+  font-weight: 600;
+  transition: opacity 0.3s ease;
+}
+
+.contact-link:hover {
+  opacity: 0.8;
+}
+
+/* Быстрые ссылки */
+.quick-links-section {
+  padding: 80px 0;
+}
+
+.quick-links-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.quick-link-card {
+  background: white;
+  padding: 2.5rem 2rem;
+  border-radius: 15px;
+  text-align: center;
+  text-decoration: none;
+  color: inherit;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.quick-link-card:hover {
+  transform: translateY(-5px);
+  border-color: #2e8b57;
+  box-shadow: 0 10px 30px rgba(46, 139, 87, 0.15);
+}
+
+.quick-link-icon {
+  font-size: 3rem;
+  margin-bottom: 1.5rem;
+}
+
+.quick-link-card h3 {
+  color: #2e8b57;
+  margin-bottom: 1rem;
+  font-size: 1.3rem;
+}
+
+.quick-link-card p {
+  color: #666;
+  line-height: 1.5;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .hero-section {
+    padding: 80px 0 60px;
+  }
+  
+  .title-main {
+    font-size: 2.2rem;
+  }
+  
+  .title-sub {
+    font-size: 1.2rem;
+  }
+  
+  .hero-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .btn-large {
+    width: 100%;
+    max-width: 300px;
+  }
+  
+  .hero-stats {
+    gap: 2rem;
+  }
+  
+  .stat-number {
+    font-size: 2rem;
+  }
+  
+  .section-title {
+    font-size: 2rem;
+  }
+  
+  .event-card {
+    flex-direction: column;
+  }
+  
+  .event-date {
+    flex-direction: row;
+    gap: 1rem;
+    justify-content: center;
+  }
+  
+  .story-card {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .contact-links {
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .title-main {
+    font-size: 1.8rem;
+  }
+  
+  .benefits-grid,
+  .events-grid,
+  .success-stories,
+  .quick-links-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .container {
+    padding: 0 15px;
+  }
 }
 </style>