--

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-10 bg-white dark:bg-BgDarkSecond p-10">
+  <div class="flex flex-col gap-10 bg-whitep-10">
     <div
       class="flex items-center justify-center gap-20 relative w-[1200px] mx-auto"
     >
@@ -116,7 +116,7 @@
     </MlSlider>
 
     <!-- MlSliderPoint: Similar to MlSlider but intended for full-page content viewing. Customize its layout and appearance using the :pt prop and slots. -->
-    <div class="flex w-full justify-center text-black dark:text-white">
+    <div class="flex w-full justify-center text-black">
       <MlSliderPoint
         :direction="direction"
         :pt="{
@@ -140,13 +140,13 @@
             <div class="flex flex-col gap-4 mb-4">
               <h1 class="font-bold text-2xl md:text-[32px]">YourGold.cz</h1>
               <div class="flex items-center gap-2 font-ibm">
-                <p class="bg-accent2 dark:bg-accent1 px-3 py-1 rounded-md">
+                <p class="bg-green-300 px-3 py-1 rounded-md">
                   Tag one
                 </p>
-                <p class="bg-accent2 dark:bg-accent1 px-3 py-1 rounded-md">
+                <p class="bg-green-300 px-3 py-1 rounded-md">
                   Tag two
                 </p>
-                <p class="bg-accent2 dark:bg-accent1 px-3 py-1 rounded-md">
+                <p class="bg-green-300 px-3 py-1 rounded-md">
                   Tag three
                 </p>
               </div>

package.json

@@ -3,7 +3,7 @@
   "version": "1.2.6",
   "private": false,
   "type": "module",
-  "main": "index.js",
+  "main": "main.vue",
   "scripts": {
     "build": "nuxt build",
     "prepack": "nuxt build",

src/components/Ml/SliderPoint/MlSliderPoint.vue

@@ -19,17 +19,15 @@
         <slot />
       </swiper-slide>
     </swiper>
-    <div
+    <div :class="counterClasses">
-      :class="counterClasses"
-    >
       <div
         v-for="(slide, index) in 4"
         :key="index"
         :class="[
           'bg-black h-[3px] transition-all duration-500',
           index === currentSlideNumber
-            ? 'py-2 w-[16px] rounded-3xl'
+            ? 'bg-black py-2 w-[16px] rounded-3xl'
-            : 'w-[25px] rounded-sm md:w-[24px]',
+            : 'h-[3px] bg-black w-[25px] rounded-sm md:w-[24px]',
         ]"
         @click="goToSlide(index), stopAutoSlide()"
       ></div>
@@ -95,7 +93,9 @@ const props = withDefaults(
 const classes = ref({
   root: { class: `` },
   slider: { class: `` },
-  counter: { class: `mx-auto px-6 container flex justify-between items-center h-10 cursor-pointer` },
+  counter: {
+    class: `mx-auto px-6 container flex justify-between items-center h-10 cursor-pointer`,
+  },
 } as PTAttribs);
 
 const rootClasses = computed(() =>