748 lines
18 KiB
Vue
748 lines
18 KiB
Vue
<template>
|
||
<div class="home-page">
|
||
<!-- Герой-секция -->
|
||
<section class="hero-section">
|
||
<div class="hero-overlay">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<h1 class="hero-title">
|
||
<span class="title-main">Стань лучшей версией себя</span>
|
||
<span class="title-sub">в беговом клубе "Бегущий Башкир"</span>
|
||
</h1>
|
||
<p class="hero-description">
|
||
Присоединяйся к самому дружному беговому сообществу Уфы.
|
||
Начни свой путь к здоровью, новым достижениям и знакомствам с единомышленниками.
|
||
</p>
|
||
<div class="hero-actions">
|
||
<router-link to="/register" class="btn btn-primary btn-large">
|
||
🏃 Начать бегать
|
||
</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">80+</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>
|
||
</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">Пн</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">Ср</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">Суб</span>
|
||
<span class="date-month">Янв</span>
|
||
</div>
|
||
<div class="event-info">
|
||
<h3>Воскресный длительный кросс</h3>
|
||
<p>🌲 Лесопарковая зона • 10:00</p>
|
||
<span class="event-tag long">5 - 10 км</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>Присоединяйся к 80+ участникам, которые уже начали свой беговой путь</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/zagir_aminev" class="contact-link">📱 Telegram</a>
|
||
<a href="tel:+79273093095" class="contact-link" aria-label="Позвонить по номеру +7 (927) 30-93-095"
|
||
tabindex="0">
|
||
📞 Связаться
|
||
</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>
|
||
|
||
<script>
|
||
export default {
|
||
// eslint-disable-next-line vue/multi-word-component-names
|
||
name: 'Home',
|
||
methods: {
|
||
getImageUrl(path) {
|
||
// В продакшене замените на правильный путь
|
||
const baseUrl = import.meta.env.BASE_URL
|
||
// Путь от корня public/
|
||
console.log(`${baseUrl}images/${path}`)
|
||
return `${baseUrl}images/${path}`
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.home-page {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Герой-секция */
|
||
.hero-section {
|
||
background: url('@/public/images/FastRun.jpg') 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;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 2.5rem;
|
||
font-weight: 800;
|
||
color: #ffd700;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.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(280px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.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;
|
||
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> |