oriyo_next/src/widgets/hero-section.tsx
2025-04-26 20:18:25 +03:00

47 lines
1.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { MapPin } from 'lucide-react';
import Image from 'next/image';
import '../../src/app/globals.css'
import { Button } from '@/shared/shadcn-ui/button';
export const HeroSection = () => {
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 mx-auto'>
<div className='max-w-lg space-y-4 text-white'>
<div className='flex tracking-in-expand'>
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl '>
Сеть современных заправок в Таджикистане
</h1>
</div>
<p className='text-lg text-gray-200'>
Качественное топливо, удобное расположение и отличный сервис для
наших клиентов
</p>
<div className='flex gap-4'>
<Button className='bg-red-600 hover:bg-red-700'>
Найти заправку <MapPin className='ml-2 h-4 w-4' />
</Button>
<Button variant='outline' className='animate-pulse'
>
Узнать больше
</Button>
</div>
</div>
</div>
</div>
</div>
</section>
);
};