added card component

Co-authored-by: Copilot <copilot@github.com>

resources/views/components/card.blade.php

@@ -0,0 +1,10 @@
+<div class="card bg-surface rounded border border-primary shadow">
+    @if(!empty($header))
+    <div class="card-header p-4 border-b border-primary">
+        <h3 class="font-semibold">{{ $header }}</h3>
+    </div>
+    @endif
+    <div class="card-body p-4">
+        {{ $slot }}
+    </div>
+</div>

resources/views/storybook/index.blade.php

@@ -56,11 +56,16 @@
         <!-- CARDS -->
         <section class="space-y-4">
             <h2 class="text-xl font-semibold">Cards</h2>
+            <h3 class="text-l font-semibold">With Header</h3>
 
-            <div class="bg-surface p-6 rounded shadow">
-                <h3 class="font-semibold">Card title</h3>
-                <p class="text-text-muted">This is a simple card component.</p>
-            </div>
+            <x-card header="Card Header">
+                <p class="text-text-muted">This is a card component with header.</p>
+            </x-card>
+
+            <h3 class="text-l font-semibold">Without Header</h3>
+            <x-card>
+                <p class="text-text-muted">This is a card component without header.</p>
+            </x-card>
         </section>
 
         <!-- TYPOGRAPHY -->