tabler/preview/pages/_includes/marketing/hero/side.html

<header class="hero">
	<div class="container">
		<div class="row g-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 />
					{% include "ui/typed.html" strings="more effective|more efficient|more productive" %}
				</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 class="hero-img-side">
					<div id="carousel-controls" class="carousel slide" data-bs-ride="carousel" data-interval="4000">
						<div class="carousel-inner">
							<div class="carousel-item active">
								{% include "ui/illustration.html" image="boy-with-key.svg" class="d-block mx-auto" height="350" %}
							</div>
							<div class="carousel-item">
								{% include "ui/illustration.html" image="boy-girl.svg" class="d-block mx-auto" height="350" %}
							</div>
							<div class="carousel-item">
								{% include "ui/illustration.html" image="computer-fix.svg" class="d-block mx-auto" height="350" %}
							</div>
						</div>
						<a class="carousel-control-prev text-secondary" href="#carousel-controls" role="button" data-bs-slide="prev">
							{% include "ui/icon.html" icon="chevron-left" class="icon-md" %}
							<span class="visually-hidden">Previous</span>
						</a>
						<a class="carousel-control-next text-secondary" href="#carousel-controls" role="button" data-bs-slide="next">
							{% include "ui/icon.html" icon="chevron-right" class="icon-md" %}
							<span class="visually-hidden">Next</span>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>