new file: serv_nginx/bbvue/public/images/homePagePhoto/fullPhotoBB.jpg

modified:   serv_nginx/bbvue/src/App.vue
	modified:   serv_nginx/bbvue/src/assets/fonts.css
	new file:   serv_nginx/bbvue/src/assets/fonts/Montserrat-VariableFont_wght.ttf
	modified:   serv_nginx/bbvue/src/views/Home.vue
change maine page Home begushiybashkir.ru site

serv_nginx/bbvue/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <header class="app-header">
+    <header v-if="showHeader" :class="['app-header', { 'header-visible': headerVisible }]">
       <div class="container header-container">
         <!-- Логотип -->
         <router-link to="/" class="logo-link">
@@ -23,7 +23,7 @@
     </header>
 
     <main class="main-content">
-      <router-view />
+      <router-view @show-header="handleShowHeader" />
     </main>
 
     <footer class="app-footer">
@@ -42,11 +42,27 @@ export default {
   name: 'App',
   components: {
     NavigationMenu
+  },
+  data() {
+    return {
+      showHeader: false,
+      headerVisible: false
+    }
+  },
+  methods: {
+    handleShowHeader() {
+      this.showHeader = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.headerVisible = true
+        }, 10)
+      })
+    }
   }
 }
 </script>
 
-<style>
+<style scoped>
 /* Остальные стили остаются без изменений */
 * {
   margin: 0;
@@ -59,6 +75,17 @@ a {
   color: inherit;
 }
 
+.hero-section {
+  opacity: 0;
+  transform: translateY(50px);
+  transition: all 1s ease-out;
+}
+
+.hero-section.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 body {
   font-family: 'Arial', sans-serif;
   line-height: 1.6;
@@ -69,18 +96,30 @@ body {
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 20px;
+  padding: 0 10px;
 }
 
 /* Header Styles */
 .app-header {
-  background-color: #2e8b56;
+  background-color: rgba(46, 139, 86, 0.125); /* Полупрозрачный фон */
+  backdrop-filter: blur(10px); /* Размытие фона */
+  -webkit-backdrop-filter: blur(10px); /* Для Safari */
   color: white;
-  padding: 1rem 0;
+  padding: 0;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  position: sticky;
+  position: fixed;
   top: 0;
+  left: 0;
+  right: 0;
   z-index: 1000;
+  transform: translateY(-100%);
+  opacity: 0;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.app-header.header-visible {
+  transform: translateY(0);
+  opacity: 1;
 }
 
 .header-container {
@@ -125,8 +164,8 @@ body {
 
 /* Main Content */
 .main-content {
-  min-height: calc(100vh - 140px);
-  padding: 2rem 0;
+  min-height: calc(100vh);
+  padding: 0;
 }
 
 /* Footer */

serv_nginx/bbvue/src/assets/fonts.css

@@ -14,3 +14,8 @@
     font-family: 'H1VM';
     src: url('./fonts/VictorMono-VariableFont_wght.ttf');
 }
+
+@font-face {
+    font-family: 'Monttserrat';
+    src: url(./fonts/Montserrat-VariableFont_wght.ttf);
+}

serv_nginx/bbvue/src/views/Home.vue

@@ -7,7 +7,7 @@
           <div class="hero-content">
             <h1 class="hero-title">
               <span class="title-main">Стань лучшей версией себя</span>
-              <span class="title-sub">в беговом клубе "Бегущий Башкир"</span>
+              <span class="title-sub">в беговом клубе "<b>Бегущий Башкир</b>"</span>
             </h1>
             <p class="hero-description">
               Присоединяйся к самому дружному беговому сообществу Уфы.
@@ -182,6 +182,13 @@
       </div>
     </section>
 
+    <div class="hero-stats">
+      <div class="stat" v-for="stat in stats" :key="stat.id">
+        <animated-number :value="stat.value" :format="stat.format" class="stat-number" />
+        <div class="stat-label">{{ stat.label }}</div>
+      </div>
+    </div>
+
     <!-- Быстрые ссылки -->
     <section class="quick-links-section">
       <div class="container">
@@ -217,6 +224,23 @@
 export default {
   // eslint-disable-next-line vue/multi-word-component-names
   name: 'Home',
+  mounted() {
+    window.addEventListener('scroll', this.handleFirstInteraction, { passive: true, once: true })
+    window.addEventListener('click', this.handleFirstInteraction, { once: true })
+    window.addEventListener('touchstart', this.handleFirstInteraction, { once: true })
+    this.autoShowTimeout = setTimeout(() => {
+      if (!this.hasInteracted) {
+        this.showContent()
+      }
+    }, 3000)
+  },
+  beforeUnmount() {
+    // Убираем обработчики при размонтировании
+    window.removeEventListener('scroll', this.handleFirstInteraction)
+    window.removeEventListener('click', this.handleFirstInteraction)
+    window.removeEventListener('touchstart', this.handleFirstInteraction)
+    clearTimeout(this.autoShowTimeout)
+  },
   methods: {
     getImageUrl(path) {
       // В продакшене замените на правильный путь
@@ -225,6 +249,18 @@ export default {
       console.log(`${baseUrl}images/${path}`)
       return `${baseUrl}images/${path}`
     },
+    handleFirstInteraction() {
+      if (!this.hasInteracted) {
+        this.hasInteracted = true
+        this.showContent()
+        clearTimeout(this.autoShowTimeout)
+      }
+    },
+    showContent() {
+      this.isContentVisible = true
+      // Эмитим событие для показа хедера
+      this.$emit('show-header')
+    },
   }
 }
 </script>
@@ -234,12 +270,37 @@ export default {
   overflow-x: hidden;
 }
 
+.benefit-card {
+  transform-style: preserve-3d;
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.benefit-card:hover {
+  transform: translateY(-10px) rotateX(5deg);
+  box-shadow: 0 25px 40px rgba(46, 139, 87, 0.15);
+}
+
 /* Герой-секция */
 .hero-section {
   background: url('@/public/images/FastRun.jpg') center/cover no-repeat;
+  height: 100vh;
   color: white;
-  padding: 120px 0 80px;
+  padding: 0 0 80px 0;
   position: relative;
+  animation: backgroundZoom 20s infinite alternate;
+  display: flex;
+  align-items: end;
+  justify-content: center;
+}
+
+@keyframes backgroundZoom {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(1.05);
+  }
 }
 
 .hero-overlay {
@@ -262,10 +323,16 @@ export default {
   display: block;
   font-size: 3rem;
   font-weight: 800;
+  text-shadow:
+    -1px -1px 0 black,
+    1px -1px 0 black,
+    -1px 1px 0 black,
+    1px 1px 0 black;
   line-height: 1.1;
   margin-bottom: 0.5rem;
   letter-spacing: 2px;
-  font-family: 'H1VM', sans-serif;
+  font-family: 'Monttserrat', sans-serif;
+  font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
 }
 
 .title-sub {
@@ -274,6 +341,7 @@ export default {
   font-weight: 300;
   opacity: 0.9;
   font-family: 'H1VM', sans-serif;
+  font-size: clamp(1rem, 2vw + 0.3rem, 1.5rem);
 }
 
 .hero-description {