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