68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { MapPin } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
import { useTextController } from '@/shared/language/hooks/use-text-controller';
|
|
import { useMediaController } from '@/shared/media/hooks/use-media-controller';
|
|
import { Button } from '@/shared/shadcn-ui/button';
|
|
|
|
export const HeroSection = () => {
|
|
const { t } = useTextController();
|
|
const { m } = useMediaController();
|
|
|
|
return (
|
|
<section className='relative'>
|
|
<div className='relative h-[550px] w-full overflow-hidden bg-black sm:h-[500px] xl:h-[650px]'>
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
height: '50%',
|
|
position: 'absolute',
|
|
// top: -60,
|
|
// right: 20,
|
|
}}
|
|
className='sm:!-top-16 sm:-right-40 sm:!h-[70vh] sm:!w-[100vh] md:!-top-10 md:!-right-30 xl:!top-0 xl:!right-0'
|
|
>
|
|
<Image
|
|
src={m('home.hero-section.banner') || '/oriyo_bg.jpeg'}
|
|
alt='Oriyo Station'
|
|
fill
|
|
className='object-cover sm:scale-110 md:scale-120 xl:scale-140'
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
<div className='absolute inset-0 flex items-end bg-gradient-to-r from-black/70 to-black/30 px-2 pb-12 sm:items-center sm:pb-0'>
|
|
<div className='container mx-auto'>
|
|
<div className='max-w-lg space-y-4 text-white'>
|
|
<div className='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
|
|
<h1 className='text-5xl font-bold tracking-tight md:text-6xl'>
|
|
{t('home.hero.title')}
|
|
</h1>
|
|
</div>
|
|
<p className='text-gray-200 sm:text-lg'>
|
|
{t('home.hero.description')}
|
|
</p>
|
|
<div className='mt-6 flex gap-2 sm:flex-row sm:gap-4'>
|
|
<Link href='#stations'>
|
|
<Button className='bg-red-600 hover:bg-red-700'>
|
|
{t('common.buttons.findStation')}{' '}
|
|
<MapPin className='ml-2 h-4 w-4' />
|
|
</Button>
|
|
</Link>
|
|
<Link href='about'>
|
|
<Button variant='outline' className='animate-pulse'>
|
|
{t('common.buttons.learnMore')}
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|