modified: main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue

modified:   main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue
	modified:   main_dc/yalarba/easySite/easySite/app/layouts/default.vue
	modified:   main_dc/yalarba/easySite/easySite/app/pages/index.vue
add footer into main page for easysite

main_dc/yalarba/easySite/easySite/app/pages/index.vue

@@ -3,7 +3,7 @@
     <!-- Хедер -->
     <Header />
 
-    <!-- Hero Section -->
+    <!-- Hero Section - занимает всю видимую высоту -->
     <section class="hero-section">
       <div class="container">
         <div class="hero-content">
@@ -30,11 +30,15 @@
         </div>
       </div>
     </section>
+
+    <!-- Футер - появляется только при прокрутке -->
+    <Footer />
   </div>
 </template>
 
 <script setup lang="ts">
 import Header from '~/components/layout/Header.vue'
+import Footer from '~/components/layout/Footer.vue'
 
 const searchQuery = ref('')
 
@@ -54,14 +58,16 @@ const handleSearch = () => {
   flex-direction: column;
 }
 
+/* Hero секция занимает всю доступную высоту */
 .hero-section {
   background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
   color: var(--text-inverse);
   position: relative;
   overflow: hidden;
-  flex: 1;
+  flex: 1 0 auto; /* Занимает всё доступное пространство */
   display: flex;
   align-items: center;
+  min-height: calc(100vh - 80px); /* Минимальная высота минус хедер */
 }
 
 .hero-section::before {
@@ -80,12 +86,16 @@ const handleSearch = () => {
   z-index: 10;
   padding: 2rem 0;
   width: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
 }
 
 .hero-text {
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
+  width: 100%;
 }
 
 .hero-title {
@@ -123,7 +133,7 @@ const handleSearch = () => {
   font-size: 1.125rem;
   background: var(--bg-primary);
   color: var(--text-primary);
-  min-width: 0; /* Важно для правильного сжатия в flex */
+  min-width: 0;
 }
 
 .search-input:focus {
@@ -141,7 +151,16 @@ const handleSearch = () => {
   flex-shrink: 0;
 }
 
+/* Футер остается внизу, но не влияет на высоту hero */
+.footer {
+  flex-shrink: 0; /* Не сжимается */
+}
+
 @media (max-width: 768px) {
+  .hero-section {
+    min-height: calc(100vh - 70px);
+  }
+  
   .hero-title {
     font-size: 2rem;
   }
@@ -177,5 +196,9 @@ const handleSearch = () => {
     padding: 0.75rem;
     font-size: 1rem;
   }
+  
+  .hero-section {
+    min-height: calc(100vh - 60px);
+  }
 }
 </style>