<!-- Hero -->
<div class="position-relative">
<div class="container content-space-t-1 content-space-t-md-2 content-space-t-lg-5 content-space-b-2 content-space-b-sm-3 content-space-b-md-4 content-space-b-lg-0 content-space-b-xl-4">
<div class="row">
<div class="col-lg-5">
<!-- Heading -->
<div class="mb-5">
<h1>A digital UI Kit with a robust design</h1>
<p class="lead">Super clean, minimalistic, stylized mockup collection with awesome customization.</p>
</div>
<!-- End Title & Description -->
<div class="d-flex align-items-center mb-5" style="max-width: 25rem;">
<div class="flex-shrink-0">
<img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
</div>
<div class="flex-grow-1 ms-2">
<p class="small mb-0">Compatible with Figma <span class="badge bg-warning text-dark rounded-pill ms-1">Coming soon</span></p>
</div>
</div>
<div class="d-flex align-items-center gap-2 mb-8">
<a class="btn btn-primary btn-transition me-2" href="../page-login-simple.html">
Get Started <i class="bi-chevron-right small ms-1"></i>
</a>
<!-- Fancybox -->
<a class="video-player btn btn-outline-primary btn-transition" href="https://www.youtube.com/watch?v=d4eDWc8g0e0" role="button" data-fslightbox="youtube-video">
<i class="bi-play-circle-fill me-1"></i> Play video
</a>
<!-- End Fancybox -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- Gallery -->
<div class="col-lg-7 position-lg-absolute top-0 end-0 transform-rotate-n40deg">
<div class="row gx-3 align-items-end">
<div class="col-3 mb-10">
<div class="d-grid gap-3">
<div data-aos="fade-up">
<img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img6.jpg" alt="图片描述内容">
</div>
<div data-aos="fade-up" data-aos-delay="50">
<img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img4.jpg" alt="图片描述内容">
</div>
<div data-aos="fade-up" data-aos-delay="100">
<img class="img-fluid shadow rounded-2" src="../assets/img/407x585/img1.jpg" alt="图片描述内容">
</div>
</div>
</div>
<!-- End Col -->
<div class="col-3">
<div class="d-grid gap-3">
<div data-aos="fade-up" data-aos-delay="150">
<img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img1.jpg" alt="图片描述内容">
</div>
<div data-aos="fade-up" data-aos-delay="200">
<img class="img-fluid shadow rounded-2" src="../assets/img/407x115/img1.jpg" alt="图片描述内容">
</div>
<div data-aos="fade-up" data-aos-delay="250">
<img class="img-fluid shadow-primary-lg rounded-2" src="../assets/img/407x283/img1.jpg" alt="图片描述内容">
</div>
<div data-aos="fade-up" data-aos-delay="300">
<img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img5.jpg" alt="图片描述内容">
</div>
<div data-aos="fade-up" data-aos-delay="350" data-aos-offset="-50">
<img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img9.jpg" alt="图片描述内容">
</div>
</div>
</div>
<!-- End Col -->
<div class="col-3">
<div class="d-grid gap-3">
<div data-aos="fade-up" data-aos-delay="400">
<img class="img-fluid shadow rounded-2" src="../assets/img/407x472/img2.jpg" alt="图片描述内容">
</div>
<div data-aos="fade-up" data-aos-delay="450">
<img class="img-fluid shadow-lg rounded-2" src="../assets/img/407x472/img3.jpg" alt="图片描述内容">
</div>
<div data-aos="fade-up" data-aos-delay="500">
<img class="img-fluid shadow rounded-2" src="../assets/img/407x867/img3.jpg" alt="图片描述内容">
</div>
</div>
</div>
<!-- End Col -->
<div class="col-3 mb-10">
<div class="d-grid gap-3">
<div data-aos="fade-up" data-aos-delay="550">
<img class="img-fluid shadow rounded-2" src="../assets/img/300x360/img1.jpg" alt="图片描述内容">
</div>
<div data-aos="fade-up" data-aos-delay="600">
<img class="img-fluid shadow rounded-2" src="../assets/img/407x535/img1.jpg" alt="图片描述内容">
</div>
<div data-aos="fade-up" data-aos-delay="650">
<img class="img-fluid shadow rounded-2" src="../assets/img/407x115/img1.jpg" alt="图片描述内容">
</div>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Gallery -->
</div>
<!-- End Hero -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/fslightbox/index.js"></script>
