49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import BaseButton from '../../../BaseButton';
|
|
|
|
const HeroImageRight = ({
|
|
mainText,
|
|
subTitle,
|
|
buttonText,
|
|
imageHero,
|
|
textSecondary,
|
|
}) => (
|
|
<div className='flex flex-col lg:flex-row pb-24 h-auto lg:h-screen'>
|
|
<div className='flex-1 lg:w-2/5 order-first lg:order-last'>
|
|
<img
|
|
src={`${imageHero[0]?.src}`}
|
|
alt='Hero'
|
|
className='w-full h-64 sm:h-full object-cover'
|
|
/>
|
|
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
<a
|
|
href={imageHero[0]?.photographer_url}
|
|
className='text-[8px]'
|
|
target='_blank'
|
|
rel='noreferrer'
|
|
>
|
|
Photo by {imageHero[0]?.photographer} on Pexels
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className='flex-1 flex items-center justify-center order-last lg:order-first p-4 sm:p-8'>
|
|
<div className='text-center lg:ml-16 lg:text-left'>
|
|
<h1 className='text-4xl sm:text-5xl lg:text-6xl font-bold mb-4'>
|
|
{mainText}
|
|
</h1>
|
|
<div className='space-y-3 mb-8'>
|
|
<p className={`text-sm ${textSecondary}`}>{subTitle}</p>
|
|
</div>
|
|
<BaseButton
|
|
href='/login'
|
|
label={`${buttonText}`}
|
|
color='danger'
|
|
className=' px-4 sm:px-6 py-2 '
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default HeroImageRight;
|