first commit

frontend/src/components/career/Hero.astro

@@ -0,0 +1,59 @@
+---
+import { authService } from '@/lib/authService';
+
+// Инициализация клиента PocketBase
+const pb = authService.createClientFromRequest(Astro.request);
+
+// Получение данных из PocketBase
+const heroData = await pb.collection('career_hero').getFirstListItem('');
+
+// Генерация прямой ссылки на изображение с помощью метода PocketBase
+const backgroundImageUrl = pb.files.getURL(heroData, heroData.background_image);
+---
+
+<!-- Career Hero Component -->
+<section class="relative h-[70vh] min-h-[600px] w-full flex items-center justify-center text-center text-white overflow-hidden">
+    <!-- Background Image -->
+    <div
+        class="absolute inset-0 bg-cover bg-center brightness-50"
+        style={`background-image: url('${backgroundImageUrl}')`}
+    ></div>
+    <div class="absolute inset-0 bg-gradient-to-b from-black/70 to-black/40"></div>
+
+    <!-- Content -->
+    <div class="relative z-10 p-6 max-w-5xl mx-auto">
+        <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
+            <span class="block">{heroData.title}</span>
+        </h1>
+
+        <p class="mt-6 text-lg md:text-xl max-w-3xl mx-auto text-slate-200">
+            {heroData.subtitle}
+        </p>
+
+        <div class="mt-10">
+            <a
+                href="#offene-stellen"
+                class="inline-block bg-amber-500 text-slate-900 font-bold py-3 px-8 rounded-lg text-lg transition-all duration-300 shadow-lg hover:shadow-amber-500/40 hover:bg-amber-400 hover:scale-105 active:scale-95"
+            >
+                {heroData.btn_text}
+            </a>
+        </div>
+    </div>
+
+    <!-- Scroll Indicator -->
+    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+        <div class="w-8 h-12 rounded-full border-2 border-white flex justify-center p-1">
+            <div class="w-2 h-2 bg-white rounded-full"></div>
+        </div>
+    </div>
+</section>
+
+<style>
+    .animate-bounce {
+        animation: bounce 1.5s infinite;
+    }
+    @keyframes bounce {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-10px); }
+    }
+</style>