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

export default function HeroSection() {
    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={heroPictureOne.src} 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">Here at Sculpted Arc we are invested in creating great website and solving complex web problems Here at Sculpted Arc we are invested in creating great website and solving complex web problems</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">
                        Tell us about your project
                        <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>
        </>
    )
}