75 lines
2.7 KiB
Vue
75 lines
2.7 KiB
Vue
<template>
|
||
|
||
<IpSecurity />
|
||
|
||
<section id="hero" class="relative overflow-hidden px-6 py-16 md:py-24 md:px-12">
|
||
<!-- Контейнер для параллакс-фона -->
|
||
<div class="parallax-bg absolute inset-0 z-0"></div>
|
||
<!-- Затемняющий слой -->
|
||
<div class="absolute inset-0 z-1 bg-black/30 backdrop-blur-[1px]"></div>
|
||
|
||
<div class="relative z-10 max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
|
||
<!-- Левая колонка -->
|
||
<div class="text-white">
|
||
<h1 class="text-4xl md:text-5xl font-extrabold leading-tight mb-6 drop-shadow-lg">
|
||
Безопасный и быстрый интернет от <span class="text-blue-400">uVPN</span>
|
||
</h1>
|
||
<p class="text-gray-200 text-lg mb-8 max-w-md drop-shadow">
|
||
Защитите свои данные и оставайтесь анонимными в сети с нашим современным VPN-сервисом на базе Xray.
|
||
</p>
|
||
<a
|
||
href="https://app.uvpn.shop"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
class="bg-blue-600 hover:bg-blue-700 transition px-8 py-4 rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 inline-flex items-center gap-2 text-white no-underline"
|
||
>
|
||
<Zap class="w-5 h-5" />
|
||
Начать бесплатно
|
||
</a>
|
||
|
||
<p class="text-gray-300 text-sm mt-4 drop-shadow">30-дневная гарантия возврата денег</p>
|
||
</div>
|
||
|
||
<!-- Правая колонка с Землёй -->
|
||
<div class="h-100 md:h-125 w-full">
|
||
<Hero3D />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { Zap } from '@lucide/vue'
|
||
import Hero3D from './Hero3D.vue'
|
||
import IpSecurity from './IpSecurity.vue';
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Параллакс-контейнер с фоновым изображением */
|
||
.parallax-bg {
|
||
background-image: url('/images/space.webp'); /* локальный файл */
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
/* Параллакс через 3D-трансформацию (работает без fixed) */
|
||
transform: translateZ(-1px) scale(2);
|
||
transform-origin: center;
|
||
will-change: transform;
|
||
}
|
||
|
||
/* Важно: родительский блок должен иметь perspective */
|
||
#hero {
|
||
perspective: 1px;
|
||
overflow-y: auto; /* для скролла внутри секции, если нужно */
|
||
}
|
||
|
||
/* На мобильных параллакс может быть излишним, отключаем по желанию */
|
||
@media (max-width: 768px) {
|
||
.parallax-bg {
|
||
transform: none;
|
||
}
|
||
#hero {
|
||
perspective: none;
|
||
}
|
||
}
|
||
</style> |