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

change main page easysite102.ru

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

@@ -1,32 +1,70 @@
 <template>
   <div class="page-wrapper">
-    <!-- Хедер -->
     <Header />
 
-    <!-- Hero Section - занимает всю видимую высоту -->
+    <!-- Обновленная Hero Section -->
     <section class="hero-section">
       <div class="container">
         <div class="hero-content">
-          <div class="hero-text">
+          <div class="hero-main">
-            <nuxt-link to="/auth/register" class="T1 T">
+            <h1 class="hero-title">
-              <text>создавай</text>
+              Создай свой сайт
-              <h1 class="hero-title">аккаунт</h1>
+              <span class="gradient-text">за 3 шага</span>
-            </nuxt-link>
+            </h1>
-            <nuxt-link to="/profile" class="T2 T">
+            
-              <text>добавляй</text>
+            <p class="hero-description">
-              <h1 class="hero-title">услуги</h1>
+              Простая платформа для быстрого создания сайтов. 
-            </nuxt-link>
+              Регистрируйся, добавляй услуги и получай готовый сайт.
-            <nuxt-link to="/objects/my-objects" class="T3 T">
+            </p>
-              <text>получай</text>
+
-              <h1 class="hero-title">сайт</h1>
+            <div class="steps-container">
-            </nuxt-link>
+              <div class="step">
-            <p class="hero-subtitle T4">легко и доступно</p>
+                <div class="step-number">1</div>
+                <div class="step-content">
+                  <h3>Создай аккаунт</h3>
+                  <p>Быстрая регистрация</p>
+                </div>
+                <nuxt-link to="/auth/register" class="step-link">
+                  Начать →
+                </nuxt-link>
+              </div>
+
+              <div class="step">
+                <div class="step-number">2</div>
+                <div class="step-content">
+                  <h3>Добавь услуги</h3>
+                  <p>Опиши что предлагаешь</p>
+                </div>
+                <nuxt-link to="/profile" class="step-link">
+                  Добавить →
+                </nuxt-link>
+              </div>
+
+              <div class="step">
+                <div class="step-number">3</div>
+                <div class="step-content">
+                  <h3>Получи сайт</h3>
+                  <p>Автоматически сгенерированный</p>
+                </div>
+                <nuxt-link to="/objects/my-objects" class="step-link">
+                  Посмотреть →
+                </nuxt-link>
+              </div>
+            </div>
+
+            <div class="hero-actions">
+              <nuxt-link to="/auth/register" class="btn btn-primary btn-large">
+                Начать бесплатно
+              </nuxt-link>
+              <nuxt-link to="/about" class="btn btn-outline">
+                Узнать больше
+              </nuxt-link>
+            </div>
           </div>
         </div>
       </div>
     </section>
 
-    <!-- Футер - появляется только при прокрутке -->
     <Footer />
   </div>
 </template>
@@ -35,28 +73,19 @@
 import Header from '~/components/layout/Header.vue'
 import Footer from '~/components/layout/Footer.vue'
 
-
 definePageMeta({
   title: 'EasySite'
 })
-
 </script>
 
 <style scoped>
-a:hover,
-a:visited,
-a:focus {
-  text-decoration: none;
-  color: var(--text-primary)
-}
-
 .page-wrapper {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
 }
 
-/* Hero секция занимает всю доступную высоту */
+/* Обновленная Hero Section */
 .hero-section {
   background: var(--hero-gradient);
   color: var(--text-inverse);
@@ -66,6 +95,7 @@ a:focus {
   display: flex;
   align-items: center;
   min-height: calc(100vh - 80px);
+  padding: 2rem 0;
 }
 
 .hero-section::before {
@@ -76,197 +106,223 @@ a:focus {
   right: 0;
   bottom: 0;
   background: var(--hero-pattern);
-  opacity: 0.1;
+  opacity: 0.05;
+  pointer-events: none;
 }
 
 .hero-content {
   position: relative;
   z-index: 10;
-  padding: 2rem 0;
   width: 100%;
-  flex: 1;
-  display: flex;
-  align-items: center;
 }
 
-.hero-text {
+.hero-main {
   max-width: 800px;
-  min-width: 350px;
+  margin: 0 auto;
-  display: grid;
+  text-align: center;
-  grid-template-columns: 1fr;
-  grid-template-rows: auto auto auto auto;
-  grid-template-areas:
-    "item1"
-    "item2"
-    "item3"
-    "item4";
-  gap: 1rem;
-  width: 100%;
-  border: 1px solid #ffffff20;
-  border-radius: 1rem;
-  padding: 2rem;
-  box-shadow: 2px 2px 4px #42b7d19a;
 }
 
 .hero-title {
-  font-size: 3rem;
+  font-family: var(--font-heading);
-  font-weight: bold;
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-weight: var(--font-bold);
+  line-height: 1.1;
+  margin-bottom: 1.5rem;
+  color: var(--text-inverse);
 }
 
-.T {
+.gradient-text {
-  color: var(--text-secondary);
+  background: linear-gradient(135deg, var(--secondary-400), var(--accent-400));
-  font-family: var(--font-accent);
+  -webkit-background-clip: text;
-  text-align: center;
+  -webkit-text-fill-color: transparent;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  background-clip: text;
-  padding: 0 1rem;
-  border-radius: 1rem;
 }
 
-.T:hover {
+.hero-description {
-  transform: translateY(-2px);
+  font-size: clamp(1.125rem, 2vw, 1.25rem);
-  box-shadow: var(--shadow-md);
+  line-height: 1.6;
-}
-
-.T1 {
-  grid-area: item1;
-  justify-self: start;
-}
-
-.T2 {
-  grid-area: item2;
-  justify-self: center;
-}
-
-.T3 {
-  grid-area: item3;
-  justify-self: end;
-}
-
-.T4 {
-  grid-area: item4;
-  justify-self: center;
-}
-
-/* Мобильная версия - элементы становятся шире */
-@media (max-width: 767px) {
-  .waterfall-layout {
-    gap: 0.75rem;
-  }
-
-  .item {
-    justify-self: stretch !important;
-    max-width: none !important;
-    width: 100%;
-    margin: 0;
-  }
-}
-
-/* Еще более узкие экраны - меньше отступы */
-@media (max-width: 480px) {
-  .waterfall-layout {
-    gap: 0.5rem;
-  }
-
-  .item {
-    padding: 1.5rem 1rem;
-  }
-}
-
-.hero-subtitle {
-  font-size: 1.25rem;
-  opacity: 0.9;
   margin-bottom: 3rem;
+  opacity: 0.9;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  color: var(--text-inverse);
 }
 
-.search-container {
+/* Контейнер шагов */
-  max-width: 800px;
+.steps-container {
-  margin: 0 auto;
-}
-
-.search-box {
   display: flex;
-  gap: 0.5rem;
+  flex-direction: column;
-  background: var(--bg-primary);
+  gap: 1.5rem;
-  border-radius: var(--radius-lg);
+  margin-bottom: 3rem;
-  padding: 0.5rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius-xl);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.step:hover {
+  transform: translateY(-2px);
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.3);
   box-shadow: var(--shadow-lg);
 }
 
-.search-input {
+.step-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  background: var(--primary-500);
+  color: var(--text-inverse);
+  border-radius: 50%;
+  font-weight: var(--font-bold);
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.step-content {
   flex: 1;
-  border: none;
+  text-align: left;
+}
+
+.step-content h3 {
+  font-size: 1.25rem;
+  font-weight: var(--font-semibold);
+  margin-bottom: 0.25rem;
+  color: var(--text-inverse);
+}
+
+.step-content p {
+  font-size: 0.9rem;
+  opacity: 0.8;
+  margin: 0;
+  color: var(--text-inverse);
+}
+
+.step-link {
+  color: var(--text-inverse);
+  text-decoration: none;
+  font-weight: var(--font-medium);
+  padding: 0.5rem 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: var(--radius-md);
-  padding: 1rem;
+  transition: all 0.3s ease;
-  font-size: 1.125rem;
+  flex-shrink: 0;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  min-width: 0;
 }
 
-.search-input:focus {
+.step-link:hover {
-  outline: none;
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.5);
+  text-decoration: none;
+  transform: translateX(2px);
 }
 
-.search-input::placeholder {
+/* Кнопки действий */
-  color: var(--text-tertiary);
+.hero-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
-.search-button {
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   padding: 1rem 2rem;
+  border: none;
+  border-radius: var(--radius-lg);
+  font-weight: var(--font-medium);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 1rem;
+}
+
+.btn-large {
+  padding: 1.25rem 2.5rem;
   font-size: 1.125rem;
-  white-space: nowrap;
-  flex-shrink: 0;
 }
 
-/* Футер остается внизу, но не влияет на высоту hero */
+.btn-primary {
-.footer {
+  background: var(--primary-500);
-  flex-shrink: 0;
+  color: var(--text-inverse);
-  /* Не сжимается */
 }
 
+.btn-primary:hover {
+  background: var(--primary-600);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+  text-decoration: none;
+}
+
+.btn-outline {
+  background: transparent;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  color: var(--text-inverse);
+}
+
+.btn-outline:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.5);
+  transform: translateY(-2px);
+  text-decoration: none;
+}
+
+/* Адаптивность */
 @media (max-width: 768px) {
   .hero-section {
     min-height: calc(100vh - 70px);
+    padding: 1.5rem 0;
   }
 
-  .hero-title {
+  .step {
-    font-size: 2rem;
-  }
-
-  .hero-subtitle {
-    font-size: 1rem;
-    margin-bottom: 2rem;
-  }
-
-  .search-box {
     flex-direction: column;
+    text-align: center;
+    gap: 1rem;
   }
 
-  .search-button {
+  .step-content {
+    text-align: center;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .btn {
     width: 100%;
-  }
+    max-width: 300px;
-
-  .hero-content {
-    padding: 1rem 0;
   }
 }
 
 @media (max-width: 480px) {
-  .hero-title {
-    font-size: 1.75rem;
-  }
-
-  .hero-subtitle {
-    font-size: 0.9rem;
-  }
-
-  .search-input {
-    padding: 0.75rem;
-    font-size: 1rem;
-  }
-
   .hero-section {
     min-height: calc(100vh - 60px);
   }
+
+  .step {
+    padding: 1.25rem;
+  }
+
+  .step-number {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1rem;
+  }
 }
 </style>