---
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&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">
      <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 -->