<!-- Hero -->
<div class="position-relative bg-img-start" style="background-image: url(../assets/svg/components/card-11.svg);">
<div class="container content-space-t-4 content-space-b-1 content-space-b-lg-3">
<div class="row justify-content-lg-between align-items-lg-center pt-lg-5">
<div class="col-md-8 col-lg-5">
<!-- Heading -->
<div class="mb-5">
<h1 class="display-4 mb-3">The ad that manages itself</h1>
<p class="lead">Automate all your ad management strategies for Facebook, Google and Snapchat Ads in a single interface.</p>
</div>
<!-- End Title & Description -->
<!-- Form -->
<form class="mb-7">
<!-- Input Group -->
<div class="row gx-2">
<div class="col-sm-6 col-md mb-2 mb-sm-0">
<input type="text" class="form-control form-control-lg" placeholder="Enter your email" aria-label="Enter your email" aria-describedby="emailAddOn">
</div>
<div class="col-sm-auto">
<div class="d-grid">
<button class="btn btn-primary btn-lg" type="button" id="emailAddOn">Request demo</button>
</div>
</div>
</div>
<!-- End Input Group -->
</form>
<!-- End Form -->
<span class="text-cap">Front partners:</span>
<div class="row">
<div class="col py-3">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/layar-dark.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col py-3">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/fitbit-dark.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col py-3">
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/capsule-dark.svg" alt="Logo">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- Gallery -->
<div class="col-lg-6 d-none d-lg-block position-lg-absolute bottom-0 end-0 transform-rotate-n22deg me-lg-n10">
<div class="row gx-3 align-items-end">
<div class="col">
<div class="d-grid gap-3">
<div data-aos="fade-up" data-aos-offset="-50">
<img class="img-fluid shadow-lg rounded-2" src="../assets/img/407x472/img2.jpg" alt="Image Description">
</div>
<div data-aos="fade-up" data-aos-delay="100" data-aos-offset="-50">
<img class="img-fluid shadow-lg rounded-2" src="../assets/img/407x472/img3.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Col -->
<div class="col">
<div class="d-grid gap-3">
<div data-aos="fade-up" data-aos-delay="200" data-aos-offset="-50">
<img class="img-fluid shadow-lg rounded-2" src="../assets/img/407x520/img1.jpg" alt="Image Description">
</div>
<div data-aos="fade-up" data-aos-delay="300" data-aos-offset="-50">
<img class="img-fluid shadow-lg rounded-2" src="../assets/img/407x407/img1.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Col -->
<div class="col">
<div class="d-grid gap-3">
<div data-aos="fade-up" data-aos-delay="400" data-aos-offset="-50">
<img class="img-fluid shadow-lg rounded-2" src="../assets/img/407x472/img6.jpg" alt="Image Description">
</div>
<div data-aos="fade-up" data-aos-delay="500" data-aos-offset="-50">
<img class="img-fluid shadow-lg rounded-2" src="../assets/img/407x115/img1.jpg" alt="Image Description">
</div>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Gallery -->
</div>
<!-- End Hero -->