Full-stack Developer
& Shopify Expert.

// Banner
export const Banner = ({ data }) => {
  return (
    <Container className="mt-9">
      <div className="grid grid-cols-1 lg:grid-cols-2">
        <div className="max-w-2xl">
          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100">
            {data.heading}
          </h1>
          <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
            {data.content}
          </p>
          <Button
            className="mt-4 flex flex-row items-center gap-x-3"
            variant="colored"
            color="rose"
          >
            <Link href="/contact" className="cursor-pointer">
              Fill me in on your project
            </Link>
            <span>
              <ArrowLongRightIcon className="h-4 w-auto" />
            </span>
          </Button>
          <div className="mt-6 flex gap-6">
            <SocialLinks />
          </div>
        </div>
        {/* Render the MDX content with a set height and fade effect */}
        <div className="relative mt-9 max-h-64 overflow-hidden lg:pl-16">
          <div className="relative max-h-64 overflow-hidden text-xs opacity-75 before:absolute before:left-0 before:right-0 before:top-0 before:h-8 before:bg-gradient-to-b before:from-[rgba(250,250,250,0.25)] before:to-transparent after:absolute after:bottom-0 after:left-0 after:right-0 after:h-8 after:bg-gradient-to-t after:from-[rgba(250,250,250,0.25)] after:to-transparent dark:before:from-[rgba(24,24,27,0.85)] dark:after:from-[rgba(24,24,27,0.85)]">
            {/* Add the left and right fade gradients */}
            <div className="absolute bottom-0 left-0 top-0 w-8 bg-gradient-to-r from-[rgba(250,250,250,0.25)] to-transparent dark:from-[rgba(24,24,27,0.85)]"></div>
            <div className="absolute bottom-0 right-0 top-0 w-8 bg-gradient-to-l from-[rgba(250,250,250,0.25)] to-transparent dark:from-[rgba(24,24,27,0.85)]"></div>
            <BannerCode />
          </div>
        </div>
      </div>
    </Container>
  )
}