feat: Cardコンポーネントを使用する

Author: staticWagomU

2025/src/components/KeynoteSpeakers.astro

@@ -1,5 +1,6 @@
 ---
 import { Users } from "@lucide/astro";
+import Card from "./Card.astro";
 ---
 
 <section
@@ -13,9 +14,7 @@ import { Users } from "@lucide/astro";
       </h2>
       <div class="mx-auto h-1 w-16 bg-emerald-500"></div>
     </div>
-    <div
-      class="mx-auto max-w-2xl rounded-lg border border-emerald-100 bg-card p-8 text-center"
-    >
+    <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">
@@ -26,6 +25,6 @@ import { Users } from "@lucide/astro";
       >
         基調講演者は近日公開予定です。お楽しみに！
       </p>
-    </div>
+    </Card>
   </div>
 </section>

2025/src/components/Schedule.astro

@@ -1,4 +1,5 @@
 ---
+import Card from "./Card.astro";
 import { CalendarClock } from "@lucide/astro";
 ---
 
@@ -10,9 +11,7 @@ import { CalendarClock } from "@lucide/astro";
       </h2>
       <div class="mx-auto h-1 w-16 bg-emerald-500"></div>
     </div>
-    <div
-      class="mx-auto max-w-2xl border border-emerald-100 bg-card p-8 text-center text-card-foreground shadow-sm"
-    >
+    <Card class="mx-auto max-w-2xl p-8">
       <CalendarClock
         class="mx-auto mb-4 h-12 w-12 text-emerald-600 md:h-16 md:w-16"
       />
@@ -24,6 +23,6 @@ import { CalendarClock } from "@lucide/astro";
       >
         カンファレンスの詳細なスケジュールは近日公開されます
       </p>
-    </div>
+    </Card>
   </div>
 </section>

2025/src/components/Sponsors/index.astro

@@ -1,4 +1,5 @@
 ---
+import Card from "../Card.astro";
 import {
   Heart,
   Calendar,
@@ -19,9 +20,7 @@ import {
     </div>
 
     <div class="mx-auto mb-12 max-w-4xl">
-      <div
-        class="mb-8 rounded-lg border border-emerald-100 bg-card text-card-foreground shadow-sm"
-      >
+      <Card class="mb-8">
         <div class="p-6 md:p-8">
           <div class="mb-6">
             <h3
@@ -105,7 +104,7 @@ import {
             </p>
           </div>
         </div>
-      </div>
+      </Card>
     </div>
   </div>
 </section>

2025/src/components/Staff/StaffCard.astro

@@ -1,4 +1,5 @@
 ---
+import Card from "../Card.astro";
 import GithubIcon from "@/assets/github-icon.png?url";
 import XIcon from "@/assets/x-icon.png?url";
 import BlueSkyIcon from "@/assets/bluesky.jpg?url";
@@ -14,10 +15,7 @@ type Props = {
 const { name, alsoKnownAs, image, github, x, bluesky }: Props = Astro.props;
 ---
 
-<div
-  class="rounded-lg border border-emerald-100 bg-card text-card-foreground shadow-sm transition-shadow hover:shadow-md"
-  data-v0-t="card"
->
+<Card class="transition-shadow hover:shadow-md">
   <div class="grid grid-cols-1 gap-2 p-3">
     <div class="grid place-items-center">
       <span
@@ -85,4 +83,4 @@ const { name, alsoKnownAs, image, github, x, bluesky }: Props = Astro.props;
       }
     </div>
   </div>
-</div>
+</Card>

2025/src/components/Venue.astro

@@ -1,5 +1,6 @@
 ---
 import VenueMap from "@/components/VenueMap.astro";
+import Card from "./Card.astro";
 import { MapPin, Calendar, Clock } from "@lucide/astro";
 ---
 
@@ -10,9 +11,7 @@ import { MapPin, Calendar, Clock } from "@lucide/astro";
       <div class="mx-auto h-1 w-16 bg-emerald-500"></div>
     </div>
     <div class="grid items-center gap-6 md:grid-cols-2">
-      <div
-        class="rounded-lg border border-emerald-100 bg-card text-card-foreground shadow-sm"
-      >
+      <Card>
         <div class="p-4">
           <h3 class="mb-3 text-lg font-semibold md:text-xl">
             アキバプラザ・アキバホール
@@ -32,7 +31,7 @@ import { MapPin, Calendar, Clock } from "@lucide/astro";
             </div>
           </div>
         </div>
-      </div>
+      </Card>
       <div class="h-64 overflow-hidden rounded-lg bg-gray-200 md:h-80">
         <VenueMap />
       </div>