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="hero-picture-stack p-4">
                    <img className="hero-picture" src={heroPictureOne.src} alt="" />
                    <img className="hero-picture hero-picture--tilt-20" src={heroPictureTwo.src} alt="" />
                    <img className="hero-picture hero-picture--tilt-40" src={heroPictureThree.src} alt="" />
                </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>
        </>
    )
}