feature: Migrate PatternPreviewPlaceholder to shadcn Card

Migrated PatternPreviewPlaceholder component to use shadcn Card, CardHeader, and CardTitle components for consistent styling with other card-based components.

Changes:
- Replaced outer div with shadcn Card component
- Migrated header to use CardHeader and CardTitle
- Wrapped content in CardContent
- Applied consistent Card padding (p-0 gap-0)
- Maintained header border separator styling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/PatternPreviewPlaceholder.tsx

@@ -1,9 +1,12 @@
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+
 export function PatternPreviewPlaceholder() {
   return (
-    <div className="lg:h-full bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md animate-fadeIn flex flex-col">
+    <Card className="p-0 gap-0 lg:h-full animate-fadeIn flex flex-col">
-      <h2 className="text-base lg:text-lg font-semibold mb-4 pb-2 border-b-2 border-gray-300 dark:border-gray-600 dark:text-white flex-shrink-0">
+      <CardHeader className="p-6 pb-4 border-b-2 border-gray-300 dark:border-gray-600">
-        Pattern Preview
+        <CardTitle className="text-base lg:text-lg">Pattern Preview</CardTitle>
-      </h2>
+      </CardHeader>
+      <CardContent className="p-6 flex-1 flex flex-col">
         <div className="h-[400px] sm:h-[500px] lg:flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 relative overflow-hidden">
         {/* Decorative background pattern */}
         <div className="absolute inset-0 opacity-5 dark:opacity-10">
@@ -66,6 +69,7 @@ export function PatternPreviewPlaceholder() {
           </div>
         </div>
       </div>
-    </div>
+      </CardContent>
+    </Card>
   );
 }