docs: update links to the documentation

src/components/DocsComponents.vue

@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({
+  href: String,
+})
+
+import ComponentsImg from '@/assets/images/components.webp'
+</script>
+
+<template>
+  <div class="bg-primary bg-opacity-10 border border-2 border-primary rounded mb-4">
+    <div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div class="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img
+          class="img-fluid"
+          :src="ComponentsImg"
+          width="160px"
+          height="160px"
+          alt="CoreUI PRO hexagon"
+        />
+      </div>
+      <div class="col-md col-12 px-lg-4">
+        Our Admin Panel isn’t just a mix of third-party components. It’s
+        <strong>
+          the only open-source Vue dashboard built on a professional, enterprise-grade UI Components
+          Library
+        </strong>
+        . This component is part of this library, and we present only the basic usage of it here. To
+        explore extended examples, detailed API documentation, and customization options, refer to
+        our docs.
+      </div>
+      <div class="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          class="btn btn-primary text-nowrap text-white"
+          :href="`https://coreui.io/vue/docs/${props.href}`"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

src/components/DocsIcons.vue

@@ -0,0 +1,29 @@
+<script setup>
+import IconsImg from '@/assets/images/icons.webp'
+</script>
+
+<template>
+  <div class="bg-warning bg-opacity-10 border border-2 border-warning rounded mb-4">
+    <div class="row d-flex align-items-center p-3 px-xl-4 flex-xl-nowrap">
+      <div class="col-xl-auto col-12 d-none d-xl-block p-0">
+        <img class="img-fluid" :src="IconsImg" width="160px" height="160px" alt="CoreUI Icons" />
+      </div>
+      <div class="col-md col-12 px-lg-4">
+        CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG,
+        and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You
+        can use them in your digital products for web or mobile app. For more information please
+        visit our documentation.
+      </div>
+      <div class="col-md-auto col-12 mt-3 mt-lg-0">
+        <a
+          class="btn btn-warning text-nowrap text-white"
+          href="https://coreui.io/vue/docs/components/icon.html"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Explore Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+</template>