feat: add opass promotion to agenda page

Author: Link1515

public/img/logo/app-store.png

@@ -33,6 +33,31 @@ const sessions = schedule.sessions.filter(session => session.start.startsWith(da
 
   <Desktop title={title} date={date} />
   <Mobile title={title} date={date} />
+
+  <div class="container mt-24 mb-16">
+    <div class="rounded-3xl border-2 border-[#58A83F] bg-[#F6FFF3] p-6 text-[#306D13] md:p-12">
+      <h3 class="mb-7">{t('agenda.dont_miss')}</h3>
+      <p class="mb-9">{t('agenda.opass_info')}</p>
+      <div class="flex flex-col items-start gap-4 lg:flex-row">
+        <div class="flex items-center gap-4">
+          <a href="https://play.google.com/store/apps/details?id=app.opass.ccip" target="_blank">
+            <img class="h-12 sm:h-16" src={import.meta.env.BASE_URL + 'img/logo/google-play.png'} alt="google play" />
+          </a>
+          <a href="https://apps.apple.com/us/app/opass-app/id1436417025" target="_blank">
+            <img class="h-12 sm:h-16" src={import.meta.env.BASE_URL + 'img/logo/app-store.png'} alt="app store" />
+          </a>
+        </div>
+
+        <a href="https://opass.app/open/?event_id=SITCON_2024" class="flex h-16 items-center gap-8 rounded-lg bg-[#58a83f] px-4 transition-colors hover:bg-[#4F9739] lg:ml-auto">
+          <div>
+            <span class="block text-white">{t('agenda.has_installed_opass')}</span>
+            <span class="block text-sm text-[#CFF0C5]">{t('agenda.open_in_app')}</span>
+          </div>
+          <Icon name="mdi:external-link" width="28" color="white" />
+        </a>
+      </div>
+    </div>
+  </div>
 </Layout>
 
 <div id="sessionsJson" data-json={JSON.stringify(sessions)}></div>

public/img/logo/google-play.png

@@ -31,7 +31,11 @@
     "main_live": "Live",
     "qa": "Q&A",
     "note": "Collab Notes",
-    "search_keyword": "Search agendas"
+    "search_keyword": "Search agendas",
+    "dont_miss": "Don't want to miss the agenda?",
+    "opass_info": "The conference offers the OPass app (iOS / Android), where you can plan the sessions you want to attend ahead of time and receive notifications as they're about to start.",
+    "has_installed_opass": "Installed OPass?",
+    "open_in_app": "Open it in the app ~"
   },
   "visit": {
     "info": {

src/components/agenda/Agenda.astro

@@ -31,7 +31,11 @@
     "main_live": "議程直播",
     "qa": "線上提問",
     "note": "共同筆記",
-    "search_keyword": "以關鍵字搜尋議程"
+    "search_keyword": "以關鍵字搜尋議程",
+    "dont_miss": "不想錯過議程嗎？",
+    "opass_info": "大會提供 OPass App (iOS / Android)，可預先排程想去的議程，亦會在時間快到時提供通知。",
+    "has_installed_opass": "已經安裝 OPass ?",
+    "open_in_app": "在 App 內開啟~"
   },
   "visit": {
     "info": {