jamesratcliffe101
ef8d90651e
All checks were successful
Build and Deploy NextJS SculptedArc Website / build-and-deploy (push) Successful in 1m44s
26 lines
1.8 KiB
TypeScript
26 lines
1.8 KiB
TypeScript
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>
|
|
</>
|
|
)
|
|
} |