Merge branch 'dev' of https://github.com/tabler/tabler into dev

_config.yml

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

package.json

@@ -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:
   [email protected]:
     resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
 
+  [email protected]:
+    resolution: {integrity: sha512-bDuXEf7YcaKN4g08NMTUM6G90XU25CK3bh6U0THC/Mod/QPKlEt9g/EjvbYB8x2Qwr2p6J6I3NrsoYaVnY6wsQ==}
+
   [email protected]:
     resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
 
@@ -9817,6 +9823,8 @@ snapshots:
       for-each: 0.3.3
       is-typed-array: 1.1.10
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       is-typedarray: 1.0.0

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/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/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/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

@@ -19,15 +19,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,
-  normal: $font-weight-normal,
-  medium: $font-weight-medium,
-  bold: $font-weight-bold,
-  headings: $headings-font-weight,
+  'light': $font-weight-light,
+  'normal': $font-weight-normal,
+  'medium': $font-weight-medium,
+  'bold': $font-weight-bold,
+  '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-7: 5rem !default;
-$spacer-8: 8rem !default;
+$spacer-6: 2.5rem !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,
+) !default;
+
+$spacers-extra: (
   7: $spacer-7,
   8: $spacer-8,
+  9: $spacer-9,
+  10: $spacer-10,
+  11: $spacer-11,
+  12: $spacer-12,
 ) !default;
 
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !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-y-lg: 0.5rem !default;
+$input-btn-padding-x-lg: 1.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;
+}

src/scss/marketing/_shape.scss

@@ -0,0 +1,31 @@
+.shape {
+  --#{$prefix}shape-size: #{$avatar-size};
+  --#{$prefix}shape-icon-size: #{$avatar-icon-size};
+  background-color: var(--#{$prefix}primary-lt);
+  color: var(--#{$prefix}primary);
+  border-radius: 35%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--#{$prefix}shape-size);
+  width: var(--#{$prefix}shape-size);
+
+  .icon {
+    width: var(--#{$prefix}shape-icon-size);
+    height: var(--#{$prefix}shape-icon-size);
+  }
+}
+
+@each $avatar-size, $size in $avatar-sizes {
+  .shape-#{$avatar-size} {
+    --#{$prefix}shape-size: #{map-get($size, size)};
+    --#{$prefix}shape-icon-size: #{map-get($size, icon-size)};
+  }
+}
+
+@each $name, $color in $colors {
+  .shape-#{$name} {
+    background: var(--#{$prefix}#{$name}-lt);
+    color: var(--#{$prefix}#{$name});
+  }
+}

src/scss/mixins/_mixins.scss

@@ -1,11 +1,11 @@
 @mixin subheader($include-color: true, $include-line-height: true) {
-  font-size: $h6-font-size;
+  font-size: $h5-font-size;
   font-weight: var(--#{$prefix}font-weight-bold);
   text-transform: uppercase;
   letter-spacing: .04em;
 
   @if $include-line-height {
-    line-height: $h6-line-height;
+    line-height: $h5-line-height;
   }
 
   @if ($include-color) {

src/scss/tabler-marketing.scss

@@ -0,0 +1,13 @@
+@import "config";
+@import "variables";
+@import "utilities-marketing";
+
+@import "marketing/core";
+@import "marketing/hero";
+@import "marketing/browser";
+@import "marketing/sections";
+@import "marketing/filters";
+@import "marketing/pricing";
+@import "marketing/shape";
+
+@import "bootstrap/scss/utilities/api";

src/scss/tabler-vendors.scss

@@ -11,3 +11,4 @@
 @import "vendor/tinymce";
 @import "vendor/stars-rating";
 @import "vendor/coloris";
+@import "vendor/typed";

src/scss/ui/_buttons.scss

@@ -2,7 +2,7 @@
 // Button
 //
 .btn {
-  --#{$prefix}btn-icon-size: #{$icon-size};
+  --#{$prefix}btn-icon-size: #{$input-btn-icon-size};
   --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}btn-color: var(--#{$prefix}body-color);
   --#{$prefix}btn-border-color: #{$btn-border-color};
@@ -84,9 +84,9 @@
     --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg);
     --#{$prefix}btn-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
-    --#{$prefix}btn-hover-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
     --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
-    --#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color}-darken);
     --#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
     --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
@@ -130,13 +130,13 @@
 // Button sizes
 //
 .btn-sm, .btn-group-sm > .btn {
-  --#{$prefix}btn-line-height: 1.5;
-  --#{$prefix}btn-icon-size: .75rem;
+  --#{$prefix}btn-line-height: #{$input-btn-line-height-sm};
+  --#{$prefix}btn-icon-size: #{$input-btn-icon-size-sm};
 }
 
 .btn-lg, .btn-group-lg > .btn {
-  --#{$prefix}btn-line-height: 1.5;
-  --#{$prefix}btn-icon-size: 2rem;
+  --#{$prefix}btn-line-height: #{$input-btn-line-height-lg};
+  --#{$prefix}btn-icon-size: #{$input-btn-icon-size-lg};
 }
 
 //

src/scss/ui/_images.scss

@@ -13,3 +13,7 @@
     --#{$prefix}img-responsive-ratio: #{$ratio};
   }
 }
+
+.img-bg {
+  background: no-repeat center/cover;
+}

src/scss/ui/_lists.scss

@@ -95,26 +95,22 @@
   }
 }
 
-
-.list-separated-item {
-  padding: 1rem 0;
-
-  &:first-child {
-    padding-top: 0;
-  }
-
-  &:last-child {
-    padding-bottom: 0;
-  }
-
-  & + & {
-    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  }
+/**
+Seprated list
+*/
+.list-separated {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer;
 }
 
 /**
 Inline list
  */
+.list-inline {
+  margin: 0;
+}
+
 .list-inline-item:not(:last-child) {
   margin-right: auto;
   margin-inline-end: $list-inline-padding;

src/scss/vendor/_typed.scss

@@ -0,0 +1,4 @@
+.typed-cursor {
+  font-weight: 500;
+  color: $secondary;
+}