valitovgaziz
c437f5882f
modified: begushiybashkir/bbvue/src/views/About.vue add some css to base.css
769 lines
20 KiB
Vue
769 lines
20 KiB
Vue
<template>
|
||
<div class="about-page">
|
||
<!-- Герой-секция -->
|
||
<section class="hero-section">
|
||
<div class="container">
|
||
<h1 class="hero-title">О беговом клубе "Бегущий Башкир"</h1>
|
||
<p class="hero-subtitle">Объединяем любителей бега в Уфе с 2022 года</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- О клубе -->
|
||
<section class="section club-info">
|
||
<div class="container">
|
||
<div class="info-grid">
|
||
<div class="info-content">
|
||
<h2>Наша философия</h2>
|
||
<p class="lead">
|
||
Мы верим, что бег — это не просто спорт, а образ жизни, который объединяет людей,
|
||
укрепляет здоровье и открывает новые горизонты.
|
||
</p>
|
||
|
||
<div class="mission-vision">
|
||
<div class="mission-card">
|
||
<h3>🎯 Наша миссия</h3>
|
||
<p>Сделать бег доступным и enjoyable для каждого жителя Уфы, независимо от возраста и уровня подготовки.</p>
|
||
</div>
|
||
|
||
<div class="mission-card">
|
||
<h3>👁️ Наше видение</h3>
|
||
<p>Стать крупнейшим беговым сообществом в Башкортостане, которое вдохновляет на здоровый образ жизни.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-grid">x``
|
||
<div class="stat-item">
|
||
<div class="stat-number">150+</div>
|
||
<div class="stat-label">Участников</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">25+</div>
|
||
<div class="stat-label">Мероприятий в год</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">42.2</div>
|
||
<div class="stat-label">км лучший марафон</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">100%</div>
|
||
<div class="stat-label">Дружеская атмосфера</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-image">
|
||
<img
|
||
src="../assets/images/UMM2025.png"
|
||
alt="Команда бегового клуба Бегущий Башкир"
|
||
class="club-image"
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Наши ценности -->
|
||
<section class="section values-section">
|
||
<div class="container">
|
||
<h2 class="section-title">Наши ценности</h2>
|
||
<div class="values-grid">
|
||
<div class="value-card">
|
||
<div class="value-icon">🤝</div>
|
||
<h3>Поддержка</h3>
|
||
<p>Мы поддерживаем друг друга на каждом километре, как на тренировках, так и на соревнованиях.</p>
|
||
</div>
|
||
|
||
<div class="value-card">
|
||
<div class="value-icon">📈</div>
|
||
<h3>Развитие</h3>
|
||
<p>Помогаем каждому участнику прогрессировать и достигать личных рекордов.</p>
|
||
</div>
|
||
|
||
<div class="value-card">
|
||
<div class="value-icon">🌿</div>
|
||
<h3>Единение с природой</h3>
|
||
<p>Тренируемся в парках и на природе, наслаждаясь свежим воздухом Уфы.</p>
|
||
</div>
|
||
|
||
<div class="value-card">
|
||
<div class="value-icon">🏆</div>
|
||
<h3>Спортивный дух</h3>
|
||
<p>Стремимся к победам, но ценим участие и личный прогресс выше медалей.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Тренер -->
|
||
<section class="section coach-section">
|
||
<div class="container">
|
||
<h2 class="section-title">Наш тренер</h2>
|
||
|
||
<div class="coach-profile">
|
||
<div class="coach-image">
|
||
<img
|
||
src="../assets/images/ZagirTrainer3.jpg"
|
||
alt="Аминев Загир - тренер бегового клуба Бегущий Башкир"
|
||
class="coach-photo"
|
||
>
|
||
<div class="coach-badges">
|
||
<span class="badge">Мастер спорта</span>
|
||
<span class="badge">КМС</span>
|
||
<span class="badge">Опыт 10+ лет</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="coach-details">
|
||
<h3>Аминев Загир Рамилевич</h3>
|
||
<p class="coach-title">Основатель и главный тренер клуба</p>
|
||
|
||
<div class="coach-achievements">
|
||
<h4>Спортивные достижения:</h4>
|
||
<ul class="achievements-list">
|
||
<li>🥇 Мастер спорта по полиатлону</li>
|
||
<li>🥈 Кандидат в мастера спорта по скайраннингу</li>
|
||
<li>🏆 Победитель всероссийских соревнований по горному бегу</li>
|
||
<li>🎯 Призер международных стартов по трейлу</li>
|
||
<li>📚 Сертифицированный тренер по бегу</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="coach-philosophy">
|
||
<h4>Философия тренировок:</h4>
|
||
<blockquote>
|
||
"Бег должен приносить радость! Я помогаю каждому найти свой темп,
|
||
полюбить процесс и безопасно достигать целей. От первых 5 км до марафона —
|
||
мы пройдем этот путь вместе!"
|
||
</blockquote>
|
||
</div>
|
||
|
||
<div class="coach-stats">
|
||
<div class="coach-stat">
|
||
<div class="stat-value">500+</div>
|
||
<div class="stat-desc">подготовленных бегунов</div>
|
||
</div>
|
||
<div class="coach-stat">
|
||
<div class="stat-value">100+</div>
|
||
<div class="stat-desc">проведенных марафонов</div>
|
||
</div>
|
||
<div class="coach-stat">
|
||
<div class="stat-value">10+</div>
|
||
<div class="stat-desc">лет тренерского опыта</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Тренировочные локации -->
|
||
<section class="section locations-section">
|
||
<div class="container">
|
||
<h2 class="section-title">Наши тренировочные базы</h2>
|
||
|
||
<div class="locations-grid">
|
||
<div class="location-card">
|
||
<div class="location-image">
|
||
<img
|
||
src="../assets/images/UfaWhiteRiver.jpg"
|
||
alt="Уфимская набережная (ост. Монумент) - основная тренировочная площадка"
|
||
>
|
||
</div>
|
||
<div class="location-info">
|
||
<h3>🏞️ Набережная </h3>
|
||
<p><strong>Основная площадка</strong></p>
|
||
<p>Идеальные беговые дорожки, освещенная трасса, прекрасный воздух</p>
|
||
<div class="location-features">
|
||
<span class="feature">📏 Круг 5 км</span>
|
||
<span class="feature">💡 Освещение</span>
|
||
<span class="feature">🚽 Уборная</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="location-card">
|
||
<div class="location-image">
|
||
<img
|
||
src="../assets/images/Dinamo.jpg"
|
||
alt="Стадион Динамо - для интервальных тренировок"
|
||
>
|
||
</div>
|
||
<div class="location-info">
|
||
<h3>🏟️ Стадион "Динамо"</h3>
|
||
<p><strong>Интервальные тренировки</strong></p>
|
||
<p>Профессиональное покрытие, идеально для работы над техникой и скоростью</p>
|
||
<div class="location-features">
|
||
<span class="feature">📏 Стандартная дорожка</span>
|
||
<span class="feature">🎯 Тренерский контроль</span>
|
||
<span class="feature">⚡ СБУ и темповая работа</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="location-card">
|
||
<div class="location-image">
|
||
<img
|
||
src="../assets/images/i.webp"
|
||
alt="Лесопарковая зона - для длительных кроссов. Уфимское ожерелье"
|
||
>
|
||
</div>
|
||
<div class="location-info">
|
||
<h3>🌲 Лесопарковая зона</h3>
|
||
<p><strong>Длительные кроссы</strong></p>
|
||
<p>Живописные маршруты, подготовка к трейлам, бег по пересеченной местности</p>
|
||
<div class="location-features">
|
||
<span class="feature">🌳 Природа</span>
|
||
<span class="feature">🔄 Маршруты 5-20 км</span>
|
||
<span class="feature">🏔️ Перепады высот</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Призыв к действию -->
|
||
<section class="section cta-section">
|
||
<div class="container">
|
||
<div class="cta-content">
|
||
<h2>Готовы начать бегать с нами?</h2>
|
||
<p>Присоединяйтесь к нашей беговой семье и откройте для себя мир возможностей!</p>
|
||
<div class="cta-buttons">
|
||
<router-link to="/register" class="btn btn-primary">
|
||
🏃 Стать участником
|
||
</router-link>
|
||
<router-link to="/training" class="btn btn-secondary">
|
||
📅 Посмотреть расписание
|
||
</router-link>
|
||
<router-link to="/contact" class="btn btn-outline">
|
||
📞 Связаться с нами
|
||
</router-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Контакты -->
|
||
<section class="section contact-section">
|
||
<div class="container">
|
||
<h2 class="section-title">Контакты</h2>
|
||
<div class="contact-grid">
|
||
<div class="contact-info">
|
||
<h3>📞 Свяжитесь с нами</h3>
|
||
<div class="contact-item">
|
||
<strong>Телефон:</strong>
|
||
<a href="tel:+79273093095">+7 (927) 30-93-095</a>
|
||
</div>
|
||
<div class="contact-item">
|
||
<strong>Email:</strong>
|
||
<a href="mailto:zog1r@mail.ru">zog1r@mail.ru</a>
|
||
</div>
|
||
<div class="contact-item">
|
||
<strong>Telegram:</strong>
|
||
<a href="https://t.me/begushiybashkir" target="_blank">@begushiybashkir</a>
|
||
</div>
|
||
<div class="contact-item">
|
||
<strong>Город:</strong>
|
||
Уфа, Республика Башкортостан
|
||
</div>
|
||
</div>
|
||
|
||
<div class="social-links">
|
||
<h3>📱 Мы в соцсетях</h3>
|
||
<div class="social-buttons">
|
||
<a href="https://www.instagram.com/begushiybashkir/" target="_blank" class="social-btn instagram">
|
||
📷 Instagram
|
||
</a>
|
||
<a href="https://www.youtube.com/channel/UCV45f8q172917848k05q6gA" target="_blank" class="social-btn youtube">
|
||
🎥 YouTube
|
||
</a>
|
||
<a href="https://t.me/begushiybashkir" target="_blank" class="social-btn telegram">
|
||
✈️ Telegram
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
// eslint-disable-next-line vue/multi-word-component-names
|
||
name: 'About',
|
||
metaInfo: {
|
||
title: 'О нас - Бегущий Башкир | Беговой клуб в Уфе',
|
||
meta: [
|
||
{
|
||
name: 'description',
|
||
content: 'Беговой клуб Бегущий Башкир в Уфе: профессиональный тренер Аминев Загир, тренировки в парках Уфы, достижения и философия клуба. Присоединяйтесь к нашему сообществу!'
|
||
},
|
||
{
|
||
name: 'keywords',
|
||
content: 'беговой клуб Уфа, тренер по бегу Уфа, Аминев Загир, тренировки бег Уфа, марафон Уфа, бег в Башкортостане'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.about-page {
|
||
color: #333;
|
||
}
|
||
|
||
/* Герой-секция */
|
||
.hero-section {
|
||
background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
|
||
color: white;
|
||
padding: 80px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 3rem;
|
||
margin-bottom: 1rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1.3rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* Основные секции */
|
||
.section {
|
||
padding: 80px 0;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* Информация о клубе */
|
||
.club-info {
|
||
background: #f8fff8;
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.lead {
|
||
font-size: 1.2rem;
|
||
line-height: 1.6;
|
||
margin-bottom: 2rem;
|
||
color: #555;
|
||
}
|
||
|
||
.mission-vision {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.mission-card {
|
||
background: white;
|
||
padding: 1.5rem;
|
||
border-radius: 10px;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||
border-left: 4px solid #2e8b57;
|
||
}
|
||
|
||
.mission-card h3 {
|
||
color: #2e8b57;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 1rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
color: #2e8b57;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.9rem;
|
||
color: #666;
|
||
}
|
||
|
||
.club-image {
|
||
width: 100%;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
/* Ценности */
|
||
.values-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.value-card {
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.value-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.value-icon {
|
||
font-size: 3rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.value-card h3 {
|
||
color: #2e8b57;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* Тренер */
|
||
.coach-section {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.coach-profile {
|
||
display: grid;
|
||
grid-template-columns: 400px 1fr;
|
||
gap: 3rem;
|
||
align-items: start;
|
||
}
|
||
|
||
.coach-image {
|
||
position: relative;
|
||
}
|
||
|
||
.coach-photo {
|
||
width: 100%;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.coach-badges {
|
||
position: absolute;
|
||
bottom: -20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.badge {
|
||
background: #ffd700;
|
||
color: #333;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 20px;
|
||
font-size: 0.8rem;
|
||
font-weight: bold;
|
||
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.coach-details h3 {
|
||
font-size: 2rem;
|
||
color: #2e8b57;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.coach-title {
|
||
font-size: 1.2rem;
|
||
color: #666;
|
||
margin-bottom: 2rem;
|
||
font-style: italic;
|
||
}
|
||
|
||
.coach-achievements,
|
||
.coach-philosophy {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.coach-achievements h4,
|
||
.coach-philosophy h4 {
|
||
color: #2e8b57;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.achievements-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.achievements-list li {
|
||
padding: 0.5rem 0;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
blockquote {
|
||
background: white;
|
||
padding: 1.5rem;
|
||
border-left: 4px solid #2e8b57;
|
||
font-style: italic;
|
||
color: #555;
|
||
margin: 1rem 0;
|
||
border-radius: 0 8px 8px 0;
|
||
}
|
||
|
||
.coach-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.coach-stat {
|
||
text-align: center;
|
||
padding: 1rem;
|
||
background: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
color: #2e8b57;
|
||
}
|
||
|
||
.stat-desc {
|
||
font-size: 0.9rem;
|
||
color: #666;
|
||
}
|
||
|
||
/* Локации */
|
||
.locations-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.location-card {
|
||
background: white;
|
||
border-radius: 15px;
|
||
overflow: hidden;
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.location-card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.location-image img {
|
||
width: 100%;
|
||
height: 200px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.location-info {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.location-info h3 {
|
||
color: #2e8b57;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.location-features {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.feature {
|
||
background: #f0f8f0;
|
||
padding: 0.3rem 0.8rem;
|
||
border-radius: 15px;
|
||
font-size: 0.8rem;
|
||
color: #2e8b57;
|
||
}
|
||
|
||
/* CTA секция */
|
||
.cta-section {
|
||
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-buttons {
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 15px 30px;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
transition: all 0.3s ease;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #ffd700;
|
||
color: #333;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #e6c200;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: white;
|
||
color: #2e8b57;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #f5f5f5;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-outline {
|
||
background: transparent;
|
||
color: white;
|
||
border: 2px solid white;
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
background: white;
|
||
color: #2e8b57;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Контакты */
|
||
.contact-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 3rem;
|
||
}
|
||
|
||
.contact-item {
|
||
margin-bottom: 1rem;
|
||
padding: 0.5rem 0;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.contact-item a {
|
||
color: #2e8b57;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.contact-item a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.social-buttons {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.social-btn {
|
||
display: inline-block;
|
||
padding: 12px 20px;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
color: white;
|
||
font-weight: bold;
|
||
transition: transform 0.3s ease;
|
||
text-align: center;
|
||
}
|
||
|
||
.social-btn:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.instagram { background: #E4405F; }
|
||
.youtube { background: #CD201F; }
|
||
.telegram { background: #0088cc; }
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 768px) {
|
||
.hero-title {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.info-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.coach-profile {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.coach-stats {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.locations-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.contact-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.cta-buttons {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
max-width: 300px;
|
||
}
|
||
}
|
||
</style> |