39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import BaseButton from '../../../BaseButton';
|
|
|
|
const HeroImageBg = ({
|
|
mainText,
|
|
subTitle,
|
|
buttonText,
|
|
imageHero,
|
|
textSecondary,
|
|
}) => (
|
|
<div
|
|
className='relative w-full h-screen flex items-center justify-center text-center mb-24 bg-cover bg-center'
|
|
style={{
|
|
backgroundImage: `url(${imageHero[0]?.src})`,
|
|
}}
|
|
>
|
|
<div className='absolute inset-0 bg-black opacity-50'></div>
|
|
<div className='relative container z-10 p-8 md:p-16 text-white'>
|
|
<h1 className='text-4xl sm:text-5xl lg:text-6xl font-bold mb-4'>
|
|
{mainText}
|
|
</h1>
|
|
<p className={`text-sm mb-8`}>{subTitle}</p>
|
|
<BaseButton
|
|
href='/login'
|
|
label={`${buttonText}`}
|
|
color='info'
|
|
className='px-4 sm:px-6 py-2 '
|
|
/>
|
|
</div>
|
|
<div className='absolute bottom-2 text-[8px] text-white w-full flex justify-center'>
|
|
<a href={imageHero[0]?.photographer_url} target='_blank' rel='noreferrer'>
|
|
Photo by {imageHero[0]?.photographer} on Pexels
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default HeroImageBg;
|