uVPN/frontend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Releases 6 Activity

feature: add 4k space webp image to hero bg

Browse Source
This commit is contained in:
austnv
2026-05-24 04:21:12 +03:00
parent 1ca15c51fc
commit fca59132d2
2 changed files with 55 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/space.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

src/components/HeroSection.vue
+55 -22
View File
@@ -1,26 +1,29 @@
<template>
<section id="hero" class="px-6 py-16 md:py-24 md:px-12 max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<div>
<h1 class="text-4xl md:text-5xl font-extrabold leading-tight mb-6">
Безопасный и быстрый VPN <br /> от <span class="text-blue-600 dark:text-blue-400">uVPN</span>
</h1>
<p class="text-gray-500 dark:text-gray-400 text-lg mb-8 max-w-md">
Защитите свои данные, обходите блокировки и оставайтесь анонимными в сети с нашим современным VPN-сервисом на базе Xray.
</p>
<button class="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 transition px-8 py-4 rounded-xl font-bold text-lg shadow-lg shadow-blue-600/30 flex items-center gap-2 text-white">
<Zap class="w-5 h-5" /> Начать бесплатно
</button>
<p class="text-gray-500 text-sm mt-4">30-дневная гарантия возврата денег</p>
</div>
<!-- <div class="flex justify-center">
<img
src="/images/earth.png"
alt="VPN защита"
/>
</div> -->
<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="h-100 md:h-125 w-full">
<Hero3D />
<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">
Безопасный и быстрый VPN <br /> от <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>
<button 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 flex items-center gap-2">
<Zap class="w-5 h-5" /> Начать бесплатно
</button>
<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>
@@ -28,4 +31,34 @@
<script setup>
import { Zap } from '@lucide/vue'
import Hero3D from './Hero3D.vue'
</script>
</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>