Jason Jordan
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { textColor, bgColor } from '@/interfaces/common'
|
|
|
|
interface TaglineProps {
|
|
bgColor: bgColor;
|
|
textColor: textColor;
|
|
textTop: string;
|
|
textBottom: string;
|
|
}
|
|
|
|
const Tagline: React.FC<TaglineProps> = (
|
|
{
|
|
bgColor,
|
|
textColor,
|
|
textTop,
|
|
textBottom
|
|
}
|
|
) => {
|
|
|
|
return (
|
|
<>
|
|
<div className='h-[calc(100vh-85px)] lg:min-h-[640px] xl:min-h-[786px] 2xl:min-h-[1080px] flex'>
|
|
<div className="absolute top-0 left-0 w-full aspect-16/9 bg-cover bg-center bg-[url('/images/bg.jpg')] bg-britton-medium bg-blend-soft-light bg-position-[center_-4.5rem] rounded-b-3xl">
|
|
<div className="relative w-full h-full overflow-hidden">
|
|
<div className="absolute flex flex-col w-100 lg:w-150 xl:w-190 bottom-2/5 left-7/20 text-center text-britton-dark text-4xl lg:text-5xl xl:text-7xl">
|
|
<div className="flex justify-start">
|
|
<div className="w-5/6 lg:w-4/5 relative bg-britton-light rounded-t-3xl rounded-l-3xl rounded-out-br-3xl py-2 lg:py-3 px-4">
|
|
{textTop}
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end">
|
|
<div className="w-5/6 lg:w-4/5 relative bg-britton-light rounded-b-3xl rounded-r-3xl rounded-out-tl-3xl py-2 lg:py-3 px-4">
|
|
{textBottom}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Tagline; |