68 lines
No EOL
3.7 KiB
Text
68 lines
No EOL
3.7 KiB
Text
---
|
||
import heroImage from '@assets/images/hero/heroImg.avif';
|
||
import Button from '@components/base/Button.astro';
|
||
|
||
const truckList = [
|
||
{ model: "MAN TGX 6x4", width: "w-8" },
|
||
{ model: "VOLVO FH16", width: "w-4" },
|
||
{ model: "SCANIA R730", width: "w-4" },
|
||
];
|
||
---
|
||
|
||
<div class="relative w-full">
|
||
<div class="relative flex min-h-[90vh] md:min-h-[85vh] flex-col items-center justify-center overflow-hidden bg-cover bg-center bg-no-repeat"
|
||
style={`background-image: linear-gradient(rgba(17, 24, 39, 0.7) 0%, rgba(17, 24, 39, 0.4) 50%, rgba(26, 30, 35, 1) 100%), url("${heroImage.src}");`}>
|
||
|
||
<div class="layout-content-container flex flex-col max-w-[1280px] w-full px-4 md:px-10 z-10">
|
||
|
||
<!-- Группирующий контейнер с адаптивным выравниванием -->
|
||
<div class="flex flex-col items-center md:items-start text-center md:text-left gap-6 max-w-[900px] mx-auto md:mx-0">
|
||
|
||
<!-- Верхний бейдж -->
|
||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded bg-primary/20 border border-primary/30 w-fit backdrop-blur-md">
|
||
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
||
<span class="text-primary text-[10px] md:text-xs font-bold uppercase tracking-[0.2em] font-display">Логистика проектных грузов</span>
|
||
</div>
|
||
|
||
<!-- ЗАГОЛОВОК -->
|
||
<h1 class="text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black font-display leading-[1.1] md:leading-[1.05] tracking-tight uppercase drop-shadow-2xl break-words w-full">
|
||
Негабаритные<br class="hidden sm:block"/>
|
||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-gray-500">перевозки</span><br/>
|
||
<span class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl opacity-90">любой сложности</span>
|
||
</h1>
|
||
|
||
<!-- Описание -->
|
||
<!-- border-l-0 на мобилках, md:border-l-4 на десктопе -->
|
||
<p class="text-gray-300 text-base md:text-lg lg:text-xl font-light max-w-[600px] border-l-0 md:border-l-4 border-primary pl-0 md:pl-6 leading-relaxed">
|
||
Перевозка промышленного оборудования и спецтехники по всей России.
|
||
<br class="hidden md:block"/>
|
||
<span class="text-white font-medium italic">Надежность. Точность. Масштаб.</span>
|
||
</p>
|
||
|
||
<!-- Кнопки -->
|
||
<div class="flex flex-col sm:flex-row gap-4 mt-6 md:mt-4 w-full sm:w-auto items-center">
|
||
<Button href="#calculate" variant="primary" className="w-full sm:w-auto text-sm md:text-base min-w-[200px]">
|
||
Рассчитать стоимость
|
||
</Button>
|
||
|
||
<Button href="#fleet" variant="outline" className="w-full sm:w-auto text-sm md:text-base min-w-[200px]">
|
||
Наш автопарк
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Декоративные элементы -->
|
||
<div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#181611] to-transparent"></div>
|
||
|
||
<!-- Список техники (по-прежнему только на больших экранах) -->
|
||
<div class="absolute right-10 bottom-10 hidden xl:flex flex-col gap-4 text-white/30 font-display text-[10px] uppercase tracking-[0.3em]">
|
||
{truckList.map((truck, index) => (
|
||
<div class="flex items-center gap-3 hover:text-primary transition-colors cursor-default group">
|
||
<span class={`h-[1px] bg-primary group-hover:w-12 transition-all ${truck.width}`}></span>
|
||
0{index + 1} {truck.model}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div> |