mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
Paweł Kunaandgithub-actions[bot]
64e290bafa
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
50 lines
2.2 KiB
Plaintext
50 lines
2.2 KiB
Plaintext
---
|
|
import Icon from '@ui/Icon.astro'
|
|
import { site } from '@shared/lib/site'
|
|
import { relativeBase } from '@shared/lib/url'
|
|
|
|
const base = relativeBase(Astro.url.pathname)
|
|
---
|
|
|
|
<!-- BEGIN HERO -->
|
|
<header class="hero pb-0">
|
|
<div class="container">
|
|
<h1 class="hero-title">Develop beautiful web apps with Tabler</h1>
|
|
<p class="hero-description mt-4">Tabler is a free and open source web application UI kit based on Bootstrap 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">
|
|
<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.previewUrl} class="browser-input" target="_blank" rel="noopener noreferrer" data-bs-toggle="tooltip" data-bs-placement="top" title="Open preview of Tabler dashboard!">
|
|
<Icon name="lock" color="green" size="sm" class="me-2" />
|
|
{site.previewUrl}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src={`${base}/static/marketing/preview.png`} srcset={`${base}/static/marketing/preview.png 1x, ${base}/static/marketing/preview@2x.png 2x`} alt="" class="img-fluid hide-theme-dark" width="1060" height="663" loading="lazy" />
|
|
<img src={`${base}/static/marketing/preview-dark.png`} srcset={`${base}/static/marketing/preview-dark.png 1x, ${base}/static/marketing/preview-dark@2x.png 2x`} alt="" class="img-fluid hide-theme-light" width="1060" height="663" loading="lazy" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- END HERO -->
|