replace carousel

src/components/TheWelcome.vue

@@ -4,7 +4,12 @@
       <el-row :gutter="20" class="header-row">
         <el-col>
           <RouterLink to="/">
-            <img src="@/assets/qr-code-logo-200x200.jpg" width="200" height="200" alt="" />
+            <img
+              src="@/assets/qr-code-logo-200x200.jpg"
+              width="200"
+              height="200"
+              alt="QR-код логотип"
+            />
           </RouterLink>
         </el-col>
         <el-col>
@@ -33,26 +38,32 @@
     <!-- Примеры использования -->
     <el-main id="examples" class="examples-section">
       <h2>Примеры использования</h2>
-      <el-carousel height="300px">
-        <el-carousel-item>
+      <div class="examples-container">
+        <div class="example-block">
           <p>Автомобиль: получайте уведомления о проблемах с парковкой или фарами.</p>
-          <img src="@/assets/examples/car-200x200.jpg" width="200" height="200" alt="" />
-        </el-carousel-item>
-        <el-carousel-item>
+          <img src="@/assets/examples/car-200x200.jpg" width="150" height="150" alt="Автомобиль" />
+        </div>
+        <div class="example-block">
           <p>Питомец: помогите вернуть потерявшегося питомца.</p>
-          <img src="@/assets/examples/dog-200x200.jpg" width="200" height="200" alt="" />
-        </el-carousel-item>
-        <el-carousel-item>
+          <img src="@/assets/examples/dog-200x200.jpg" width="150" height="150" alt="Питомец" />
+        </div>
+        <div class="example-block">
           <p>Квартира: оставляйте инструкции для курьеров или соседей.</p>
-          <img src="@/assets/examples/door-200x200.jpg" width="200" height="200" alt="" />
-        </el-carousel-item>
-      </el-carousel>
+          <img src="@/assets/examples/door-200x200.jpg" width="150" height="150" alt="Квартира" />
+        </div>
+      </div>
     </el-main>
 
     <!-- Простота настройки -->
-    <el-main id="setup" class="setup-section">
+    <el-main id="settings" class="setup-section">
       <h2>Простота настройки</h2>
       <p>Создайте QR-код, выберите доступные действия и начните использовать.</p>
+
+      <div class="centered-button-container">
+        <el-button tag="RouterLink" to="/create" type="primary" size="large" class="large-button"
+          >Создать QR-код</el-button
+        >
+      </div>
     </el-main>
 
     <!-- Подвал -->
@@ -71,18 +82,56 @@
 
 .hero-section {
   text-align: center;
-  padding: 100px 20px;
+  padding: 50px 20px;
   background-color: #f5f5f5;
 }
 
-.examples-section,
 .setup-section {
-  padding: 50px 20px;
+  padding: 30px 20px;
+}
+
+.examples-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.example-block {
+  text-align: center;
+  padding: 10px 0;
+}
+
+.example-block img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+/* Центрирование кнопки */
+.centered-button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  margin-bottom: 40px;
+}
+
+.large-button {
+  font-size: 18px;
+  padding: 15px 40px;
+}
+
+/* Стили для десктопной версии */
+@media (min-width: 768px) {
+  .examples-container {
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: flex-start;
+  }
 }
 
 .footer {
   text-align: center;
-  padding: 20px;
+  padding: 10px;
   border-top: 1px solid #333;
 }
 </style>