compro-mit/src/app/portfolio/page.tsx

import BannerDesktop from "@/image/portofolio/banner-desktop.png";
import BannerMobile from "@/image/portofolio/banner-mobile.png";
import AboutUsImage from "@/image/portofolio/about-us.png";
import SoftwareIcon from "@/image/portofolio/software-icon.svg";
import AiIcon from "@/image/portofolio/ai-icon.svg";
import SaasIcon from "@/image/portofolio/sas-icon.svg";
import UiuxIcon from "@/image/portofolio/ui-ux-icon.svg";
import Highlight1 from "@/image/portofolio/highlight-1.png";
import Highlight2 from "@/image/portofolio/highlight-2.png";
import Highlight3 from "@/image/portofolio/highlight-3.png";
import Corner1 from "@/image/portofolio/corner-why-us-1.svg";
import Corner2 from "@/image/portofolio/corner-why-us-2.svg";
import { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr";
import Image from "next/image";
import ClientImage from "./client-image";

export default function PortFolio() {
  const ourService = [
    { icon: SoftwareIcon, title: "Software Development", caption: "Kami mengembangkan sistem dan aplikasi yang disesuaikan dengan kebutuhan spesifik bisnis" },
    { icon: AiIcon, title: "AI Development", caption: "Kami membantu bisnis memanfaatkan AI untuk meningkatkan efisiensi dan pengambilan keputusan." },
    { icon: SaasIcon, title: "SaaS Development", caption: "Kami membangun produk digital berbasis langganan yang siap digunakan oleh banyak pengguna." },
    { icon: UiuxIcon, title: "UIUX Design", caption: "Kami merancang user interface yang intuitif dan efektif untuk meningkatkan usability dan konversi." },
  ];

  const highlights = [
    { icon: Highlight1, title: "Core Pawn System", caption: "Digitalisasi sistem pergadaian untuk meningkatkan efisiensi operasional dan akurasi transaksi.", list: ["Promas", "PajakMas", "Sopiga Pro"] },
    { icon: Highlight2, title: "Mobile Application", caption: "Aplikasi mobile yang dirancang untuk memudahkan pengguna mengakses layanan dengan lebih cepat, praktis, dan nyaman.", list: ["Danain", "SmartFin", "GadaiMAS"] },
    {
      icon: Highlight3,
      title: "AI Development",
      caption: "Solusi berbasis AI untuk verifikasi identitas, pemrosesan dokumen, dan monitoring operasional.",
      list: ["Face Verification", "OCR (Document Extraction),", "CCTV Monitoring (AI Detection)"],
    },
  ];

  const process = [
    "Discovery untuk memahami kebutuhan",
    "Planning & Design untuk merancang solusi",
    "Development untuk membangun sistem",
    "Testing untuk memastikan kualitas",
    "Deployment untuk implementasi",
    "Continuous Improvement untuk pengembangan lanjutan",
  ];

  const whyUs = [
    { title: "Experienced Team", caption: "Tim kami memiliki pengalaman dalam pengembangan software dan AI, dengan pemahaman terhadap berbagai kebutuhan bisnis dan industri." },
    { title: "Integrated Solutions", caption: "Kami menghadirkan solusi yang terintegrasi dalam satu ekosistem, sehingga memudahkan pengelolaan dan pengembangan sistem secara lebih efisien." },
    { title: "Cost-Efficient Approach", caption: "Pendekatan kami fleksibel dan disesuaikan dengan kebutuhan bisnis, sehingga Anda hanya berinvestasi pada solusi yang benar-benar dibutuhkan." },
  ];

  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 className="flex flex-col md:flex-row md:px-20 md:py-16">
        <div className="flex flex-col gap-4 py-6 px-4 md:w-1/2 md:pr-20 md:gap-6 md:px-0 md:py-0">
          <div className="flex flex-col gap-1">
            <p className="text-secondary-400 text-[13px] md:text-sm">ABOUT US</p>
            <p className="text-title font-semibold text-[32px] md:text-[40px]">Who We Are</p>
          </div>
          <div className="text-body text-sm md:text-base">
            <p>
              Setiap bisnis punya tantangan yang berbeda. Namun di era digital, satu hal menjadi sama: kebutuhan untuk bergerak lebih cepat, lebih efisien, dan lebih terukur. Kami hadir untuk membantu menjawab kebutuhan tersebut melalui
              solusi software dan AI yang relevan dan dapat dikembangkan. Mulia Informasi Teknologi (MIT) adalah perusahaan yang berfokus pada pengembangan software dan solusi berbasis Artificial Intelligence.
            </p>
            <p className="mt-4 md:mt-6">Kami bekerja dengan berbagai bisnis untuk:</p>
            <ul>
              <li>Mengembangkan sistem digital</li>
              <li>Meningkatkan efisiensi operasional</li>
              <li>Menciptakan produk yang scalable</li>
            </ul>
          </div>
          <p className="text-body text-sm md:text-base">
            MIT juga merupakan bagian dari Serba Mulia Group, sebuah strategic holding company yang menaungi berbagai unit bisnis di sektor otomotif, jasa keuangan, retail, dan teknologi yang didirikan sejak 1970 dan saat ini Serba Mulia
            Group telah berkembang dengan jangkauan operasional di berbagai wilayah di Indonesia, serta ekspansi ke pasar internasional seperti Malaysia dan Singapura. Sebagai bagian dari ekosistem ini, MIT memiliki perspektif yang lebih
            praktis dalam memahami kebutuhan bisnis, tidak hanya dari sisi teknologi tetapi juga dari pengalaman nyata di berbagai industri.
          </p>
        </div>
        <Image src={AboutUsImage} alt="about-us" className="w-full md:w-1/2 object-contain" />
      </div>

      <div className="flex flex-col gap-4 px-4 py-6 md:px-20 md:py-16 md:gap-6">
        <div className="flex flex-col gap-1">
          <p className="text-[13px] md:text-sm text-secondary-400">SERVICES</p>
          <p className="text-[32px] md:text-[40px] text-title font-semibold">Our Services</p>
        </div>
        <div className="flex flex-col border-t border-border md:grid md:grid-cols-4 md:border-t-0 md:border-l">
          {ourService?.map((item) => (
            <div className="p-6 border-b border-x border-border flex flex-col gap-4 md:border-y md:border-x-0 md:border-r" key={item?.title}>
              <Image src={item?.icon} alt="icon-service" className="size-16" />
              <div className="flex flex-col gap-2">
                <p className="text-title text-xl font-bold">{item?.title}</p>
                <p className="text-body">{item?.caption}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="flex flex-col px-4 py-6 gap-4 bg-linear-to-b from-subtle to-white md:py-16 md:px-20 md:gap-10">
        <div className="flex flex-col gap-4 md:gap-6">
          <div className="flex flex-col gap-1">
            <p className="text-[13px] text-secondary-400 md:text-sm">PORTFOLIO</p>
            <p className="text-[32px] text-title font-semibold md:text-[40px]">Case Highlights</p>
          </div>
          <div className="flex flex-col gap-4 md:grid md:grid-cols-3">
            {highlights?.map((item) => (
              <div key={item?.title} className="p-3 bg-white border border-border">
                <Image src={item?.icon} className="w-full" alt="highlight-icon" />
                <div className="flex flex-col gap-2 p-3">
                  <p className="text-title font-bold text-xl">{item?.title}</p>
                  <p className="text-body">{item?.caption}</p>
                  {item?.list?.length > 0 && (
                    <ul className="text-subtitle">
                      {item?.list?.map((item_list) => (
                        <li key={item_list}>{item_list}</li>
                      ))}
                    </ul>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="w-full h-px bg-border" />
        <div className="flex flex-col gap-4 md:gap-6">
          <div className="px-4 gap-1 flex flex-col text-center">
            <p className="text-secondary-400 text-[13px] md:text-sm">OUR CLIENTS</p>
            <p className="text-title text-[32px] font-semibold md:text-[40px]">Driving Impact with Our Clients</p>
          </div>
          <ClientImage />
        </div>
      </div>

      <div className="relative">
        <div className="flex flex-col md:py-16 md:px-20 md:grid md:grid-cols-2 md:gap-6">
          <div className="flex flex-col gap-4 px-4 py-6 z-10 md:gap-6">
            <div className="flex flex-col gap-1">
              <p className="text-[13px] text-secondary-400 md:text-sm">PROCESS</p>
              <p className="font-semibold text-title text-[32px] md:text-[40px]">How We Work</p>
            </div>
            <p className="text-sm text-body md:text-base">Kami bekerja dengan pendekatan yang terstruktur dan kolaboratif. Kami tidak hanya fokus pada delivery, tetapi juga keberlanjutan solusi.</p>
            <div className="flex flex-col gap-3 md:gap-4">
              <p className="text-title font-semibold md:text-lg">Setiap proyek melalui tahapan:</p>
              {process?.map((item, index) => (
                <div className="flex gap-3" key={index}>
                  <div className="rounded-xs bg-primary-100 size-6 backdrop-blur-xs font-semibold text-sm text-primary-800 justify-center items-center flex">{index + 1}</div>
                  <p className="text-sm text-subtitle flex self-center md:text-base">{item}</p>
                </div>
              ))}
            </div>
            <p className="text-sm md:text-base text-body">Kami tidak hanya fokus pada delivery, tetapi juga keberlanjutan solusi.</p>
          </div>
          <div className="flex flex-col gap-4 px-4 py-6 z-10 md:gap-6">
            <div className="flex flex-col gap-1">
              <p className="text-[13px] md:text-sm text-secondary-400">WHY US</p>
              <p className="font-semibold text-title text-[32px] md:text-[40px]">Why MIT</p>
            </div>
            <p className="text-sm text-body md:text-base">Kami bekerja dengan pendekatan yang terstruktur dan kolaboratif.</p>
            <div className="flex flex-col gap-4">
              {whyUs?.map((item) => (
                <div className="p-3 md:p-4 flex flex-col gap-2 border border-border" key={item?.title}>
                  <p className="text-title font-semibold md:text-lg">{item?.title}</p>
                  <p className="text-sm text-body md:text-base">{item?.caption}</p>
                </div>
              ))}
            </div>
          </div>
        </div>

        <Image src={Corner1} alt="corner-1" className="w-20 md:w-30 absolute top-0 right-0 z-0" />
        <Image src={Corner2} alt="corner-2" className="w-20 md:w-30 absolute bottom-0 left-0 z-0" />
      </div>
    </div>
  );
}