PLOT. 제작 상품 4종 갤러리

/** PLOT. 워드마크(크기와 색은 인자로) */
function Wordmark({ className = "", color = "#020A22" }: { className?: string; color?: string }) {
  return (
    <svg viewBox="159 428 718 164" className={className} aria-hidden="true">
      <path
        fill={color}
        fillRule="evenodd"
        d="M178.5 430.5H263A46.5 46.5 0 0 1 263 523.5H197A7 7 0 0 0 190 530.5V578.5A11.5 11.5 0 0 1 167 578.5V531A30.5 30.5 0 0 1 197.5 500.5H263A23.5 23.5 0 0 0 263 453.5H178.5A11.5 11.5 0 0 1 178.5 430.5ZM354.5 442A11.5 11.5 0 0 1 377.5 442V548.5A18 18 0 0 0 395.5 566.5H469.5A11.5 11.5 0 0 1 469.5 589.5H395.5A41 41 0 0 1 354.5 548.5ZM505 509.5a81.5 81.5 0 1 0 163 0a81.5 81.5 0 1 0 -163 0ZM528 509.5a58.5 58.5 0 1 0 117 0a58.5 58.5 0 1 0 -117 0ZM712.5 430.5H843.5A11.5 11.5 0 0 1 843.5 453.5H789.5V578A11.5 11.5 0 0 1 766.5 578V453.5H712.5A11.5 11.5 0 0 1 712.5 430.5Z"
      />
      <circle cx="851.5" cy="572.5" r="16.5" fill={color === "#FFFFFF" ? "#FFFFFF" : "#0055FF"} />
    </svg>
  );
}

function BusinessCard() {
  return (
    <div className="relative h-[46%] w-[72%] -rotate-6 rounded-lg bg-white p-[6%] shadow-[0_14px_30px_rgba(2,10,34,0.14)]">
      <Wordmark className="w-[48%]" />
      <div className="mt-[10%] text-[clamp(10px,2.4vw,15px)] font-bold text-[#020A22]">직원 이름</div>
      <div className="text-[clamp(7px,1.4vw,10px)] text-[#8B95A1]">Brand Designer</div>
      <span className="absolute top-[8%] right-[6%] h-[84%] w-[13%] rounded-md bg-[#0055FF]" />
    </div>
  );
}

function Website() {
  return (
    <div className="w-[82%] overflow-hidden rounded-lg bg-white shadow-[0_14px_30px_rgba(2,10,34,0.12)]">
      <div className="flex items-center gap-1 bg-[#F4F6F9] px-2 py-1.5">
        <span className="size-1.5 rounded-full bg-[#8B95A1]" />
        <span className="size-1.5 rounded-full bg-[#8B95A1]" />
        <span className="size-1.5 rounded-full bg-[#8B95A1]" />
        <span className="ml-1.5 h-2.5 flex-1 rounded bg-white" />
      </div>
      <div className="flex items-center gap-2 p-[7%]">
        <div className="flex-1">
          <Wordmark className="w-[58%]" />
          <div className="mt-[8%] text-[clamp(9px,2vw,13px)] leading-tight font-extrabold text-[#020A22]">
            아이디어에서
            <br />
            가능성으로.
          </div>
          <span className="mt-[8%] inline-block rounded-full bg-[#0055FF] px-2 py-0.5 text-[clamp(6px,1.1vw,8px)] font-bold text-white">서비스 알아보기</span>
        </div>
        <div className="grid aspect-square w-[38%] place-items-center rounded-lg bg-[#EBF2FF] text-[clamp(18px,4vw,30px)] font-black text-[#020A22]">
          <span>
            P<span className="text-[#0055FF]">.</span>
          </span>
        </div>
      </div>
    </div>
  );
}

function Profile() {
  return (
    <div className="relative h-[78%] w-[52%] rotate-[-8deg] rounded-md bg-[#0055FF] p-[8%] shadow-[0_18px_36px_rgba(0,57,179,0.30)]">
      <span className="absolute inset-y-0 left-0 w-[5%] rounded-l-md bg-[#0039B3]" />
      <div className="text-[clamp(16px,3.6vw,26px)] leading-none font-black text-white">
        P<span>.</span>
      </div>
      <Wordmark className="absolute bottom-[18%] left-[12%] w-[62%]" color="#FFFFFF" />
      <div className="absolute bottom-[8%] left-[12%] text-[clamp(5px,1vw,7px)] tracking-widest text-white/80">COMPANY PROFILE</div>
    </div>
  );
}

function EmployeeId() {
  return (
    <div className="relative mt-[6%] h-[72%] w-[44%] rotate-6 rounded-lg bg-white p-[7%] text-center shadow-[0_16px_32px_rgba(2,10,34,0.14)]">
      <span className="absolute -top-[7%] left-1/2 h-[9%] w-[26%] -translate-x-1/2 rounded-sm bg-[#C5CCD6]" />
      <Wordmark className="mx-auto w-[70%]" />
      <span className="mx-auto mt-[10%] grid aspect-square w-[46%] place-items-center rounded-lg bg-[#EBF2FF]">
        <svg viewBox="0 0 24 24" className="w-[70%] text-[#0055FF]" fill="currentColor">
          <circle cx="12" cy="8.5" r="4.5" />
          <path d="M3 22a9 9 0 0 1 18 0Z" />
        </svg>
      </span>
      <div className="mt-[8%] text-[clamp(8px,1.8vw,12px)] font-bold text-[#020A22]">직원 이름</div>
      <div className="text-[clamp(5px,1vw,7px)] tracking-widest text-[#8B95A1]">BRAND DESIGN</div>
    </div>
  );
}

const ITEMS = [
  { title: "명함", Art: BusinessCard },
  { title: "홈페이지", Art: Website },
  { title: "사업소개서", Art: Profile },
  { title: "사원증", Art: EmployeeId },
];

/** PLOT. 제작 상품 갤러리: 가운데 2줄 제목과 설명, 정사각 연회색 타일 4개(모바일 1열, 태블릿 2열, 데스크톱 4열). 타일 오른쪽 아래 화살표 버튼. */
export default function Showcase() {
  return (
    <section id="showcase" className="w-full scroll-mt-24 bg-white px-5 pb-28 text-[#020A22]">
      <div className="mx-auto max-w-5xl text-center">
        <h2 className="text-[28px] leading-tight font-bold tracking-[-0.04em] break-keep md:text-[44px]">
          PLOT으로
          <br />
          <span className="text-[#0055FF]">만들 수 있는 모든 것</span>
        </h2>
        <p className="mt-4 text-[17px] font-semibold break-keep text-[#020A22]/50">명함, 홈페이지, 사업소개서, 사원증을 하나의 브랜드로</p>
        <div className="mt-14 grid gap-x-6 gap-y-12 sm:grid-cols-2 lg:grid-cols-4">
          {ITEMS.map(({ title, Art }) => (
            <div key={title}>
              <a href="#" aria-label={`${title} 만들기`} className="group relative grid aspect-square place-items-center overflow-hidden rounded-[28px] bg-[#F4F6FA]">
                <Art />
                <span className="absolute right-3 bottom-3 grid size-11 place-items-center rounded-full bg-[#020A22] text-white transition-transform group-hover:scale-105">
                  <svg viewBox="0 0 24 24" className="size-5" fill="currentColor" aria-hidden="true">
                    <path d="M6 5a1 1 0 0 0 0 2h9.59L5.29 17.29a1 1 0 0 0 1.42 1.42L17 8.41V18a1 1 0 0 0 2 0V6a1 1 0 0 0-1-1Z" />
                  </svg>
                </span>
              </a>
              <h3 className="mt-5 text-[22px] font-bold tracking-[-0.03em]">{title}</h3>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}