diff --git a/public/images/space.webp b/public/images/space.webp
new file mode 100644
index 0000000..3a807df
Binary files /dev/null and b/public/images/space.webp differ
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
index 31eec46..9ed9e45 100644
--- a/src/components/HeroSection.vue
+++ b/src/components/HeroSection.vue
@@ -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>
\ No newline at end of file
+</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>
\ No newline at end of file