feat(card-grid): enable interactive class for card grid and enhance hover effects

Author: ArhanAnsari

src/lib/components/cardGrid.svelte

@@ -3,10 +3,11 @@
 
     export let overflow = true;
     export let hideFooter = false;
+    export let interactive = false;
     export let gap: 'none' | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' = 'l';
 </script>
 
-<div class="card-grid-wrapper">
+<div class="card-grid-wrapper" class:interactive>
     <Card.Base>
         <Layout.Stack gap="xl" justifyContent="space-around">
             <div class="card-grid-content">
@@ -40,19 +41,20 @@
 </div>
 
 <style>
-    .card-grid-wrapper :global(.card) {
+    .card-grid-wrapper.interactive :global(.card) {
         transition:
             transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
             box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+        cursor: pointer;
     }
 
-    .card-grid-wrapper :global(.card:hover) {
+    .card-grid-wrapper.interactive :global(.card:hover) {
         will-change: transform, box-shadow;
         transform: translateY(-2px);
         box-shadow: var(--shadow-md, 0 8px 20px rgba(0, 0, 0, 0.12));
     }
 
-    .card-grid-wrapper :global(.card:active) {
+    .card-grid-wrapper.interactive :global(.card:active) {
         transform: translateY(0);
         box-shadow: var(--shadow-sm, 0 4px 10px rgba(0, 0, 0, 0.08));
     }