feat: チケット販売開始のリンクを追加

Author: staticWagomU

2025/src/components/Top.astro

@@ -1,5 +1,6 @@
 ---
 import VimLogo from "./VimLogo.astro";
+import { ExternalLink } from "@lucide/astro";
 ---
 
 <section
@@ -34,15 +35,30 @@ import VimLogo from "./VimLogo.astro";
         </p>
       </div>
     </div>
-    <div class="flex flex-col items-center justify-center gap-3 sm:flex-row">
+    <div
+      class="mb-6 inline-flex items-center rounded-full bg-gradient-to-r from-emerald-500 to-green-500 px-6 py-3 text-white"
+    >
+      <span class="text-sm font-bold md:text-base"
+        >🎉 チケット販売開始！ 🎉</span
+      >
+    </div>
+    <div
+      class="mb-8 flex flex-col items-center justify-center gap-3 sm:flex-row"
+    >
       <button
         class="inline-flex h-10 w-auto items-center justify-center gap-2 rounded-md border border-emerald-600 bg-background px-4 py-2 text-sm font-medium whitespace-nowrap text-emerald-700 ring-offset-background transition-colors hover:bg-emerald-50 hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
         ><a href="#cfp">プロポーザルを提出する</a></button
       >
       <button
-        disabled
-        class="inline-flex h-10 w-auto items-center justify-center gap-2 rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium whitespace-nowrap text-primary-foreground ring-offset-background transition-colors hover:bg-emerald-700 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
-        >参加登録</button
+        class="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-emerald-600 px-4 py-2 text-sm font-medium whitespace-nowrap text-primary-foreground ring-offset-background transition-colors hover:bg-emerald-700 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+        ><a
+          class="flex"
+          href="https://peatix.com/event/4468402/view"
+          target="_blank"
+          rel="noopener"
+          >参加登録
+          <ExternalLink class="ml-2 h-4 w-4" />
+        </a></button
       ><button
         disabled
         class="inline-flex h-10 w-auto items-center justify-center gap-2 rounded-md border border-emerald-600 bg-background px-4 py-2 text-sm font-medium whitespace-nowrap text-emerald-700 ring-offset-background transition-colors hover:bg-emerald-50 hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"