add changes

app.vue

@@ -19,6 +19,7 @@
           },
         }"
       >
+      Let's talk
       </MlButton>
 
       <!-- MlPaginator: Handles item pagination. Customize the appearance and behavior via props. Listens to changes with @update:paginatedItems to manage displayed items. -->
@@ -140,15 +141,9 @@
             <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-green-300 px-3 py-1 rounded-md">
+                <p class="bg-green-300 px-3 py-1 rounded-md">Tag one</p>
-                  Tag one
+                <p class="bg-green-300 px-3 py-1 rounded-md">Tag two</p>
-                </p>
+                <p class="bg-green-300 px-3 py-1 rounded-md">Tag three</p>
-                <p class="bg-green-300 px-3 py-1 rounded-md">
-                  Tag two
-                </p>
-                <p class="bg-green-300 px-3 py-1 rounded-md">
-                  Tag three
-                </p>
               </div>
               <p class="font-ibm text-[16px]">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

components/Ml/Button/MlButton.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRipple } from "#imports";
+// import { useRipple } from "#imports";
 import { computed, ref } from "vue";
 import type { ButtonProps, PTAttribs } from "./types";
 import { twMerge } from "tailwind-merge";

components/Ml/DropDown/MlDropDown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-click-outside="closeDropDown" :class="rootPT">
+  <div :class="rootPT">
     <button
       id="dropdownDefaultButton"
       data-dropdown-toggle="dropdown"
@@ -35,8 +35,7 @@ const PT = {
     class: "",
   },
   dropdown: {
-    class:
+    class: "z-10 absolute bg-white rounded-3xl pointer text-black text-center",
-      "z-10 absolute bg-white rounded-3xl pointer text-black text-center",
   },
   title: {
     class:
@@ -64,9 +63,5 @@ function openMenu() {
   isOpen.value = !isOpen.value;
 }
 
-function closeDropDown() {
-  isOpen.value = false;
-}
-
 const isMenuOpen = computed(() => isOpen.value);
 </script>

components/Ml/Slider/MlSlider.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRipple } from "#imports";
+// import { useRipple } from "#imports";
 import { ref, computed, defineProps, withDefaults } from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type { Swiper as swiper } from "swiper/types";

components/Ml/Tabber/MlTabberBase.vue

@@ -1,15 +1,10 @@
 <template>
   <div class="flex md:flex-row flex-col text-black">
-    <div class="flex flex-col justify-between md:w-[40%] cursor-pointer">
+    <div class="flex flex-col justify-between cursor-pointer w-[40%]">
       <div
         v-for="(el, index) in props.tabs"
         :key="index"
-        :class="[
+        class="w-full px-6 py-4 md:py-8 rtl:text-right text-left border-b border-gray-400 md:text-[18px] md:last:border-b-0 md:h-full flex items-center"
-          'w-full px-6 py-4 md:py-8 rtl:text-right text-left border-b border-gray-400 md:text-[18px] md:last:border-b-0 md:h-full flex items-center',
-          index === indexItem
-            ? 'md:border-r-0 font-[700]'
-            : 'md:border-r font-medium',
-        ]"
         @click="
           showContent(index);
           useRipple($event, true);
@@ -19,12 +14,12 @@
       </div>
     </div>
     <div v-show="tabs[indexItem]" class="md:flex-1 h-auto">
-      <div class="flex flex-col items-start p-6 md:p-16">
+      <div class="flex flex-col items-start">
         <!-- Your image -->
-        <h1 class="my-5 font-bold text-2xl md:text-[32px]">
+        <h1 class="font-bold text-2xl md:text-[32px]">
           {{ tabs[indexItem].content.title }}
         </h1>
-        <p class="font-ibm text-[16px] md:text-[18px]">
+        <p class="text-[16px] md:text-[18px]">
           {{ tabs[indexItem].content.info }}
         </p>
       </div>

index.js

@@ -1,3 +1,13 @@
-import MyModule from './modules/module';
+import { defineNuxtModule } from "@nuxt/kit";
 
-export default MyModule;
+import { join } from "pathe";
+
+export default defineNuxtModule({
+  hooks: {
+    "components:dirs"(dirs) {
+      dirs.push({
+        path: join(__dirname, "components"),
+      });
+    },
+  },
+});

modules/module.ts

@@ -1,4 +1,3 @@
-// modules/my-module.ts
 import {
   defineNuxtModule,
   createResolver,
@@ -6,84 +5,94 @@ import {
   addImports,
 } from "@nuxt/kit";
 
+import { join } from 'pathe';
+
 export interface ModuleOptions {}
 
 const components = [
   {
     name: "MlButton",
-    path: "../src/components/Ml/Button/MlButton.vue",
+    path: "./components/Ml/Button/MlButton.vue",
   },
   {
     name: "MlPaginator",
-    path: "../src/components/Ml/Paginator/MlPaginator.vue",
+    path: "./components/Ml/Paginator/MlPaginator.vue",
   },
   {
     name: "MlDropDown",
-    path: "../src/components/Ml/DropDown/MlDropDown.vue",
+    path: "./components/Ml/DropDown/MlDropDown.vue",
   },
   {
     name: "MlDropDownItem",
-    path: "../src/components/Ml/DropDown/MlDropDownItem.vue",
+    path: "./components/Ml/DropDown/MlDropDownItem.vue",
-  },
-  {
-    name: "MlDropDownItem",
-    path: "../src/components/Ml/DropDown/MlDropDownItem.vue",
   },
   {
     name: "MlSlider",
-    path: "../src/components/Ml/Slider/MlSlider.vue",
+    path: "./components/Ml/Slider/MlSlider.vue",
   },
   {
     name: "MlSliderPoint",
-    path: "../src/components/Ml/SliderPoint/MlSliderPoint.vue",
+    path: "./components/Ml/SliderPoint/MlSliderPoint.vue",
   },
   {
     name: "MlTabberBase",
-    path: "../src/components/Ml/Tabber/MlTabberBase.vue",
+    path: "./components/Ml/Tabber/MlTabberBase.vue",
+  },
+  {
+    name: "MyComponent",
+    path: "./components/MyComponent",
   },
 ];
 
 const composables = [
   {
     name: "useRipple",
-    path: "../src/composables/useRipple.ts",
+    path: "./composables/useRipple.ts",
   },
   {
     name: "useMergeClasses",
-    path: "../src/composables/useMergeClasses.ts",
+    path: "./composables/useMergeClasses.ts",
   },
   {
     name: "useBounce",
-    path: "../src/composables/useBounce.ts",
+    path: "./composables/useBounce.ts",
   },
   {
     name: "useTailwindConf",
-    path: "../src/composables/useTailwindConf.ts",
+    path: "./composables/useTailwindConf.ts",
   },
 ];
+
 export default defineNuxtModule<ModuleOptions>({
-  meta: {
+  // meta: {
-    name: "module",
+  //   name: "module",
-    configKey: "myModule",
+  //   configKey: "myModule",
-  },
+  // },
-  defaults: {},
+  // defaults: {},
-  setup(_options, _nuxt) {
+  // setup(_options, _nuxt) {
-    const resolver = createResolver(import.meta.url);
+  //   const resolver = createResolver(import.meta.url);
 
-    for (let item of components) {
+  //   for (let item of components) {
-      addComponent({
+  //     addComponent({
-        name: item.name,
+  //       name: item.name,
-        filePath: resolver.resolve(item.path),
+  //       filePath: resolver.resolve(item.path),
+  //     });
+  //   }
+
+  //   for (let item of composables) {
+  //     addImports([
+  //       {
+  //         name: item.name,
+  //         from: resolver.resolve(item.path),
+  //       },
+  //     ]);
+  //   }
+  // },
+  hooks: {
+    "components:dirs"(dirs) {
+      dirs.push({
+        path: join(__dirname, "components"),
       });
-    }
+    },
-
-    for (let item of composables) {
-      addImports([
-        {
-          name: item.name,
-          from: resolver.resolve(item.path),
-        },
-      ]);
-    }
   },
 });

package.json

@@ -14,10 +14,12 @@
     "@heroicons/vue": "^2.1.4",
     "@nuxt/kit": "^3.12.3",
     "@nuxtjs/color-mode": "^3.4.2",
-    "@nuxtjs/tailwindcss": "^6.12.0",
     "@vueuse/core": "^10.11.0",
+    "autoprefixer": "^10.4.19",
     "classnames": "^2.5.1",
     "nuxt": "^3.12.3",
+    "pathe": "^1.1.2",
+    "postcss": "^8.4.39",
     "swiper": "^11.1.4",
     "tailwind-merge": "^2.3.0",
     "typescript": "^5.5.3",
@@ -25,6 +27,7 @@
   },
   "packageManager": "pnpm@9.1.1+sha512.14e915759c11f77eac07faba4d019c193ec8637229e62ec99eefb7cf3c3b75c64447882b7c485142451ee3a6b408059cdfb7b7fa0341b975f12d0f7629c71195",
   "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.12.0",
     "tailwindcss": "^3.4.4"
   }
 }

pnpm-lock.yaml

@@ -17,18 +17,24 @@ importers:
       '@nuxtjs/color-mode':
         specifier: ^3.4.2
         version: 3.4.2(magicast@0.3.4)(rollup@4.18.0)
-      '@nuxtjs/tailwindcss':
-        specifier: ^6.12.0
-        version: 6.12.0(magicast@0.3.4)(rollup@4.18.0)
       '@vueuse/core':
         specifier: ^10.11.0
         version: 10.11.0(vue@3.4.31(typescript@5.5.3))
+      autoprefixer:
+        specifier: ^10.4.19
+        version: 10.4.19(postcss@8.4.39)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
       nuxt:
         specifier: ^3.12.3
         version: 3.12.3(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(rollup@4.18.0)(terser@5.31.1)(typescript@5.5.3)(vite@5.3.3(@types/node@20.14.9)(terser@5.31.1))
+      pathe:
+        specifier: ^1.1.2
+        version: 1.1.2
+      postcss:
+        specifier: ^8.4.39
+        version: 8.4.39
       swiper:
         specifier: ^11.1.4
         version: 11.1.4
@@ -42,6 +48,9 @@ importers:
         specifier: latest
         version: 3.4.31(typescript@5.5.3)
     devDependencies:
+      '@nuxtjs/tailwindcss':
+        specifier: ^6.12.0
+        version: 6.12.0(magicast@0.3.4)(rollup@4.18.0)
       tailwindcss:
         specifier: ^3.4.4
         version: 3.4.4

tailwind.config.js

@@ -1,50 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  theme: {
+    theme: {
-    extend: {
+    extend: {},
-      backgroundImage: {
-        gradient:
-          "linear-gradient(50deg, rgba(75,250,145,1) 0%, rgba(71,122,255,1) 100%);",
-        MainLightGradient:
-          "linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(114,151,246,0.6502976190476191) 36%, rgba(114,151,246,0.6502976190476191) 72%, rgba(0,0,0,0) 100%)",
-        MainDarkGradient:
-          "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(13,54,161,0.6502976190476191) 49%, #161616 100%);",
-        FooterLightGradient:
-          "linear-gradient(180deg, #F8F8F8 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%), linear-gradient(65deg, rgba(75,250,145,0.5) 0%, rgba(20,76,220,0.5) 100%)",
-        FooterDarkGradient:
-          "linear-gradient(180deg, #161616 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%), linear-gradient(65deg, rgba(20,76,220,0.5) 0%, rgba(75,250,145,0.5) 100%)",
-        FormLightGradient:
-          "linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(114,151,246,1) 72%)",
-        FormDarkGradient:
-          "linear-gradient(180deg, #161616 20%, rgba(13,54,161,1) 90%)",
-        StudyLightGradient:
-          "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(72,72,72,0.10127801120448177) 14%, rgba(249,249,249,0.3253676470588235) 50%, rgba(248,248,248,1) 100%), linear-gradient(65deg, rgba(75,250,145,0.5) 0%, rgba(20,76,220,0.5) 100%)",
-        StudyDarkGradient:
-          "linear-gradient(180deg, rgba(22,22,22,0) 0%, rgba(22,22,22,0.3309698879551821) 50%, #161616 100%), linear-gradient(72deg, rgba(20,76,220,0.5018382352941176) 0%, rgba(75,250,145,0.4990371148459384) 100%)",
-        ContactDarkGradient:
-          "linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(13,54,161,1) 90%)",
-        ContactLightGradient:
-          "linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(114,151,246,0.7231267507002801) 72%)",
-      },
-      colors: {
-        gradient:
-          "linear-gradient(50deg, rgba(75,250,145,1) 0%, rgba(71,122,255,1) 100%);",
-        accent1: "#144CDC",
-        accent2: "#4BFA91",
-
-        BgDark: "#090909",
-        BgLight: "#F8F8F8",
-
-        BgDarkSecond: "#161616",
-      },
-      screens: {
-        "3xl": "2560px",
-      },
-      boxShadow: {
-        "custom-lrb":
-          "0 10px 15px -3px rgba(0, 0, 0, 0.1), -10px 0 15px -3px rgba(0, 0, 0, 0.1), 10px 0 15px -3px rgba(0, 0, 0, 0.1)",
-        "custom-drb": "-3px 28px 42px 3px rgba(23, 23, 24, 1)",
-      },
-    },
   },
+  plugins: [],
 };