next-web/src/components/Tagline.tsx

"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)]'>
            <div className="w-full h-screen aspect-16/9 absolute top-0 left-0 bg-britton-medium bg-blend-soft-light bg-[url('/images/bg.jpg')] bg-cover bg-position-[center_-4.5rem] rounded-b-3xl">
                <div className="flex flex-col justify-center items-center py-20">
                    <div className="w-11/12 flex justify-start mt-58">
                        <div className="w-1/2 relative bg-britton-light text-center text-britton-dark text-7xl rounded-l-3xl rounded-t-3xl rounded-out-br-3xl py-3 px-4 ml-110">
                            {textTop}
                        </div>
                    </div>
                    <div className="w-11/12 flex justify-end">
                        <div className="w-1/2 relative bg-britton-light text-center text-britton-dark text-7xl rounded-r-3xl rounded-b-3xl rounded-out-tl-3xl py-3 px-4 mr-20">
                            {textBottom}
                        </div>
                    </div>
                </div>
            </div>
        </div> */}

        <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-3/7 top-1/2 right-9/40">
                        <div className="flex justify-start">
                            <div className="w-4/5 relative bg-britton-light text-center text-britton-dark text-7xl rounded-l-3xl rounded-t-3xl rounded-out-br-3xl py-3 px-4">
                                {textTop}
                            </div>
                        </div>
                        <div className="flex justify-end">
                            <div className="w-4/5 relative bg-britton-light text-center text-britton-dark text-7xl rounded-r-3xl rounded-b-3xl rounded-out-tl-3xl py-3 px-4">
                                {textBottom}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</>
    );
};

export default Tagline;