Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Marketing pages plugin (#1332)

Browse Source 
* 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>
This commit is contained in:
Paweł Kuna
2025-01-08 15:27:36 +01:00
committed by GitHub
parent 6877a18a3a
commit 844d66f597
75 changed files with 1844 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

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

10
package.json
View File

@@ -106,11 +106,11 @@
}, },
{ {
"path": "./dist/css/tabler-vendors.css", "path": "./dist/css/tabler-vendors.css",
"maxSize": "7 kB" "maxSize": "7.5 kB"
}, },
{ {
"path": "./dist/css/tabler-vendors.min.css", "path": "./dist/css/tabler-vendors.min.css",
"maxSize": "6 kB" "maxSize": "6.5 kB"
}, },
{ {
"path": "./dist/js/tabler.js", "path": "./dist/js/tabler.js",
@@ -166,6 +166,7 @@
"gulp-terser": "^2.1.0", "gulp-terser": "^2.1.0",
"imageoptim-cli": "^3.1.9", "imageoptim-cli": "^3.1.9",
"imask": "^7.6.1", "imask": "^7.6.1",
"js-beautify": "^1.15.1",
"jsvectormap": "^1.6.0", "jsvectormap": "^1.6.0",
"list.js": "^2.3.1", "list.js": "^2.3.1",
"litepicker": "^2.0.12", "litepicker": "^2.0.12",
@@ -173,7 +174,6 @@
"plyr": "^3.7.8", "plyr": "^3.7.8",
"postcss": "^8.4.49", "postcss": "^8.4.49",
"prettier": "^2.8.8", "prettier": "^2.8.8",
"js-beautify": "^1.15.1",
"release-it": "^15.11.0", "release-it": "^15.11.0",
"request": "^2.88.2", "request": "^2.88.2",
"rollup": "2.79.2", "rollup": "2.79.2",
@@ -183,6 +183,7 @@
"star-rating.js": "^4.3.1", "star-rating.js": "^4.3.1",
"tinymce": "^7.5.1", "tinymce": "^7.5.1",
"tom-select": "^2.4.1", "tom-select": "^2.4.1",
"typed.js": "^2.1.0",
"vinyl-buffer": "^1.0.1", "vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0", "vinyl-source-stream": "^2.0.0",
"yaml": "^2.6.1", "yaml": "^2.6.1",
@@ -211,7 +212,8 @@
"plyr": "^3.7.8", "plyr": "^3.7.8",
"star-rating.js": "^4.3.0", "star-rating.js": "^4.3.0",
"tinymce": "^6.4.2 || ^7.0.0", "tinymce": "^6.4.2 || ^7.0.0",
"tom-select": "^2.2.2" "tom-select": "^2.2.2",
"typed.js": "^2.1.0"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {
"@melloware/coloris": { "@melloware/coloris": {

8
pnpm-lock.yaml generated
View File

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

3
src/pages/_data/libs.json
View File

@@ -24,7 +24,8 @@
"plyr": "plyr/dist/plyr.min.js", "plyr": "plyr/dist/plyr.min.js",
"dropzone": "dropzone/dist/dropzone-min.js", "dropzone": "dropzone/dist/dropzone-min.js",
"star-rating.js": "star-rating.js/dist/star-rating.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": { "css": {
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css", "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css",

4
src/pages/_data/menu.yml
View File

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

43
src/pages/_data/real-estate.yml Normal file
View File

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

20
src/pages/_data/testimonials.yml Normal file
View File

@@ -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."

30
src/pages/_includes/cards/company-lookup.html
View File

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

4
src/pages/_includes/layout/navbar-logo.html
View File

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

1
src/pages/_includes/marketing/brands/baremetrics.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

1
src/pages/_includes/marketing/brands/cgi.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 754 B

1
src/pages/_includes/marketing/brands/docplanner.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
src/pages/_includes/marketing/brands/flow.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

1
src/pages/_includes/marketing/brands/fubotv.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/pages/_includes/marketing/brands/six-flags.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

1
src/pages/_includes/marketing/brands/vocus.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

22
src/pages/_includes/marketing/hero/browser.html Normal file
View File

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

45
src/pages/_includes/marketing/hero/side.html Normal file
View File

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

44
src/pages/_includes/marketing/navbar.html Normal file
View File

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

11
src/pages/_includes/marketing/section-divider.html Normal file
View File

@@ -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 %}

17
src/pages/_includes/marketing/sections/companies.html Normal file
View File

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

33
src/pages/_includes/marketing/sections/counters.html Normal file
View File

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

10
src/pages/_includes/marketing/sections/cta.html Normal file
View File

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

33
src/pages/_includes/marketing/sections/faq-2.html Normal file
View File

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

40
src/pages/_includes/marketing/sections/faq.html Normal file
View File

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

56
src/pages/_includes/marketing/sections/features-2.html Normal file
View File

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

56
src/pages/_includes/marketing/sections/features-3.html Normal file
View File

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

22
src/pages/_includes/marketing/sections/features.html Normal file
View File

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

38
src/pages/_includes/marketing/sections/pricing-banner.html Normal file
View File

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

82
src/pages/_includes/marketing/sections/pricing.html Normal file
View File

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

19
src/pages/_includes/marketing/sections/subscribe.html Normal file
View File

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

43
src/pages/_includes/marketing/sections/testimonials.html Normal file
View File

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

21
src/pages/_includes/ui/marketing/browser.html Normal file
View File

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

5
src/pages/_includes/ui/responsive-image.html Normal file
View File

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

3
src/pages/_includes/ui/shape.html Normal file
View File

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

19
src/pages/_includes/ui/typed.html Normal file
View File

@@ -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 %}

164
src/pages/_layouts/marketing.html Normal file
View File

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

4
src/pages/_plugins/jekyll-filters.rb
View File

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

44
src/pages/marketing/about.html Normal file
View File

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

25
src/pages/marketing/hero.html Normal file
View File

@@ -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"%}

24
src/pages/marketing/index.html Normal file
View File

@@ -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"%}

16
src/pages/marketing/pricing.html Normal file
View File

@@ -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" %}

59
src/pages/marketing/real-estate.html Normal file
View File

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

13
src/pages/marketing/testimonials.html Normal file
View File

@@ -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" %}

42
src/pages/marketing/text.html Normal file
View File

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

209
src/scss/_utilities-marketing.scss Normal file
View File

@@ -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,
)
);

9
src/scss/_utilities.scss
View File

@@ -19,15 +19,6 @@ $utilities: (
none: none, none: none,
), ),
), ),
"spacing": (
property: letter-spacing,
class: tracking,
values: (
tight: -0.05em,
normal: 0,
wide: 0.05em,
),
),
"cursor": ( "cursor": (
property: cursor, property: cursor,
class: cursor, class: cursor,

0
src/scss/_variables-marketing.scss Normal file
View File

77
src/scss/_variables.scss
View File

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

1
src/scss/layout/_animations.scss
View File

@@ -60,3 +60,4 @@
opacity: 0; opacity: 0;
} }
} }

1
src/scss/layout/_navbar.scss
View File

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

67
src/scss/marketing/_browser.scss Normal file
View File

@@ -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;
}
}

8
src/scss/marketing/_core.scss Normal file
View File

@@ -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;
}

0
src/scss/marketing/_filters.scss Normal file
View File

69
src/scss/marketing/_hero.scss Normal file
View File

@@ -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;
// }
//}

111
src/scss/marketing/_pricing.scss Normal file
View File

@@ -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;
}
}

124
src/scss/marketing/_sections.scss Normal file
View File

@@ -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;
}

31
src/scss/marketing/_shape.scss Normal file
View File

@@ -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});
}
}

4
src/scss/mixins/_mixins.scss
View File

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

13
src/scss/tabler-marketing.scss Normal file
View File

@@ -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";

1
src/scss/tabler-vendors.scss
View File

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

14
src/scss/ui/_buttons.scss
View File

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

4
src/scss/ui/_images.scss
View File

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

26
src/scss/ui/_lists.scss
View File

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

4
src/scss/vendor/_typed.scss vendored Normal file
View File

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

5
src/static/logo.svg
View File

@@ -1,4 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232 68"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232 68">
<<<<<<< HEAD
<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"/> <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"/>
<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 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 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="#206bc4"/>
<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="#182433"/>
>>>>>>> 1583c966 (generate utilities for marketing pages, negative utilities, new filters, browser component)
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/static/marketing/photo-1494526585095-c41746248156.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
src/static/marketing/photo-1512917774080-9991f1c4c750.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
src/static/marketing/photo-1558036117-15d82a90b9b1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
src/static/marketing/photo-1564013799919-ab600027ffc6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

BIN
src/static/marketing/photo-1580587771525-78b9dba3b914.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
src/static/marketing/photo-1592595896551-12b371d546d5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
src/static/marketing/preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

BIN
src/static/marketing/preview@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 353 KiB