Release 1.0.0-beta24

* marketing site init

* classname fix

* marketing images

* homepage components

* gradient bg

* Optimised images with calibre/image-actions

* generate utilities for marketing pages, negative utilities, new filters, browser component

* list separate fixes

* marketing pages components

* build fix

* new marketing pages elements

* add typd.js library to animate text

* about page, markdown page

* testimonials, new components, new marketing pages

* unity avatar sizes

* fix shape sizes

* avatars unify

* shape fixes

* real estate page

* Optimised images with calibre/image-actions

* fix small rebase error

* Fix mobile designs of features, faq and testimonials

* Add marketing pages to the extra's menu

* fix hero header design and include as app example design

* Fix buttons nog centering on hero

* Slightly increase bundlewatch size

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Robert-Jan de Dreu <160743+rjd22@users.noreply.github.com>

.build/import-illustrations.js

@@ -12,7 +12,6 @@ const illustrations = glob
 		return path.basename(file, '.png')
 	})
 
-
 fs.writeFileSync(
 	path.join(__dirname, `../src/pages/_data/illustrations.json`),
 	JSON.stringify(illustrations)

.build/reformat-mdx.js

@@ -16,17 +16,17 @@ docs.forEach((file, i) => {
 	// get codeblocks from markdown
 	const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
 		if (m2 === 'html') {
-			const m3m = beautifyHtml(m3, {
+			let m3m = beautifyHtml(m3, {
 				"indent_size": 2,
 				"indent_char": " ",
 			}).trim();
 
+			// remove empty lines
+			m3m = m3m.replace(/^\s*[\r\n]/gm, '');
+
 			return m1 + m3m + "\n" + m4;
 		}
-
 		return m
-
-		
 	})
 
 	if (content !== oldContent) {

.changeset/hot-vans-peel.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update illustrations and enhance SVG handling in HTML

.changeset/shiny-sloths-shave.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Enhance documentation

CHANGELOG.md

@@ -1,5 +1,102 @@
 # Changelog
 
+## `1.0.0-beta23` - 2025-01-07
+
+- Documentation improvements.
+- Added countup functionality and updated documentation example.
+- Do not display empty `<fieldset>`.
+- Set font-size of webfont icon inside a button.
+- Ordered menu items alphabetically.
+- Marked value of `$font-family-monospace` as `!default`.
+- Fixed unpkg links to static-files icons.
+- Fixed description of alerts with a description.
+- Fixed layout of search results for small and medium screens.
+- Removed invalid z-index setting for dropdown.
+- Fixed IDs of custom size star ratings.
+- Removed text-decoration on hover for elements with child icons.
+- Fixed link to webfont icons.
+- Updated color reference links in UI component documentation.
+- Fixed typo in browser support documentation summary.
+- Enhanced Figma plugin documentation with detailed usage instructions.
+- Added documentation for Tabler Illustrations and updated index with a link.
+- Enhanced documentation for various UI and icon sections.
+- Added new documentation files for icons and UI components; restructured existing files.
+- Updated documentation structure and content for icons and UI components.
+- Removed outdated `menu.json` and added `index.mdx` files for UI documentation structure.
+- General docs update.
+- Increased contrast of active dropdown-item in vertical layout.
+- Removed duplicated color setting in table headers.
+- Increased `z-index` of `ts-dropdown`.
+- Added social icons plugin.
+- Described variables for datagrid in docs.
+- Fixed multiple documentation issues.
+- Removed unused config from the code.
+- Fixed links to Tabler Icons.
+- Updated dark image.
+- Updated screenshot.
+- Fixed icon issues.
+- Fixed URL in documentation.
+
+## `1.0.0-beta22` - 2025-01-02
+
+- Fixed `@charset` CSS declaration in bundle.
+- Fixed cells with inline icons.
+- Fixed padding in code blocks.
+- Fixed colors in date range datepicker.
+- Fixed icon display issues in the Star Ratings component.
+- Fixed `z-index` value of the `nav-tab` inside `card-tab`.
+- Fixed wrong gray colors.
+- Fixed incorrect CDN URL in `webfont.mdx`.
+- Ensured border color works in dark mode.
+- Replaced `.page-center` with `.my-auto` in single-page layouts.
+- Updated Tabler Emails to v2.0.
+- Updated Tabler Icons to v3.26.0.
+- Updated docs structure.
+- Updated `download.mdx`.
+- Updated Node.js to version 20.
+- Improved base font family.
+- Made horizontal rule direction-aware.
+- Added new payment providers.
+- Read changelog from `CHANGELOG.md` file.
+- Initialized VS Code configuration.
+
+## `1.0.0-beta21` - 2024-09-8
+
+- Updated dependencies.
+- Updated Tabler Icons to v3.14.0 and the import script.
+- Fixed invisible scrollbar in dark mode when navigating the preview.
+- Styled `btn-close` specifically for `.modal-header`.
+- Added proper borders to the ribbon start class.
+- Changed brand color.
+- Included `docs` in the `npm` package.
+- Added Tabler Illustrations.
+- Fixed use of the secondary color in specific form elements.
+- Introduced Docker Compose Config for local Tabler builds.
+- Allowed usage of `tinymce` v7.x as a peer dependency.
+- Updated TinyMCE to v7.0.
+- Rebranded Twitter to X.
+- Replaced undraw illustrations with Tabler Illustrations.
+- Added punctuation to `SECURITY.md`.
+- Updated `_navbar.scss` to correct disabled dropdown menu item colors.
+- Removed unused packages.
+- Fixed map pages.
+- Resolved issues with toasts in dark mode.
+- Fixed alert background prefix.
+- Corrected a typo in CHANGELOG.md.
+- Fixed radial chart issue.
+- Added documentation on running the site locally in Site README.
+- Updated colors in `colors.mdx`.
+- Fixed dynamic SCSS prefix in mixins.
+- Changed `<h1>` to `<div>` in `navbar-logo.html`.
+- Resolved vertical centering on error pages.
+- Fixed navbar menu issues.
+- Added `background-clip: border-box` to `.dropdown-menu` class.
+- Replaced `href="#"` with `href="javascript:void(0)"`.
+- Fixed disabled CSS class for links.
+- Addressed missing variables and minor color adjustments.
+- Improved heights, scrolls, and layouts in Docs examples.
+- Fixed flags display in preview. 
+
 ## `1.0.0-beta20` - 2023-08-24
 
 - Update `bootstrap` to v5.3.1

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2023 The Tabler Authors
+Copyright (c) 2018-2025 The Tabler Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

_config.yml

@@ -48,6 +48,7 @@ tabler-css-plugins:
   - tabler-socials
   - tabler-payments
   - tabler-vendors
+  - tabler-marketing
 
 exclude:
   - .jekyll-cache

docs/illustrations/introduction/contents.mdx

@@ -0,0 +1,77 @@
+---
+title: Contents
+description: Explore Tabler Illustrations folder structure
+summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
+---
+
+The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
+
+## Folder Structure
+
+Once downloaded, unzip the compressed folder and you’ll see something like this:
+
+```
+tabler-illustrations/
+├── eps/
+|	├── dark/
+|	└── light/
+├── figma/ 
+├── pdf/ 
+|  ├── dark/
+|  └── light/
+├── png/ 
+|  ├── dark/
+|  └── light/
+├── png-background/ 
+|	├── dark/
+|	└── light/
+├── svg/ 
+|  ├── dark/
+|  └── light/
+├── svg-css-autodark/ 
+└── svg-css-variables/
+ 	├── dark/
+ 	└── light/
+```
+
+## Understanding the File Structure in Tabler Illustrations
+
+The **Tabler Illustrations** package is organized into a clear and efficient folder structure to streamline the use of its high-quality assets. Below is a breakdown of its key directories:
+
+### 1. Vector Files: `eps/`
+This folder contains EPS files for scalable vector illustrations.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 2. Design File: `figma/`
+This folder contains a Figma file, perfect for designers who work directly in Figma.
+
+### 3. Document Files: `pdf/`
+This folder contains PDF files, ideal for print or presentation use.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 4. Transparent Images: `png/`
+This folder stores PNG files with transparent backgrounds at 1600 × 1200px resolution.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 5. Background Images: `png-background/`
+This folder contains PNG files with a dark background for enhanced contrast.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 6. Scalable Vector Graphics: `svg/`
+This folder includes SVG files for scalable and customizable vector graphics.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 7. Adaptive Graphics: `svg-css-autodark/`
+This folder contains SVG files prepared to automatically adjust their colors based on user settings, providing a dynamic and adaptive visual experience.
+
+### 8. Themed Graphics: `svg-css-variables/`
+This folder contains SVG files using CSS variables for flexible theming.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.

docs/illustrations/introduction/customization.mdx

@@ -206,7 +206,6 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
     </svg>
   </div>
 </div>
-
 <div class="row g-2">
   <div class="col-auto">
     <label class="form-colorinput">
@@ -269,7 +268,6 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
     </label>
   </div>
 </div>
-
 <script>
   document.querySelectorAll('.form-colorinput-input').forEach((input) => {
     input.addEventListener('change', (event) => {
@@ -329,11 +327,9 @@ Illustration change theme based on the user's system preferences or `data-bs-the
 
 ```html
 <html data-bs-theme="dark">
-
 <body>
   <svg>...</svg>
 </body>
-
 </html>
 ```
 
@@ -346,25 +342,20 @@ Look at the example below to see how the illustration changes based on the user'
       fill: black;
       opacity: 0.07;
     }
-
     :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-b {
       fill: #1A2030;
     }
-
     :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-c {
       fill: #454C5E;
     }
-
     @media (prefers-color-scheme: dark) {
       .tblr-illustrations-boy-girl-a {
         fill: black;
         opacity: 0.07;
       }
-
       .tblr-illustrations-boy-girl-b {
         fill: #1A2030;
       }
-
       .tblr-illustrations-boy-girl-c {
         fill: #454C5E;
       }
@@ -422,7 +413,6 @@ Look at the example below to see how the illustration changes based on the user'
     </label>
   </div>
 </div>
-
 <script>
   const toggleTheme = (theme) => {
     if (theme === 'dark') {
@@ -431,7 +421,6 @@ Look at the example below to see how the illustration changes based on the user'
       document.documentElement.setAttribute('data-bs-theme', 'light');
     }
   }
-
   document.querySelectorAll('.form-check-input').forEach((input) => {
     input.addEventListener('change', (e) => {
       console.log(e.target.value);

docs/illustrations/introduction/license.mdx

@@ -0,0 +1,22 @@
+---
+title: Tabler Illustrations License
+---
+
+Codecalm.net grants you an on-going, non-exclusive license to use the Tabler Illustrations.
+
+The license grants permission to one individual (the Licensee) to access and use the Tabler Illustrations.
+
+## What You Can Do with Tabler Illustrations
+
+* Use the Tabler Illustrations to create unlimited End Products.
+* Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
+* Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
+* Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
+
+## What You Cannot Do with Tabler Illustrations
+
+* Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
+* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product, neither in code or as design assets.
+* Share your access to the Tabler Illustrations with any other individuals.
+* Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
+* Use the Tabler Illustrations to produce anything that may be deemed by Codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of Codecalm.net

docs/ui/components/alerts.mdx

@@ -9,7 +9,7 @@ description: Alert messages for user notifications.
 
 Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
 
-```html example vertical height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <h4 class="alert-title">Wow! Everything worked!</h4>
   <div class="text-secondary">Your account has been saved!</div>
@@ -39,7 +39,7 @@ Depending on the information you need to convey, you can use one of the followin
 
 Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
 
-```html example vertical height="7rem"
+```html example vertical background="surface" columns={2} centered
 <div class="alert alert-danger m-0">
   This is a danger alert — <a href="#" class="alert-link">check it out</a>!
 </div>
@@ -49,7 +49,7 @@ Add a link to your alert message to redirect users to the details they need to c
 
 Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
 
-```html example height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
@@ -137,7 +137,24 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
 
 Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
 
-```html example height="420px"
+```html
+<div class="alert alert-success" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler.io/icons/icon/check -->
+      <svg>...</svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Wow! Everything worked!</h4>
+      <div class="text-secondary">Your account has been saved!</div>
+    </div>
+  </div>
+</div>
+```
+
+To see how the icon affects the alert modal, look at the example below.
+
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
@@ -201,66 +218,17 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 </div>
 ```
 
-```html
+
-<div class="alert alert-success" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-info" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Did you know?</h4>
-      <div class="text-secondary">Here is something that you might like to know.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-warning" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-secondary">Sorry! There was a problem with your request.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-danger" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-    </div>
-  </div>
-</div>
-```
 
 ## Alert with avatar
 
 Add an avatar to your alert modal to make it more personalized.
 
-```html example height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/039m.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -270,7 +238,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-info" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3">JL</span>
+      <span class="avatar me-3">JL</span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -280,7 +248,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-warning" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/035f.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -290,7 +258,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-danger" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/056f.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -303,7 +271,7 @@ Add an avatar to your alert modal to make it more personalized.
 
 Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
 
-```html example height="500px" scrollable
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
   <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
@@ -346,7 +314,15 @@ Add primary and secondary buttons to your alert modals if you want users to take
 
 If you want your alert to be really eye-catching, you can add a class `alert-important`.
 
-```html example vertical height="210px"
+```html
+<div class="alert alert-important alert-success alert-dismissible" role="alert">
+  ...
+</div>
+```
+
+Look at the example below to see how the important alert affects the alert modal.
+
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
@@ -356,8 +332,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
       </svg>
     </div>
     <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
+      Wow! Everything worked!
-      <div class="text-secondary">Your account has been saved!</div>
     </div>
   </div>
   <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
@@ -378,54 +353,3 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 </div>
 ```
 
-```html
-<div class="alert alert-important alert-success alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Your account has been saved!
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-info alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Here is something that you might like to know.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-warning alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Sorry! There was a problem with your request.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<div class="alert alert-important alert-danger alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Your account has been deleted and can't be restored.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-```
-

docs/ui/components/badges.mdx

@@ -9,41 +9,43 @@ bootstrapLink: components/badge/
 
 The default badges are square and come in the basic set of colors.
 
-```html example vertical centered separated scrollable height="15rem"
+```html example centered separated
-<span class="badge bg-blue">Blue</span>
+<span class="badge bg-blue-lt">Blue</span>
-<span class="badge bg-azure">Azure</span>
+<span class="badge bg-azure-lt">Azure</span>
-<span class="badge bg-indigo">Indigo</span>
+<span class="badge bg-indigo-lt">Indigo</span>
-<span class="badge bg-purple">Purple</span>
+<span class="badge bg-purple-lt">Purple</span>
-<span class="badge bg-pink">Pink</span>
+<span class="badge bg-pink-lt">Pink</span>
-<span class="badge bg-red">Red</span>
+<span class="badge bg-red-lt">Red</span>
-<span class="badge bg-orange">Orange</span>
+<span class="badge bg-orange-lt">Orange</span>
-<span class="badge bg-yellow">Yellow</span>
+<span class="badge bg-yellow-lt">Yellow</span>
-<span class="badge bg-lime">Lime</span>
+<span class="badge bg-lime-lt">Lime</span>
-<span class="badge bg-green">Green</span>
+<span class="badge bg-green-lt">Green</span>
-<span class="badge bg-teal">Teal</span>
+<span class="badge bg-teal-lt">Teal</span>
-<span class="badge bg-cyan">Cyan</span>
+<span class="badge bg-cyan-lt">Cyan</span>
 ```
 
 ## Headings
 
-```html example height="240px"
+```html example columns={1} height="20rem" centered
-<h1>Example heading <span class="badge bg-secondary">New</span>
+<h1>Example heading <span class="badge">New</span>
 </h1>
-<h2>Example heading <span class="badge bg-secondary">New</span>
+<h2>Example heading <span class="badge">New</span>
 </h2>
-<h3>Example heading <span class="badge bg-secondary">New</span>
+<h3>Example heading <span class="badge">New</span>
 </h3>
-<h4>Example heading <span class="badge bg-secondary">New</span>
+<h4>Example heading <span class="badge">New</span>
 </h4>
-<h5>Example heading <span class="badge bg-secondary">New</span>
+<h5>Example heading <span class="badge">New</span>
 </h5>
-<h6>Example heading <span class="badge bg-secondary">New</span>
+<h6>Example heading <span class="badge">New</span>
 </h6>
 ```
 
 ## Outline badges
 
-```html example vertical centered separated scrollable height="15rem"
+
+
+```html example centered separated
 <span class="badge badge-outline text-blue">blue</span>
 <span class="badge badge-outline text-azure">azure</span>
 <span class="badge badge-outline text-indigo">indigo</span>
@@ -62,75 +64,55 @@ The default badges are square and come in the basic set of colors.
 
 Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
 
-```html example centered separated height="7rem"
+```html example centered separated 
-<span class="badge badge-pill bg-blue">1</span>
+<span class="badge badge-pill bg-blue-lt">1</span>
-<span class="badge badge-pill bg-azure">2</span>
+<span class="badge badge-pill bg-azure-lt">2</span>
-<span class="badge badge-pill bg-indigo">3</span>
+<span class="badge badge-pill bg-indigo-lt">3</span>
-<span class="badge badge-pill bg-purple">4</span>
+<span class="badge badge-pill bg-purple-lt">4</span>
-<span class="badge badge-pill bg-pink">5</span>
+<span class="badge badge-pill bg-pink-lt">5</span>
-<span class="badge badge-pill bg-red">6</span>
+<span class="badge badge-pill bg-red-lt">6</span>
-<span class="badge badge-pill bg-orange">7</span>
+<span class="badge badge-pill bg-orange-lt">7</span>
-<span class="badge badge-pill bg-yellow">8</span>
+<span class="badge badge-pill bg-yellow-lt">8</span>
-<span class="badge badge-pill bg-lime">9</span>
+<span class="badge badge-pill bg-lime-lt">9</span>
-<span class="badge badge-pill bg-green">10</span>
+<span class="badge badge-pill bg-green-lt">10</span>
-<span class="badge badge-pill bg-teal">11</span>
+<span class="badge badge-pill bg-teal-lt">11</span>
-<span class="badge badge-pill bg-cyan">12</span>
+<span class="badge badge-pill bg-cyan-lt">12</span>
-```
-
-## Soft color badges
-
-You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](/docs/ui/base/colors) to see the list of available colors and choose ones that best suit your design.
-
-```html example vertical centered separated scrollable height="15rem"
-<span class="badge bg-blue-lt">Blue</span>
-<span class="badge bg-azure-lt">Azure</span>
-<span class="badge bg-indigo-lt">Indigo</span>
-<span class="badge bg-purple-lt">Purple</span>
-<span class="badge bg-pink-lt">Pink</span>
-<span class="badge bg-red-lt">Red</span>
-<span class="badge bg-orange-lt">Orange</span>
-<span class="badge bg-yellow-lt">Yellow</span>
-<span class="badge bg-lime-lt">Lime</span>
-<span class="badge bg-green-lt">Green</span>
-<span class="badge bg-teal-lt">Teal</span>
-<span class="badge bg-cyan-lt">Cyan</span>
 ```
 
 ## Links
 
 Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
 
-```html example vertical centered separated scrollable height="15rem"
+```html example centered separated 
-<a href="#" class="badge bg-blue">Blue</a>
+<a href="#" class="badge bg-blue-lt">Blue</a>
-<a href="#" class="badge bg-azure">Azure</a>
+<a href="#" class="badge bg-azure-lt">Azure</a>
-<a href="#" class="badge bg-indigo">Indigo</a>
+<a href="#" class="badge bg-indigo-lt">Indigo</a>
-<a href="#" class="badge bg-purple">Purple</a>
+<a href="#" class="badge bg-purple-lt">Purple</a>
-<a href="#" class="badge bg-pink">Pink</a>
+<a href="#" class="badge bg-pink-lt">Pink</a>
-<a href="#" class="badge bg-red">Red</a>
+<a href="#" class="badge bg-red-lt">Red</a>
-<a href="#" class="badge bg-orange">Orange</a>
+<a href="#" class="badge bg-orange-lt">Orange</a>
-<a href="#" class="badge bg-yellow">Yellow</a>
+<a href="#" class="badge bg-yellow-lt">Yellow</a>
-<a href="#" class="badge bg-lime">Lime</a>
+<a href="#" class="badge bg-lime-lt">Lime</a>
-<a href="#" class="badge bg-green">Green</a>
+<a href="#" class="badge bg-green-lt">Green</a>
-<a href="#" class="badge bg-teal">Teal</a>
+<a href="#" class="badge bg-teal-lt">Teal</a>
-<a href="#" class="badge bg-cyan">Cyan</a>
+<a href="#" class="badge bg-cyan-lt">Cyan</a>
 ```
 
 ## Button with badge
 
 Badges can be used as part of links or buttons to provide a counter.
 
-```html example centered separated height="7rem"
+```
-<button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span>
+<button type="button" class="btn">
-</button>
+  Notifications <span class="badge bg-red-lt ms-2">4</span>
-<button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span>
 </button>
 ```
 
-```html
+The results can be seen in the example below.
-<button type="button" class="btn">
+
-  Notifications <span class="badge bg-red ms-2">4</span>
+```html example centered separated background="surface"
+<button type="button" class="btn">Notifications <span class="badge bg-red-lt ms-2">4</span>
 </button>
-<button type="button" class="btn">
+<button type="button" class="btn">Notifications <span class="badge bg-green-lt ms-2">4</span>
-  Notifications <span class="badge bg-green ms-2">4</span>
 </button>
 ```

docs/ui/components/charts.mdx

@@ -11,16 +11,14 @@ See also the [ApexCharts](https://apexcharts.com/) documentation.
 
 ## Line Chart
 
-Line charts are a typical pictorial representation that depicts trends and behaviors over time.
+Line charts are an essential tool for visualizing data trends over time. They are particularly useful for representing continuous data, such as stock prices, website traffic, or user activity. Below is an example of a line chart showcasing session duration, page views, and total visits:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-line" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-line'), {
@@ -105,16 +103,14 @@ Line charts are a typical pictorial representation that depicts trends and behav
 
 ## Area Chart
 
-Area charts are used to represent quantitative variations.
+Area charts are ideal for representing cumulative data over time. They add visual emphasis to trends by filling the space under the line, making it easier to compare values. Here's an example of an area chart with smooth transitions and data from two series:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-area" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-area'), {
@@ -203,16 +199,14 @@ Area charts are used to represent quantitative variations.
 
 ## Bar Chart
 
-A bar chart is the best tool for displaying comparisons between categories of data.
+Bar charts are highly effective for comparing data across different categories. They provide a clear and concise way to visualize differences in values, making them perfect for analyzing categorical data. Here's an example of a bar chart with stacked bars for enhanced readability:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-bar" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-bar'), {
@@ -311,16 +305,14 @@ A bar chart is the best tool for displaying comparisons between categories of da
 
 ## Pie Chart
 
-Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.
+Pie charts are a simple and effective way to visualize proportions and ratios. They are commonly used to represent data as percentages of a whole, making them ideal for displaying parts of a dataset. Below is an example of a pie chart showcasing distribution across categories:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-pie" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
@@ -371,16 +363,14 @@ Pie charts are an instrumental visualization tool useful in expressing data and
 
 ## Heatmap Chart
 
-Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data.
+Heatmaps provide a graphical representation of data where individual values are represented by color intensity. They are particularly useful for identifying patterns or anomalies within large datasets. Here's an example of a heatmap chart to visualize data distributions:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-pie" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
@@ -431,14 +421,14 @@ Heatmap is a visualization tool that employs color the way a bar chart employs h
 
 ## Advanced example
 
-```html example centered columns={2} height="25rem"
+For more complex data visualizations, you can create advanced charts with multiple series and custom configurations. Below is an example of a social media referrals chart combining data from Facebook, Twitter, and Dribbble:
+
+```html example centered columns={2} height="25rem" background="surface" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-social-referrals" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-social-referrals'), {

docs/ui/components/countup.mdx

@@ -5,13 +5,23 @@ libs: countup
 description: Display numbers dynamically with countups.
 ---
 
+The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application.
+
 To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
 
-## Default countup
+For more advanced features of countups, click [here](https://inorganik.github.io/countUp.js/) and see what more you can do.
+
+## Basic usage
 
 To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
 
-```html example libs="countup"
+```html
+<h1 data-countup>30000</h1>
+```
+
+The results can be seen in the example below.
+
+```html example libs="countup" centered
 <h1 data-countup>30000</h1>
 ```
 
@@ -19,9 +29,13 @@ To create a countup, add `data-countup` to any HTML text tag and specify the num
 
 Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
 
-```html example
+```html
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+<h1 data-countup='{"duration":4}'>30000</h1>
+```
 
+Look at the example below to see how the duration affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"duration":4}'>30000</h1>
 <h1 data-countup='{"duration":6}'>30000</h1>
@@ -32,20 +46,28 @@ Set the `duration` to determine how long the animation should take. By default,
 By default the countup will start from zero. If you want to set a different start value use `startVal`.
 You can also set the start value to be greater than the final value, so that it counts down instead of up.
 
-```html example
+```html
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+<h1 data-countup='{"startVal":12345}'>30000</h1>
+```
 
+To see how the starting value affects the animation, look at the example below.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup='{"startVal":12345}'>30000</h1>
 <h1 data-countup='{"startVal":47655}'>30000</h1>
 ```
 
 ## Decimal places
 
-Set how many decimal numbers should be displayed using `decimalPlaces`.
+Set how many decimal numbers should be displayed using `decimalPlaces`. By default, the number of decimal places is set to 0.
 
-```html example
+```html
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
+```
 
+Look at the example below to see how the number of decimal places affects the animation.
+
+```html example libs="countup" centered vertical separated height="20rem"
 <h1 data-countup>3.123</h1>
 <h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
 <h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
@@ -54,82 +76,90 @@ Set how many decimal numbers should be displayed using `decimalPlaces`.
 
 ## Easing
 
-Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration.
+Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration. Easing can be disabled to make the animation linear.
 
-```html example
+```html
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+<h1 data-countup='{"useEasing": false}'>30000</h1>
+```
 
+Look at the example below to see how easing affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"useEasing": false}'>30000</h1>
 ```
 
 ## Use grouping
 
-Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default and the default group separator is a comma.
+Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default, so that the number is displayed with a separator.
 
-```html example
+```html
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+<h1 data-countup='{"useGrouping": false}'>30000</h1>
+```
 
+Example below shows how grouping affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"useGrouping": false}'>30000</h1>
 ```
 
 ## Separator
 
-You can change the default comma group separator using `separator` and specifying the one you wish to use.
+You can change the default separator using `separator` and specifying the one you wish to use.
 
-```html example
+```html
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+<h1 data-countup='{"separator":" "}'>3000000</h1>
+```
 
+This example shows how the separator affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup>3000000</h1>
 <h1 data-countup='{"separator":" "}'>3000000</h1>
-<h1 data-countup='{"separator":"-"}'>3000000</h1>
-<h1 data-countup='{"separator":":"}'>3000000</h1>
 ```
 
 ## Decimal separator
 
-You can also change the decimal separator which is set to a full stop by default. To do it, use `decimal` and specify the decimal separator of your choice.
+You can change the default decimal separator using `decimal` and specifying the one you wish to use.
 
-```html example
+```html
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+<h1 data-countup='{"decimal":","}'>3.12</h1>
+```
 
+Look at the example below to see how the decimal separator affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
+<h1 data-countup='{"decimalPlaces":2,"decimal":","}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
 ```
 
 ## Prefix
 
 Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
 
-```html example
+```html
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+<h1 data-countup='{"prefix":"$"}'>30000</h1>
+```
 
+Look at the example below to see how the prefix affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup='{"prefix":"$"}'>30000</h1>
 <h1 data-countup='{"prefix":"€"}'>30000</h1>
-<h1 data-countup='{"prefix":"£"}'>30000</h1>
 ```
 
 ## Suffix
 
-Set the countup suffix using `suffix`.
+Set the countup suffix using `suffix` and specifying the suffix you want to add, for instance a percentage symbol.
 
-```html example
+```html
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+<h1 data-countup='{"suffix":"%"}'>300</h1>
-
-<h1 data-countup='{"suffix":"%"}'>30</h1>
-<h1 data-countup='{"suffix":"‰"}'>30</h1>
-<h1 data-countup='{"suffix":"k"}'>30</h1>
 ```
 
-Of course you can mix all of these:
+Look at the example below to see how the suffix affects the animation.
 
-```html example
+```html example libs="countup" centered vertical separated
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+<h1 data-countup='{"suffix":"%"}'>300</h1>
-
+<h1 data-countup='{"suffix":"‰"}'>300</h1>
-<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
 ```
-
-For more advanced features of countups, click [**here**](https://inorganik.github.io/countUp.js/) and see what more you can do.

docs/ui/components/dropzone.mdx

@@ -4,15 +4,36 @@ summary: Dropzone is a simple JavaScript library that helps you add file drag an
 description: Drag-and-drop file upload tool.
 ---
 
-## Default Dropzone
+## Basic usage
 
-```html example vendors height="240px" libs="dropzone"
+The basic implementation of Dropzone allows you to quickly enable drag-and-drop file uploads on your web forms. By default, it provides a fallback for browsers that don’t support drag-and-drop functionality. Below is an example of how to set up a simple Dropzone form.
+
+```html
 <form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" />
   </div>
 </form>
+```
 
+To initialize the Dropzone form, you need to create a new instance of the Dropzone class and pass the form element as an argument. Here’s how you can do it:
+
+```html
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    new Dropzone("#dropzone-default")
+  })
+</script>
+```
+
+The Dropzone form will now be active and ready to accept file uploads. When a user drags and drops a file onto the form, the file will be uploaded to the server automatically.
+
+```html example vendors height="240px" libs="dropzone" background="surface"
+<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
+  <div class="fallback">
+    <input name="..." type="file" />
+  </div>
+</form>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-default")
@@ -22,13 +43,20 @@ description: Drag-and-drop file upload tool.
 
 ## Add multiple files
 
-```html example vendors height="240px" libs="dropzone"
+To allow users to upload multiple files at once, you can enable the `multiple` attribute in the input field. This is particularly useful for applications that require batch uploads, such as image galleries or document management systems. Here’s how to configure Dropzone to accept multiple files:
+
+```html
+<input name="..." type="file" multiple />
+```
+
+By adding the `multiple` attribute to the input field, users can select multiple files from their local storage and upload them all at once. The Dropzone form will handle the file uploads automatically.
+
+```html example vendors height="240px" libs="dropzone" background="surface"
 <form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" multiple />
   </div>
 </form>
-
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-mulitple")
@@ -38,7 +66,9 @@ description: Drag-and-drop file upload tool.
 
 ## Custom Dropzone
 
-```html example vendors height="240px" libs="dropzone"
+You can further enhance the user experience by customizing the Dropzone interface. For instance, you can modify the drop area with custom messages or styles to make the file upload process more engaging and user-friendly. Below is an example of a custom Dropzone configuration:
+
+```html example vendors height="240px" libs="dropzone" background="surface"
 <form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" />
@@ -48,10 +78,11 @@ description: Drag-and-drop file upload tool.
     <span class="dropzone-msg-desc">Your custom description here</span>
   </div>
 </form>
-
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-custom")
   })
 </script>
 ```
+
+By customizing the drop area, you can align the file upload process with your application’s branding or specific requirements.

docs/ui/components/icons.mdx

@@ -1,12 +1,25 @@
 ---
 title: Icons
-summary: Use one of over 3000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
+summary: Use one of over 5000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
 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/).
+
 ## Base icon
 
+To add icon to your code copy the SVG code from the Tabler Icons website and paste it into your HTML file.
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
+</svg>
+```
+
+Results can be seen in the example below.
+
 ```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -40,6 +53,17 @@ description: Enhance dashboards with custom icons.
 
 ## Filled icons
 
+To use filled icons, you need to copy the SVG code from the Tabler Icons website and paste it into your HTML file. 
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
+</svg>
+```
+
+Look at the example below to see the filled icons.
+
 ```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -64,6 +88,17 @@ description: Enhance dashboards with custom 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](/docs/ui/colors). Color classes can be used with any HTML element.
+
+```html
+<span class="text-red">
+  <!-- SVG icon from http://tabler.io/icons/icon/heart -->
+  <svg>...</svg>
+</span>
+```
+
+Look at the example below to see how the color of the icon changes.
+
 ```html example centered separated
 <span class="text-red">
   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -93,6 +128,19 @@ description: Enhance dashboards with custom icons.
 
 ## Icon animations
 
+To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element. 
+
+```html
+<!-- SVG icon from http://tabler.io/icons/icon/heart -->
+<svg class="icon-pulse" ...>...</svg>
+<!-- SVG icon from http://tabler.io/icons/icon/bell -->
+<svg class="icon-tada" ...>...</svg>
+<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
+<svg class="icon-rotate" ...>...</svg>
+```
+
+Look at the example below to see the animated icons.
+
 ```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pulse" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -109,13 +157,3 @@ description: Enhance dashboards with custom icons.
 </svg>
 ```
 
-```html
-<!-- SVG icon from http://tabler.io/icons/icon/heart -->
-<svg class="icon-pulse" ...>...</svg>
-
-<!-- SVG icon from http://tabler.io/icons/icon/bell -->
-<svg class="icon-tada" ...>...</svg>
-
-<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
-<svg class="icon-rotate" ...>...</svg>
-```

docs/ui/components/inline-player.mdx

@@ -5,11 +5,36 @@ summary: A simple, lightweight, accessible and customizable HTML5, YouTube and V
 description: Lightweight media player for websites.
 ---
 
+
+## Overview
+
+The Inline Player is a versatile, modern media player designed for seamless integration into websites. It supports HTML5, YouTube, and Vimeo content, offering a lightweight and accessible solution for media playback. Built with customization and ease of use in mind, this player ensures compatibility with modern browsers and enhances user experience.
+
+## Installation
+
+To use the Inline Player, you need to include the Plyr library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the Plyr library from a CDN:
+
+```html
+<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
+```
+
 ## Sample demo
 
+Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:
+
+```html
+<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.Plyr && (new Plyr('#player-youtube'));
+  });
+</script>
+```
+
+Look at the example below to see how the Inline Player works with a YouTube video.
+
 ```html example vendors height="500px" libs="plyr"
 <div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
-
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
@@ -20,9 +45,10 @@ description: Lightweight media player for websites.
 
 ## Vimeo file
 
+Here’s how to embed a Vimeo video using the Inline Player:
+
 ```html example vendors height="500px" libs="plyr"
 <div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
-
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {

docs/ui/components/modals.mdx

@@ -4,13 +4,36 @@ summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site f
 description: Dialogs for notifications and content.
 ---
 
+Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
+
 ## Default markup
 
+To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal’s header, body, and footer.
+
+```html
+<div class="modal" tabindex="-1">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        ...
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+Look at the example below to see how the modal looks.
+
 ```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch demo modal
 </button>
-
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
@@ -32,11 +55,9 @@ description: Dialogs for notifications and content.
 
 ## Prompt and alert
 
-```html example centered height="30rem"
+You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.
-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-  Launch alert modal
-</button>
 
+```html example centered height="30rem"
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
@@ -70,13 +91,15 @@ description: Dialogs for notifications and content.
     </div>
   </div>
 </div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
+    myModal.show()
+  })
+</script>
 ```
 
 ```html example centered height="30rem"
-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-  Launch demo modal
-</button>
-
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
@@ -110,15 +133,22 @@ description: Dialogs for notifications and content.
     </div>
   </div>
 </div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
+    myModal.show()
+  })
+</script>
 ```
 
 ## Modal with form
 
+You can use the modal to create a form. Look at the example below to see how the form looks.
+
 ```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch modal with form
 </button>
-
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">

docs/ui/components/offcanvas.mdx

@@ -0,0 +1,55 @@
+---
+title: Offcanvas
+---
+
+Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
+
+## Basic usage
+
+To create an offcanvas, add the `.offcanvas` class to a container element. You can also add the `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, or `.offcanvas-bottom` class to specify the position of the offcanvas. The `.show` class is used to display the offcanvas.
+
+```html
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas">
+  <div class="offcanvas-body">
+    Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here.
+  </div>
+</div>
+```
+
+Look at the example below to see how the offcanvas works.
+
+```html example vendors height="25rem"
+<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+  <div class="offcanvas-body">
+    Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here.
+  </div>
+</div>
+```
+
+## Cookies banner
+
+The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent.
+
+```html example vendors height="25rem"
+<div class="offcanvas offcanvas-bottom h-auto show" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog">
+  <div class="offcanvas-body">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col">
+          <strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best experience on our website. <a href="./terms-of-service.html" target="_blank">Learn more</a>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
+            Essential Cookies Only
+          </button>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
+            Allow All Cookies
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```

docs/ui/components/placeholder.mdx

@@ -51,9 +51,15 @@ A placeholder can contain also a header element looks like header:
 
 ## Placeholder avatar
 
-You can make your placeholder item look like an avatar.
+You can use a placeholder, which will look like an avatar. You can use the `avatar` component, and get the image in the right proportions.
 
-```html example columns={1}
+```html
+<div class="avatar placeholder"></div>
+```
+
+Look at the example below to see how the avatar placeholder looks like.
+
+```html example columns={1} centered
 <div class="row">
   <div class="col-auto">
     <div class="avatar placeholder"></div>
@@ -65,7 +71,7 @@ You can make your placeholder item look like an avatar.
 </div>
 ```
 
-The size of avatars is exactly the same as a regular avatar.
+You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks like.
 
 ```html example centered separated
 <div class="avatar avatar-xl placeholder"></div>
@@ -82,7 +88,7 @@ You can use a placeholder, which will look like a picture. You can use the `rati
 
 You can also use the `ratio` component, and get the image in the right proportions.
 
-```html example columns={1} height={500} scrollable
+```html example columns={1} height={500} scrollable separated vertical
 <div class="ratio ratio-1x1 placeholder">
   <div class="placeholder-image"></div>
 </div>
@@ -99,23 +105,16 @@ You can also use the `ratio` component, and get the image in the right proportio
 
 ## Placeholder color
 
-By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
+By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class. Full color classes are available for background colors.
 
-```html example columns={1} height={240}
+```html
-<span class="placeholder col-12"></span>
-<span class="placeholder col-12 bg-primary"></span>
-<span class="placeholder col-12 bg-secondary"></span>
-<span class="placeholder col-12 bg-success"></span>
-<span class="placeholder col-12 bg-danger"></span>
-<span class="placeholder col-12 bg-warning"></span>
-<span class="placeholder col-12 bg-info"></span>
-<span class="placeholder col-12 bg-light"></span>
 <span class="placeholder col-12 bg-dark"></span>
 ```
 
-```html
+Look at the example below to see how the color affects the placeholder.
-<span class="placeholder col-12"></span>
 
+```html example columns={1} height={240}
+<span class="placeholder col-12"></span>
 <span class="placeholder col-12 bg-primary"></span>
 <span class="placeholder col-12 bg-secondary"></span>
 <span class="placeholder col-12 bg-success"></span>
@@ -154,7 +153,7 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
 
 See in the following examples how else you can use the placeholder component
 
-```html example columns={1} height={1000} separated vertical scrollable
+```html example columns={1} height={1000} separated vertical scrollable background="surface"
 <div class="card placeholder-glow">
   <div class="ratio ratio-21x9 card-img-top placeholder"></div>
   <div class="card-body">

docs/ui/components/range-slider.mdx

@@ -13,7 +13,6 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
 
 ```html example centered vendors libs="nouislider" columns={1}
 <div id="range-simple"></div>
-
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.noUiSlider && (noUiSlider.create(document.getElementById('range-simple'), {

docs/ui/components/statuses.mdx

@@ -210,6 +210,12 @@ Use the lite status to make the status less noticeable. To do this, use the `.st
 
 If you need only dot status, you can use the `.status-dot` class.
 
+```html
+<span class="status-dot status-blue"></span>
+```
+
+Look at the example below to see how the status dots work:
+
 ```html example centered separated
 <span class="status-dot status-blue"></span>
 <span class="status-dot status-azure"></span>
@@ -227,6 +233,12 @@ If you need only dot status, you can use the `.status-dot` class.
 
 The dots can also be animated. To do this, use the `.status-dot-animated` class.
 
+```html
+<span class="status-dot status-dot-animated status-blue"></span>
+```
+
+The animated status dots can be used in the same way as the regular status dots. 
+
 ```html example centered separated
 <span class="status-dot status-dot-animated status-blue"></span>
 <span class="status-dot status-dot-animated status-azure"></span>

docs/ui/components/steps.mdx

@@ -7,11 +7,27 @@ description: Simplify complex processes with steps.
 
 ## Default markup
 
-Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users' interaction with your interface.
+Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion.
 
-Use the `steps` class to create the default progress tracker and name the steps accordingly.
+To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process. 
 
-```html example
+```html
+<div class="steps">
+  <a href="#" class="step-item">
+    Step 1
+  </a>
+  <a href="#" class="step-item">
+    Step 2
+  </a>
+  <a href="#" class="step-item active">
+    Step 3
+  </a>
+</div>
+```
+
+The example below demonstrates a simple progress tracker with four steps, where the third step is active.
+
+```html example centered
 <div class="steps">
   <a href="#" class="step-item">
     Step 1
@@ -32,18 +48,28 @@ Use the `steps` class to create the default progress tracker and name the steps
 
 Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
 
-```html example
+To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute.
+
+```html
+<a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description">
+  Step 1
+</a>
+```
+
+The example below demonstrates a progress tracker with tooltips for each step.
+
+```html example centered height="20rem"
 <div class="steps">
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description">
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description">
     Step 1
   </a>
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description">
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description">
     Step 2
   </a>
-  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description">
+  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description">
     Step 3
   </a>
-  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description">
+  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description">
     Step 4
   </span>
 </div>
@@ -53,7 +79,15 @@ Add tooltips, if you want to provide users with additional information about the
 
 You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/base/colors) to see the range of available colors.
 
-```html example
+```html
+<div class="steps steps-green">
+  ...
+</div>
+```
+
+The example below demonstrates a progress tracker with two different color schemes.
+
+```html example centered
 <div class="steps steps-green">
   <a href="#" class="step-item">
     Step 1
@@ -88,21 +122,29 @@ You can customize the default progress indicator by changing the color to one th
 
 For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
 
-```html example
+```html example centered
 <div class="steps">
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description"></a>
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description"></a>
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description"></a>
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description"></a>
-  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description"></a>
+  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description"></a>
-  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description"></span>
+  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description"></span>
 </div>
 ```
 
 ## Steps with numbers
 
-Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
+Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it. 
 
-```html example
+```html
-<div class="steps steps-counter steps-lime">
+<div class="steps steps-counter">
+  ...
+</div>
+```
+
+The example below demonstrates a progress tracker with numbers and a different color scheme.
+
+```html example centered
+<div class="steps steps-counter">
   <a href="#" class="step-item"></a>
   <a href="#" class="step-item active"></a>
   <span href="#" class="step-item"></span>

docs/ui/components/tinymce.mdx

@@ -15,7 +15,6 @@ Initialize TinyMCE 6 on any element (or elements) on the web page by passing an
 <form method="post">
   <textarea id="tinymce-default">Hello, <b>Tabler</b>!</textarea>
 </form>
-
 <script src="$TABLER_CDN/dist/libs/tinymce/tinymce.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {

docs/ui/components/vector-maps.mdx

@@ -0,0 +1,170 @@
+---
+title: Vector Maps
+description: Interactive guide to creating vector maps with jsVectorMap.
+summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
+---
+
+## Installation
+
+To use vector maps in your project, you need to include the jsVectorMap library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the jsVectorMap library from a CDN:
+
+```html
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
+```
+
+## Sample demo
+
+Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
+
+```html
+<div id="map-world" class="w-100 h-100"></div>
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world',
+		map: 'world',
+	});
+});
+</script>
+```
+
+Look at the example below to see how the vector map works with a world map.
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world" background="surface" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world',
+		map: 'world',
+		backgroundColor: 'transparent',
+		regionStyle: {
+			initial: {
+				fill: tabler.getColor('body-bg'),
+				stroke: tabler.getColor('border-color'),
+				strokeWidth: 2,
+			}
+		},
+		zoomOnScroll: false,
+		zoomButtons: false,
+	});
+	window.addEventListener("resize", () => {
+		map.updateSize();
+	});
+});
+</script>
+```
+
+## Markers
+
+You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world-merc" background="surface" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world-markers" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+      // @formatter:on
+      document.addEventListener("DOMContentLoaded", function() {
+      	const map = new jsVectorMap({
+      		selector: '#map-world-markers',
+      		map: 'world_merc',
+      		backgroundColor: 'transparent',
+      		regionStyle: {
+      			initial: {
+      				fill: tabler.getColor('body-bg'),
+      				stroke: tabler.getColor('border-color'),
+      				strokeWidth: 2,
+      			}
+      		},
+      		zoomOnScroll: false,
+      		zoomButtons: false,
+      		markers: [
+      			{
+      				coords: [61.524, 105.3188],
+      				name: "Russia",
+      			},
+      			{
+      				coords: [56.1304, -106.3468],
+      				name: "Canada",
+      			},
+      			{
+      				coords: [71.7069, -42.6043],
+      				name: "Greenland",
+      			},
+      			{
+      				coords: [26.8206, 30.8025],
+      				name: "Egypt",
+      			},
+      			{
+      				coords: [-14.235, -51.9253],
+      				name: "Brazil",
+      			},
+      			{
+      				coords: [35.8617, 104.1954],
+      				name: "China",
+      			},
+      			{
+      				coords: [37.0902, -95.7129],
+      				name: "United States",
+      			},
+      			{
+      				coords: [60.472024, 8.468946],
+      				name: "Norway",
+      			},
+      			{
+      				coords: [48.379433, 31.16558],
+      				name: "Ukraine",
+      			},
+      		],
+      		markerStyle: {
+      			initial: {
+      				r: 4,
+      				stroke: '#fff',
+      				opacity: 1,
+      				strokeWidth: 3,
+      				stokeOpacity: .5,
+      				fill: tabler.getColor('blue')
+      			},
+      			hover: {
+      				fill: tabler.getColor('blue'),
+      				stroke: tabler.getColor('blue')
+      			}
+      		},
+      		markerLabelStyle: {
+      			initial: {
+      				fontSize: 10
+      			},
+      		},
+      		labels: {
+      			markers: {
+      				render: function(marker) {
+      					return marker.name
+      				},
+      			},
+      		},
+      	});
+      	window.addEventListener("resize", () => {
+      		map.updateSize();
+      	});
+      });
+      // @formatter:off
+    </script>
+```

docs/ui/forms/form-elements.mdx

@@ -140,7 +140,6 @@ Include an additional element in your input section, such as a button which can
     </div>
     <div class="col-auto">
       <a href="#" class="btn btn-icon" aria-label="Button">
-
         <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <circle cx="10" cy="10" r="7" />

docs/ui/getting-started/browser-support.mdx

@@ -4,9 +4,11 @@ description: Check browser compatibility for Tabler.
 summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
 ---
 
-As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.
+Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues.
 
-For instance, Tabler no longer uses **vendor prefixes** in styles that are known to have some compatibility issues except for a few parts. Tabler also supports new features such as **CSS grid**, **object fit**, and **sticky positioning** which is not yet supported on all browsers. In short, Tabler supports all the latest supported browsers with **only** partial support for Internet Explorer.
+In this latest release, Tabler introduces modern features like CSS Grid, object fit, and sticky positioning, which enhance design flexibility but may not be fully supported on older browsers. While Tabler has dropped most vendor prefixes to streamline its styles, partial support remains for Internet Explorer, with some features potentially limited.
+
+For the best experience, we recommend using one of the latest supported browsers to take full advantage of Tabler’s capabilities and design precision.
 
 ## Supported Browsers
 
@@ -20,3 +22,7 @@ Browser|Version
 <img src="/docs/browsers/electron.svg" width="48" height="48" alt="Electron Logo"/>|last 3 versions
 <img src="/docs/browsers/brave.svg" width="48" height="48" alt="Brave Logo"/>|last 3 versions
 <img src="/docs/browsers/vivaldi.svg" width="48" height="48" alt="Vivaldi Logo"/>|last 3 versions
+
+## Internet Explorer
+
+Internet Explorer is not supported.

docs/ui/getting-started/development.mdx

@@ -1,32 +0,0 @@
----
-title: Development
-description: Learn how to install Tabler and set up the development environment.
-summary: This guide provides step-by-step instructions for setting up the environment, including installing Node.js, Ruby, and Bundler, configuring the build system, and running Tabler locally to preview changes in real-time, along with guidance on reporting bugs or submitting feature requests through GitHub.
-order: 11
----
-
-## Set up the environment
-
-To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
-
-1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
-2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
-4. [Install Bundler](https://bundler.io) with `gem install bundler` and, finally, run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
-
-### Windows users
-1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\Program Files\git\bin\bash.exe"` to change the default shell.
-2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
-3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
-
-Once you've completed the setup, you'll be able to run the various commands provided from the command line.
-
-## Build Tabler locally
-
-1. From the root `/tabler` directory, run `npm run start` in the command line.
-2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
-3. Any change in `/src` directory will build the application and refresh the page.
-
-## Bugs and feature requests
-
-Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).

docs/ui/getting-started/how-to-contribute.mdx

@@ -0,0 +1,96 @@
+---
+title: How to Contribute
+summary: This guide explains how to contribute to Tabler, from setting up a development environment to making and testing changes. It covers essential steps like forking the repository, installing dependencies, and submitting a pull request to help improve Tabler's features and functionality.
+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.
+
+## Contribution Requirements
+
+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](/docs/ui/getting-started/browser-support)).
+
+## Installation
+
+Follow these steps to set up Tabler for development:
+
+1. Fork the repository: [Guide to forking](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+
+2. Clone the repository to your local machine:
+
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/tabler.git
+   ```
+
+3. Create a new branch for your changes:
+
+   ```bash
+   git checkout -b your-branch-name
+	```
+
+## Development
+
+To set up Tabler for development, follow these steps:
+
+<div className="steps">
+
+### Ensure Node.js and npm are installed
+
+You’ll need Node.js (v20 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
+
+- [Node.js](https://nodejs.org/)
+- [pnpm](https://pnpm.io/)
+
+### Install Ruby and Bundler
+
+Tabler uses Ruby and Bundler to manage dependencies. Install Ruby and Bundler by following the instructions in the [Ruby documentation](https://www.ruby-lang.org/en/documentation/installation/) and the [Bundler website](https://bundler.io/). 
+
+### Install dependencies
+
+Run the following command to install all required npm packages. We recommend using pnpm for faster installation:
+
+```bash
+pnpm install
+```
+
+### Install Jekyll
+
+Tabler uses Jekyll to build the documentation. Install Jekyll by running the following command:
+
+```bash
+bundle install
+```
+
+### Start developer mode
+
+Use the following command to enable autocompilation with live reload. This will start a local server at `http://localhost:3000/`:
+
+```bash
+pnpm run dev
+```
+
+### Make changes
+
+Make your changes in the appropriate folders, such as `./src/` or `./docs/`. Avoid modifying files in `./dist/`, as they are auto-generated during the build process and will be overwritten.
+</div>
+
+## Compiling for Production
+
+Before submitting a pull request, ensure your changes are properly compiled and tested:
+
+1. Compile the production files
+
+	```bash
+	pnpm run build
+	```
+
+2. Test all pages to confirm everything works as expected.
+
+## Submitting Your Contribution
+
+Once your changes are ready, create a pull request (PR) on GitHub. Make sure to include a clear and concise description of the changes and their purpose. Thank you for contributing to Tabler!

docs/ui/getting-started/installation.mdx

@@ -0,0 +1,67 @@
+---
+title: Installation
+order: 1
+summary: Learn how to set up Tabler in your project by creating a basic HTML file, adding Tabler’s CSS and JavaScript, and exploring its powerful components to build responsive and visually stunning web applications.
+description: "Set up Tabler: HTML, CSS, JS, and build stunning UIs."
+---
+
+This guide will take you through the essential steps to set up Tabler in your project, from creating a basic HTML file to incorporating Tabler’s styles and scripts. Let’s dive in!
+
+<div className="steps">
+
+### Step 1: Create a Basic HTML File
+
+Begin by creating a new `index.html` file in the root of your project. This file will serve as the foundation for your Tabler-based interface. Include the basic HTML structure and a `<meta name="viewport">` tag for proper responsiveness:
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tabler demo</title>
+</head>
+<body>
+  <h1>Hello, world!</h1>
+</body>
+</html>
+```
+
+### Step 2: Add Tabler CSS and JavaScript
+
+Enhance your page by including Tabler's CSS and JavaScript files. Use the following links to load the core Tabler styles and scripts from the CDN:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
+<script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+```
+
+Update your HTML file to include these resources:
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tabler Demo</title>
+  <link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
+</head>
+<body>
+  <h1>Hello, Tabler!</h1>
+  <script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+</body>
+</html>
+```
+
+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](/docs/ui/getting-started/download) page.
+
+### 3. Open in Your Browser
+
+Save the file and open it in your browser. You should see your first Tabler-powered page! From here, you can start adding layouts and components to create a fully functional and visually appealing web application.
+
+</div>
+
+With these simple steps, you're ready to explore Tabler's features and build stunning web interfaces. For inspiration and guidance, you can view live demos at [preview.tabler.io](https://preview.tabler.io) and consult our [official documentation](https://tabler.io/docs) for detailed instructions and examples.

docs/ui/getting-started/license.mdx

@@ -0,0 +1,30 @@
+---
+title: Tabler License
+summary: The MIT license grants you the flexibility to use Tabler in commercial or personal projects, modify its code, and distribute it freely. Ensure you include the required license and copyright notices to stay compliant with the terms.
+description: "Tabler's MIT license: freedom to use, modify, and share."
+---
+
+Tabler is an open-source project licensed under the **MIT license**, giving you extensive freedom to use, modify, and distribute the software. This license ensures that you can adapt Tabler to your needs while maintaining the required attributions. While attribution is not required, it is greatly appreciated to acknowledge the hard work of the developers.
+
+## What You Can Do with Tabler
+
+The MIT license allows you to:
+- Use Tabler in **commercial projects**.
+- Use Tabler in **personal or private projects**.
+- **Modify and customize** the source code to fit your requirements.
+- **Distribute** the original or modified code.
+- **Sublicense**: Integrate Tabler into projects with a more restrictive license.
+
+## What You Cannot Do with Tabler
+
+- The software is provided **“as is”**, meaning you cannot hold the authors or contributors liable for any issues, bugs, or damages that may arise from its use.
+
+## What You Must Do When Using Tabler
+
+When using Tabler, you must:
+1. Include the **license notice** in all copies of the work.
+2. Include the **copyright notice** in all copies of the work, except for the footer of the example HTML pages provided in the repository.
+
+For more details, please refer to the full [Tabler License](https://github.com/tabler/tabler/blob/main/LICENSE).
+
+By adhering to these requirements, you help ensure the continued openness and usability of Tabler for everyone. Thank you for supporting open-source software!

docs/ui/layout/navbars.mdx

@@ -0,0 +1,106 @@
+---
+title: Navbars
+summary: A navbar serves as a central navigation tool, offering users quick and easy access to key sections of a website or application, improving usability and enhancing the overall user experience.
+description: Create and customize responsive navigation bars with ease.
+---
+
+The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, buttons, branding elements, and even interactive components like dropdown menus or search bars.
+
+With Tabler's utility classes, creating and customizing a responsive navbar is straightforward. Whether you’re building a simple site or a complex dashboard, Tabler’s navbar utilities offer the flexibility to design navigation that aligns perfectly with your project’s requirements.
+
+
+
+## Sample navbar
+
+To create a navbar, use the `.navbar` class. The navbar is a horizontal bar that contains links to different sections of a website. It is typically placed at the top of the page and is used to provide navigation to the rest of the site.
+
+```html
+<header class="navbar navbar-expand-md d-print-none">
+  ...
+</header>
+```
+
+The navbar can contain links, buttons, and other elements. You can customize the appearance of the navbar by adding classes to the elements inside it.
+
+```html example fullpage vcentered background="surface" padding={0} height="20rem"
+<header class="navbar navbar-expand-md d-print-none">
+  <div class="container-xl">
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+      <a href="javascript:void(0)">
+        <svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
+          <path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-primary, #066fd1)"></path>
+          <path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a"></path>
+        </svg>
+      </a>
+    </div>
+    <ul class="navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="javascript:void(0)">
+          <span class="nav-link-icon">
+            <!-- Download SVG icon from http://tabler.io/icons/icon/home -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-home">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
+              <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
+              <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
+            </svg>
+          </span>
+          <span class="nav-link-title">
+            Home
+          </span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="javascript:void(0)">
+          <span class="nav-link-icon"><!-- Download SVG icon from http://tabler.io/icons/icon/checkbox -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-user">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
+              <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+            </svg>
+          </span>
+          <span class="nav-link-title">
+            Profile
+          </span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="javascript:void(0)">
+          <span class="nav-link-icon"><!-- Download SVG icon from http://tabler.io/icons/icon/checkbox -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M9 11l3 3l8 -8"></path>
+              <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path>
+            </svg>
+          </span>
+          <span class="nav-link-title">
+            Settings
+          </span>
+        </a>
+      </li>
+    </ul>
+    <div class="navbar-nav flex-row order-md-last ms-auto">
+      <div class="nav-item dropdown">
+        <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+          <span class="avatar avatar-sm" style="background-image: url(/static/samples/avatars/044m.jpg)"></span>
+          <div class="d-none d-xl-block ps-2">
+            <div>Paweł Kuna</div>
+            <div class="mt-1 small text-secondary">UI Designer</div>
+          </div>
+        </a>
+        <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+          <a href="#" class="dropdown-item">Status</a>
+          <a href="./profile.html" class="dropdown-item">Profile</a>
+          <a href="#" class="dropdown-item">Feedback</a>
+          <div class="dropdown-divider"></div>
+          <a href="./settings.html" class="dropdown-item">Settings</a>
+          <a href="./sign-in.html" class="dropdown-item">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+```

docs/ui/layout/navs-tabls.mdx

@@ -0,0 +1,187 @@
+---
+title: Navs and tabs
+summary: This guide covered the basics of creating different types of navigation bars and tabs, including horizontal, vertical, pill-shaped, and underline-styled navs. 
+description: "Essential guide to nav styles: tabs, pills, dropdowns, and more."
+---
+
+Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects.
+
+## Horizontal nav
+
+If you want to create a horizontal navigation bar, you can use the `.nav` class. The `.nav-item` class is used to style each item within the navigation bar, and `.nav-link` is applied to the links. The `.active` class highlights the current active link, while the `.disabled` class styles non-clickable links.
+
+```html
+<ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+Look at the example below to see how the horizontal navigation bar is displayed.
+ 
+```html example centered 
+<ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Vertical nav
+
+To create a vertical navigation bar, add the `.flex-column` class to the `.nav` element. This arranges the navigation items in a column instead of a row, making it suitable for sidebars or vertical menus.
+
+```html
+<ul class="nav flex-column">
+	...
+</ul>
+```
+
+There is an example below to see how the vertical navigation bar is displayed.
+
+```html example centered
+<ul class="nav flex-column">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Tabs
+
+To create a tabbed navigation interface, use the `.nav-tabs` class. This is ideal for displaying different content sections within a single interface, where each tab represents a section.
+
+```html
+<ul class="nav nav-tabs">
+	...
+</ul>
+```
+
+Example below shows how the tabbed navigation interface is displayed.
+
+```html example centered 
+<ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Pills
+
+For a pill-shaped navigation style, use the `.nav-pills` class. This is a great choice for a sleek, modern look, especially in interactive UI components.
+
+```html example centered
+<ul class="nav nav-pills">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Underline
+
+To create a navigation bar with an underline effect for active links, use the `.nav-underline` class. This provides a clean and minimalistic style.
+
+```html example centered
+<ul class="nav nav-underline">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Tabs with Dropdown
+
+You can enhance tabs by adding dropdown menus using the `.dropdown` class inside a `.nav-tabs` structure. This allows for additional options under a single tab, improving the navigation experience.
+
+```html
+<ul class="nav nav-tabs">
+  ...
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+  ...
+</ul>
+```
+
+Example below shows how tabs with dropdown menus are displayed.
+
+```html example centered height="15rem"
+<ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```

docs/ui/layout/page-layouts.mdx

@@ -5,12 +5,14 @@ description: Learn to design dashboard layouts.
 ---
 
 <Callout>
-   Before you start with this section, make sure you have followed the [installation guideline](/docs/ui/getting-started/download). 
+   Before you start with this section, make sure you have followed the [installation guideline](/docs/ui/getting-started/installation). 
 </Callout>
 
 ## Sample layout
 
-```html example fullpage resizable height="30rem"
+To create a sample version of the dashboard, you can use the following code snippet. This code snippet will help you to create a dashboard layout with a header.
+
+```html example fullpage resizable height="30rem" background="surface"
 <div class="page">
   <header class="navbar navbar-expand-sm navbar-light d-print-none">
     <div class="container-xl">
@@ -19,7 +21,6 @@ description: Learn to design dashboard layouts.
           <img src="https://preview.tabler.io/static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image" />
         </a>
       </h1>
-
       <div class="navbar-nav flex-row order-md-last">
         <div class="nav-item">
           <a href="#" class="nav-link d-flex lh-1 text-reset p-0">
@@ -66,10 +67,12 @@ description: Learn to design dashboard layouts.
 
 ## Sidebar layout
 
-```html example fullpage resizable height="30rem"
+To create a sidebar layout, you can use the following code snippet. This code snippet will help you to create a sidebar layout with a header.
+
+```html example fullpage resizable height="30rem" background="surface"
 <div class="page">
   <!-- Sidebar -->
-  <aside class="navbar navbar-vertical navbar-expand-sm navbar-dark">
+  <aside class="navbar navbar-vertical navbar-expand-sm" data-bs-theme="dark">
     <div class="container-fluid">
       <button class="navbar-toggler" type="button">
         <span class="navbar-toggler-icon"></span>

docs/ui/utilities/borders.mdx

@@ -6,17 +6,7 @@ description: Style elements with border utilities.
 
 ## Border direction
 
-The following border utilities classes will add border to any side of an element.
+Borders can be applied to specific sides of an element using utility classes. This is particularly useful for styling individual sides of a box, such as highlighting the top border for emphasis or applying a separator between elements. Below are examples of how to set borders for each side of an element.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-top">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-end">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-bottom">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-start">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-x">6</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y">7</div>
-```
 
 ```html
 <div class="border">1</div>
@@ -28,15 +18,20 @@ The following border utilities classes will add border to any side of an element
 <div class="border-y">7</div>
 ```
 
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-top">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-end">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-bottom">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-start">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-x">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y">7</div>
+```
+
+
 ## Border size
 
-Below are the available border size utilities classes.
+Border size utilities allow you to control the thickness of borders, providing flexibility to suit different design needs. You can add no border, a standard border, or a wide border for a more prominent effect. These classes are especially useful for creating visual hierarchy or highlighting specific elements.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
-```
 
 ```html
 <div class="border-0">1</div>
@@ -44,18 +39,15 @@ Below are the available border size utilities classes.
 <div class="border-wide">3</div>
 ```
 
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
+```
+
 ## Remove border
 
-You can remove a border on a single side of an element by using the following border utilities classes.
+If you want to selectively remove borders from specific sides of an element, you can use border removal utilities. This feature simplifies styling tasks, such as creating a seamless connection between elements or achieving minimalistic designs.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-end-0">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-bottom-0">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-start-0">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-x-0">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0">6</div>
-```
 
 ```html
 <div class="border border-top-0">1</div>
@@ -66,20 +58,19 @@ You can remove a border on a single side of an element by using the following bo
 <div class="border border-y-0">6</div>
 ```
 
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-end-0">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-bottom-0">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-start-0">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-x-0">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0">6</div>
+```
+
+
 ## Border color
 
-You can set a border color of any side of an element by adding the following utilities classes below.
+Customizing the border color helps to enhance the visual appeal and consistency of your design. With utility classes, you can easily apply specific colors to borders, allowing for greater flexibility in creating visually distinct sections.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
-```
 
 ```html
 <div class="border border-primary">1</div>
@@ -92,18 +83,20 @@ You can set a border color of any side of an element by adding the following uti
 <div class="border border-light">8</div>
 ```
 
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
+```
+
 ## Border radius
 
-You can set a border to any element by using the following utilities classes below.
+Adding border radius gives elements smooth, rounded edges, which can make designs feel more modern and approachable. You can choose from various levels of rounding, including full circles, using the available utility classes.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-1">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-2">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-3">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-circle">6</div>
-```
 
 ```html
 <div class="border rounded-0">1</div>
@@ -113,3 +106,29 @@ You can set a border to any element by using the following utilities classes bel
 <div class="border rounded-3">5</div>
 <div class="border rounded-circle">6</div>
 ```
+
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-1">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-2">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-3">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-circle">6</div>
+```
+
+
+## Border opacity
+
+You can adjust the opacity of borders to create subtle visual effects or to blend elements seamlessly into the background. By using border opacity utilities, you can control the transparency of borders, allowing for more creative and visually appealing designs. To change the opacity of a border, add the `border-opacity-*` class to the element.
+
+```html
+<div class="border border-success border-opacity-50">This is 50% opacity success border</div>
+```
+
+```html example 
+<div class="border border-success p-2 mb-2">This is default success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
+<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
+```

docs/ui/utilities/cursors.mdx

@@ -24,56 +24,6 @@ Use one of the available cursor utilities depending on the action you want to in
 - `.cursor-grab` - a cursor which shows that a user can grab an element
 - `.cursor-grabbing` - a cursor which shows that a user is grabbing an element
 
-```html example background="white" height="20rem" vcentered
-<div class="row row-cards text-center">
-  <div class="col-2">
-    <div class="cursor-auto bg-light py-3">auto</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-pointer bg-light py-3">pointer</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-move bg-light py-3">move</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-not-allowed bg-light py-3">not-allowed</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-zoom-in bg-light py-3">zoom-in</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-zoom-out bg-light py-3">zoom-out</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-default bg-light py-3">default</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-none bg-light py-3">none</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-help bg-light py-3">help</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-progress bg-light py-3">progress</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-wait bg-light py-3">wait</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-text bg-light py-3">text</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-v-text bg-light py-3">vertical-text</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-grab bg-light py-3">grab</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-grabbing bg-light py-3">grabbing</div>
-  </div>
-</div>
-```
-
 ```html
 <div class="cursor-auto">auto</div>
 <div class="cursor-pointer">pointer</div>
@@ -91,3 +41,23 @@ Use one of the available cursor utilities depending on the action you want to in
 <div class="cursor-grab">grab</div>
 <div class="cursor-grabbing">grabbing</div>
 ```
+
+The results can be seen in the example below.
+
+```html example height="20rem" separated centered
+<div class="cursor-auto bg-light p-3">auto</div>
+<div class="cursor-pointer bg-light p-3">pointer</div>
+<div class="cursor-move bg-light p-3">move</div>
+<div class="cursor-not-allowed bg-light p-3">not-allowed</div>
+<div class="cursor-zoom-in bg-light p-3">zoom-in</div>
+<div class="cursor-zoom-out bg-light p-3">zoom-out</div>
+<div class="cursor-default bg-light p-3">default</div>
+<div class="cursor-none bg-light p-3">none</div>
+<div class="cursor-help bg-light p-3">help</div>
+<div class="cursor-progress bg-light p-3">progress</div>
+<div class="cursor-wait bg-light p-3">wait</div>
+<div class="cursor-text bg-light p-3">text</div>
+<div class="cursor-v-text bg-light p-3">vertical-text</div>
+<div class="cursor-grab bg-light p-3">grab</div>
+<div class="cursor-grabbing bg-light p-3">grabbing</div>
+```

docs/ui/utilities/interactions.mdx

@@ -8,7 +8,7 @@ description: Modify user interactions efficiently.
 
 Change the way in which the content is selected when the user interacts with it.
 
-```html example
+```html example columns={1} centered separated
 <p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
 <p class="user-select-auto">This paragraph has default select behavior.</p>
 <p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
@@ -18,7 +18,7 @@ Change the way in which the content is selected when the user interacts with it.
 
 Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
 
-```html example
+```html example columns={1} centered separated
 <p>
   <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.
 </p>

docs/ui/utilities/margins.mdx

@@ -0,0 +1,234 @@
+---
+title: Margins
+summary: Use margin utilities to control the space between elements.
+description: Control the space between elements with margin utilities.
+---
+
+Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes.
+
+
+### Margin size
+
+In table below you can see the available margin sizes.
+
+Name|Value
+-|-
+0|0
+1|0.25rem
+2|0.5rem
+3|1rem
+4|1.5rem
+5|2rem
+6|3rem
+7|5rem
+8|8rem
+
+
+### Margin
+
+Use the `.m-*` utilities to control the margin of an element. Margin utilities are used to create consistent spacing around an element, ensuring that the layout is visually balanced.
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-0 bg-purple rounded text-white font-monospace">.m-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-4 bg-purple rounded text-white font-monospace">.m-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-8 bg-purple rounded text-white font-monospace">.m-8</div>
+  </div>
+</div>
+```
+
+### Start margin
+
+Start margins control the spacing to the left of an element, helping to create consistent horizontal gaps between elements. Start margin class names are prefixed with `ms-`.
+
+```html
+<div class="ms-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-0 bg-red rounded text-white font-monospace">.ms-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-4 bg-red rounded text-white font-monospace">.ms-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-8 bg-red rounded text-white font-monospace">.ms-8</div>
+  </div>
+</div>
+```
+
+### End margin
+
+End margins control the spacing on the right side of an element. These utilities are helpful for creating visual separation between elements that flow horizontally. End margin class names are prefixed with `me-`.
+
+```html
+<div class="me-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 ms-0 bg-orange rounded text-white font-monospace">.me-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 me-4 bg-orange rounded text-white font-monospace">.me-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 me-8 bg-orange rounded text-white font-monospace">.me-8</div>
+  </div>
+</div>
+```
+
+### Top margin
+
+Top margins define the spacing above an element. This is useful for separating stacked components or creating vertical spacing between sections. Top margin class names are prefixed with `mt-`.
+
+```html
+<div class="mt-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-0 bg-yellow rounded text-white font-monospace">.mt-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-4 bg-yellow rounded text-white font-monospace">.mt-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-8 bg-yellow rounded text-white font-monospace">.mt-8</div>
+  </div>
+</div>
+```
+
+### Bottom margin
+
+Bottom margins control the spacing below an element, helping to create consistent vertical gaps between stacked elements. Bottom margin class names are prefixed with `mb-`.
+
+```html
+<div class="mb-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-0 bg-lime rounded text-white font-monospace">.mb-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-4 bg-lime rounded text-white font-monospace">.mb-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-8 bg-lime rounded text-white font-monospace">.mb-8</div>
+  </div>
+</div>
+```
+
+### Horizontal margin
+
+Use the `mx-*` utilities to control the horizontal margin of an element. Horizontal margin utilities are used to create consistent spacing between elements that flow horizontally.
+
+```html
+<div class="mx-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-0 bg-azure rounded text-white font-monospace">.mx-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-4 bg-azure rounded text-white font-monospace">.mx-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-8 bg-azure rounded text-white font-monospace">.mx-8</div>
+  </div>
+</div>
+```
+
+
+### Vertical margin
+
+Use the `my-*` utilities to control the vertical margin of an element. Vertical margin utilities are used to create consistent spacing between elements that flow vertically.
+
+```html
+<div class="my-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-0 bg-blue rounded text-white font-monospace">.my-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-4 bg-blue rounded text-white font-monospace">.my-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-8 bg-blue rounded text-white font-monospace">.my-8</div>
+  </div>
+</div>
+```
+
+## Horizontal centering
+
+Additionally, Tabler also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a width set—by setting the horizontal margins to `auto`.
+
+```html
+<div class="mx-auto">...</div>
+```
+
+```html example hide-code centered vertical
+<div class="bg-teal-lt w-100 d-flex">
+  <div class="px-3 py-2 mx-auto bg-teal rounded text-white font-monospace">.mx-auto</div>
+</div>
+```
+
+## Gap
+
+Use the `.gap-*` utilities to control the space between elements in a grid layout. The gap utilities are used to create consistent spacing between grid items, ensuring that the layout is visually balanced.
+
+```html
+<div class="d-grid gap-6">...</div>
+```
+
+```html example 
+<div class="d-grid gap-6 bg-indigo-lt">
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 1</div>
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 2</div>
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 3</div>
+</div>
+```

docs/ui/utilities/vertical-align.mdx

@@ -0,0 +1,66 @@
+---
+title: Vertical align
+description: Quickly and easily align elements vertically with utility classes.
+summary: Easily modify the vertical alignment of elements such as inline, inline-block, inline-table, and table-cell to ensure proper positioning and alignment within their parent containers, allowing for more precise control over your layout and design.
+---
+
+Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
+
+## Inline elements
+
+Use vertical alignment utilities to align inline-level elements relative to their surrounding text or baseline. These classes are particularly useful for aligning small inline elements like icons or badges alongside text.
+
+```html
+<span class="align-baseline">baseline</span>
+<span class="align-top">top</span>
+<span class="align-middle">middle</span>
+<span class="align-bottom">bottom</span>
+<span class="align-text-top">text-top</span>
+<span class="align-text-bottom">text-bottom</span>
+```
+
+```html example centered 
+<div>
+  <span class="align-baseline">baseline</span>
+  <span class="align-top">top</span>
+  <span class="align-middle">middle</span>
+  <span class="align-bottom">bottom</span>
+  <span class="align-text-top">text-top</span>
+  <span class="align-text-bottom">text-bottom</span>
+</div>
+```
+
+## Table cells
+
+Vertical alignment utilities are also applicable to table cells, allowing you to control the alignment of content within a cell. This is especially useful for creating well-structured and visually appealing tables where the content aligns consistently across rows and columns.
+
+
+```html
+<table>
+  <tbody>
+    <tr>
+      <td class="align-baseline">baseline</td>
+      <td class="align-top">top</td>
+      <td class="align-middle">middle</td>
+      <td class="align-bottom">bottom</td>
+      <td class="align-text-top">text-top</td>
+      <td class="align-text-bottom">text-bottom</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```html example
+<table style="height: 100px;">
+  <tbody>
+    <tr>
+      <td class="align-baseline">baseline</td>
+      <td class="align-top">top</td>
+      <td class="align-middle">middle</td>
+      <td class="align-bottom">bottom</td>
+      <td class="align-text-top">text-top</td>
+      <td class="align-text-bottom">text-bottom</td>
+    </tr>
+  </tbody>
+</table>
+```

docs/ui/utilities/visually-hidden.mdx

@@ -0,0 +1,12 @@
+---
+title: Visually hidden
+summary: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
+---
+
+Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
+
+```html
+<h2 class="visually-hidden">Title for screen readers</h2>
+<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
+<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta23",
+  "version": "1.0.0-beta24",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
@@ -106,11 +106,11 @@
       },
       {
         "path": "./dist/css/tabler-vendors.css",
-        "maxSize": "7 kB"
+        "maxSize": "7.5 kB"
       },
       {
         "path": "./dist/css/tabler-vendors.min.css",
-        "maxSize": "6 kB"
+        "maxSize": "6.5 kB"
       },
       {
         "path": "./dist/js/tabler.js",
@@ -166,6 +166,7 @@
     "gulp-terser": "^2.1.0",
     "imageoptim-cli": "^3.1.9",
     "imask": "^7.6.1",
+    "js-beautify": "^1.15.1",
     "jsvectormap": "^1.6.0",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
@@ -173,7 +174,6 @@
     "plyr": "^3.7.8",
     "postcss": "^8.4.49",
     "prettier": "^2.8.8",
-    "js-beautify": "^1.15.1",
     "release-it": "^15.11.0",
     "request": "^2.88.2",
     "rollup": "2.79.2",
@@ -183,6 +183,7 @@
     "star-rating.js": "^4.3.1",
     "tinymce": "^7.5.1",
     "tom-select": "^2.4.1",
+    "typed.js": "^2.1.0",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "yaml": "^2.6.1",
@@ -211,7 +212,8 @@
     "plyr": "^3.7.8",
     "star-rating.js": "^4.3.0",
     "tinymce": "^6.4.2 || ^7.0.0",
-    "tom-select": "^2.2.2"
+    "tom-select": "^2.2.2",
+    "typed.js": "^2.1.0"
   },
   "peerDependenciesMeta": {
     "@melloware/coloris": {

pnpm-lock.yaml

@@ -177,6 +177,9 @@ importers:
       tom-select:
         specifier: ^2.4.1
         version: 2.4.1
+      typed.js:
+        specifier: ^2.1.0
+        version: 2.1.0
       vinyl-buffer:
         specifier: ^1.0.1
         version: 1.0.1
@@ -4519,6 +4522,9 @@ packages:
   typed-array-length@1.0.4:
     resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
 
+  typed.js@2.1.0:
+    resolution: {integrity: sha512-bDuXEf7YcaKN4g08NMTUM6G90XU25CK3bh6U0THC/Mod/QPKlEt9g/EjvbYB8x2Qwr2p6J6I3NrsoYaVnY6wsQ==}
+
   typedarray-to-buffer@3.1.5:
     resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
 
@@ -9817,6 +9823,8 @@ snapshots:
       for-each: 0.3.3
       is-typed-array: 1.1.10
 
+  typed.js@2.1.0: {}
+
   typedarray-to-buffer@3.1.5:
     dependencies:
       is-typedarray: 1.0.0

src/pages/_data/illustrations.json

@@ -1 +1 @@
-["weightlifting","wait","video","to-do","telescope","snowman","shield","search","project","not-found","neutral-info","music","mobile-computer","message","map-destination","loading","kite","icons","icons-workshop","icons-production","icons-ladder","icons-drawing","icons-drawing-run","ice-skates","guitar","good-news","girl-refresh","girl-phone","gift","folders","flowers","fingerprint","exit","error","email","electric-scooter","dart","dance","conversation","computer-fix","clock-and-cat","chart","chart-circle","calendar","building","boy","boy-with-key","boy-gives-flowers","boy-girl","boy-and-laptop","boy-and-cat","bicycle","bad-news","archive","ai"]
+["weightlifting","wait","video","to-do","tiredness","telescope","snowman","shield","search","project","printer","not-found","new-year","new-year-2","neutral-info","music","mobile-computer","message","map-destination","loading","kite","icons","icons-workshop","icons-production","icons-ladder","icons-drawing","icons-drawing-run","ice-skates","halloween-pumpkin","guitar","good-news","girl-refresh","girl-phone","gift","ghost","folders","flowers","fingerprint","exit","error","email","electric-scooter","dart","dance","conversation","computer-fix","clock-and-cat","christmas-tree","christmas-gifts","christmas-fireplace","chart","chart-circle","calendar","building","boy","boy-with-key","boy-refresh","boy-gives-flowers","boy-girl","boy-and-laptop","boy-and-cat","bicycle","bad-news","archive","ai"]

src/pages/_data/libs.json

@@ -24,7 +24,8 @@
     "plyr": "plyr/dist/plyr.min.js",
     "dropzone": "dropzone/dist/dropzone-min.js",
     "star-rating.js": "star-rating.js/dist/star-rating.min.js",
-    "coloris.js": "@melloware/coloris/dist/umd/coloris.min.js"
+    "coloris.js": "@melloware/coloris/dist/umd/coloris.min.js",
+    "typed.js": "typed.js/dist/typed.umd.js"
   },
   "css": {
     "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css",

src/pages/_data/menu.yml

@@ -233,6 +233,10 @@ extra:
       title: Logs
       url: logs.html
       badge: New
+    marketing:
+      title: Marketing
+      url: marketing.html
+      badge: New
     music:
       title: Music
       url: music.html

src/pages/_data/real-estate.yml

@@ -0,0 +1,43 @@
+
+
+- name: Cozy Cottage
+  address: 123 Main Street
+  baths: 2
+  bedrooms: 3
+  image: photo-1558036117-15d82a90b9b1.jpg
+  price: $250,000
+
+- name: Modern Townhouse
+  address: 456 Elm Avenue
+  baths: 3
+  bedrooms: 4
+  image: photo-1494526585095-c41746248156.jpg
+  price: $450,000
+
+- name: Spacious Villa
+  address: 789 Oak Drive
+  baths: 5
+  bedrooms: 6
+  image: photo-1512917774080-9991f1c4c750.jpg
+  price: $1,200,000
+
+- name: Rustic Farmhouse
+  address: 321 Pine Lane
+  baths: 2
+  bedrooms: 2
+  image: photo-1564013799919-ab600027ffc6.jpg
+  price: $350,000
+
+- name: Beachfront Condo
+  address: 567 Sandy Beach Road
+  baths: 2
+  bedrooms: 1
+  image: photo-1580587771525-78b9dba3b914.jpg
+  price: $500,000
+
+- name: Luxury Penthouse
+  address: 890 Highrise Avenue
+  baths: 4
+  bedrooms: 3
+  image: photo-1592595896551-12b371d546d5.jpg
+  price: $2,000,000

src/pages/_data/testimonials.yml

@@ -0,0 +1,20 @@
+- "Ever since I started using Tabler, my HTML designing process has been significantly smoother. Its intuitive interface is a breath of fresh air!"
+- "I'm beyond impressed with Tabler. This UI kit has transformed my workflow for the better. It's easy to use, streamlined, and remarkably efficient."
+- "Tabler's feature-rich package has drastically improved my website design process. It's an absolute game-changer in the UI kit landscape."
+- "Having used many UI kits in the past, I can confidently say that Tabler stands out. The level of customization it offers is unparalleled."
+- "What I love about Tabler is its sleek design and ease of use. It's really simplified my HTML designing work. Five stars from me!"
+- "I'd recommend Tabler to anyone, whether they're a seasoned pro or a beginner in HTML design. Its versatility and user-friendly nature make it a cut above the rest."
+- "Navigating through Tabler has been a breeze! Its intuitive layout helps me save time and focus more on the creative aspect of my work."
+- "With Tabler, designing HTML has never been more straightforward. The kit's sleek features and functionalities have taken my design work to new heights."
+- "Tabler has revolutionized the way I approach HTML design. Its array of tools and efficient interface make it a must-have for any designer."
+- "I'm truly amazed by Tabler's capabilities. It's not just an HTML UI kit, it's a design powerhouse that has made my work a lot more efficient and enjoyable."
+- "As a web developer, Tabler has revolutionized my workflow. The HTML UI kit is exceptionally well-structured, making my projects much more efficient and visually appealing."
+- "Tabler has transformed the way I approach web design. It's intuitive, easy to use, and has saved me countless hours of coding from scratch. A real game-changer!"
+- "The breadth of design options that Tabler provides is astounding. It has added a whole new level of professionalism to my websites and made my job a lot easier."
+- "I've been in the web development industry for years and I must say, Tabler is one of the best HTML UI kits I've come across. It's user-friendly and allows for a high degree of customization."
+- "Since I've started using Tabler, I've noticed a significant improvement in my work. It's streamlined, efficient, and helps me produce better results for my clients."
+- "Using Tabler has been a fantastic experience. The number of components it offers has allowed me to design more efficiently, and its consistent updates ensure that it always stays ahead of the curve."
+- "Tabler is a web designer's dream come true. The HTML UI kit offers so many features and functionalities that make my design process more streamlined and efficient."
+- "I cannot recommend Tabler enough! This HTML UI kit is a must-have for any web developer looking to level up their design game."
+- "From a beginner's perspective, Tabler has been a lifesaver. It has enabled me to create professional-quality websites without needing advanced coding skills."
+- "Tabler offers the perfect balance of simplicity and sophistication. It has greatly improved my workflow and I can't imagine working on web development projects without it."

src/pages/_includes/cards/company-lookup.html

@@ -113,14 +113,14 @@
          </div>
          <div class="col-5">
             <ul class="list-unstyled list-separated">
-               <li class="list-separated-item">
+               <li>
                   <h5>Description</h5>
                   <div class="text-secondary-dark">
                      Online shopping from the earth's biggest selection of books, magazines, music, DVDs, videos,
                      electronics, computers, software, apparel & acc…
                   </div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5>Tags</h5>
                   <div>
                      <span class="tag">E-Commerce &amp; Marketplaces</span>
@@ -131,27 +131,27 @@
                      <span class="tag">Technology</span>
                   </div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">Industry</h5>
                   <div>Internet Software &amp; Services</div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">Sector</h5>
                   <div>Information Technology</div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">SIC Code</h5>
                   <div>59</div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">NAICS Code</h5>
                   <div>45</div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">EIN</h5>
                   <div>911646860</div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">Technologies</h5>
                   <div>
                      <span class="tag text-uppercase">amazon associates</span>
@@ -161,37 +161,37 @@
                      <span class="tag text-uppercase">typekit by adobe</span>
                   </div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">Alexa US Rank</h5>
                   <div>5</div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">Alexa Global Rank</h5>
                   <div>10</div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">Fiscal Year End</h5>
                   <div>End of December</div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">Phone</h5>
                   <div>
                      <a href="tel:+1 206-266-1000">+1 206-266-1000</a>
                   </div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">Crunchbase</h5>
                   <div>
                      <a href="#">crunchbase.com/organization/amazon</a>
                   </div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">Twitter</h5>
                   <div>
                      <a href="#">twitter.com/amazon</a>
                   </div>
                </li>
-               <li class="list-separated-item">
+               <li>
                   <h5 class="mb-1">Facebook</h5>
                   <div>
                      <a href="#">facebook.com/amazon</a>

src/pages/_includes/layout/navbar-logo.html

@@ -5,9 +5,9 @@
 
 {% if include.header %}
 <div {{ class-attr }}>
-	<a href="{{ site.base }}">
+	<a href="{{ site.base }}{% if include.href %}/{{ include.href }}{% endif %}">
 {% else %}
-	<a href="{{ site.base }}" {{ class-attr }}>
+	<a href="{{ site.base }}{% if include.href %}/{{ include.href }}{% endif %}" {{ class-attr }}>
 {% endif %}
 	{% unless include.hide-logo %}
 	{% if include.small-logo %}

src/pages/_includes/marketing/brands/cgi.svg

@@ -0,0 +1 @@
+<svg width="57" height="27" xmlns="http://www.w3.org/2000/svg"><path d="M14.115 5.218c-5.14 0-8.292 4.068-8.292 8.175 0 4.942 3.977 8.174 8.33 8.174 2.889 0 5.628-1.293 7.955-3.384v6.122c-2.44 1.482-5.779 2.395-8.368 2.395C6.31 26.7.082 20.579.082 13.393.082 5.789 6.348.086 13.777.086c2.852 0 6.192.874 8.368 1.977V8.07c-2.739-1.825-5.516-2.852-8.03-2.852zM38.485 26.7c-7.6 0-14.017-5.893-14.017-13.307 0-7.49 6.379-13.307 14.362-13.307 2.903 0 6.494.76 8.71 1.787v5.969c-2.522-1.445-5.769-2.624-8.596-2.624-5.232 0-8.632 4.068-8.632 8.175 0 4.828 4.01 8.326 8.71 8.326.992 0 1.947-.076 3.17-.532v-4.79h-4.278V11.34h9.778v13.459c-2.789 1.255-5.92 1.901-9.206 1.901zm12.691-1.157V.086h5.806v25.457h-5.806z" fill="currentColor" fill-rule="evenodd"/></svg>

src/pages/_includes/marketing/brands/docplanner.svg

@@ -0,0 +1 @@
+<svg width="157" height="28" xmlns="http://www.w3.org/2000/svg"><path d="M149.521 9.204h2.522l.207 2.117h.026c.645-.969 2.215-2.21 4.044-2.314v2.761c-2.664.536-3.886 2.355-3.886 4.006v6.58h-2.913V9.203zm-13.407 6.615v-.054c0-4.044 1.911-6.955 5.864-6.955 3.665 0 5.367 2.183 5.367 6.766 0 .486-.033 1.156-.084 1.649h-8.092c.21 1.852 1.258 2.959 3.41 2.959 1.36 0 2.64-.132 3.825-.291v2.511c-1.332.215-2.462.344-3.902.344-4.189 0-6.388-2.157-6.388-6.929zm3.01-.83h5.263c0-2.057-.524-3.681-2.487-3.681-2.042 0-2.723 1.733-2.775 3.682zm-16.353-5.785h2.535s.117 1.305.169 1.775h.034c.702-1.133 2.177-2.17 3.96-2.17 3.011 0 4.506 1.652 4.506 5.002v8.542h-2.913V14.43c0-2.138-.799-2.976-2.37-2.862-1.422.103-3.009 1.777-3.009 3.87v6.916h-2.912V9.204zm-13.727 0h2.535s.118 1.305.17 1.775h.034c.702-1.133 2.176-2.17 3.96-2.17 3.011 0 4.506 1.652 4.506 5.002v8.542h-2.913V14.43c0-2.138-.8-2.976-2.37-2.862-1.422.103-3.01 1.777-3.01 3.87v6.916h-2.912V9.204zM97.571 8.95c1.265-.108 2.638-.14 3.963-.14 3.123 0 4.986 1.243 4.986 4.755v8.788h-2.62l-.13-1.315h-.033c-.898.996-2.203 1.578-3.873 1.578-2.213 0-3.971-1.476-3.971-4.4 0-2.72 2.202-5.253 7.714-4.048v-.792c0-1.567-.892-2.005-2.65-2.005-1.08 0-1.994.075-3.386.198v-2.62zm6.036 7.299c-2.335-.612-4.67.14-4.67 1.998 0 1.233.794 1.958 1.979 1.903.933-.042 1.961-.469 2.691-1.135V16.25zm-9.91-12.304v18.408h-2.912V4.293l2.913-.348zm-16.702 5.26h2.46l.158 1.423h.047c.854-1.064 2.284-1.818 3.933-1.818 3.274 0 5.028 2.507 5.028 6.768v.135c0 4.098-1.754 7.037-5.42 7.037-1.283 0-2.54-.512-3.3-1.105v5.77h-2.906V9.205zm2.906 3.85v6.055c.603.486 1.572.917 2.514.917 2.462 0 3.169-1.968 3.169-4.287 0-2.104-.393-4.142-2.776-4.142-1.152 0-2.266.698-2.907 1.457zm-11.8 2.724c.007 2.872 1.216 4.405 3.621 4.405 1.017 0 2.05-.13 2.988-.26v2.43a17.79 17.79 0 0 1-3.356.328c-3.588 0-6.287-2.034-6.298-6.903.011-4.87 2.71-6.904 6.298-6.904 1.31 0 2.585.17 3.356.33v2.428c-.938-.13-1.971-.26-2.988-.26-2.405 0-3.614 1.533-3.622 4.406zm-16.899.067v-.135c0-4.394 1.964-6.901 6.022-6.901 4.031 0 5.995 2.507 5.995 6.901v.135c0 4.394-1.964 6.902-5.995 6.902-4.058 0-6.022-2.508-6.022-6.902zm6.015-4.538c-2.062 0-3.014 1.44-3.014 4.451 0 3.01.952 4.425 3.014 4.425s2.987-1.41 2.987-4.425c0-3.015-.925-4.451-2.987-4.451zM35.752 22.353V3.945h4.49c6.256 0 9.168 1.935 9.168 9.204 0 7.27-2.911 9.204-9.168 9.204h-4.49zm10.314-9.204c0-4.139-.816-6.227-5.127-6.227H38.94v12.454h1.999c4.311 0 5.127-2.089 5.127-6.227zM14.87 21.254c.646-1.63 2.461-3.91 4.314-5.086l4.1 6.987-4.2 3.143-4.214-5.044zM8.813 26.29l-5.782-3.83C7.41 14.034 15.59 8.033 25.204 6.915l1.61 5.109c-7.925 1.607-14.538 6.994-18 14.266zm1.262-17.344L10.805 0H16l.66 8.09c-2.98 1.053-4.733 1.894-6.741 3.165a21.455 21.455 0 0 0-4.037 3.288L0 11.986l1.603-5.094 8.472 2.054z" fill="currentColor" fill-rule="nonzero"/></svg>

src/pages/_includes/marketing/brands/flow.svg

@@ -0,0 +1 @@
+<svg width="106" height="28" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="M46.45 4.633h12.902v3.829h-8.556v4.353h6.508v3.714h-6.508v7.315h-4.347V4.63v.004zm15.135 0h4.149v19.212h-4.15V4.632v.001zm14.137 16.074a2.996 2.996 0 0 0 2.406-1.125c.28-.348.49-.744.618-1.168.136-.431.202-.88.202-1.338.001-.454-.067-.906-.202-1.34a3.355 3.355 0 0 0-.618-1.154 3.15 3.15 0 0 0-1.022-.805 3.037 3.037 0 0 0-1.382-.301c-.517 0-.985.098-1.399.301-.396.19-.743.466-1.016.805a3.708 3.708 0 0 0-.619 1.153 4.176 4.176 0 0 0-.215 1.339c0 .46.071.906.215 1.338.142.434.348.82.616 1.167.27.345.61.619 1.022.82.413.203.88.302 1.398.302v.005h-.004zm-7.255-3.63c0-1 .177-1.936.532-2.81a7.154 7.154 0 0 1 1.483-2.29 6.842 6.842 0 0 1 2.29-1.54c.894-.374 1.878-.562 2.953-.562 1.076 0 2.054.186 2.938.56a6.851 6.851 0 0 1 2.275 1.536 7.075 7.075 0 0 1 1.482 2.29c.355.874.532 1.81.532 2.81a7.352 7.352 0 0 1-.534 2.806 7.024 7.024 0 0 1-1.481 2.291 7.07 7.07 0 0 1-2.27 1.553c-.884.386-1.862.579-2.937.579-1.076 0-2.06-.193-2.955-.579a7.008 7.008 0 0 1-2.29-1.555 7.117 7.117 0 0 1-1.478-2.291 7.44 7.44 0 0 1-.529-2.81l-.006.007-.005.005zm15.464-6.743h4.262l2.36 8.67 2.62-8.67h3.312l2.647 8.67 2.364-8.67h4.177l-4.638 13.511h-3.743l-2.536-7.548-2.503 7.548h-3.684l-4.64-13.51h.002z" fill-rule="nonzero"/><path d="M12.507.06c.494-.045.99-.065 1.486-.059 7.665 0 13.819 6.063 13.877 13.69-.052 2.36-1.7 4.236-3.943 4.236-2.265 0-4.226-1.568-4.226-4.24 0-3.058-2.695-5.474-5.933-5.474-3.234 0-5.564 2.62-5.607 5.76 0 5.5 3.23 10.673 7.739 12.979.384.237.534.26.884.452-1.004.273-2.16.367-2.793.367C6.265 27.771 0 21.643 0 13.972 0 6.855 5.43.806 12.504.06h.003z"/><path d="M21.495.282c5.225 1.986 8.666 7.817 8.712 13.69-.07 3.278-2.805 5.651-5.703 5.651-2.895 0-5.897-2.015-5.897-5.654 0-2.428-1.886-4.078-4.244-4.078-2.22 0-3.912 1.77-3.912 4.078 0 2.003.398 3.133.597 3.959.197.827.984 2.368 1.002 2.406.074.146.822 1.49 1.774 2.613a14.514 14.514 0 0 0 2.081 1.956c.077.059.687.51.92.664.086.056 1.594.995 3.083 1.465 1.492.467 2.747.74 4.403.74 7.694 0 14.01-6.123 14.01-13.8C38.323 6.291 32.197 0 24.388 0c-.831 0-2.1.142-2.894.282h.001z"/></g></svg>

src/pages/_includes/marketing/brands/fubotv.svg

@@ -0,0 +1 @@
+<svg width="89" height="30" xmlns="http://www.w3.org/2000/svg"><path d="M77.3 1.897l-1.73 7.15-2.18.023 1.663-7.15-2.495.047L73.075 0l9.462.023.539 6.155L86.267.023h2.338l-5.147 9.024-1.978.023L80.244.278l.25 1.596-3.194.023zM.135 12.617l1.08-5.338 3.014.068C5.143 1.537 8.937-.69 15.408.184l-.99 5.315-2.429-.046c-1.202.047-1.845.714-2.024 1.894l3.149-.02-.99 5.27-3.217.045-3.261 16.837-5.646.02 3.217-16.905-3.082.023zm14.828-5.521H20.9L18.63 18.959c-.45 2.51-.922 5.293 2.025 5.818.817.119 1.658 0 2.454-.377 2.398-1.14 2.982-3.552 3.467-5.972l2.266-11.31 5.691-.02-4.364 22.243-5.218.069.225-1.095c-3.47 2.32-7.691 2.01-10.21.324-2.446-1.75-3.003-4.813-2.39-8.69l2.388-12.853zM32.099 29.41L37.677.213l5.601.02-1.507 7.849c2.84-1.787 6.951-1.676 9.874-.152 1.35.703 2.67 1.892 3.485 3.195 1.185 1.896 1.443 4.24 1.487 7.497.186 3.262 2.24 6.399 6.082 5.796 2.182-.342 3.909-1.465 4.855-3.539 1.221-2.675.767-6.073-.86-7.527-1.897-1.704-5.953-2.038-8.053.775-.403-1.933-.976-3.762-2.249-5.361 5.056-3.936 13.239-2.58 16.248 2.975 1.817 3.355 1.696 7.819-.036 11.435-1.457 3.04-4.096 5.384-7.308 6.33-2.734.807-5.688.604-8.107-.453-2.009-.878-3.898-2.596-4.856-4.62-1.609-3.399.24-6.556-2.06-10.351-1.366-1.837-4.15-2.441-6.471-1.496-1.962.798-3.305 2.635-3.739 4.71-.48 2.296-.002 4.946 1.843 6.276 1.964 1.537 5.773 1.225 7.715-1.346.244 1.99.881 3.845 2.385 5.407-2.73 2.472-10.565 3.711-13.991-.045l-.338 1.802-5.578.02z" fill="currentColor" fill-rule="evenodd"/></svg>

src/pages/_includes/marketing/brands/six-flags.svg

@@ -0,0 +1 @@
+<svg width="94" height="41" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M14.137 29.518L18.564 4.83 3.353 3.353 5.51 30.17l8.627-.652zM4.922 41l-1.071-8.922 14.796 3.245L4.922 41z" fill="currentColor"/><path d="M1 5.611l5.593 29.507.524-.191L2.733 8.933l5.017-1.22L1 5.61h0zM8.117 1l1.936 33.322.58.208L9.508 4.326l5.61-1.229L8.117 1h0z" stroke="currentColor" stroke-width=".515" fill="#FFF"/><path stroke="currentColor" stroke-width=".515" fill="#FFF" d="M11.85 8.059l-.262 26.85.624.209.79-23.725 5.645-1.22z"/><path d="M15.76 13.95l-1.563 20.985.546.183 1.698-17.771L21 16.113l-5.24-2.163h0zM1 18.749l4.278 16.35.511-.205-3.068-12.763 3.696-1.221L1 18.749h0zm4.793-8.337l2.929 23.396.566-.205-2.06-19.805 4.672-1.235-6.107-2.151h0z" stroke="currentColor" stroke-width=".515" fill="#FFF"/><path d="M32.31 13.477c-1.252-1.05-2.949-1.658-4.664-1.658-2.693 0-5.538 1.595-5.733 4.448-.352 5.163 6.406 3.82 6.253 6.066-.063.923-1.282 1.28-2.042 1.28-1.107 0-2.08-.378-2.723-1.155L21 25.186c1.331 1.176 3.206 1.7 5.053 1.7 3.105 0 5.819-1.574 6.039-4.806.361-5.288-6.408-3.798-6.251-6.085.052-.756 1.055-1.134 1.705-1.134 1.151 0 1.777.378 2.576 1.092l2.189-2.476zm4.423 2.421l-3.351-.008-.74 10.828 3.351.01.74-10.83zm-.293 10.86h4.022l2.383-3.208 1.758 3.208h3.932l-3.538-5.79 4.118-5.055h-3.842l-1.958 2.664-1.483-2.664H38.02l3.16 5.013-4.74 5.832zm-3.104-11.423l.32-3.312 4.929 1.659-5.249 1.653zm20.12.094h5.06l-.667-3.275h-7.86l-1.007 14.604h3.723l.333-5.202h3.67l.207-3.043h-3.67l.21-3.084zm5.928-3.505l-1.019 14.834h3.396l1.034-15.17-3.411.336zM65.61 22.94c.06-.881.857-1.406 1.79-1.406.913 0 1.637.525 1.576 1.406-.061.903-.858 1.428-1.77 1.428-.933 0-1.658-.525-1.596-1.428zm-1.43-4.176c.939-.399 1.977-.65 2.976-.65 1.455 0 2.15.314 2.048 1.804-.009.126-.014.231-.045.336a4.336 4.336 0 0 0-2.462-.819c-2.15 0-4.09 1.364-4.238 3.546-.158 2.309 1.102 3.904 3.62 3.904 1.152 0 2.148-.273 2.865-1.238h.044l-.138 1.11h3.01l.524-7.595c.182-2.665-1.654-3.777-4.434-3.777-.934 0-2.207.19-3.095.483l-.676 2.896zm20.415-3.798c-1.28.293-2.545.693-3.845.65-.996-.042-1.852-.23-2.482-.23-2.823 0-5.21 1.889-5.404 4.721-.1 1.49.844 2.918 2.168 3.547l-.329 1.007c.977-.293 1.684-.482 2.704-.482 1.217 0 2.419.524 2.334 1.762-.085 1.26-1.509 1.743-2.638 1.743-1.151 0-2.077-.441-2.849-1.218l-2.067 1.973c1.233 1.342 2.927 1.972 4.838 1.972 2.54 0 5.878-1.175 6.071-3.987.11-1.616-.504-2.476-1.816-3.316 1.259-.61 1.96-1.679 2.047-2.938.104-1.532-.475-1.952-.64-2.393l1.07-.105.838-2.706zm-8.538 5.12c.078-1.154 1.134-1.972 2.176-1.972 1.043 0 1.986.819 1.906 1.972-.08 1.176-1.134 1.994-2.176 1.994-1.043 0-1.986-.819-1.906-1.994zm7.323 5.33c1.422 1.113 2.462 1.47 4.351 1.47 2.194 0 4.473-1.26 4.636-3.631.306-4.491-5.03-2.686-4.906-4.491.038-.567.783-.65 1.196-.65.629 0 1.285.251 1.738.608l1.992-1.826c-.917-.88-2.263-1.51-3.61-1.51-2.215 0-4.31 1.112-4.476 3.525-.299 4.385 5.014 2.895 4.914 4.385-.054.777-1.016.861-1.58.861-.955 0-1.758-.336-2.386-.986l-1.87 2.246zm8.218-10.207c0 .713.552 1.172 1.171 1.172.62 0 1.171-.46 1.171-1.172 0-.71-.552-1.167-1.17-1.167-.62 0-1.172.457-1.172 1.167zm.31 0c0-.532.382-.916.861-.916.473 0 .86.384.86.916 0 .535-.387.922-.86.922-.479 0-.86-.387-.86-.922zm.406.653h.254v-.56h.158l.311.56h.266l-.342-.572c.189-.016.336-.11.336-.35 0-.285-.18-.388-.5-.388h-.482v1.31zm.254-1.107h.213c.116 0 .262.022.262.163 0 .16-.107.181-.25.181h-.226v-.344z" fill="currentColor"/></g></svg>

src/pages/_includes/marketing/hero/browser.html

@@ -0,0 +1,22 @@
+<header class="hero pb-0">
+	<div class="container">
+		<h1 class="hero-title">Develop beautiful web apps with&nbsp;Tabler</h1>
+		<p class="hero-description mt-4">
+			Tabler is a free and open source web application UI kit based on Bootstrap&nbsp;5, with hundreds responsive
+			components and multiple layouts.
+		</p>
+		<div class="my-5">
+			<div class="row g-3 justify-content-center">
+				<div class="col-auto">
+					<a href="#" class="btn btn-lg">See features</a>
+				</div>
+				<div class="col-auto">
+					<a href="#" class="btn btn-lg btn-primary" target="_blank" rel="noopener noreferrer">Preview template</a>
+				</div>
+			</div>
+		</div>
+		<div class="hero-img img-overlap-margin">
+			{% include ui/marketing/browser.html %}
+		</div>
+	</div>
+</header>

src/pages/_includes/marketing/hero/side.html

@@ -0,0 +1,45 @@
+<header class="hero">
+	<div class="container">
+		<div class="row g-8 align-items-center">
+			<div class="col-md-6 text-center text-md-start">
+				<div class="hero-subheader">Tabler Emails</div>
+				<h1 class="hero-title">
+					Better email communication,<br />
+					{% include ui/typed.html strings="more effective|more efficient|more productive" %}
+				</h1>
+				<p class="hero-description mt-4">54 eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.</p>
+				<div class="mt-6 mt-lg-7">
+					<div class="row justify-content-center justify-content-md-start">
+						<div class="col-auto"><a href="#" class="btn btn-lg btn-primary">Buy for $29</a></div>
+						<div class="col-auto"><a href="#" class="btn btn-lg">Browse gallery</a></div>
+					</div>
+				</div>
+			</div>
+			<div class="col-md-6">
+				<div class="hero-img-side">
+					<div id="carousel-controls" class="carousel slide" data-bs-ride="carousel" data-interval="4000">
+						<div class="carousel-inner">
+							<div class="carousel-item active">
+								{% include ui/illustration.html image="boy-with-key.svg" class="d-block mx-auto" height="350" %}
+							</div>
+							<div class="carousel-item">
+								{% include ui/illustration.html image="boy-girl.svg" class="d-block mx-auto" height="350" %}
+							</div>
+							<div class="carousel-item">
+								{% include ui/illustration.html image="computer-fix.svg" class="d-block mx-auto" height="350" %}
+							</div>
+						</div>
+						<a class="carousel-control-prev text-secondary" href="#carousel-controls" role="button" data-bs-slide="prev">
+							{% include ui/icon.html icon="chevron-left" class="icon-md" %}
+							<span class="visually-hidden">Previous</span>
+						</a>
+						<a class="carousel-control-next text-secondary" href="#carousel-controls" role="button" data-bs-slide="next">
+							{% include ui/icon.html icon="chevron-right" class="icon-md" %}
+							<span class="visually-hidden">Next</span>
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</header>

src/pages/_includes/marketing/navbar.html

@@ -0,0 +1,44 @@
+<header class="navbar navbar-expand-lg navbar-transparent py-3">
+	<div class="container">
+		{% include layout/navbar-logo.html href="marketing" %}
+		<button
+			class="navbar-toggler"
+			type="button"
+			data-bs-toggle="collapse"
+			data-bs-target="#navbarTogglerDemo01"
+			aria-controls="navbarTogglerDemo01"
+			aria-expanded="false"
+			aria-label="Toggle navigation"
+		>
+			<span class="navbar-toggler-icon"></span>
+		</button>
+		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+			<nav class="navbar-nav ms-auto">
+				<div class="nav-item">
+					<a class="nav-link active" href="{{ site.base }}/marketing"><span class="nav-link-title">Home</span></a>
+				</div>
+				<div class="nav-item">
+					<a class="nav-link" href="{{ site.base }}/marketing/testimonials.html"><span class="nav-link-title">Testimonials</span></a>
+				</div>
+				<div class="nav-item">
+					<a class="nav-link" href="{{ site.base }}/marketing/pricing.html"><span class="nav-link-title">Pricing</span></a>
+				</div>
+				<div class="nav-item">
+					<a class="nav-link" href="{{ site.base }}/marketing/about.html"><span class="nav-link-title">About</span></a>
+				</div>
+				<div class="nav-item">
+					<a class="nav-link" href="{{ site.base }}/marketing/text.html"><span class="nav-link-title">Text</span></a>
+				</div>
+				<div class="nav-item">
+					<a class="nav-link" href="{{ site.base }}/marketing/hero.html"><span class="nav-link-title">App</span></a>
+				</div>
+				<div class="nav-item">
+					<a class="nav-link" href="{{ site.base }}/marketing/real-estate.html"><span class="nav-link-title">Real estate</span></a>
+				</div>
+				<div class="nav-item ms-4">
+					<a href="#" class="btn btn-primary">Buy now</a>
+				</div>
+			</nav>
+		</div>
+	</div>
+</header>

src/pages/_includes/marketing/section-divider.html

@@ -0,0 +1,11 @@
+{% if include.divider == 'waves' %}
+<svg class="section-divider" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
+	<path class="wave-1" d="M-110 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
+	<path class="wave-2" d="M-110 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
+	<path class="wave-3" d="M-110 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
+</svg>
+{% elsif include.divider == 'arc' %}
+<svg class="section-divider" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 145 36" preserveAspectRatio="none">
+	<path d="M 145 36 m -145 -18 s 32.36 18 72.27 18 s 72.73 -18 72.73 -18 v 18 h -145 z"></path>
+</svg>
+{% endif %}

src/pages/_includes/marketing/sections/companies.html

@@ -0,0 +1,17 @@
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	{% include marketing/section-divider.html divider=include.divider %}
+	<div class="container">
+		<div class="section-header mb-6">
+			<h2 class="section-title text-muted">Trusted by over 3,000 companies</h2>
+		</div>
+		<div class="row g-8 align-items-center justify-content-center">
+			<div class="col-auto"><a href="#" class="link-muted">{% include marketing/brands/baremetrics.svg %}</a></div>
+			<div class="col-auto"><a href="#" class="link-muted">{% include marketing/brands/cgi.svg %}</a></div>
+			<div class="col-auto"><a href="#" class="link-muted">{% include marketing/brands/docplanner.svg %}</a></div>
+			<div class="col-auto"><a href="#" class="link-muted">{% include marketing/brands/flow.svg %}</a></div>
+			<div class="col-auto"><a href="#" class="link-muted">{% include marketing/brands/fubotv.svg %}</a></div>
+			<div class="col-auto"><a href="#" class="link-muted">{% include marketing/brands/six-flags.svg %}</a></div>
+			<div class="col-auto"><a href="#" class="link-muted">{% include marketing/brands/vocus.svg %}</a></div>
+		</div>
+	</div>
+</section>

src/pages/_includes/marketing/sections/counters.html

@@ -0,0 +1,33 @@
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	<div class="container">
+      <div class="row justify-content-lg-center">
+        <div class="col-sm-6 col-lg-3">
+          <div class="text-center">
+            <h2 class="display-5 m-0 fw-bold">48</h2>
+            <p class="text-secondary m-0">templates</p>
+          </div>
+        </div>
+
+		  <div class="col-sm-6 col-lg-3">
+          <div class="text-center">
+            <h2 class="display-5 m-0 fw-bold">12</h2>
+            <p class="text-secondary m-0">years in business</p>
+          </div>
+        </div>
+
+        <div class="col-sm-6 col-lg-3">
+          <div class="text-center">
+            <h2 class="display-5 m-0 fw-bold">2,5k+</h2>
+            <p class="text-secondary m-0">copies sold</p>
+          </div>
+        </div>
+
+        <div class="col-sm-6 col-lg-3">
+          <div class="text-center">
+            <h2 class="display-5 m-0 fw-bold">99%</h2>
+            <p class="text-secondary m-0">happy customers</p>
+          </div>
+        </div>
+      </div>
+	</div>
+</section>

src/pages/_includes/marketing/sections/cta.html

@@ -0,0 +1,10 @@
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	<div class="container-narrow text-center">
+		<h3 class="h1">Enhance your efficiency with our application,<br />available for use immediately.</h3>
+		<p class="text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, ipsa? Voluptates sunt, ipsum esse quis obcaecati atque placeat consectetur beatae, tenetur ducimus iure minima expedita recusandae doloribus nam. Pariatur, facilis?</p>
+		<div class="btn-list justify-content-center mt-6">
+			{% include ui/button.html text="Get started" color="primary" %}
+			{% include ui/button.html text="Learn more" ghost=true icon-right="chevron-right" %}
+		</div>
+	</div>
+</section>

src/pages/_includes/marketing/sections/faq-2.html

@@ -0,0 +1,33 @@
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	<div class="container">
+		<div class="row g-xl-6">
+			<div class="col-lg-4">
+				<div class="section-header text-start sticky-top">
+					<div class="section-title">Frequently asked questions</div>
+					<p class="section-description">Can’t find the answer you’re looking for? Reach out to our customer support team.</p>
+				</div>
+			</div>
+			<div class="col-lg">
+				<div class="space-y-5">
+					<div>
+						<div class="h3 mb-1">Can I use Tabler in commercial projects?</div>
+						<div class="text-muted">Of course! Tabler is under MIT license, so you can confidently use it in commercial projects. However, remember to include a note that your project uses Tabler.</div>
+					</div>
+					<div>
+						<div class="h3 mb-1">How do I get notified of new Tabler versions?</div>
+						<div class="text-muted">You may watch the releases on GitHub or follow me on Twitter.</div>
+					</div>
+					<div>
+						<div class="h3 mb-1">Can Tabler be used with WordPress?</div>
+						<div class="text-muted">
+							Tabler is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so.
+						</div>
+					</div>
+				</div>
+				<div class="mt-5">
+					<a class="btn" href="#">Read more questions</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

src/pages/_includes/marketing/sections/faq.html

@@ -0,0 +1,40 @@
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	<div class="container">
+		<div class="section-header">
+			<h2 class="section-title">Frequently Asked Questions</h2>
+		</div>
+		<div class="row g-4">
+			<div class="col-md-4 markdown">
+				<h3 class="h2">How is Tabler Pro different from Tabler?</h3>
+				<p class="text-secondary">Tabler offers fundamental components that you can piece together to build your app or website. However, Tabler Pro offers an elevated convenience by providing pre-assembled components and page templates, acting as ready-to-use building blocks that can be swiftly integrated into your app, thereby saving development time.</p>
+			</div>
+			<div class="col-md-4 markdown">
+				<h3 class="h2">Is this a yearly subscription?</h3>
+				<p class="text-secondary">Certainly, you have lifelong access to all our components. This implies that you will receive new components and updates every month, continuing as long as we have new component ideas to share.</p>
+			</div>
+			<div class="col-md-4 markdown">
+				<h3 class="h2">I want to buy this but I can't afford it. Is there a discount?</h3>
+				<p class="text-secondary">Should you be a student or find the cost excessively high in your local currency, please reach out to us at {{ site.email }} detailing your circumstances, and we will contemplate offering you a discount.</p>
+			</div>
+			<div class="col-md-4 markdown">
+				<h3 class="h2">What can I do with this license?</h3>
+				<ul class="text-secondary">
+					<li>To build your websites or SaaS project that end-users need to pay</li>
+					<li>To build an open-source tool or documentation website</li>
+				</ul>
+			</div>
+			<div class="col-md-4 markdown">
+				<h3 class="h2">What version of Tabler is used?</h3>
+				<p class="text-secondary">The elements in Tabler Pro are created using Tabler v1.2 and later versions. If your current version is v0.8, we advise you to update to the latest version to make the most of the Pro components.</p>
+			</div>
+			<div class="col-md-4 markdown">
+				<h3 class="h2">What restrictions does this license have?</h3>
+				<ul class="text-secondary">
+					<li>Create a clone of Tabler PRO to sell</li>
+					<li>Create products like templates, themes, Figma or Sketch UI kits, page builders based on the PRO components</li>
+					<li>Recreate the components for other UI libraries or CSS frameworks</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</section>

src/pages/_includes/marketing/sections/features-2.html

@@ -0,0 +1,56 @@
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	{% include marketing/section-divider.html divider=include.divider %}
+	<div class="container">
+		<div class="section-header">
+			<h2 class="section-title">Everything you need to deploy your app</h2>
+			<div class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+		</div>
+
+		<div class="row g-10">
+			<div class="col-lg-6 mb-3 mb-lg-0">{% include ui/svg.html width=500 height=400 border=true %}</div>
+			<div class="col-lg-6">
+				<div class="space-y-6">
+					<div>
+						<div class="row">
+							<div class="col-auto">
+								{% include ui/shape.html icon="tools" size="md" %}
+							</div>
+							<div class="col">
+								<h3 class="h2 mb-2">Designed with users in mind</h3>
+								<p class="text-muted m-0">
+									Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with
+									attention to detail to make your interface beautiful!
+								</p>
+							</div>
+						</div>
+					</div>
+					<div>
+						<div class="row">
+							<div class="col-auto">
+								{% include ui/shape.html icon="brand-bootstrap" size="md" %}
+							</div>
+							<div class="col">
+								<h3 class="h2 mb-2">Built for developers</h3>
+								<p class="text-muted m-0">
+									Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern
+									browsers and fully responsive.
+								</p>
+							</div>
+						</div>
+					</div>
+					<div>
+						<div class="row">
+							<div class="col-auto">
+								{% include ui/shape.html icon="paint" size="md" %}
+							</div>
+							<div class="col">
+								<h3 class="h2 mb-2">Fully customizable</h3>
+								<p class="text-muted m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>

src/pages/_includes/marketing/sections/features-3.html

@@ -0,0 +1,56 @@
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	{% include marketing/section-divider.html divider=include.divider %}
+	<div class="container">
+		<div class="section-header">
+			<h2 class="section-title">Everything you need to deploy your app</h2>
+			<div class="section-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+		</div>
+
+		<div class="row g-10">
+			<div class="col-lg-6">
+				<div class="space-y-6">
+					<div>
+						<div class="row">
+							<div class="col-auto">
+								{% include ui/shape.html icon="tools" size="md" %}
+							</div>
+							<div class="col">
+								<h3 class="h2 mb-2">Designed with users in mind</h3>
+								<p class="text-muted m-0">
+									Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with
+									attention to detail to make your interface beautiful!
+								</p>
+							</div>
+						</div>
+					</div>
+					<div>
+						<div class="row">
+							<div class="col-auto">
+								{% include ui/shape.html icon="brand-bootstrap" size="md" %}
+							</div>
+							<div class="col">
+								<h3 class="h2 mb-2">Built for developers</h3>
+								<p class="text-muted m-0">
+									Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all modern
+									browsers and fully responsive.
+								</p>
+							</div>
+						</div>
+					</div>
+					<div>
+						<div class="row">
+							<div class="col-auto">
+								{% include ui/shape.html icon="paint" size="md" %}
+							</div>
+							<div class="col">
+								<h3 class="h2 mb-2">Fully customizable</h3>
+								<p class="text-muted m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col-lg-6 mt-3 mt-lg-0">{% include ui/svg.html width=500 height=400 border=true %}</div>
+		</div>
+	</div>
+</section>

src/pages/_includes/marketing/sections/features.html

@@ -0,0 +1,22 @@
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	{% include marketing/section-divider.html divider=include.divider %}
+	<div class="container">
+		<div class="row items-center text-center g-lg-10">
+			<div class="col-md-6 col-lg">
+				{% include ui/shape.html icon="devices" class="mb-3" size="md" %}
+				<h2 class="h2">Mobile-optimized</h2>
+				<p class="text-muted">Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.</p>
+			</div>
+			<div class="col-md-6 col-lg">
+				{% include ui/shape.html icon="mailbox" class="mb-3" size="md" %}
+				<h2 class="h2">Compatible with 90+ email clients</h2>
+				<p class="text-muted">Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.</p>
+			</div>
+			<div class="col-md-6 col-lg">
+				{% include ui/shape.html icon="palette" class="mb-3" size="md" %}
+				<h2 class="h2">Unique, minimal design</h2>
+				<p class="text-muted">Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.</p>
+			</div>
+		</div>
+	</div>
+</section>

src/pages/_includes/marketing/sections/pricing-banner.html

@@ -0,0 +1,38 @@
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}">
+	<div class="container">
+		<div class="bg-body-tertiary p-6 rounded-4">
+			<div class="row g-4 align-items-center">
+				<div class="col-lg">
+					<h3 class="h2">Team License</h3>
+					<p class="m-0 text-secondary">Get Marketing + Application UI for you and your team</p>
+				</div>
+				<div class="col-lg">
+					<ul class="list-unstyled m-0">
+						<li>
+							{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Up to 5 developers
+						</li>
+						<li>
+							{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}All marketing + app components
+						</li>
+						<li>
+							{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Figma UI Kit
+						</li>
+						<li>
+							{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Lifetime free updates
+						</li>
+					</ul>
+				</div>
+				<div class="col-6-sm col-lg">
+					<div class="pricing-price m-0">
+						<span class="pricing-price-currency">$</span>599
+						<div class="pricing-price-description">
+							<div>per team</div>
+							<div>per year</div>
+						</div>
+					</div>
+				</div>
+				<div class="col-6-sm col-lg-auto"><a href="#" class="btn btn-primary w-100">Get started</a></div>
+			</div>
+		</div>
+	</div>
+</section>

src/pages/_includes/marketing/sections/pricing.html

@@ -0,0 +1,82 @@
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	<div class="container">
+		<div class="pricing">
+			<div class="pricing-card">
+				<h4 class="pricing-title">Free</h4>
+				<div class="pricing-price">
+					<span class="pricing-price-currency">$</span>99
+					<div class="pricing-price-description">
+						<div>per user</div>
+						<div>per year</div>
+					</div>
+				</div>
+				<ul class="pricing-features my-5">
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Up to 5 developers
+					</li>
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}All marketing + app components
+					</li>
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Figma UI Kit
+					</li>
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Lifetime free updates
+					</li>
+				</ul>
+				<div class="pricing-btn"><a href="#" class="btn w-100">Get started</a></div>
+			</div>
+			<div class="pricing-card featured">
+				<div class="pricing-label"><div class="badge bg-primary text-primary-fg">Popular</div></div>
+				<h4 class="pricing-title">All features</h4>
+				<div class="pricing-price">
+					<span class="pricing-price-currency">$</span>199
+					<div class="pricing-price-description">
+						<div>per user</div>
+						<div>per year</div>
+					</div>
+				</div>
+				<ul class="pricing-features my-5">
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Up to 5 developers
+					</li>
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}All marketing + app components
+					</li>
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Figma UI Kit
+					</li>
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Lifetime free updates
+					</li>
+				</ul>
+				<div class="pricing-btn"><a href="#" class="btn w-100 btn-primary">Get started</a></div>
+			</div>
+			<div class="pricing-card">
+				<h4 class="pricing-title">Other</h4>
+				<div class="pricing-price">
+					<span class="pricing-price-currency">$</span>99
+					<div class="pricing-price-description">
+						<div>per user</div>
+						<div>per year</div>
+					</div>
+				</div>
+				<ul class="pricing-features my-5">
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Up to 5 developers
+					</li>
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}All marketing + app components
+					</li>
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Figma UI Kit
+					</li>
+					<li>
+						{% include ui/icon.html icon="check" color="green" class="icon-inline me-1" %}Lifetime free updates
+					</li>
+				</ul>
+				<div class="pricing-btn"><a href="#" class="btn w-100">Get started</a></div>
+			</div>
+		</div>
+	</div>
+</section>

src/pages/_includes/marketing/sections/subscribe.html

@@ -0,0 +1,19 @@
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	<div class="container">
+		<div class="section-header mb-6">
+			<h2 class="section-title">Subscribe on our newsletter</h2>
+			<p class="section-description">Get daily news on upcoming offers from many suppliers all over the world</p>
+		</div>
+	</div>
+
+	<div class="container-tight">
+		<div class="row">
+			<div class="col">
+				<input class="w-100 form-control" placeholder="Your Email" type="email" />
+			</div>
+			<div class="col-auto">
+				<button type="submit" class="btn btn-primary">{% include ui/icon.html icon="mail" %} Subscribe</button>
+			</div>
+		</div>
+	</div>
+</section>

src/pages/_includes/marketing/sections/testimonials.html

@@ -0,0 +1,43 @@
+{% assign limit = include.limit | default: 99 %}
+
+<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
+	<div class="container">
+		{% unless include.hide-header %}
+		<div class="section-header">
+			<h2 class="section-title">Trusted by hundreds</h2>
+			<p class="section-description">Our Users send us bunch of smilies with our services, and we love them 😍</p>
+		</div>
+		{% endunless %}
+
+		<div class="row g-6">
+			{% assign i = 1 %}
+			{% assign testimonials = site.data.testimonials | slice: 0, limit | split_to_n: 3 %} {% for group in testimonials %}
+			<div class="col-md-6 col-lg-4">
+				<div class="row g-6">
+					{% for testimonial in group %}
+					{% assign person = site.data.people[i] %}
+					<div class="col-12">
+						<a href="#" class="card bg-light">
+							<div class="card-body">
+								<div class="row mb-3">
+									<div class="col-auto">{% include ui/avatar.html person=person size="md" %}</div>
+									<div class="col">
+										<h3 class="h3 m-0">{{ person.full_name }}</h3>
+										<div class="text-secondary">{{ person.job_title }}</div>
+									</div>
+								</div>
+								
+								<p>
+									{{ testimonial }}
+								</p>
+							</div>
+						</a>
+					</div>
+					{% assign i = i | plus: 1 %}
+					{% endfor %}
+				</div>
+			</div>
+			{% endfor %}
+		</div>
+	</div>
+</section>

src/pages/_includes/ui/marketing/browser.html

@@ -0,0 +1,21 @@
+<div class="browser">
+	<div class="browser-header">
+		<div class="row align-items-center">
+			<div class="col-auto col-md-2">
+				<div class="browser-dots browser-dots-colored">
+					<div class="browser-dot"></div>
+					<div class="browser-dot"></div>
+					<div class="browser-dot"></div>
+				</div>
+			</div>
+			<div class="col-8">
+				<a href="{{ site.preview-url }}" class="browser-input" target="_blank" rel="noopener noreferrer"
+					data-bs-toggle="tooltip" data-bs-placement="top" title="Open preview of Tabler dashboard!">
+					{% include ui/icon.html icon="lock" color="green" size="sm" class="me-2" %}
+					{% if include.url %}{{ include.url }}{% else %}{{ site.preview-url }}{% endif %}
+				</a>
+			</div>
+		</div>
+	</div>
+	{% include ui/responsive-image.html src="static/marketing/preview.png" width=1040 height=760 %}
+</div>

src/pages/_includes/ui/responsive-image.html

@@ -0,0 +1,5 @@
+{% assign src = include.src %}
+{% assign width = include.width | default: 507 %}
+<picture>
+	<img src="{{ site.base }}/{{ src }}" srcset="{{ site.base }}/{{ src }} 1x, {{ site.base }}/{{ src | replace: '.png', '@2x.png' }} 2x" alt="{{ include.alt }}" class="img-fluid {{ include.class }}" width="{{ width }}"{% if include.height %} height="{{ include.height }}"{% endif %} loading="lazy">
+</picture>

src/pages/_includes/ui/shape.html

@@ -0,0 +1,3 @@
+<div class="shape{% if include['size'] %} shape-{{ include['size'] }}{% endif %}{% if include.color %} shape-{{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.rounded %} rounded-circle{% endif %}">
+	{% include ui/icon.html icon=include.icon %}
+</div>

src/pages/_includes/ui/typed.html

@@ -0,0 +1,19 @@
+{% assign strings = include.strings | split: '|' %}
+{% assign id = include.id | default: "typed" %}
+<span class="text-primary" id="{{ id }}">{{ strings | first }}</span>
+
+{% capture_global scripts %}
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	var typed = new Typed('#{{ id }}', {
+		strings: [{% for string in strings %}'{{ string }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
+		typeSpeed: 100,
+		backSpeed: 50,
+		backDelay: 1000,
+		startDelay: 1000,
+		loop: true,
+		fade: true
+	});
+});
+</script>
+{% endcapture_global %}

src/pages/_layouts/base.html

@@ -37,7 +37,7 @@
 </head>
 
 {% assign layout-dark = page.layout-dark | default: site.layout-dark %}
-<body {% if layout.body-class or page.body-class %} class="{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}"{% endif %}>
+<body{% if layout.body-class or page.body-class %} class="{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}"{% endif %}>
 <script src="{{ site.base }}/dist/js/demo-theme{% if jekyll.environment != 'development' %}.min{% endif %}.js{% if jekyll.environment != 'development' %}?{{ site.time | date: '%s' }}{% endif %}"></script>
 
 	{{ content }}

src/pages/_layouts/marketing.html

@@ -0,0 +1,164 @@
+---
+layout: base
+body-class: body-marketing body-gradient
+plugins: marketing
+---
+
+{% include marketing/navbar.html %}
+
+{{ content }}
+
+<footer class="footer">
+	<div class="container">
+		<div class="py-3">
+			<div class="row g-4">
+				<div class="col-lg-7">
+					<div class="row g-4">
+						<div class="col-md">
+							<div class="subheader mb-3">Our products</div>
+							<ul class="list-unstyled list-separated gap-2">
+								<li><a class="link-muted" href="/">UI Kit</a></li>
+								<li>
+									<a class="link-muted" href="/icons">2664 open source icons</a>
+								</li>
+								<li>
+									<a class="link-muted" href="/emails">Email templates</a>
+								</li>
+								<li><a class="link-muted" href="/pricing">Pricing</a></li>
+							</ul>
+						</div>
+						<div class="col-md">
+							<div class="subheader mb-3">Support</div>
+							<ul class="list-unstyled list-separated gap-2">
+								<li><a class="link-muted" href="/">Blog</a></li>
+								<li><a class="link-muted" href="/">Documentation</a></li>
+								<li><a class="link-muted" href="/">Support</a></li>
+								<li>
+									<a
+										href="https://status.tabler.io"
+										class="link-muted"
+										target="_blank"
+										rel="noreferrer"
+										>Status</a
+									>
+								</li>
+							</ul>
+						</div>
+						<div class="col-md">
+							<div class="subheader mb-3">Tabler</div>
+							<ul class="list-unstyled list-separated gap-2">
+								<li><a class="link-muted" href="/">About</a></li>
+								<li><a class="link-muted" href="/">Blog</a></li>
+								<li><a class="link-muted" href="/">Changelog</a></li>
+								<li>
+									<a
+										href="{{ site.github-url }}"
+										class="link-muted"
+										target="_blank"
+										rel="noreferrer"
+										>Github</a
+									>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+				<div class="col-lg-4 ml-auto">
+					<div class="text-muted">
+						Tabler comes with tons of well-designed components and features.
+						Start your adventure with Tabler and make your dashboard great
+						again. For free!
+					</div>
+				</div>
+			</div>
+
+			<div class="row g-4 justify-content-between mt-0 mt-md-2">
+				<div class="col-sm-7 col-md-6 col-lg-4">
+					<h5 class="subheader">Payment &amp; Security</h5>
+					<ul class="list-inline mb-0 mt-3">
+						<li class="list-inline-item">
+							<a href="#">{% include ui/payment.html payment="paypal" %}</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="#">{% include ui/payment.html payment="visa" %}</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="#">{% include ui/payment.html payment="mastercard" %}</a>
+						</li>
+						<li class="list-inline-item">
+							<a href="#"
+								>{% include ui/payment.html payment="americanexpress" %}</a
+							>
+						</li>
+					</ul>
+				</div>
+
+				<div class="col-sm-5 col-md-6 col-lg-3 text-sm-end">
+					<h5 class="subheader">Follow us on</h5>
+					<ul class="list-inline mb-0 mt-3">
+						<li class="list-inline-item">
+							<a class="btn btn-icon btn-facebook" href="#"
+								>{% include ui/icon.html icon="brand-facebook" %}</a
+							>
+						</li>
+						<li class="list-inline-item">
+							<a class="btn btn-icon btn-instagram" href="#"
+								>{% include ui/icon.html icon="brand-instagram" %}</a
+							>
+						</li>
+						<li class="list-inline-item">
+							<a class="btn btn-icon btn-twitter" href="#"
+								>{% include ui/icon.html icon="brand-twitter" %}</a
+							>
+						</li>
+						<li class="list-inline-item">
+							<a class="btn btn-icon btn-linkedin" href="#"
+								>{% include ui/icon.html icon="brand-linkedin" %}</a
+							>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</footer>
+
+<footer class="footer">
+	<div class="container">
+		<div class="py-3 border-top-light text-center text-lg-start">
+			<div class="row g-4">
+				<div class="col-lg-auto text-lg-end order-lg-last">
+					<div class="row justify-center">
+						<div class="col-auto">
+							©<a
+								href="https://codecalm.net"
+								class="link-muted"
+								target="_blank"
+								rel="noopener noreferrer"
+								>codecalm.net</a
+							>
+						</div>
+						<div class="col-auto">
+							<ul class="list-inline list-inline-dots">
+								<li class="list-inline-item">
+									<a class="link-muted" href="/terms-of-service"
+										>Terms of service</a
+									>
+								</li>
+								<li class="list-inline-item">
+									<a class="link-muted" href="/privacy-policy"
+										>Privacy policy</a
+									>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+				<div class="col-lg">
+					Made with {% include ui/icon.html icon="heart" filled=true color="red"
+					inline=true %} in Poland.
+				</div>
+			</div>
+		</div>
+	</div>
+</footer>

src/pages/_plugins/jekyll-filters.rb

@@ -123,6 +123,10 @@ module Jekyll
     def hex_to_rgb(hex)
       hex.match(/^#(..)(..)(..)$/).captures.map(&:hex)
     end
+
+    def split_to_n(a, n)
+      a.each_slice( (a.size/n.to_f).round ).to_a
+    end
   end
 end
 

src/pages/datatables.html

@@ -7,7 +7,7 @@ menu: base.datatables
 
 {% assign id = include.map-id | default: 'default' %}
 <div class="card">
-	<div class="card-body">
+	<div class="card-body p-0">
 		{% assign products = 'Tabler,Tabler Icons,Tabler Emails,Tabler Components,Tabler Illustrations,Bootstrap' | split: ',' %}
 		{% assign techs = 'brand-apple,brand-windows,brand-debian,brand-android' | split: ',' %}
 		<div id="table-{{ id }}" class="table-responsive">

src/pages/illustrations.html

@@ -14,7 +14,7 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
 				<div class="col-md-7">
 					<div class="card">
 						<div class="card-body d-flex align-items-center">
-							<div id="current-illustration">{{ first_illustration }}</div>
+							<div id="current-illustration">{{ first_illustration | replace: '<svg ', '<svg class="w-100 h-auto" ' }}</div>
 						</div>
 					</div>
 				</div>
@@ -55,7 +55,7 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
 												<label class="form-imagecheck mb-2">
 													<input name="form-imagecheck" type="radio" value="{{ illustration.slug }}" class="form-imagecheck-input js-select-illustration" {% if forloop.first %} checked{% endif %}>
 													<span class="form-imagecheck-figure">
-														{{ illustration }}
+														{{ illustration | replace: '<svg ', '<svg class="w-100 h-auto" ' }}
 													</span>
 												</label>
 											</div>
@@ -73,7 +73,7 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
 </div>
 
 <h2 class="page-title my-5">
-	{{ site.illustrations.count | minus: 4 }} more SVG Illustrations
+	{{ site.data.illustrations | size | minus: 4 }} more SVG Illustrations
 </h2>
 
 <div class="row row-cards">
@@ -129,7 +129,7 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
 	const illustrations = {
 	{% for illustration in illustrations %}
 		"{{ illustration.slug }}": {
-	      svg: '{{ illustration.content | quote | replace_regex: "\n", "\n" }}',
+	      svg: '{{ illustration.content | replace: '<svg ', '<svg class="w-100 h-auto" ' | quote | replace_regex: "\n", "\n" }}',
 		},
 	{% endfor %}
 	}

src/pages/marketing/about.html

@@ -0,0 +1,44 @@
+---
+title: About
+layout: marketing
+---
+
+<div class="hero">
+	<div class="container">
+		<h1 class="hero-title">About Us</h1>
+		<p class="hero-description hero-description-wide">Tabler is a digital firm specializing in website development. Our themes are employed by businesses of all scales, ranging from emerging startups to established public companies, to construct and oversee their online presence.</p>
+	</div>
+</div>
+
+<div class="section pt-0">
+	<div class="container">
+		<div class="row gx-3">
+        <div class="col mb-3">
+          <div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
+        </div>
+
+        <div class="col-3 d-none d-md-block mb-3">
+          <div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
+        </div>
+
+        <div class="col mb-3">
+          <div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
+        </div>
+
+        <div class="w-100"></div>
+
+        <div class="col mb-3 mb-md-0">
+          <div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
+        </div>
+
+        <div class="col-4 d-none d-md-block mb-3 mb-md-0">
+          <div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
+        </div>
+
+        <div class="col">
+          <div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
+        </div>
+      </div>
+	</div>
+</div>
+

src/pages/marketing/hero.html

@@ -0,0 +1,25 @@
+---
+title: Hero
+layout: marketing
+libs: typed.js
+---
+
+{% include marketing/hero/side.html %}
+
+{% include marketing/sections/companies.html background="light" class="mt-4 pt-4" divider="waves" %}
+
+{% include marketing/sections/features.html %}
+
+{% include marketing/sections/features-2.html background="light" %}
+
+{% include marketing/sections/cta.html %}
+
+{% include marketing/sections/features-3.html background="light" %}
+
+{% include marketing/sections/testimonials.html limit=9 %}
+
+{% include marketing/sections/counters.html background="light" %}
+
+{% include marketing/sections/subscribe.html %}
+
+{% include marketing/sections/faq-2.html background="light"%}

src/pages/marketing/index.html

@@ -0,0 +1,24 @@
+---
+layout: marketing
+redirect_from: marketing.html
+---
+
+{% include marketing/hero/browser.html %}
+
+{% include marketing/sections/companies.html background="light" class="mt-n12 pt-12" divider="waves" %}
+
+{% include marketing/sections/features.html %}
+
+{% include marketing/sections/features-2.html background="light" %}
+
+{% include marketing/sections/cta.html %}
+
+{% include marketing/sections/features-3.html background="light" %}
+
+{% include marketing/sections/testimonials.html limit=9 %}
+
+{% include marketing/sections/counters.html background="light" %}
+
+{% include marketing/sections/subscribe.html %}
+
+{% include marketing/sections/faq-2.html background="light"%}

src/pages/marketing/pricing.html

@@ -0,0 +1,16 @@
+---
+title: Pricing
+description: Pricing page for Tabler UI Kit
+layout: marketing
+---
+
+<header class="hero">
+	<div class="container">
+		<h2 class="hero-title">Simple, transparent pricing</h2>
+		<p class="hero-description">Get early access to 100+ components and free updates every month. Make it yours today!</p>
+	</div>
+</header>
+
+{% include marketing/sections/pricing.html class="pt-0" %}
+{% include marketing/sections/pricing-banner.html %}
+{% include marketing/sections/faq.html background="light" %}

src/pages/marketing/real-estate.html

@@ -0,0 +1,59 @@
+---
+layout: marketing
+---
+
+<header class="img-bg" style="background-image: url({{ site.base }}/static/marketing/photo-1564013799919-ab600027ffc6.jpg)">
+	<div class="hero position-relative bg-primary py-12" style="--tblr-bg-opacity: 0.9">
+		<div class="container-narrow">
+			<h1 class="hero-title text-white">Find your forever home</h1>
+			<p class="hero-description mb-5 text-white text-opacity-50">It's time to find the home of your dreams, and you search begins here. We make it easy to find the property that fits your needs and budget.</p>
+			<div class="row gx-5 justify-content-center">
+				<div class="col-xl-6 col-lg-8 text-center">
+					<form novalidate="" class="row row-cols-1 row-cols-md-auto g-3 align-items-center">
+						<div class="col flex-grow-1">
+							<input id="inputEmail" type="text" placeholder="Search properties near you..." class="form-control form-control-solid" />
+						</div>
+						<div class="col"><button type="submit" class="btn btn-teal fw-500">Search</button></div>
+					</form>
+				</div>
+			</div>
+		</div>
+	</div>
+</header>
+
+<section class="section section-white">
+	{% include marketing/section-divider.html divider="arc" %}
+	<div class="container">
+		<div class="row g-6">
+			{% for building in site.data.real-estate %}
+			<div class="col-md-6 col-lg-4">
+				<div class="card">
+					<a href="#">
+						<div class="img-bg ratio ratio-4x3 card-img-top" style="background-image: url({{ site.base }}/static/marketing/{{ building.image }})"></div>
+					</a>
+
+					<div class="card-body">
+						<div class="h1 mb-2 fw-bold">{{ building.price }}</div>
+						<div>
+							<div class="text-secondary">{{ building.address }}, California USA</div>
+
+							<div class="d-flex mb-4 text-secondary">
+								<div class="d-block d-flex align-items-center me-3">
+									{% include ui/icon.html icon="bed" class="me-1" %}
+									{{ building.bedrooms }} beds
+								</div>
+								<div class="d-block d-flex align-items-center">
+									{% include ui/icon.html icon="bath" class="me-1" %}
+									{{ building.baths }} baths
+								</div>
+							</div>
+
+							<a href="#" class="btn btn-primary py-2 px-3">See details</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			{% endfor %}
+		</div>
+	</div>
+</section>

src/pages/marketing/testimonials.html

@@ -0,0 +1,13 @@
+---
+title: Testimonials
+layout: marketing
+---
+
+<header class="hero">
+	<div class="container">
+		<h2 class="hero-title">Trusted by hundreds</h2>
+		<p class="hero-description">Our Users send us bunch of smilies with our services, and we love them 😍</p>
+	</div>
+</header>
+
+{% include marketing/sections/testimonials.html hide-header=true class="pt-0" %}

src/pages/marketing/text.html

@@ -0,0 +1,42 @@
+---
+title: Text
+layout: marketing
+---
+
+<div class="hero">
+	<div class="container">
+		<h1 class="hero-title">Who's that then?</h1>
+		<p class="hero-description hero-description-wide">Why do you think that she is a witch? How do you know she is a witch? And the hat. She's a witch! The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.</p>
+	</div>
+</div>
+
+<section class="section pt-0">
+	<div class="container container-narrow">
+		<div class="markdown">
+			<p>Why? Be quiet! <strong> We shall say 'Ni' again to you, if you do not appease us.</strong> <em> The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur.</em> That is why I am your king.</p>
+		<h2>Oh, ow!</h2>
+		<p>Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! It's only a model. Well, what do you want? And this isn't my nose. This is a false one. We found them.</p>
+		<ol>
+		<li>Did you dress her up like this?</li><li>We shall say 'Ni' again to you, if you do not appease us.</li><li>I am your king.</li>
+		</ol>
+
+		<h3>Camelot!</h3>
+		<p>I have to push the pram a lot. We want a shrubbery!! And the hat. She's a witch! Burn her! The nose?</p>
+		<ul>
+		<li>We found them.</li><li>Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot!</li><li>Be quiet!</li>
+		</ul>
+
+		<p>The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king. Shut up! Will you shut up?!</p>
+		<p>Bring her forward! What do you mean? Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.</p>
+		<p>Who's that then? Why do you think that she is a witch? …Are you suggesting that coconuts migrate? Ah, now we see the violence inherent in the system! I have to push the pram a lot.</p>
+		<p>Well, what do you want? The nose? He hasn't got shit all over him. We shall say 'Ni' again to you, if you do not appease us. What do you mean?</p>
+		<p>Where'd you get the coconuts? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. No, no, no! Yes, yes. A bit. But she's got a wart. Bring her forward!</p>
+		<p>Why do you think that she is a witch? Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! We found them. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed!</p>
+		<p>Well, she turned me into a newt. The nose? The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.</p>
+		<p>The nose? Burn her anyway! What a strange person. Where'd you get the coconuts? Camelot!</p>
+		<p>Why do you think that she is a witch? Well, we did do the nose. Where'd you get the coconuts? He hasn't got shit all over him.</p>
+		<p>Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Where'd you get the coconuts?</p>
+		<p>A newt? The nose? Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot! I'm not a witch. I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time!</p>
+		</div>
+	</div>
+</section>

src/scss/_utilities-marketing.scss

@@ -0,0 +1,209 @@
+$negative-spacers-extra: if(
+  $enable-negative-margins,
+  negativify-map(map-merge($spacers, $spacers-extra)),
+  null
+);
+
+$utilities: (
+  // Margin utilities
+  "margin":
+    (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: $spacers-extra,
+    ),
+  "margin-x": (
+    responsive: true,
+    property: margin-right margin-left,
+    class: mx,
+    values: $spacers-extra,
+  ),
+  "margin-y": (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: my,
+    values: $spacers-extra,
+  ),
+  "margin-top": (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: $spacers-extra,
+  ),
+  "margin-end": (
+    responsive: true,
+    property: margin-right,
+    class: me,
+    values: $spacers-extra,
+  ),
+  "margin-bottom": (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: $spacers-extra,
+  ),
+  "margin-start": (
+    responsive: true,
+    property: margin-left,
+    class: ms,
+    values: $spacers-extra,
+  ),
+  // Negative margin utilities
+  "negative-margin":
+    (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: $negative-spacers-extra,
+    ),
+  "negative-margin-x": (
+    responsive: true,
+    property: margin-right margin-left,
+    class: mx,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-y": (
+    responsive: true,
+    property: margin-top margin-bottom,
+    class: my,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-top": (
+    responsive: true,
+    property: margin-top,
+    class: mt,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-end": (
+    responsive: true,
+    property: margin-right,
+    class: me,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-bottom": (
+    responsive: true,
+    property: margin-bottom,
+    class: mb,
+    values: $negative-spacers-extra,
+  ),
+  "negative-margin-start": (
+    responsive: true,
+    property: margin-left,
+    class: ms,
+    values: $negative-spacers-extra,
+  ),
+  // Padding utilities
+  "padding":
+    (
+      responsive: true,
+      property: padding,
+      class: p,
+      values: $spacers-extra,
+    ),
+  "padding-x": (
+    responsive: true,
+    property: padding-right padding-left,
+    class: px,
+    values: $spacers-extra,
+  ),
+  "padding-y": (
+    responsive: true,
+    property: padding-top padding-bottom,
+    class: py,
+    values: $spacers-extra,
+  ),
+  "padding-top": (
+    responsive: true,
+    property: padding-top,
+    class: pt,
+    values: $spacers-extra,
+  ),
+  "padding-end": (
+    responsive: true,
+    property: padding-right,
+    class: pe,
+    values: $spacers-extra,
+  ),
+  "padding-bottom": (
+    responsive: true,
+    property: padding-bottom,
+    class: pb,
+    values: $spacers-extra,
+  ),
+  "padding-start": (
+    responsive: true,
+    property: padding-left,
+    class: ps,
+    values: $spacers-extra,
+  ),
+  // Gap utility
+  "gap":
+    (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $spacers-extra,
+    ),
+  "row-gap": (
+    responsive: true,
+    property: row-gap,
+    class: row-gap,
+    values: $spacers-extra,
+  ),
+  "column-gap": (
+    responsive: true,
+    property: column-gap,
+    class: column-gap,
+    values: $spacers-extra,
+  ),
+  // Letter spacing
+  "spacing":
+    (
+      property: letter-spacing,
+      class: tracking,
+      values: (
+        tight: $spacing-tight,
+        normal: $spacing-normal,
+        wide: $spacing-wide,
+      ),
+    ),
+  "width": (
+    property: width,
+    class: w,
+    values: $spacers-extra,
+  ),
+  "height": (
+    property: height,
+    class: h,
+    values: $spacers-extra,
+  ),
+  "filter": (
+    property: filter,
+    class: filter,
+    values: (
+      grayscale: grayscale(100%),
+    ),
+  ),
+  "gutter-x": (
+    responsive: true,
+    css-var: true,
+    css-variable-name: gutter-x,
+    class: gx,
+    values: $spacers-extra,
+  ),
+  "gutter-y": (
+    responsive: true,
+    css-var: true,
+    css-variable-name: gutter-y,
+    class: gy,
+    values: $spacers-extra,
+  ),
+  "gutter": (
+    responsive: true,
+    css-var: true,
+    css-variable-name: gutter-x,
+    class: g,
+    values: $spacers-extra,
+  )
+);

src/scss/_utilities.scss

@@ -6,6 +6,11 @@ $border-values: (
   0: 0,
 );
 
+$utilities-border-colors: map-loop((
+  "red": red,
+  "green": green,
+), rgba-css-var, "$key", "border") !default;
+
 //Utilities
 $utilities: (
   "object": (
@@ -19,15 +24,6 @@ $utilities: (
       none: none,
     ),
   ),
-  "spacing": (
-    property: letter-spacing,
-    class: tracking,
-    values: (
-      tight: -0.05em,
-      normal: 0,
-      wide: 0.05em,
-    ),
-  ),
   "cursor": (
     property: cursor,
     class: cursor,

src/scss/_variables.scss

@@ -7,7 +7,7 @@ $enable-gradients: false !default;
 $enable-shadows: true !default;
 $enable-navbar-vertical: true !default;
 $enable-dark-mode: true !default;
-$enable-negative-margins: false !default;
+$enable-negative-margins: true !default;
 $enable-rfs: false !default;
 $enable-cssgrid: true !default;
 
@@ -52,22 +52,29 @@ $line-height-600: 2.5rem !default;
 $line-height-700: 3rem !default;
 
 $font-size-base: 0.875rem !default;
+
+$spacing-wide: .04em !default;
+$spacing-normal: 0 !default;
+$spacing-tight: -.04em !default;
+
 $body-letter-spacing: 0 !default;
 
 $font-weight-light: 300 !default;
 $font-weight-normal: 400 !default;
 $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
+$font-weight-black: 700 !default;
 
 $headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
 
 $font-weights: (
-  light: $font-weight-light,
+  'light': $font-weight-light,
-  normal: $font-weight-normal,
+  'normal': $font-weight-normal,
-  medium: $font-weight-medium,
+  'medium': $font-weight-medium,
-  bold: $font-weight-bold,
+  'bold': $font-weight-bold,
-  headings: $headings-font-weight,
+  'black': $font-weight-black,
+  'headings': $headings-font-weight,
 ) !default;
 
 $line-height-base: divide(1.25rem, $font-size-base) !default;
@@ -293,6 +300,12 @@ $border-radius: 4px !default;
 $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;
 
+$border-values: (
+  null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
+  wide: $border-width-wide var(--#{$prefix}border-style) $border-color-translucent,
+  0: 0,
+);
+
 // Icons
 $icon-color: var(--#{$prefix}gray-400) !default;
 
@@ -331,13 +344,13 @@ $avatar-sizes: (
   "xs": (
     size: 1.25rem,
     font-size: $h6-font-size,
-    icon-size: 1rem,
+    icon-size: .75rem,
     status-size: .375rem
   ),
   "sm": (
     size: 2rem,
     font-size: $h5-font-size,
-    icon-size: 1.25rem,
+    icon-size: 1.5rem,
     status-size: .5rem
   ),
   "md": (
@@ -396,7 +409,7 @@ $grid-gutter-width: 1rem !default;
 $container-variations: (
   slim: 16rem,
   tight: 30rem,
-  narrow: 45rem,
+  narrow: 61.875rem,
 ) !default;
 
 // Spacers
@@ -406,9 +419,14 @@ $spacer-2: 0.5rem !default;
 $spacer-3: 1rem !default;
 $spacer-4: 1.5rem !default;
 $spacer-5: 2rem !default;
-$spacer-6: 3rem !default;
+$spacer-6: 2.5rem !default;
-$spacer-7: 5rem !default;
+
-$spacer-8: 8rem !default;
+$spacer-7: 3rem !default;
+$spacer-8: 4rem !default;
+$spacer-9: 5rem !default;
+$spacer-10: 6rem !default;
+$spacer-11: 7rem !default;
+$spacer-12: 8rem !default;
 
 $spacer: $spacer-3 !default;
 
@@ -420,11 +438,18 @@ $spacers: (
   4: $spacer-4,
   5: $spacer-5,
   6: $spacer-6,
-  7: $spacer-7,
-  8: $spacer-8,
 ) !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
+$spacers-extra: (
+  7: $spacer-7,
+  8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
+) !default;
+
+$negative-spacers: null !default;
 
 // Sizes
 $size-spacers: (
@@ -453,6 +478,8 @@ $aspect-ratios: (
   "1x2": calc(2 / 1 * 100%),
   "3x1": calc(1 / 3 * 100%),
   "1x3": calc(3 / 1 * 100%),
+  "4x1": calc(1 / 4 * 100%),
+  "1x4": calc(4 / 1 * 100%),
   "4x3": calc(3 / 4 * 100%),
   "3x4": calc(4 / 3 * 100%),
   "16x9": calc(9 / 16 * 100%),
@@ -541,15 +568,20 @@ $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
 $input-btn-font-family: var(--#{$prefix}font-sans-serif) !default;
-$input-btn-padding-y: 0.625rem - 0.0625rem !default;
+$input-btn-padding-y: 0.5rem - 0.0625rem !default;
+$input-btn-icon-size: $icon-size !default;
 
 $input-btn-font-size-sm: $h5-font-size !default;
 $input-btn-padding-x-sm: 0.25rem !default;
-$input-btn-padding-y-sm: 0.125rem !default;
+$input-btn-padding-y-sm: 0.125rem - 0.0625rem !default;
+$input-btn-line-height-sm: 1rem !default;
+$input-btn-icon-size-sm: 1rem !default;
 
 $input-btn-font-size-lg: $h2-font-size !default;
-$input-btn-padding-x-lg: 0.75rem !default;
+$input-btn-padding-x-lg: 1.5rem !default;
-$input-btn-padding-y-lg: 0.5rem !default;
+$input-btn-padding-y-lg: 0.75rem - 0.0625rem !default;
+$input-btn-line-height-lg: 2rem !default;
+$input-btn-icon-size-lg: 2rem !default;
 
 $input-btn-focus-width: 0.25rem !default;
 
@@ -563,7 +595,10 @@ $input-focus-color: var(--#{$prefix}body-color) !default;
 $input-box-shadow: var(--#{$prefix}box-shadow-input) !default;
 
 // Buttons
-$btn-disabled-opacity: 0.4 !default;
+$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
+
+$btn-disabled-opacity: .4 !default;
 $btn-padding-x: 1rem !default;
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-color: var(--#{$prefix}border-color) !default;
@@ -720,6 +755,7 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 // Navbar
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
+$navbar-light-color: var(--#{$prefix}muted) !default;
 
 $navbar-hover-color: $white !default;
 
@@ -729,6 +765,7 @@ $navbar-border-color: var(--#{$prefix}border-color) !default;
 $navbar-light-color: var(--#{$prefix}body-color) !default;
 $navbar-light-brand-color: var(--#{$prefix}body-color) !default;
 $navbar-light-active-color: var(--#{$prefix}body-color) color !default;
+$navbar-light-hover-color: var(--#{$prefix}body-color) color !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
 $navbar-light-active-bg: rgba(0, 0, 0, 0.2) !default;
 

src/scss/layout/_animations.scss

@@ -59,4 +59,5 @@
   to {
     opacity: 0;
   }
-}
+}
+

src/scss/layout/_navbar.scss

@@ -82,7 +82,6 @@ Navbar
   --#{$prefix}navbar-border-width: #{$navbar-border-width};
   --#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
   --#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
-  --#{$prefix}navbar-color: var(--#{$prefix}body-color);
   --#{$prefix}navbar-border-color: #{$navbar-border-color};
   align-items: stretch;
   min-height: $navbar-height;

src/scss/marketing/_browser.scss

@@ -0,0 +1,67 @@
+//
+// Browser
+//
+.browser {
+  border-radius: var(--#{$prefix}border-radius-lg);
+  box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
+  background: var(--#{$prefix}bg-surface-secondary);
+  overflow: hidden;
+}
+
+.browser-header {
+  padding: .25rem 1rem;
+  background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .03));
+  border-bottom: 1px solid var(--#{$prefix}border-color);
+  border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
+}
+
+.browser-dots {
+  margin-right: 3rem;
+  display: flex;
+}
+
+.browser-dots-colored {
+  .browser-dot {
+    &:nth-child(1) {
+      background: #fb6058;
+    }
+
+    &:nth-child(2) {
+      background: #fcbe3b;
+    }
+
+    &:nth-child(3) {
+      background: #2ccb4c;
+    }
+  }
+}
+
+.browser-dot {
+  margin-right: .5rem;
+  width: .75rem;
+  min-width: .75rem;
+  height: .75rem;
+  background: var(--#{$prefix}border-color);
+  border-radius: 50%;
+  border: 1px solid var(--#{$prefix}border-color-dark);
+}
+
+.browser-input {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  padding: .25rem;
+  color: var(--#{$prefix}muted);
+  font-size: var(--#{$prefix}font-size-h5);
+  border-radius: var(--#{$prefix}border-radius);
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
+
+  &:hover {
+    text-decoration: none;
+  }
+}

src/scss/marketing/_core.scss

@@ -0,0 +1,8 @@
+.body-marketing {
+  --#{$prefix}body-font-size: 1rem;
+  --#{$prefix}body-line-height: 1.75;
+}
+
+.body-gradient {
+  background: var(--tblr-bg-surface) linear-gradient(to bottom, var(--tblr-bg-surface-secondary) 12%, var(--tblr-bg-surface) 99%) repeat-x top center/100% 100vh;
+}

src/scss/marketing/_hero.scss

@@ -0,0 +1,69 @@
+//
+// Hero
+//
+.hero {
+  text-align: center;
+  padding: 6.5rem 0;
+}
+
+.hero-title {
+  font-size: 3rem;
+  font-weight: var(--#{$prefix}font-weight-black);
+  letter-spacing: $spacing-tight;
+  line-height: $headings-line-height;
+
+  @include media-breakpoint-down(md) {
+    font-size: 2rem;
+  }
+}
+
+.hero-description {
+  color: var(--#{$prefix}muted);
+  font-size: var(--#{$prefix}font-size-h2);
+  line-height: 1.5;
+  margin: 0 auto;
+  max-width: 45rem;
+
+  @include media-breakpoint-down(sm) {
+    font-size: var(--#{$prefix}font-size-h3);
+  }
+}
+
+.hero-description-wide {
+  max-width: 61.875rem;
+}
+
+//
+// Hero subheader
+//
+.hero-subheader {
+  @include subheader;
+  margin-bottom: 0.5rem;
+}
+
+.hero-img {
+  margin: 4rem auto;
+  max-width: 65rem;
+  border-radius: $border-radius-lg;
+  position: relative;
+  z-index: 1;
+  //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
+  //  0 4px 6px -2px rgba($color-text, 0.05);
+
+  img,
+  svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    position: relative;
+  }
+}
+//
+//.hero-img-side {
+//  img,
+//  svg {
+//    max-width: 100%;
+//    height: auto;
+//    display: block;
+//  }
+//}

src/scss/marketing/_pricing.scss

@@ -0,0 +1,111 @@
+$pricing-card-width: 22rem;
+
+.pricing {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  justify-content: center;
+
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+  }
+}
+
+.pricing-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: $white;
+  border: 1px solid $border-color;
+  padding: 2rem;
+  margin: 0 0 1rem;
+  position: relative;
+  box-shadow: $box-shadow-card;
+  text-align: center;
+  border-radius: $border-radius-lg;
+
+  @include media-breakpoint-up(md) {
+    margin: 1rem -1px;
+    max-width: $pricing-card-width;
+
+    &:first-child {
+      border-radius: $border-radius-lg 0 0 $border-radius-lg;
+    }
+
+    &:last-child {
+      border-radius: 0 $border-radius-lg $border-radius-lg 0;
+    }
+  }
+
+  &.featured {
+    z-index: 1;
+    border: 2px solid $primary;
+    order: -1;
+
+    @include media-breakpoint-up(md) {
+      order: unset;
+      margin-top: 0;
+      margin-bottom: 0;
+      box-shadow: $box-shadow-card;
+      border-radius: $border-radius-lg;
+    }
+  }
+}
+
+.pricing-title {
+  font-size: $h2-font-size;
+  line-height: $h2-line-height;
+}
+
+.pricing-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translateY(-50%);
+  vertical-align: bottom;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pricing-btn {
+  margin-top: auto;
+  padding-top: 2rem;
+}
+
+.pricing-price {
+  display: flex;
+  justify-content: center;
+  font-size: 2.5rem;
+  line-height: 1;
+  font-weight: $font-weight-black;
+  margin: 0.75rem 0;
+}
+
+.pricing-price-currency {
+  font-size: $h2-font-size;
+  line-height: 1.5;
+  margin-right: 0.25rem;
+  font-weight: $font-weight-bold;
+}
+
+.pricing-price-description {
+  font-size: $h4-font-size;
+  line-height: $h4-line-height;
+  font-weight: $font-weight-normal;
+  color: $text-secondary;
+  align-self: center;
+  margin-left: 0.5rem;
+}
+
+.pricing-features {
+  margin: 1rem 0 0;
+  padding: 0;
+  list-style: none;
+  text-align: left;
+
+  > li:not(:first-child) {
+    margin-top: 0.25rem;
+  }
+}

src/scss/marketing/_sections.scss

@@ -0,0 +1,124 @@
+@keyframes move-forever1 {
+  0% {
+    transform: translate(85px, 0%);
+  }
+
+  100% {
+    transform: translate(-90px, 0%);
+  }
+}
+
+@keyframes move-forever2 {
+  0% {
+    transform: translate(-90px, 0%);
+  }
+
+  100% {
+    transform: translate(85px, 0%);
+  }
+}
+
+@keyframes move-forever3 {
+  0% {
+    transform: translate(-90px, 0%);
+  }
+
+  100% {
+    transform: translate(85px, 0%);
+  }
+}
+
+//
+// Sections
+//
+.section {
+  --section-bg: transparent;
+  background: var(--section-bg);
+  position: relative;
+  padding: 5rem 0;
+}
+
+.section-sm {
+  padding: 4rem 0;
+}
+
+.section-white {
+  --section-bg: var(--#{$prefix}bg-surface);
+}
+
+.section-light {
+  --section-bg: var(--#{$prefix}bg-surface-secondary);
+}
+
+.section-primary {
+  --section-bg: var(--#{$prefix}primary);
+  color: $white;
+}
+
+.section-dark {
+  --section-bg: var(--#{$prefix}dark);
+  color: $white;
+}
+
+.section-header {
+  text-align: center;
+  max-width: 45rem;
+  margin: 0 auto 5rem;
+
+  @at-root .section-sm & {
+    margin-bottom: 4rem;
+  }
+}
+
+.section-title {
+  font-size: var(--#{$prefix}font-size-h1);
+  font-weight: var(--#{$prefix}font-weight-bold);
+  line-height: 1.2;
+}
+
+.section-title-lg {
+  font-size: 2rem;
+}
+
+.section-description {
+  color: var(--#{$prefix}muted);
+  font-size: var(--#{$prefix}font-size-h3);
+  line-height: var(--#{$prefix}line-height-h3);
+  margin-top: 1rem;
+}
+
+//
+// Section divider
+//
+.section-divider {
+  position: absolute;
+  bottom: 100%;
+  pointer-events: none;
+  height: 5rem;
+  width: 100%;
+
+  path {
+    fill: var(--section-bg);
+  }
+
+  .wave-1 {
+    animation: move-forever1 30s linear infinite;
+    animation-delay: -2s;
+  }
+
+  .wave-2 {
+    animation: move-forever2 24s linear infinite;
+    opacity: .5;
+    animation-delay: -2s;
+  }
+
+  .wave-3 {
+    animation: move-forever3 18s linear infinite;
+    opacity: .3;
+    animation-delay: -2s;
+  }
+}
+
+.section-divider-auto {
+  height: auto;
+}