51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { MapPin } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
|
|
import { useLanguage } from '@/shared/language';
|
|
import { Button } from '@/shared/shadcn-ui/button';
|
|
|
|
export const HeroSection = () => {
|
|
const { t } = useLanguage();
|
|
|
|
return (
|
|
<section className='relative'>
|
|
<div className='relative h-[500px] w-full overflow-hidden'>
|
|
<Image
|
|
src='/placeholder.svg?height=500&width=1920'
|
|
alt='Gas Station Network'
|
|
width={1920}
|
|
height={500}
|
|
className='object-cover'
|
|
priority
|
|
/>
|
|
<div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
|
|
<div className='container'>
|
|
<div className='max-w-lg space-y-4 text-white'>
|
|
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
|
|
{t('home.hero.title')}
|
|
</h1>
|
|
<p className='text-lg text-gray-200'>
|
|
{t('home.hero.description')}
|
|
</p>
|
|
<div className='flex gap-4'>
|
|
<Button className='bg-red-600 hover:bg-red-700'>
|
|
{t('common.buttons.findStation')}{' '}
|
|
<MapPin className='ml-2 h-4 w-4' />
|
|
</Button>
|
|
<Button
|
|
variant='outline'
|
|
className='border-white text-white hover:bg-white/10'
|
|
>
|
|
{t('common.buttons.learnMore')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|