feat: implement the correct styles to Slider component using TotalizerCard component

src/components/Admin/Slider.svelte

@@ -3,6 +3,7 @@
     import "flickity/css/flickity.css";
     import type Flickity from "flickity";
     import type { Options } from "flickity";
+    import TotalizerCard from "./TotalizerCard.svelte";
 
     let mainCarousel: HTMLDivElement;
     let flickity: Flickity;
@@ -50,12 +51,7 @@
 
     <div bind:this={mainCarousel} class="main-carousel h-full opacity-{isLoaded ? 100 : 0}">
         {#each slides as { title, amount }}
-            <div
-                class="carousel-cell border-variant1 bg-soft-purple mr-6 flex h-full w-[22.5%] flex-col items-start justify-center gap-4 rounded-xl border p-8 shadow-[0px_1px_3px_0px_#0000001A]"
-            >
-                <span class="text-content text-base font-semibold">{title}</span>
-                <span class="text-tertiary text-[40px]">{amount}</span>
-            </div>
+            <TotalizerCard {title} value={amount} />
         {/each}
     </div>
 </div>

src/components/Admin/TotalizerCard.svelte

@@ -7,7 +7,7 @@
         class: classes = "",
     }: {
         title: string;
-        value: string;
+        value: string | number;
         class?: ClassNameValue;
     } = $props();
 </script>