59 lines
2.1 KiB
Text
59 lines
2.1 KiB
Text
|
---
|
|||
|
|
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>
|