봄 시즌 런칭 캠페인 랜딩 (샘플)

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "봄 시즌 런칭 — 캠페인 랜딩 (데모)",
  description: "쇼케이스용 랜딩·캠페인 페이지 예시. 실제 서비스와 무관한 데모입니다.",
  robots: { index: false, follow: false },
};

/**
 * 쇼케이스 `landing-campaign` 카테고리 연동용 샘플 랜딩.
 * 데모 URL: /demos/landing-campaign-sample
 * ?showcase_embed=1 — 쇼케이스 iframe 내: 스크롤 없이 뷰포트에 고정
 */
export default async function LandingCampaignSamplePage({
  searchParams,
}: {
  searchParams: Promise<{ showcase_embed?: string }>;
}) {
  const { showcase_embed: showcaseEmbed } = await searchParams;
  const isShowcaseEmbed = showcaseEmbed === "1" || showcaseEmbed === "true";

  return (
    <div
      data-demo-embed-fixed={isShowcaseEmbed ? "" : undefined}
      className={
        isShowcaseEmbed
          ? "fixed inset-0 overflow-hidden bg-[#0c0f14] text-zinc-100 antialiased"
          : "min-h-[100dvh] bg-[#0c0f14] text-zinc-100 antialiased"
      }
    >
      <div
        className="pointer-events-none fixed inset-0 opacity-[0.45]"
        style={{
          backgroundImage: `
            radial-gradient(ellipse 80% 50% at 50% -20%, rgba(251, 191, 36, 0.22), transparent),
            radial-gradient(ellipse 60% 40% at 100% 0%, rgba(56, 189, 248, 0.12), transparent),
            radial-gradient(ellipse 50% 30% at 0% 100%, rgba(244, 63, 94, 0.08), transparent)
          `,
        }}
        aria-hidden
      />

      <header className="relative border-b border-white/5 bg-black/20 backdrop-blur-md">
        <div className="mx-auto flex max-w-5xl items-center justify-between gap-4 px-8 py-4 max-sm:px-5">
          <span className="text-sm font-semibold tracking-tight text-amber-200/90">
            SPRING 26
          </span>
          <nav className="flex gap-6 text-sm text-zinc-400 max-sm:hidden" aria-label="데모 내비게이션">
            <span className="cursor-default hover:text-zinc-200">캠페인</span>
            <span className="cursor-default hover:text-zinc-200">라인업</span>
            <span className="cursor-default hover:text-zinc-200">이벤트</span>
          </nav>
          <span
            className="rounded-full border border-amber-400/30 bg-amber-400/10 px-3 py-1 text-xs font-medium text-amber-200"
            title="데모 표시"
          >
            DEMO
          </span>
        </div>
      </header>

      <main>
        <section className="relative mx-auto max-w-5xl px-8 pb-20 pt-24 max-sm:px-5 max-sm:pt-16">
          <p className="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-amber-400/80">
            Limited campaign
          </p>
          <h1 className="max-w-3xl text-5xl font-bold leading-[1.1] tracking-tight text-white max-sm:text-4xl max-sm:leading-[1.15]">
            새 시즌을 여는
            <br />
            <span className="bg-gradient-to-r from-amber-200 via-orange-200 to-rose-200 bg-clip-text text-transparent">
              인터랙티브 런칭 랜딩
            </span>
          </h1>
          <p className="mt-6 max-w-xl text-lg leading-relaxed text-zinc-400 max-sm:text-base">
            스크롤·모션·CTA 흐름을 담은 캠페인형 단일 페이지 예시입니다. 포트폴리오 쇼케이스의
            라이브 데모로 연결해 보세요.
          </p>
          <div className="mt-10 flex flex-wrap items-center gap-4 max-sm:gap-3">
            <button
              type="button"
              className="rounded-xl bg-gradient-to-b from-amber-300 to-amber-500 px-7 py-3.5 text-sm font-semibold text-stone-900 shadow-lg shadow-amber-500/25 transition hover:brightness-105 active:scale-[0.98] max-sm:w-full"
            >
              사전 알림 신청
            </button>
            <button
              type="button"
              className="rounded-xl border border-white/15 bg-white/5 px-7 py-3.5 text-sm font-medium text-zinc-200 backdrop-blur transition hover:bg-white/10 max-sm:w-full"
            >
              라인업 보기
            </button>
          </div>
          <dl className="mt-16 grid grid-cols-3 gap-6 border-t border-white/10 pt-10 max-sm:grid-cols-1">
            {[
              { k: "전환 포인트", v: "히어로 CTA · 스크롤 후 보조 CTA" },
              { k: "구성", v: "가치 제안 3열 · 하단 재전환" },
              { k: "목적", v: "캠페인 단기 집중 유입" },
            ].map((row) => (
              <div key={row.k}>
                <dt className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
                  {row.k}
                </dt>
                <dd className="mt-2 text-sm leading-snug text-zinc-300">{row.v}</dd>
              </div>
            ))}
          </dl>
        </section>

        <section className="relative border-t border-white/5 bg-black/25 py-20">
          <div className="mx-auto max-w-5xl px-8 max-sm:px-5">
            <h2 className="text-3xl font-bold text-white max-sm:text-2xl">왜 지금인가요</h2>
            <p className="mt-3 max-w-2xl text-zinc-400 max-sm:text-sm">
              랜딩·캠페인 페이지에서 자주 쓰는 설득 블록을 미리 배치한 레이아웃입니다.
            </p>
            <ul className="mt-12 grid grid-cols-3 gap-6 max-sm:grid-cols-1">
              {[
                {
                  title: "즉시 이해",
                  body: "헤드라인과 한 줄 요약으로 제품·이벤트 가치를 압축합니다.",
                  icon: "01",
                },
                {
                  title: "행동 유도",
                  body: "1차·2차 CTA로 방문자 단계에 맞는 클릭을 분리합니다.",
                  icon: "02",
                },
                {
                  title: "신뢰 보강",
                  body: "숫자·배지·짧은 증거 문구로 스크롤 중 이탈을 줄입니다.",
                  icon: "03",
                },
              ].map((card) => (
                <li
                  key={card.icon}
                  className="group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-b from-white/[0.07] to-transparent p-6 transition hover:border-amber-400/25"
                >
                  <span className="font-mono text-3xl font-bold text-white/10 transition group-hover:text-amber-400/30">
                    {card.icon}
                  </span>
                  <h3 className="mt-4 text-lg font-semibold text-white">{card.title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-zinc-400">{card.body}</p>
                </li>
              ))}
            </ul>
          </div>
        </section>

        <section className="relative py-20">
          <div className="mx-auto max-w-5xl px-8 max-sm:px-5">
            <div className="overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-amber-500/10 via-transparent to-sky-500/10 p-12 max-sm:p-8">
              <div className="flex flex-row items-center justify-between gap-6 max-sm:flex-col max-sm:items-start">
                <div>
                  <p className="text-sm font-medium text-amber-200/90">마감 임박 이벤트</p>
                  <p className="text-3xl font-bold text-white max-sm:text-2xl mt-2">
                    조기 참여자 전원 <span className="text-amber-300">10% 추가 혜택</span>
                  </p>
                  <p className="mt-2 text-sm text-zinc-400">
                    데모용 문구입니다. 실제 혜택·약관은 서비스 정책에 맞게 교체하세요.
                  </p>
                </div>
                <button
                  type="button"
                  className="w-auto shrink-0 rounded-xl bg-white px-8 py-4 text-sm font-semibold text-stone-900 shadow-xl transition hover:bg-zinc-100 max-sm:w-full"
                >
                  혜택 받기
                </button>
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer className="relative border-t border-white/5 py-8 text-center text-xs text-zinc-600">
        <p>쇼케이스 데모 페이지 · 실제 캠페인/상품과 무관합니다.</p>
        <p className="mt-1 font-mono text-[10px] text-zinc-700">/demos/landing-campaign-sample</p>
      </footer>
    </div>
  );
}