63 lines
3.1 KiB
TypeScript
63 lines
3.1 KiB
TypeScript
import React from 'react';
|
||
import { STATS } from '../constants';
|
||
import { Link } from 'react-router-dom';
|
||
|
||
const Hero: React.FC = () => {
|
||
return (
|
||
<div className="relative w-full min-h-screen bg-brand-dark text-white flex flex-col">
|
||
{/* Background Image Overlay */}
|
||
<div className="absolute inset-0 z-0">
|
||
<img
|
||
src="/media/images/hero/hero-main.png"
|
||
alt="Construction Site"
|
||
className="w-full h-full object-cover opacity-40"
|
||
loading="eager"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-r from-brand-dark/90 via-brand-dark/50 to-brand-dark/70 animate-gradient" />
|
||
</div>
|
||
|
||
{/* Hero Content */}
|
||
<div className="relative z-10 container mx-auto px-6 flex-grow flex flex-col justify-center py-32 md:py-20">
|
||
<div className="max-w-5xl mx-auto text-center mt-10 md:mt-0">
|
||
<h1 className="text-4xl md:text-5xl lg:text-7xl font-bold leading-tight mb-8">
|
||
Инженерные изыскания,
|
||
<br />
|
||
<span className="text-brand-orange">проектирование</span> и
|
||
<br />
|
||
<span className="text-brand-orange">строительство</span>
|
||
</h1>
|
||
<p className="text-gray-300 text-lg md:text-xl mb-12 max-w-3xl mx-auto leading-relaxed">
|
||
ООО «ГеоВектор» — профессиональные решения для вашего проекта от изысканий до сдачи объекта.
|
||
Современное оборудование, опытные специалисты и соблюдение всех норм и стандартов.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||
<Link
|
||
to="/contacts"
|
||
className="inline-flex items-center justify-center bg-brand-orange text-white font-bold py-4 px-8 rounded-xl hover:bg-orange-600 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105"
|
||
>
|
||
Рассчитать стоимость проекта
|
||
</Link>
|
||
<Link
|
||
to="/services"
|
||
className="inline-flex items-center justify-center bg-white/10 backdrop-blur-sm text-white font-bold py-4 px-8 rounded-xl hover:bg-white/20 transition-all duration-300 border-2 border-white/30"
|
||
>
|
||
Наши услуги
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats */}
|
||
<div className="mt-24 grid grid-cols-1 md:grid-cols-3 gap-8 border-t border-white/10 pt-12 max-w-5xl mx-auto w-full">
|
||
{STATS.map((stat, idx) => (
|
||
<div key={idx} className="flex flex-col items-center text-center">
|
||
<span className="text-4xl md:text-5xl font-bold text-brand-orange mb-2">{stat.value}</span>
|
||
<p className="text-gray-400 text-sm md:text-base leading-relaxed">{stat.label}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Hero; |