import ContentCard from "./ui/content-cards";
import './hero-section.css'
import heroPictureOne from   "../assets/hero-picture-1.png"
import heroPictureTwo from   "../assets/hero-picture-2.png"
import heroPictureThree from "../assets/hero-picture-3.png"

export default function HeroSection() {
    return(
        <>
            <div className="hero-main flex flex-wrap">
                <div className="grid grid-cols-1 grid-rows-1 p-4 w-1/2">
                    <img className="not-last-of-type:col-start-1 row-start-1 w-full h-auto object-cover hero-picture" src={heroPictureOne.src}/>
                    <img className="col-start-1 row-start-1 self-end justify-end hero-picture rotate-20" src={heroPictureTwo.src}/>
                    <img className="col-start-1 row-start-1 self-end justify-end hero-picture rotate-40" src={heroPictureThree.src}/>
                </div>
                <div className="hero-right">
                    <h1 className="mb-4 text-5xl font-bold text-heading md:text-6xl lg: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>
                    <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>
                </div>
            </div>
        </>
    )
}