feat: 基調講演者のカードをコンポーネント化

Author: staticWagomU

2025/src/components/KeynoteSpeakers.astro

@@ -0,0 +1,58 @@
+---
+import Card from "../Card.astro";
+import { User, MessageSquare } from "@lucide/astro";
+
+type Props = {
+  keynoteSpeaker: string;
+  imageUrl: string;
+  title: string;
+  profile: string;
+};
+
+const {
+  keynoteSpeaker = "だれだろう",
+  imageUrl,
+  title,
+  profile,
+}: Props = Astro.props;
+---
+
+<Card class="max-w-2xl p-8 text-center">
+  <div class="flex flex-col items-center gap-6 md:flex-row md:items-start">
+    <div class="flex-shrink-0">
+      <span
+        class="relative flex h-24 w-24 shrink-0 overflow-hidden rounded-full md:h-32 md:w-32"
+      >
+        <img
+          class="aspect-square h-full w-full"
+          alt={keynoteSpeaker}
+          src={imageUrl}
+        /></span
+      >
+    </div>
+    <div class="flex-1 text-center md:text-left">
+      <div class="mb-3">
+        <h3 class="mb-2 text-2xl font-bold text-gray-900 md:text-3xl">
+          {keynoteSpeaker}
+        </h3>
+      </div>
+      <div class="mb-4">
+        <div class="mb-2 flex items-center justify-center md:justify-start">
+          <MessageSquare class="mr-2 h-5 w-5 text-emerald-600" />
+          <span class="font-semibold text-gray-800">講演タイトル</span>
+        </div>
+        <p class="text-lg text-gray-600 italic">{title}</p>
+      </div>
+      <div>
+        <div class="mb-3 flex items-center justify-center md:justify-start">
+          <User class="mr-2 h-5 w-5 text-emerald-600" />
+          <span class="font-semibold text-gray-800">プロフィール</span>
+        </div>
+        <p class="leading-relaxed text-gray-700">
+          山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
+          {profile}
+        </p>
+      </div>
+    </div>
+  </div>
+</Card>

2025/src/components/KeynoteSpeakers/KeynoteSpeaker.astro

@@ -0,0 +1,27 @@
+---
+import Heading from "../Heading.astro";
+import KeynoteSpeaker from "./KeynoteSpeaker.astro";
+---
+
+<section
+  id="keynote"
+  class="bg-gradient-to-b from-white to-emerald-50 py-10 md:py-16"
+>
+  <div class="container mx-auto px-4">
+    <Heading> 基調講演 </Heading>
+  </div>
+  <div class="flex flex-col items-center justify-center gap-4 px-4 lg:flex-row md:gap-12">
+  <KeynoteSpeaker
+    keynoteSpeaker="だれだろう"
+    imageUrl="https://avatars.githubusercontent.com/u/11504?v=4"
+    title="基調講演のタイトル"
+    profile="山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。"
+  />
+  <KeynoteSpeaker
+    keynoteSpeaker="だれだろう"
+    imageUrl="https://avatars.githubusercontent.com/u/11504?v=4"
+    title="基調講演のタイトル"
+    profile="山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。"
+  />
+  </div>
+</section>

2025/src/components/KeynoteSpeakers/index.astro

@@ -1,6 +1,6 @@
 ---
 import AboutVimConf from "../../components/AboutVimConf.astro";
-import KeynoteSpeakers from "../../components/KeynoteSpeakers.astro";
+import KeynoteSpeakers from "../../components/KeynoteSpeakers/index.astro";
 import Schedule from "../../components/Schedule.astro";
 import Sponsors from "../../components/Sponsors/index.astro";
 import Staff from "../../components/Staff/index.astro";