Unification

src/components/Card.svelte

@@ -22,6 +22,7 @@
     import {onMount} from "svelte";
 
     let cardElement: HTMLDivElement;
+    export let hoverEffect: boolean = true;
 
     function rotateElement(event: MouseEvent) {
         const x = event.clientX;
@@ -47,7 +48,7 @@
     $: classes = twMerge("w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses)
 </script>
 
-<div class={classes} bind:this={cardElement} on:mousemove={rotateElement} on:mouseleave={resetElement}>
+<div class={classes} bind:this={cardElement} on:mousemove={rotateElement} on:mouseleave={resetElement} class:hoverEffect>
     <slot></slot>
 </div>
 
@@ -57,20 +58,16 @@
 
       transition: scale 300ms cubic-bezier(.2, 3, .67, .6);
 
-      &:hover {
-        scale: 105%;
-      }
-
       :global(h1) {
         @apply text-xl font-bold mt-4;
       }
 
-      :global(p) {
-        @apply mt-4;
-      }
-
       :global(svg) {
         @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
       }
     }
+
+    .hoverEffect:hover {
+      scale: 105%;
+    }
 </style>