✨feat: update cancel page on kanto event

app/kanto_event/page.tsx

@@ -12,6 +12,7 @@ import {
   PRIVACY_POLICY,
   Q_AND_A,
 } from "@/app/lib/constant"
+import { InformationCircleIcon } from "@heroicons/react/24/outline"
 import { ArrowRightIcon } from "@heroicons/react/24/solid"
 import type { Metadata } from "next"
 import Image from "next/image"
@@ -113,13 +114,23 @@ export default function KantoEvent(): JSX.Element {
     <>
       <Heading menus={[KANTO_EVENT]} />
       <Image
-        src={"/202410_kanto.avif"}
+        src={"/202410_kanto_cancel.avif"}
         width={540}
         height={383}
         alt="こどもテックキャラバン-関東イベント"
         priority={true}
         className="w-full"
       />
+      <div className="bg-sky-300 flex gap-1 items-center mx-auto p-3 rounded-2xl shadow-lg text-base text-center w-max">
+        <InformationCircleIcon className="size-8" />
+        <p>
+          現在、
+          <span className="decoration-4 decoration-orange-400 font-bold underline">
+            キャンセル待ち
+          </span>
+          受付中です。
+        </p>
+      </div>
       <Schedules schedules={schedules} />
       <section className="mx-auto p-2 text-center w-max">
         <p className="font-bold text-sm md:text-xl">

app/kanto_event/register.tsx

@@ -26,18 +26,32 @@ function Requirement({
   return (
     <section id={guideline.anchorLink} className="px-2 space-y-4 text-center">
       <h2 className="font-bold font-zenMaruGothic text-3xl">応募要項</h2>
-      <div className="bg-sky-300 flex gap-1 items-center mx-auto p-3 rounded-2xl shadow-lg text-base w-fit">
-        <InformationCircleIcon className="size-10" />
-        <p>
-          <span className="decoration-4 decoration-orange-400 font-bold underline">
-            募集は先着順
-          </span>
-          になります。
-          <br />
-          定員に達し次第、
-          <br className="sm:hidden" />
-          募集を終了します。
-        </p>
+      <div className="bg-sky-300 flex gap-1 items-center mx-auto p-3 rounded-2xl shadow-lg text-base text-center w-max">
+        <InformationCircleIcon className="size-8" />
+        <div>
+          <p>
+            現在、
+            <span className="decoration-4 decoration-orange-400 font-bold underline">
+              キャンセル待ち
+            </span>
+            受付中です。
+          </p>
+          <p>
+            キャンセルが発生した場合、
+            <br className="sm:hidden" />
+            参加が可能となります。
+          </p>
+          <p>
+            状況により受付を早めに
+            <br className="sm:hidden" />
+            終了する場合がございます。
+          </p>
+          <p>
+            ご確認の上、ご登録を
+            <br className="sm:hidden" />
+            お願いいたします。
+          </p>
+        </div>
       </div>
       <div className="border-2 border-sky-400 mx-auto py-2 space-y-2 text-center text-sm w-80 sm:hidden">
         <div className="border-1 border-b pb-2">
@@ -203,7 +217,7 @@ function Procedure({
           <p>
             トーク画面メニューの
             <br />
-            <b>「参加申込はこちら」</b>をタップ
+            <b>「キャンセル待ちの登録はこちら」</b>をタップ
           </p>
         </Step>
         <Step index={3}>

app/page.tsx

@@ -16,7 +16,7 @@ export default function Home(): JSX.Element {
         className="block scale-down-up sticky top-0 w-full z-20 sm:inline sm:static"
       >
         <Image
-          src="/202410_kanto_banner_start.avif"
+          src="/202410_kanto_banner_cancel.avif"
           width={540}
           height={162}
           alt="こどもテックキャラバン-関東イベントバナー"