diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue index 21ff0b0..37ad568 100644 --- a/src/components/TheWelcome.vue +++ b/src/components/TheWelcome.vue @@ -4,7 +4,12 @@ - + QR-код логотип @@ -33,26 +38,32 @@

Примеры использования

- - +
+

Автомобиль: получайте уведомления о проблемах с парковкой или фарами.

- - - + Автомобиль +
+

Питомец: помогите вернуть потерявшегося питомца.

- - - + Питомец +
+

Квартира: оставляйте инструкции для курьеров или соседей.

- - - + Квартира +
+
- +

Простота настройки

Создайте QR-код, выберите доступные действия и начните использовать.

+ +
+ Создать QR-код +
@@ -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; }