base tabler

This commit is contained in:
JACS 2026-05-01 12:46:11 -05:00
parent ac2cfa9fe1
commit 0f84beacf1
1432 changed files with 28760 additions and 1 deletions

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-secondary">Trusted by over 3,000 companies</h2>
</div>
<div class="row g-lg-8 align-items-center justify-content-center">
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/baremetrics.svg" %}</a></div>
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/cgi.svg" %}</a></div>
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/docplanner.svg" %}</a></div>
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/flow.svg" %}</a></div>
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/fubotv.svg" %}</a></div>
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/six-flags.svg" %}</a></div>
<div class="col-auto"><a href="#" class="link-secondary">{% include "marketing/brands/vocus.svg" %}</a></div>
</div>
</div>
</section>

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>

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-end="chevron-right" %}
</div>
</div>
</section>

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">Cant find the answer youre 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-secondary">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-secondary">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-secondary">
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>

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-lg-4">
<div class="col-md-4 prose">
<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 prose">
<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 prose">
<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 prose">
<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 prose">
<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 prose">
<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>

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-lg-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-secondary 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-secondary 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-secondary m-0">You can easily customize the UI elements to make them fit the needs of your project. And dont worry if you dont have much experience - Tabler is easy to get started!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

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-lg-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-secondary 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-secondary 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-secondary m-0">You can easily customize the UI elements to make them fit the needs of your project. And dont worry if you dont 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>

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-secondary">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-secondary">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-secondary">Draw recipients attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.</p>
</div>
</div>
</div>
</section>

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>

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>

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>

View file

@ -0,0 +1,44 @@
{% 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-lg-6">
{% assign i = 1 %}
{% assign filtered-testimonials = testimonials | slice: 0, limit | split_to_n: 3 %}
{% for group in filtered-testimonials %}
<div class="col-md-6 col-lg-4">
<div class="row g-lg-6">
{% for testimonial in group %}
{% assign person = people[i] %}
<div class="col-12">
<a href="#" class="card bg-surface-secondary">
<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>