feat: マスコット（スートゲ）機能を追加

src/components/Footer.astro

@@ -3,6 +3,7 @@ const currentYear = new Date().getFullYear();
 
 const footerLinks = [
   { text: "CloudNative Daysの歩み", href: "/history" },
+  { text: "マスコット紹介", href: "/mascots" },
   { text: "行動規範", href: "/CoC" },
   { text: "プライバシーポリシー", href: "/privacy" },
 ];

src/components/Mascot.astro

@@ -0,0 +1,32 @@
+---
+export interface Props {
+  character: 'suu' | 'toge';
+  variant?: '1' | '2' | 'face' | 'face-2';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const { character, variant = '1', size = 'md', className = '' } = Astro.props;
+
+const sizeClasses = {
+  sm: 'w-16 h-16',
+  md: 'w-24 h-24 md:w-32 md:h-32',
+  lg: 'w-32 h-32 md:w-48 md:h-48'
+};
+
+const imagePath = variant === 'face'
+  ? `/images/mascots/${character}-face.png`
+  : variant === 'face-2'
+  ? `/images/mascots/${character}-face-2.png`
+  : `/images/mascots/${character}-${variant}.png`;
+
+const altText = character === 'suu' ? 'スーちゃん' : 'トゲくん';
+---
+
+<div class={`mascot transition-transform duration-300 hover:scale-105 ${sizeClasses[size]} ${className}`}>
+  <img
+    src={imagePath}
+    alt={altText}
+    class="w-full h-full object-contain"
+  />
+</div>

src/components/MascotPeek.astro

@@ -0,0 +1,52 @@
+---
+export interface Props {
+  character: 'suu' | 'toge';
+  position?: 'left' | 'right';
+  className?: string;
+}
+
+const { character, position = 'right', className = '' } = Astro.props;
+
+const imagePath = `/images/mascots/${character}-face.png`;
+const altText = character === 'suu' ? 'スーちゃん' : 'トゲくん';
+
+const positionClasses = position === 'right'
+  ? 'right-0 translate-x-3/4 hover:translate-x-1/4'
+  : 'left-0 -translate-x-3/4 hover:-translate-x-1/4';
+---
+
+<div
+  class={`mascot-peek fixed bottom-20 z-40 cursor-pointer transition-transform duration-500 ease-out ${positionClasses} ${className}`}
+  title={`${altText}だよ！`}
+>
+  <div class="w-16 h-16 md:w-20 md:h-20">
+    <img
+      src={imagePath}
+      alt={altText}
+      class="w-full h-full object-contain drop-shadow-lg"
+    />
+  </div>
+</div>
+
+<style>
+  .mascot-peek:hover {
+    animation: peek-bounce 0.3s ease-out;
+  }
+
+  @keyframes peek-bounce {
+    0%, 100% {
+      transform: translateX(var(--tx)) translateY(0);
+    }
+    50% {
+      transform: translateX(var(--tx)) translateY(-8px);
+    }
+  }
+
+  .mascot-peek[class*="right-0"]:hover {
+    --tx: 25%;
+  }
+
+  .mascot-peek[class*="left-0"]:hover {
+    --tx: -25%;
+  }
+</style>

src/pages/404.astro

@@ -0,0 +1,50 @@
+---
+import { Icon } from "astro-icon/components";
+import Layout from '../layouts/Layout.astro'
+import MascotPeek from '../components/MascotPeek.astro'
+---
+
+<Layout
+  title="404 - Page Not Found | CloudNative Days"
+  description="お探しのページが見つかりませんでした"
+  ogImage="/images/hero.png"
+>
+  <main class="flex flex-col items-center justify-center min-h-[70vh] px-4 pt-20 md:pt-8 text-center">
+    <h1 class="text-6xl md:text-8xl font-bold text-black mb-4">
+      404
+    </h1>
+
+    <div class="flex items-center justify-center gap-12 md:gap-20 mb-6">
+      <div class="transform -rotate-6">
+        <div class="w-48 h-48 md:w-72 md:h-72 lg:w-80 lg:h-80">
+          <img src="/images/mascots/suu-face-2.png" alt="スーちゃん" class="w-full h-full object-contain" />
+        </div>
+      </div>
+      <div class="transform rotate-6">
+        <div class="w-48 h-48 md:w-72 md:h-72 lg:w-80 lg:h-80">
+          <img src="/images/mascots/toge-face-2.png" alt="トゲくん" class="w-full h-full object-contain" />
+        </div>
+      </div>
+    </div>
+
+    <p class="text-xl md:text-2xl text-gray-700 mb-2">
+      Page Not Found
+    </p>
+
+    <p class="text-gray-600 mb-8 max-w-md">
+      お探しのページは見つかりませんでした。<br />
+      URLが正しいかご確認ください。
+    </p>
+
+    <a
+      href="/"
+      class="inline-flex items-center gap-2 text-gray-600 hover:text-indigo-600 transition-colors"
+    >
+      <Icon name="tabler:arrow-left" class="w-5 h-5" />
+      <span>トップページに戻る</span>
+    </a>
+  </main>
+
+  <MascotPeek character="suu" position="left" />
+  <MascotPeek character="toge" position="right" />
+</Layout>

src/pages/index.astro

@@ -8,6 +8,7 @@ import PostFeaturedImage from '../components/PostFeaturedImage.astro'
 import PostTitle from '../components/PostTitle.astro'
 import { Conferences } from '../data/data'
 import Layout from '../layouts/Layout.astro'
+import MascotPeek from '../components/MascotPeek.astro'
 import { getPostLink } from '../lib/blog-helpers'
 import { getPosts } from '../lib/notion/client'
 import type { Conference } from '../types/conference'
@@ -169,6 +170,14 @@ const latestEvents = Conferences?.filter(
         </div>
       </div>
     </section>
+
+    <!-- マスコットのひょっこり -->
+    <a href="/mascots">
+      <MascotPeek character="suu" position="left" />
+    </a>
+    <a href="/mascots">
+      <MascotPeek character="toge" position="right" />
+    </a>
   </main>
 </Layout>
 

src/pages/mascots.astro

@@ -0,0 +1,97 @@
+---
+import { Icon } from "astro-icon/components";
+import Layout from '../layouts/Layout.astro'
+import Mascot from '../components/Mascot.astro'
+---
+
+<Layout
+  title="マスコット紹介 | CloudNative Days"
+  description="CloudNative Daysの公式マスコットキャラクター「スーちゃん」と「トゲくん」をご紹介します"
+  ogImage="/images/mascots/suu-face.png"
+>
+  <main class="pt-24 pb-16 px-4">
+    <div class="max-w-4xl mx-auto">
+      {/* ナビゲーション */}
+      <nav class="mb-8">
+        <a
+          href="/"
+          class="inline-flex items-center gap-2 text-gray-600 hover:text-indigo-600 transition-colors"
+        >
+          <Icon name="tabler:arrow-left" class="w-5 h-5" />
+          <span>トップページに戻る</span>
+        </a>
+      </nav>
+
+      <h1 class="text-3xl md:text-4xl font-bold text-center text-black mb-4">
+        マスコット紹介
+      </h1>
+      <p class="text-center text-gray-700 mb-12">
+        CloudNative Days の公式マスコットキャラクターをご紹介します
+      </p>
+
+      <div class="grid md:grid-cols-2 gap-8 md:gap-12">
+        <!-- スーちゃん -->
+        <div class="bg-white rounded-2xl shadow-lg p-6 md:p-8">
+          <div class="flex justify-center mb-6">
+            <Mascot character="suu" variant="1" size="lg" />
+          </div>
+          <h2 class="text-2xl font-bold text-center text-gray-800 mb-2">
+            スーちゃん
+          </h2>
+          <p class="text-center text-sm text-gray-500 mb-4">
+            可愛さの化身
+          </p>
+          <div class="space-y-3 text-gray-600">
+            <p>
+              日本最大級のクラウドネイティブ・テックカンファレンスであるCloudNative Daysのあたりでウロウロしている猫。
+            </p>
+            <p>
+              模様がワイルドに移動するけど本人はあまり気にしてない。
+            </p>
+          </div>
+          <div class="flex justify-center gap-4 mt-6">
+            <Mascot character="suu" variant="face" size="sm" />
+            <Mascot character="suu" variant="face-2" size="sm" />
+          </div>
+        </div>
+
+        <!-- トゲくん -->
+        <div class="bg-white rounded-2xl shadow-lg p-6 md:p-8">
+          <div class="flex justify-center mb-6">
+            <Mascot character="toge" variant="1" size="lg" />
+          </div>
+          <h2 class="text-2xl font-bold text-center text-gray-800 mb-2">
+            トゲくん
+          </h2>
+          <p class="text-center text-sm text-gray-500 mb-4">
+            癒やしの権化
+          </p>
+          <div class="space-y-3 text-gray-600">
+            <p>
+              日本最大級のクラウドネイティブ・テックカンファレンスであるCloudNative Daysのあたりでウロウロしている猫。
+            </p>
+            <p>
+              しっぽがScaleしちゃったけど本人はあまり気にしてない。
+            </p>
+          </div>
+          <div class="flex justify-center gap-4 mt-6">
+            <Mascot character="toge" variant="face" size="sm" />
+            <Mascot character="toge" variant="face-2" size="sm" />
+          </div>
+        </div>
+      </div>
+
+      <!-- 一緒の画像 -->
+      <div class="mt-12 text-center">
+        <div class="flex items-end justify-center gap-4 md:gap-8">
+          <Mascot character="suu" variant="2" size="lg" />
+          <Mascot character="toge" variant="2" size="lg" />
+        </div>
+        <p class="text-gray-600 mt-4 text-sm">
+          二匹合わせて「スートゲ」と呼ばれています
+        </p>
+      </div>
+
+    </div>
+  </main>
+</Layout>