Fix broken links in docs and improve some labels (#2337)

Co-authored-by: BG-Software <73077398+BG-Software-BG@users.noreply.github.com>

.changeset/eleven-seals-unite.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix broken links to other docs section and tabler.io website; improve some labels.

docs/content/ui/components/avatars.md

@@ -64,7 +64,7 @@ Besides pictures and initials, you can also use icons to make the avatars more u
 
 ## Avatar initials color
 
-Customize the color of the avatars' background. You can click [here](/img/ui/base/colors) to see the list of available colors.
+Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details.
 
 {% capture html -%}
 <span class="avatar bg-green-lt">AB</span>

docs/content/ui/components/buttons.md

@@ -151,7 +151,7 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t
 
 Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look.
 
-Icons can be found [**here**](/img/components/icons)
+See all icons at [tabler.io/icons]({{ site.icons.link }}).
 
 {% capture html -%}
 <button type="button" class="btn">

docs/content/ui/components/countup.md

@@ -9,7 +9,7 @@ The countup component is used to display numbers dynamically. It is a great way
 
 To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
 
-For more advanced features of countups, click [here](https://inorganik.github.io/countUp.js/) and see what more you can do.
+For more advanced features of countups, see the demo on the [countUp.js website](https://inorganik.github.io/countUp.js/).
 
 ## Basic usage
 

docs/content/ui/components/divider.md

@@ -46,7 +46,7 @@ You can modify the position of the text which is to be included in a separator a
 
 ## Divider color
 
-Customize the color of dividers to make them go well with your design. Click [here](/img/ui/base/colors) to see the list of available colors.
+Customize the color of dividers to make them go well with your design. See the [full list of available colors](/ui/base/colors) for more details.
 
 {% capture html -%}
 <p>

docs/content/ui/components/icons.md

@@ -5,7 +5,7 @@ banner: icons
 description: Enhance dashboards with custom icons.
 ---
 
-If you need to add icons to your website, you can use the Tabler Icons library. It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
+If you need to add icons to your website, you can use the [Tabler Icons library]({{ site.icons.link }}). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.
 
 ## Base icon
 
@@ -45,7 +45,7 @@ Look at the example below to see the filled icons.
 
 ## Icon colors
 
-To change the color of the icon, you need to add the `text-` class to the parent element of the icon. Full list of available colors can be found [here](/img/ui/colors). Color classes can be used with any HTML element.
+To change the color of the icon, you need to add the `text-` class to the parent element of the icon. See the [full list of available colors](/ui/base/colors) for more details. Color classes can be used with any HTML element.
 
 ```html
 <span class="text-red">

docs/content/ui/components/progress.md

@@ -89,7 +89,7 @@ This is how it looks:
 
 You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
 
-Full list of available colors can be found [here](/img/ui/base/colors).
+See the [full list of available colors](/ui/base/colors) for more details.
 
 {% capture html -%}
 <div class="progress">

docs/content/ui/components/range-slider.md

@@ -5,9 +5,7 @@ description: Adjust values with range sliders.
 summary: Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
 ---
 
-To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
-
-All options and features can be found [**here**](https://refreshless.com/nouislider/).
+To be able to use the range slider in your application you will need to install the noUiSlider dependency with `npm install nouislider`.
 
 ## Basic range slider
 
@@ -30,4 +28,4 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).
+For more details on customizing a noUiSlider element, see the documentation on the [noUiSlider website](https://refreshless.com/nouislider/).

docs/content/ui/components/ribbons.md

@@ -41,7 +41,7 @@ Using multiple classes at once will give you more position options. For example,
 
 ## Ribbon color
 
-Customize the ribbon's background color. You can click [here](/ui/base/colors) to see the list of available colors.
+Customize the ribbon's background color. See the [full list of available colors](/ui/base/colors) for more details.
 
 {% capture html -%}
 <div class="card">

docs/content/ui/components/spinners.md

@@ -23,7 +23,7 @@ Look at the example below to see how the spinner works:
 
 ## Colors
 
-Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/img/ui/base/colors) section.
+Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/ui/base/colors) section.
 
 {% capture html -%}
 <div class="spinner-border text-blue" role="status"></div>

docs/content/ui/components/statuses.md

@@ -6,7 +6,7 @@ description: Highlight interface elements with status dots.
 
 ## Default markup
 
-Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/img/ui/base/colors) section.
+Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/ui/base/colors) section.
 
 ```html
 <span class="status status-blue">Blue</span>

docs/content/ui/components/steps.md

@@ -95,7 +95,7 @@ The example below demonstrates a progress tracker with tooltips for each step.
 
 ## Color
 
-You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/img/ui/base/colors) to see the range of available colors.
+You can customize the default progress indicator by changing the color to one that better suits your design. See the [full list of available colors](/ui/base/colors) for more details.
 
 ```html
 <div class="steps steps-green">...</div>

docs/content/ui/forms/form-color-check.md

@@ -4,7 +4,7 @@ summary: The color check is a great way to make your form more user-friendly and
 description: Enhance forms with color checks.
 ---
 
-Your input controls can come in a variety of colors, depending on your preferences. Click [here](/img/ui/base/colors) to see the list of available colors.
+Your input controls can come in a variety of colors, depending on your preferences. See the [full list of available colors](/ui/base/colors) for more details.
 
 ```html
 <label class="form-colorinput">

docs/content/ui/forms/form-image-check.md

@@ -144,7 +144,7 @@ If you want to use the image check as a radio button, you can change the input t
 
 ## Avatars
 
-If you want to use the image check with avatars, you can use an [avatar component](/img/ui/components/avatars) instead of an image.
+If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatars) instead of an image.
 
 {% capture html -%}
 <div class="mb-3">

docs/content/ui/getting-started/how-to-contribute.md

@@ -4,7 +4,7 @@ summary: This guide explains how to contribute to Tabler, from setting up a deve
 description: Guide to contributing to Tabler and setting up for development.
 ---
 
-Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, [start here](https://opensource.guide/how-to-contribute/) to learn more about contributing.
+Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, we recommend reading a [how to contribute](https://opensource.guide/how-to-contribute/) guide to learn more about contributing.
 
 ## Contribution Requirements
 
@@ -13,7 +13,7 @@ When contributing to Tabler, please adhere to the following guidelines:
 1. By submitting a contribution, you grant a non-exclusive license to the Tabler project to use your contribution in any context deemed appropriate.
 2. If your contribution includes content from other sources, it must be appropriately licensed under an open source license.
 3. Contributions must be submitted via GitHub pull requests.
-4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/img/ui/getting-started/browser-support)).
+4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/ui/getting-started/browser-support)).
 
 ## Installation
 

docs/content/ui/getting-started/installation.md

@@ -56,7 +56,7 @@ Update your HTML file to include these resources:
 
 This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
 
-You can also download the files and include them locally in your project. For more information, see the [Download](/img/ui/getting-started/download) page.
+You can also download the files and include them locally in your project. For more information, see the [Download](/ui/getting-started/download) page.
 
 ### Open in Your Browser