fix class .buttons, add arrows in index

downloads.css

@@ -59,14 +59,6 @@
   margin-bottom: 20px;
 }
 
-.download-right .button {
-  cursor: pointer;
-}
-
-.download-right .button:hover {
-  background-color: #0056b3;
-}
-
 /* Стили для блока перехода на wiki */
 .install-guide {
   padding: 20px;
@@ -88,10 +80,6 @@
   margin-bottom: 20px;
 }
 
-.install-guide .button:hover {
-  background-color: #0056b3;
-}
-
 /* Стили для блока "Поддержать проект" */
 .support-project {
   background: var(--bg);
@@ -112,10 +100,6 @@
   margin-bottom: 20px;
 }
 
-.support-project .button:hover {
-  background-color: #218838;
-}
-
 /* Стили для блока с исходниками */
 .explore-source {
   display: flex;
@@ -155,10 +139,6 @@
   margin-bottom: 20px;
 }
 
-.source-right .button:hover {
-  background-color: #0056b3;
-}
-
 /* Медиа-запросы для основного контента */
 @media (max-width: 768px) {
   .download-distro, .explore-source {

index.html

@@ -94,13 +94,18 @@
 
       <div class="hero-text">
         <div class="hero-image">
-          <img src="images/ximperlinux.svg" alt="logo">
+    <img src="images/ximperlinux.svg" alt="logo">
         </div>
-        <h2>Ximper Linux</h2>
-        <p>Роллинг-релиз на базе ALT Sisyphus, создан для тех, кто ищет идеальное сочетание высокой производительности, современного дизайна и стабильности.</p>
-        <button id="next-section">Узнать больше</button>
-      </div>
+  <h2>Ximper Linux</h2>
+  <p>Роллинг-релиз на базе ALT Sisyphus, создан для тех, кто ищет идеальное сочетание высокой производительности, современного дизайна и стабильности.</p>
+  <button id="next-section" class="button">Узнать больше</button>
+    <div class="arrows">
+    <span class="arrow"></span>
+    <span class="arrow"></span>
+    <span class="arrow"></span>
     </div>
+  </div>
+</div>
     <div id="blocks-text">
       <h1>Возможности и удобства</h1>
     </div>

styles.css

@@ -65,12 +65,18 @@ body::before {
   text-decoration: none;
   background-color: var(--bg);
   color: #fff;
-  transition: background-color 0.8s;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   box-sizing: border-box;
   border: 2px solid var(--border);
   border-radius: 15px;
 }
 
+.button:hover {
+  transform: translateY(-10px) scale(1.02);
+  border-color: var(--border);
+  box-shadow: 0 15px 45px rgba(126, 1, 255, 0.4);
+}
+
 /* Стили для хедера */
 header {
   background-color: var(--bg);
@@ -284,12 +290,56 @@ main {
   margin: 20px 0;
 }
 
+.arrows {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.arrow {
+  display: block;
+  width: 20px;
+  height: 20px;
+  border: solid #fff;
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+  margin: 5px;
+  opacity: 0;
+  animation: arrowAnim 2s infinite;
+}
+
+.arrow:nth-child(1) {
+  animation-delay: 0s;
+}
+.arrow:nth-child(2) {
+  animation-delay: 0.3s;
+}
+.arrow:nth-child(3) {
+  animation-delay: 0.6s;
+}
+
+@keyframes arrowAnim {
+  0% {
+    opacity: 0;
+    transform: translateY(0) rotate(45deg);
+  }
+  50% {
+    opacity: 1;
+    transform: translateY(10px) rotate(45deg);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(20px) rotate(45deg);
+  }
+}
+
 #next-section {
   padding: 10px 20px;
   font-size: 18px;
   background-color: var(--bg);
   color: #fff;
-  transition: background-color 0.8s;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   box-sizing: border-box;
   border: 2px solid var(--border);
   border-radius: 15px;