valitovgaziz/tp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: begushiybashkir/bbvue/src/views/About.vue

Browse Source 
deleted:    begushiybashkir/bbvue/src/views/HomeView.vue
	modified:   begushiybashkir/bbvue/src/views/Register.vue
add about page into BegushiyBashkir site on vue3
This commit is contained in:
Газиз Валитов
2025-09-30 14:59:51 +05:00
parent 019e462ef0
commit 2fc16f5551
3 changed files with 760 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
begushiybashkir/bbvue/src/views/About.vue
+756 -14
View File
@@ -1,26 +1,768 @@
<template>
<div class="page">
<h1>👥 О нашем клубе</h1>
<p>Беговой клуб "Бегущий Башкир" - это сообщество единомышленников в Уфе</p>
<div class="about-page">
<!-- Герой-секция -->
<section class="hero-section">
<div class="container">
<h1 class="hero-title">О беговом клубе "Бегущий Башкир"</h1>
<p class="hero-subtitle">Объединяем любителей бега в Уфе с 2022 года</p>
</div>
</section>
<div class="content-section">
<h2>Наш тренер</h2>
<div class="coach-card">
<img src="../assets/images/ZagirTrainer3.jpg"
alt="Тренер"
style="border-radius: 50%; margin: 1rem 0;">
<h3>Аминев Загир</h3>
<p>Мастер спорта по полиатлону, КМС по скайраннингу</p>
<!-- О клубе -->
<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>
<router-link to="/training" class="btn">Посмотреть расписание</router-link>
<div class="stats-grid">
<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="https://via.placeholder.com/500x400/2e8b57/ffffff?text=Командная+фото"
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="https://via.placeholder.com/300x200/2e8b57/ffffff?text=Парк+Якутова"
alt="Парк Якутова - основная тренировочная площадка"
>
</div>
<div class="location-info">
<h3>🏞️ Парк Якутова</h3>
<p><strong>Основная площадка</strong></p>
<p>Идеальные беговые дорожки, освещенная трасса, прекрасный воздух</p>
<div class="location-features">
<span class="feature">📏 Круг 2.5 км</span>
<span class="feature">💡 Освещение</span>
<span class="feature">🚽 Раздевалки</span>
</div>
</div>
</div>
<div class="location-card">
<div class="location-image">
<img
src="https://via.placeholder.com/300x200/26734a/ffffff?text=Стадион+Динамо"
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="https://via.placeholder.com/300x200/2e8b57/ffffff?text=Лесопарк+Уфа"
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'
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>
begushiybashkir/bbvue/src/views/HomeView.vue
-9
View File
@@ -1,9 +0,0 @@
<script setup>
import TheWelcome from '../components/TheWelcome.vue'
</script>
<template>
<main>
<TheWelcome />
</main>
</template>
begushiybashkir/bbvue/src/views/Register.vue
+1 -1
View File
@@ -229,7 +229,7 @@ export default {
this.$router.push('/login?message=registered')
} catch (err) {
this.error = 'Ошибка регистрации. Попробуйте еще раз.'
this.error = 'Ошибка регистрации. Попробуйте еще раз.' + err
} finally {
this.loading = false
}