feat: キーノートスピーカーを発表

Author: staticWagomU

2025/src/components/KeynoteSpeakers.astro

@@ -1,7 +1,9 @@
 ---
-import { Users } from "@lucide/astro";
 import Card from "./Card.astro";
 import Heading from "./Heading.astro";
+import { User, MessageSquare } from "@lucide/astro";
+
+const keynoteSpeaker = "だれだろう";
 ---
 
 <section
@@ -10,17 +12,48 @@ import Heading from "./Heading.astro";
 >
   <div class="container mx-auto px-4">
     <Heading> 基調講演 </Heading>
-    <Card class="mx-auto max-w-2xl p-8 text-center">
-      <Users class="mx-auto mb-4 h-12 w-12 text-emerald-600 md:h-16 md:w-16" />
-
-      <h3 class="mx-auto text-center text-lg font-semibold md:text-xl">
-        基調講演者は近日公開
-      </h3>
-      <p
-        class="mx-auto mt-4 max-w-3xl text-center text-base text-gray-700 md:text-lg"
-      >
-        基調講演者は近日公開予定です。お楽しみに！
-      </p>
+    <Card class="mx-auto max-w-3xl 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="https://github.com/ujihisa.png"
+            /></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">近日公開</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">
+              山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
+            </p>
+          </div>
+        </div>
+      </div>
     </Card>
   </div>
+
+  <div class="mt-6 text-center">
+    <p class="text-sm text-gray-600 md:text-base">
+      基調講演のタイトルは近日公開予定です。続報をお待ちください！
+    </p>
+  </div>
 </section>