mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
78 lines
3.1 KiB
Plaintext
78 lines
3.1 KiB
Plaintext
---
|
|
import Icon from '@ui/Icon.astro'
|
|
import Illustration from '@ui/Illustration.astro'
|
|
import Carousel from '@ui/Carousel.astro'
|
|
import CaptureScript from '../../CaptureScript.astro'
|
|
|
|
const strings = ['more effective', 'more efficient', 'more productive']
|
|
const typedId = 'typed'
|
|
---
|
|
|
|
<!-- BEGIN HERO -->
|
|
<header class="hero">
|
|
<div class="container">
|
|
<div class="row g-lg-8 align-items-center">
|
|
<div class="col-md-6 text-center text-md-start">
|
|
<div class="hero-subheader">Tabler Emails</div>
|
|
<h1 class="hero-title">
|
|
Better email communication,<br />
|
|
<span class="text-primary" id={typedId}>{strings[0]}</span>
|
|
</h1>
|
|
<p class="hero-description mt-4">54 eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.</p>
|
|
<div class="mt-6 mt-lg-7">
|
|
<div class="row justify-content-center justify-content-md-start">
|
|
<div class="col-auto"><a href="#" class="btn btn-lg btn-primary">Buy for $29</a></div>
|
|
<div class="col-auto"><a href="#" class="btn btn-lg">Browse gallery</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div>
|
|
<Carousel id="carousel-controls" interval={4000}>
|
|
<div class="carousel-item active">
|
|
<Illustration image="boy-with-key.svg" class="d-block mx-auto" height="350" />
|
|
</div>
|
|
<div class="carousel-item">
|
|
<Illustration image="boy-girl.svg" class="d-block mx-auto" height="350" />
|
|
</div>
|
|
<div class="carousel-item">
|
|
<Illustration image="computer-fix.svg" class="d-block mx-auto" height="350" />
|
|
</div>
|
|
<a slot="controls" class="carousel-control-prev text-secondary" href="#carousel-controls" role="button" data-bs-slide="prev">
|
|
<Icon name="chevron-left" class="icon-md" />
|
|
<span class="visually-hidden">Previous</span>
|
|
</a>
|
|
<a slot="controls" class="carousel-control-next text-secondary" href="#carousel-controls" role="button" data-bs-slide="next">
|
|
<Icon name="chevron-right" class="icon-md" />
|
|
<span class="visually-hidden">Next</span>
|
|
</a>
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- END HERO -->
|
|
<CaptureScript>
|
|
<!-- BEGIN TYPED -->
|
|
<script is:inline define:vars={{ typedId, strings }}>
|
|
// @ts-nocheck — typedId is used in a template literal, which the type checker resolves independently of define:vars.
|
|
function initTyped() {
|
|
new Typed(`#${typedId}`, {
|
|
strings,
|
|
typeSpeed: 100,
|
|
backSpeed: 50,
|
|
backDelay: 1000,
|
|
startDelay: 1000,
|
|
loop: true,
|
|
fade: true,
|
|
})
|
|
}
|
|
|
|
// Typed.js loads via a deferred page-lib <script>, which only runs once parsing
|
|
// finishes — this inline script (positioned mid-body) would otherwise run first.
|
|
document.readyState !== 'loading' ? initTyped() : document.addEventListener('DOMContentLoaded', initTyped, { once: true })
|
|
</script>
|
|
<!-- END TYPED -->
|
|
</CaptureScript>
|