import BannerDesktop from "@/image/portofolio/banner-desktop.png";
import BannerMobile from "@/image/portofolio/banner-mobile.png";
import { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr";
import Image from "next/image";

export default function PortFolio() {
  return (
    <div className="flex flex-col">
      <div className="relative">
        <Image src={BannerMobile} alt="banner" className="w-full md:hidden" />
        <Image src={BannerDesktop} alt="banner" className="w-full hidden md:block" />
        <div className="absolute top-0 left-0 md:left-20 md:top-1/2 md:-translate-y-1/2">
          <div className="px-4 py-6 flex flex-col gap-4 text-white md:px-0 md:py-0">
            <div className="py-2 px-3 backdrop-blur-[19px] bg-[#FFFFFF1F] font-medium w-fit">Part of Serba Mulia Group</div>
            <p className="font-semibold text-[40px] md:text-5xl">Build Fast, Scale Smart</p>
            <p className="md:text-lg">Software & AI Solutions for Modern Business</p>
            <div className="primary-button pl-3">
              Contact Us
              <div className="p-2 bg-secondary-400">
                <ArrowUpRightIcon className="size-5 text-white" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}