88 lines
2.7 KiB
Text
88 lines
2.7 KiB
Text
|
---
|
||
|
|
import WhatsAppButton from '@components/base/WhatsAppButton.astro'
|
||
|
|
import TechStack from '@components/home/TechStack.astro'
|
||
|
|
import HeroImage from '@components/home/HeroImage.astro'
|
||
|
|
import { pb } from '@lib/pocketbase';
|
||
|
|
|
||
|
|
interface HeroData {
|
||
|
|
id: string;
|
||
|
|
title: string;
|
||
|
|
subtitle: string;
|
||
|
|
tech_title: string;
|
||
|
|
whatsapp_phone_number: string;
|
||
|
|
btn_text: string;
|
||
|
|
frontend_tech: string[];
|
||
|
|
backend_tech: string[];
|
||
|
|
is_active: boolean;
|
||
|
|
[key: string]: any; // для остальных полей
|
||
|
|
}
|
||
|
|
|
||
|
|
const result = await pb.collection('home_hero').getList(1, 1, {
|
||
|
|
filter: 'is_active = true',
|
||
|
|
sort: '-created'
|
||
|
|
});
|
||
|
|
|
||
|
|
const heroData: HeroData = {
|
||
|
|
...result.items[0],
|
||
|
|
id: result.items[0].id,
|
||
|
|
title: result.items[0].title,
|
||
|
|
subtitle: result.items[0].subtitle,
|
||
|
|
tech_title: result.items[0].tech_title,
|
||
|
|
whatsapp_phone_number: result.items[0].whatsapp_phone_number,
|
||
|
|
btn_text: result.items[0].btn_text,
|
||
|
|
frontend_tech: result.items[0].frontend_tech || [],
|
||
|
|
backend_tech: result.items[0].backend_tech || [],
|
||
|
|
is_active: result.items[0].is_active
|
||
|
|
};
|
||
|
|
---
|
||
|
|
|
||
|
|
<section class="w-full">
|
||
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-10 lg:gap-20">
|
||
|
|
|
||
|
|
<!-- ЛЕВАЯ КОЛОНКА -->
|
||
|
|
<div class="flex-1 hero-content-animation">
|
||
|
|
<div class="text-center md:text-left">
|
||
|
|
<h1 class="mb-5 text-2xl md:text-4xl lg:text-5xl font-bold leading-tight dark:text-white animate-fade-in-up" style="animation-delay: 0.1s;">
|
||
|
|
{heroData.title}
|
||
|
|
</h1>
|
||
|
|
<div class="mb-6 space-y-3 animate-fade-in-up" style="animation-delay: 0.2s;">
|
||
|
|
<p class="text-base md:text-lg text-neutral-600 dark:text-neutral-400">
|
||
|
|
{heroData.subtitle}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Стек и кнопка (внутри левой колонки) -->
|
||
|
|
<div class="mt-8 animate-fade-in-up" style="animation-delay: 0.3s;">
|
||
|
|
<h2 class="text-xl md:text-2xl font-bold text-center md:text-left mb-6 dark:text-white">
|
||
|
|
{heroData.tech_title}
|
||
|
|
</h2>
|
||
|
|
<TechStack heroData={heroData} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-8 flex justify-center animate-fade-in-up" style="animation-delay: 0.7s;">
|
||
|
|
<WhatsAppButton
|
||
|
|
phoneNumber={heroData.whatsapp_phone_number}
|
||
|
|
btnText={heroData.btn_text}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ПРАВАЯ КОЛОНКА (Картинка) -->
|
||
|
|
<div class="flex-1 w-full max-w-sm md:max-w-md lg:max-w-lg">
|
||
|
|
<HeroImage heroData={heroData} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@keyframes fadeInUp {
|
||
|
|
from { opacity: 0; transform: translateY(20px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
.animate-fade-in-up {
|
||
|
|
opacity: 0;
|
||
|
|
animation: fadeInUp 0.8s ease-out forwards;
|
||
|
|
}
|
||
|
|
</style>
|