@@ -272,48 +283,18 @@ export default async function HomePage() {
<divclassName="container">
<divclassName="section-header">
<h2className="section-title">Multiple Demos</h2>
<pclassName="section-description">
6 Pre-built layout options to cater needs of modern web
applications. Ready-to-use UI elements enable to develop modern
web application with great speed
</p>
<pclassName="section-description">6 Pre-built layout options to cater needs of modern web applications. Ready-to-use UI elements enable to develop modern web application with great speed</p>
</div>
<divclassName="row"data-aos-id-blocks-previews>
<divclassName="col-6 md:col-4">
<a
href="https://preview.tabler.io?theme=light"
className="d-block text-center link text-reset"
data-aos="fade-up"
data-aos-anchor="[data-aos-id-blocks-previews]"
data-aos-delay={0}
target="_blank"
rel="noopener noreferrer"
>
<ResponsiveImage
src="/img/tabler/preview.png"
width="389"
height="243"
className="mx-auto rounded link-img"
/>
<ahref="https://preview.tabler.io?theme=light"className="d-block text-center link text-reset"data-aos="fade-up"data-aos-anchor="[data-aos-id-blocks-previews]"data-aos-delay={0}target="_blank"rel="noopener noreferrer">
<ahref="https://preview.tabler.io?theme=dark"className="d-block text-center link text-reset"data-aos="fade-up"data-aos-anchor="[data-aos-id-blocks-previews]"data-aos-delay={150}target="_blank"rel="noopener noreferrer">
@@ -424,10 +378,7 @@ export default async function HomePage() {
<divclassName="col">
<h3>Designed with users in mind</h3>
<pclassName="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
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>
...
...
@@ -441,11 +392,8 @@ export default async function HomePage() {
<divclassName="col">
<h3>Built for developers</h3>
<pclassName="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.
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>
...
...
@@ -457,12 +405,7 @@ export default async function HomePage() {
</div>
<divclassName="col">
<h3>Fully customizable</h3>
<pclassName="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>
<pclassName="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>
...
...
@@ -475,9 +418,7 @@ export default async function HomePage() {
<sectionclassName="section section-dark">
<divclassName="container">
<divclassName="section-header">
<h2className="section-title">
Dark theme whenever you need it ✨
</h2>
<h2className="section-title">Dark theme whenever you need it ✨</h2>
</div>
<divclassName="row items-center">
...
...
@@ -491,12 +432,8 @@ export default async function HomePage() {
<divclassName="col">
<h3>Change default variant when you need</h3>
<pclassName="text-muted m-0">
Tabler is a beautiful dashboard that comes in 2
versions: Dark and Light Mode. If you are looking for a
tool to manage and visualize data about your business,
this dashboard is the thing for you. It combines colors
that are easy on the eye, spacious cards, beautiful
typography, and graphics.
Tabler is a beautiful dashboard that comes in 2 versions: Dark and Light Mode. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you. It combines colors
that are easy on the eye, spacious cards, beautiful typography, and graphics.
</p>
</div>
</div>
...
...
@@ -508,11 +445,7 @@ export default async function HomePage() {
</div>
<divclassName="col">
<h3>All components available in dark mode</h3>
<pclassName="text-muted m-0">
Tabler contains a vast collection of assorted reusable
dark UI components, page layouts, charts, tables, UI
elements, and icons.
</p>
<pclassName="text-muted m-0">Tabler contains a vast collection of assorted reusable dark UI components, page layouts, charts, tables, UI elements, and icons.</p>
</div>
</div>
</div>
...
...
@@ -525,11 +458,8 @@ export default async function HomePage() {
<divclassName="col">
<h3>A lot of reasons why dark theme are used widely</h3>
<pclassName="text-muted m-0">
Dark mode saves battery life and can reduce eye fatigue
in low-light conditions. The high contrast between text
and background reduces eye fatigue, and the dark screen
helps you focus your eyes longer and helps your brain
keep more attention on the screen.
Dark mode saves battery life and can reduce eye fatigue in low-light conditions. The high contrast between text and background reduces eye fatigue, and the dark screen helps you focus your eyes longer and helps your
brain keep more attention on the screen.
</p>
</div>
</div>
...
...
@@ -537,12 +467,7 @@ export default async function HomePage() {