shared/components/marketing/hero/Browser.astro - dev - githubmirror/tabler

shared/components/marketing/hero/Browser.astro

47 строк2 KB

codecalm

Fix Prettier formatting regression and Astro type-check errors

03 авг 2026, 02:26

03 авг 2026, 02:26f27c70a

---
import Icon from '@ui/Icon.astro'
import { site } from '@shared/lib/site'
---

<!-- 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 img-overlap-margin">
      <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>
        <picture>
          <img src="../static/marketing/preview.png" srcset="../static/marketing/preview.png 1x, ../static/marketing/preview@2x.png 2x" alt="" class="img-fluid" width="1040" height="760" loading="lazy" />
        </picture>
      </div>
    </div>
  </div>
</header>
<!-- END HERO -->