import ContentCard from "./ui/content-cards";
import './hero-section.css'
import heroPictureOne from   "../assets/mxj-files-planet-27066.gif"

export default function HeroSection({description, buttonText, imageSrc }: {description: string; buttonText: string; imageSrc: string }  ) {
    return(
        <>
            <div className="flex flex-wrap-reverse justify-items-center ">
                <div className="p-4 w-full md:w-1/2 shrink-0">
                    <img className="w-full h-auto rounded-2xl object-cover" src={imageSrc} alt="" />
                </div>
                <div className="w-full md:w-1/2">
                    <h1 className="mb-4 font-bold text-heading text-6xl sm:text-7xl"><span className="text-transparent bg-clip-text bg-gradient-to-r bg-violet-800 from-sky-400">Sculpted Arc</span><br/> Web Solutions</h1>
                    
                    <hr className="w-1/4 mb-7 mt-8 border-gray-700 border-2 rounded-2xl"/>
                    
                    <p className="text-lg font-normal text-body lg:text-xl">{description}</p>
                    <br/>
                    <a href="#" className="transition duration-150 flex w-55 justify-start rounded-3xl text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-blue-200 hover:text-black hover:text-heading focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none mt-auto">
                        {buttonText}
                        <svg className="w-3 h-3 ms-1.5 rtl:rotate-180 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
                    </a>
                </div>
            </div>
        </>
    )
}