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

add link on main page of easysite102.ru

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

@@ -8,18 +8,18 @@
       <div class="container">
         <div class="hero-content">
           <div class="hero-text">
-            <div>
-              <text class="T1 T">создавай</text>
+            <nuxt-link to="/auth/register" class="T1 T">
+              <text>создавай</text>
               <h1 class="hero-title">аккаунт</h1>
-            </div>
-            <div class="T2 T">
+            </nuxt-link>
+            <nuxt-link to="/profile" class="T2 T">
               <text>добавляй</text>
               <h1 class="hero-title">услуги</h1>
-            </div>
-            <div class="T3 T">
+            </nuxt-link>
+            <nuxt-link to="/objects/my-objects" class="T3 T">
               <text>получай</text>
               <h1 class="hero-title">сайт</h1>
-            </div>
+            </nuxt-link>
             <p class="hero-subtitle T4">легко и доступно</p>
           </div>
         </div>
@@ -38,6 +38,13 @@ import Footer from '~/components/layout/Footer.vue'
 </script>
 
 <style scoped>
+a:hover,
+a:visited,
+a:focus {
+  text-decoration: none;
+  color: var(--text-primary)
+}
+
 .page-wrapper {
   min-height: 100vh;
   display: flex;
@@ -80,10 +87,14 @@ import Footer from '~/components/layout/Footer.vue'
 .hero-text {
   max-width: 800px;
   min-width: 350px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
+  display: grid;
+  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;
@@ -100,22 +111,60 @@ import Footer from '~/components/layout/Footer.vue'
 .T {
   color: var(--text-secondary);
   font-family: var(--font-accent);
+  text-align: center;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 0 1rem;
+  border-radius: 1rem;
+}
+
+.T:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
 }
 
 .T1 {
-  margin-right: auto;
+  grid-area: item1;
+  justify-self: start;
 }
 
 .T2 {
-  margin: 0 auto;
+  grid-area: item2;
+  justify-self: center;
 }
 
 .T3 {
-  margin-left: auto;
+  grid-area: item3;
+  justify-self: end;
 }
 
 .T4 {
-  margin: 0 auto;
+  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 {