diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 15da659..fd49d01 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -20,7 +20,7 @@
Встречайте людей
- Найдите подходящие пары на основе общих интересов и предпочтений
+ Найдите подходящие пары на основе общих интересов
@@ -36,7 +36,7 @@
Безопасность
- Ваша конфиденциальность и безопасность — наши главные приоритеты
+ Ваша конфиденциальность — наши главные приоритеты
@@ -50,12 +50,6 @@
Зарегистрироваться
-
-
@@ -73,6 +67,12 @@
+
+
@@ -88,7 +88,7 @@
Мой профиль
- Управление личными данными и настройками
+ Управление личными данными
@@ -96,7 +96,7 @@
Поиск пары
- Находите интересных людей рядом с вами
+ Находите интересных людей рядом
@@ -137,6 +137,7 @@ onMounted(async () => {
margin: 0 auto;
padding: 0 20px;
width: 100%;
+ box-sizing: border-box;
}
/* Стили для анимированного REFLEX */
@@ -147,32 +148,17 @@ onMounted(async () => {
display: flex;
position: relative;
overflow: hidden;
+ padding: 0 1rem;
}
.landing-content {
- width: 50%;
- padding: 5% 5%;
+ width: 55%;
+ padding: 5% 0;
position: relative;
z-index: 2;
-}
-
-@media (max-width: 992px) {
- .landing-page {
- flex-direction: column;
- }
- .landing-content {
- width: 100%;
- padding: 10% 5% 20%;
- }
- .mobile-showcase {
- position: relative !important;
- width: 100% !important;
- height: 400px !important;
- transform: none !important;
- }
- .phone-mockup {
- transform: scale(0.8) !important;
- }
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
}
.app-name {
@@ -181,6 +167,7 @@ onMounted(async () => {
margin-bottom: 1.5rem;
letter-spacing: 2px;
display: flex;
+ flex-wrap: wrap;
}
.letter {
@@ -222,38 +209,28 @@ onMounted(async () => {
.landing-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
- gap: 2rem;
+ gap: 1.5rem;
margin-bottom: 3rem;
}
-@media (max-width: 768px) {
- .landing-features {
- grid-template-columns: 1fr;
- }
-
- .app-name {
- font-size: 3rem;
- }
-}
-
.feature {
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
- padding: 2rem;
+ padding: 1.5rem;
text-align: center;
backdrop-filter: blur(5px);
transition: all 0.3s ease;
}
.feature:hover {
- transform: translateY(-10px);
+ transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
}
.feature-icon {
background: rgba(255, 255, 255, 0.2);
- width: 70px;
- height: 70px;
+ width: 60px;
+ height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
@@ -262,26 +239,39 @@ onMounted(async () => {
}
.feature-icon i {
- font-size: 2rem;
+ font-size: 1.75rem;
}
.feature h3 {
- font-size: 1.3rem;
- margin-bottom: 1rem;
+ font-size: 1.2rem;
+ margin-bottom: 0.75rem;
font-weight: 600;
}
.feature p {
opacity: 0.8;
- line-height: 1.6;
+ line-height: 1.4;
+ font-size: 0.95rem;
}
.cta-buttons {
display: flex;
- gap: 1.5rem;
+ gap: 1.25rem;
margin-bottom: 5rem;
}
+@media (max-width: 480px) {
+ .cta-buttons {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .action-btn {
+ width: 100%;
+ justify-content: center;
+ }
+}
+
.action-btn {
display: inline-flex;
align-items: center;
@@ -296,6 +286,7 @@ onMounted(async () => {
cursor: pointer;
position: relative;
overflow: hidden;
+ box-sizing: border-box;
}
.action-btn.primary {
@@ -331,8 +322,9 @@ onMounted(async () => {
bottom: 0;
left: 0;
width: 100%;
- height: 200px;
+ height: 150px;
overflow: hidden;
+ z-index: 1;
}
.wave {
@@ -340,9 +332,9 @@ onMounted(async () => {
bottom: 0;
left: 0;
width: 200%;
- height: 200px;
+ height: 150px;
background: url('data:image/svg+xml;utf8,') repeat-x;
- background-size: 1200px 200px;
+ background-size: 1200px 150px;
animation: wave 10s linear infinite;
}
@@ -365,19 +357,19 @@ onMounted(async () => {
/* Мобильный телефон/макет */
.mobile-showcase {
- position: absolute;
- width: 50%;
+ width: 45%;
height: 100%;
right: 0;
display: flex;
justify-content: center;
align-items: center;
- transform: translateX(5%);
+ position: relative;
+ z-index: 2;
}
.phone-mockup {
- width: 300px;
- height: 600px;
+ width: 280px;
+ height: 550px;
background: #222;
border-radius: 40px;
position: relative;
@@ -445,7 +437,8 @@ onMounted(async () => {
.home-view {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- padding: 3rem 0;
+ padding: 3rem 1rem;
+ box-sizing: border-box;
}
.welcome-card {
@@ -456,6 +449,8 @@ onMounted(async () => {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
text-align: center;
margin-top: 2rem;
+ max-width: 100%;
+ box-sizing: border-box;
}
.welcome-card h1 {
@@ -480,16 +475,10 @@ onMounted(async () => {
gap: 2rem;
}
-@media (max-width: 768px) {
- .action-tiles {
- grid-template-columns: 1fr;
- }
-}
-
.action-tile {
background: white;
border-radius: 20px;
- padding: 2rem;
+ padding: 2rem 1.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
text-align: center;
transition: all 0.3s ease;
@@ -503,8 +492,8 @@ onMounted(async () => {
}
.tile-icon {
- width: 80px;
- height: 80px;
+ width: 70px;
+ height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
@@ -515,11 +504,11 @@ onMounted(async () => {
}
.tile-icon i {
- font-size: 2.5rem;
+ font-size: 2rem;
}
.action-tile h3 {
- font-size: 1.3rem;
+ font-size: 1.2rem;
margin-bottom: 0.5rem;
color: #333;
}
@@ -528,4 +517,172 @@ onMounted(async () => {
color: #6c757d;
font-size: 0.9rem;
}
+
+/* Медиа-запросы для улучшения адаптивности */
+
+/* Планшеты и небольшие ноутбуки */
+@media (max-width: 1100px) {
+ .landing-content {
+ padding-left: 3%;
+ }
+
+ .phone-mockup {
+ width: 240px;
+ height: 480px;
+ }
+
+ .app-name {
+ font-size: 4rem;
+ }
+}
+
+/* Планшеты */
+@media (max-width: 992px) {
+ .landing-page {
+ flex-direction: column;
+ height: auto;
+ min-height: 100vh;
+ }
+
+ .landing-content,
+ .mobile-showcase {
+ width: 100%;
+ padding: 2rem 1rem;
+ }
+
+ .landing-content {
+ padding-top: 4rem;
+ padding-bottom: 0;
+ }
+
+ .mobile-showcase {
+ height: 350px;
+ order: 1;
+ margin-top: 2rem;
+ }
+
+ .phone-mockup {
+ transform: rotate(-5deg) scale(0.9);
+ }
+
+ .wave-container {
+ height: 100px;
+ }
+
+ .wave {
+ height: 100px;
+ background-size: 1200px 100px;
+ }
+
+ .action-tiles {
+ gap: 1.5rem;
+ }
+}
+
+/* Мобильные устройства */
+@media (max-width: 768px) {
+ .landing-features {
+ grid-template-columns: 1fr;
+ }
+
+ .welcome-card {
+ padding: 2rem 1.5rem;
+ }
+
+ .welcome-card h1 {
+ font-size: 2rem;
+ }
+
+ .action-tiles {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+
+ .action-tile {
+ padding: 1.5rem;
+ }
+
+ .app-name {
+ font-size: 3.5rem;
+ }
+
+ .tagline {
+ font-size: 1.2rem;
+ }
+
+ .feature {
+ padding: 1.5rem;
+ }
+
+ .cta-buttons {
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+ }
+
+ .action-btn {
+ width: 100%;
+ justify-content: center;
+ }
+}
+
+/* Мелкие мобильные устройства */
+@media (max-width: 480px) {
+ .app-name {
+ font-size: 2.5rem;
+ justify-content: center;
+ }
+
+ .feature-icon {
+ width: 50px;
+ height: 50px;
+ }
+
+ .feature-icon i {
+ font-size: 1.5rem;
+ }
+
+ .mobile-showcase {
+ height: 300px;
+ }
+
+ .phone-mockup {
+ transform: rotate(-5deg) scale(0.7);
+ }
+
+ .welcome-card h1 {
+ font-size: 1.7rem;
+ }
+
+ .welcome-card .subtitle {
+ font-size: 1rem;
+ margin-bottom: 2rem;
+ }
+
+ .action-tile {
+ padding: 1.2rem;
+ }
+
+ .tile-icon {
+ width: 60px;
+ height: 60px;
+ }
+
+ .tile-icon i {
+ font-size: 1.5rem;
+ }
+}
+
+/* Исправления Safari */
+@supports (-webkit-touch-callout: none) {
+ .letter {
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .welcome-card h1 {
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+}
\ No newline at end of file