⚡️ Remove spotlight effect to improve performance

src/components/cardSpotlight.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-  let domElement: HTMLElement;
-  let focused = false;
-  let position = { x: 0, y: 0 };
-  let opacity = 0;
-
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!domElement || focused) return;
-
-    const rect = domElement.getBoundingClientRect();
-
-    position = {
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top
-    };
-  };
-
-  const handleFocus = () => {
-    focused = true;
-    opacity = 1;
-  };
-
-  const handleBlur = () => {
-    focused = false;
-    opacity = 0;
-  };
-
-  const handleMouseEnter = () => {
-    opacity = 1;
-  };
-
-  const handleMouseLeave = () => {
-    opacity = 0;
-  };
-</script>
-
-<!--Se quito el aria-hidden="true" para que se pueda leer el contenido del card con el lector de pantalla  -->
-<article
-  bind:this={domElement}
-  on:mousemove={handleMouseMove}
-  on:focus={handleFocus}
-  on:blur={handleBlur}
-  on:mouseenter={handleMouseEnter}
-  on:mouseleave={handleMouseLeave}
-  class="relative flex items-center justify-center overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900"
->
-  <div
-    class="pointer-events-none absolute transform-gpu -inset-px opacity-0 transition duration-300"
-    style={`
-			opacity: ${opacity};
-			background: radial-gradient(600px circle at ${position.x}px ${position.y}px, rgba(97, 97, 97, 0.1), transparent 40%);
-		`}
-  />
-  <slot />
-</article>

src/components/svgCard.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
-  import type { iSVG } from '../types/svg';
+  import type { iSVG } from '@/types/svg';
-  import { toast } from 'svelte-sonner';
 
   // Utils:
   import { cn } from '@/utils/cn';
   import { getSvgContent } from '@/utils/getSvgContent';
 
   // Icons:
-  import { CopyIcon, LinkIcon, ChevronsRight, Baseline, Sparkles } from 'lucide-svelte';
+  import { LinkIcon, ChevronsRight, Baseline, Sparkles } from 'lucide-svelte';
 
   // Components & styles:
-  import CardSpotlight from './cardSpotlight.svelte';
   import DownloadSvg from './downloadSvg.svelte';
   import CopySvg from './copySvg.svelte';
   import { badgeStyles } from '@/ui/styles';
@@ -39,14 +37,18 @@
   // Icon Stroke & Size:
   let iconStroke = 1.8;
   let iconSize = 16;
+
+  // Global Images Styles:
+  const globalImageStyles = 'mb-4 mt-2 h-10 select-none';
 </script>
 
-<CardSpotlight>
+<div
-  <div class="flex flex-col items-center justify-center rounded-md p-4">
+  class="flex flex-col items-center justify-center rounded-md p-4 border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-300/50 dark:hover:bg-neutral-800/20 transition-colors duration-100 group"
+>
   <!-- Image -->
   {#if wordmarkSvg == true}
     <img
-        class="hidden dark:block mb-4 mt-2 h-10 select-none"
+      class={cn('hidden dark:block', globalImageStyles)}
       src={typeof svgInfo.wordmark !== 'string'
         ? svgInfo.wordmark?.dark || ''
         : svgInfo.wordmark || ''}
@@ -55,7 +57,7 @@
       loading="lazy"
     />
     <img
-        class="block dark:hidden mb-4 mt-2 h-10 select-none"
+      class={cn('block dark:hidden', globalImageStyles)}
       src={typeof svgInfo.wordmark !== 'string'
         ? svgInfo.wordmark?.light || ''
         : svgInfo.wordmark || ''}
@@ -65,14 +67,14 @@
     />
   {:else}
     <img
-        class={cn('hidden dark:block mb-4 mt-2 h-10 select-none')}
+      class={cn('hidden dark:block', globalImageStyles)}
       src={typeof svgInfo.route !== 'string' ? svgInfo.route.dark : svgInfo.route}
       alt={svgInfo.title}
       title={svgInfo.title}
       loading="lazy"
     />
     <img
-        class={cn('block dark:hidden mb-4 mt-2 h-10 select-none')}
+      class={cn('block dark:hidden', globalImageStyles)}
       src={typeof svgInfo.route !== 'string' ? svgInfo.route.light : svgInfo.route}
       alt={svgInfo.title}
       title={svgInfo.title}
@@ -168,5 +170,4 @@
       </button>
     {/if}
   </div>
-  </div>
+</div>
-</CardSpotlight>