注意事項、同意事項

Author: cssho

src/components/attention.astro

@@ -0,0 +1,24 @@
+---
+import SubContentSection from "./sub-content-section.astro";
+const lines = [
+  "登壇の内容やタイムスケジュールは変更となる場合がございます。",
+  "当日は写真・動画を撮影し、後にイベントレポート等、メディアで公開させて頂く事がございます。",
+  "採用・営業等の目的での参加は禁止致します。",
+  "体調不良の方は参加をご遠慮ください。",
+  "本イベントは、技術コミュニティのイベントです。技術交流を目的としない参加はお断りいたします。",
+  "運営の指示には従っていただきます。",
+  "プレスとしての参加は、事前に連絡いただかない限りお断りしております。",
+  "入場は15時以降はできません。15時〜16時半以降に入場を希望される場合には、Discordの運営連絡チャンネル #conf-2024-staff にて、運営に前日までに連絡し、かつ、当日到着時に #conf-2024-staff にて@ConfOrganizerに連絡が必要です。16時30分以降の入場はできません（お断りいたします）。",
+  "名札は常に見える位置に掲示をお願いします。",
+  "行動規範が守られていないと運営の判断が判断する場合、退場をお願いすることがあります。これに従わない場合、警察に連絡させていただきます。",
+  "本イベントは、年1回行っている記念カンファレンスです。オフライン会場は入場可能な参加者が限られております。そのため、運営としてはVS Codeのイベントに高い期待値を持っている方を優先したいと考えております。そのため、複数のイベントに多く申し込まれたていたり、他のイベントへ多くのキャンセルされている方は、本イベントへの期待値があまり高くないとも考えられるため、運営の都合で申し訳ないですが、オフライン参加をキャンセルさせていただいた上で、オンラインへの参加への切り替えをお願いすることがあります。",
+];
+---
+
+<SubContentSection title="注意事項" id="attention">
+  <div class="max-w-6xl">
+    <ul class="relative list-disc gap-4 text-sm">
+      {lines.map((line) => <li>{line}</li>)}
+    </ul>
+  </div>
+</SubContentSection>

src/components/concent.astro

@@ -0,0 +1,21 @@
+---
+import SubContentSection from "./sub-content-section.astro";
+---
+
+<SubContentSection title="同意事項" id="concent">
+    <div class="max-w-6xl">
+        <ul class="relative list-disc gap-4 text-sm">
+            <li>
+                アンケート結果はスポンサー様に集計結果として提供いたします。
+            </li>
+            <li>
+                本イベントで発生したトラブルなどには運営は一歳関与いたしません。
+            </li>
+            <li>
+                <a href="javascript:window.contributorCovenant.showModal();" class="text-secondary"
+                    >行動規範</a
+                >を読んで同意ください。
+            </li>
+        </ul>
+    </div>
+</SubContentSection>

src/components/sub-content-section.astro

@@ -0,0 +1,26 @@
+---
+export interface Props {
+  id: string;
+  title: string;
+}
+
+const { title, id } = Astro.props;
+---
+
+<section
+  id={id}
+  class="flex scroll-mt-24 flex-col items-center gap-2 space-y-4"
+>
+  <div class="flex flex-col items-center gap-4">
+    <slot name="eyebrow" />
+    <h2
+      class="text-center font-extrabold tracking-tight text-3xl"
+    >
+      {title}
+    </h2>
+  </div>
+  <p class="max-w-4xl text-center font-extrabold text-2xl">
+    <slot name="lead" />
+  </p>
+  <slot />
+</section>

src/components/timetable-item.astro

@@ -67,7 +67,10 @@ const { item } = Astro.props;
     item.suponsors &&
       (item as SuponsorSession).suponsors.map((suponsor) => (
         <div class="m-2 ml-14 rounded border border-slate-500 bg-default p-4 shadow xl:ml-44">
-          <a class="font-bold" href={"#suponsor-" + suponsor.suponsorId}>
+          <a
+            class="font-bold text-secondary"
+            href={"#suponsor-" + suponsor.suponsorId}
+          >
             {suponsor.speaker.name}
           </a>
         </div>

src/pages/index.astro

@@ -10,6 +10,8 @@ import Timetable from "~/components/timetable.astro";
 import "~/styles/index.css";
 import Suponsor from "~/components/suponsor.astro";
 import Supporter from "~/components/supporter.astro"
+import Attention from "~/components/attention.astro";
+import Concent from "~/components/concent.astro";
 
 
 const { generator, site } = Astro;
@@ -83,6 +85,8 @@ const socialImageUrl = new URL(
       <Suponsor />
       <Supporter />
       <Staff />
+      <Attention />
+      <Concent />
     </div>
     <Footer />
   </body>