<!-- Hero -->
<div class="bg-primary-dark position-relative overflow-hidden">
<div class="container content-space-2">
<div class="row justify-content-center align-items-lg-center">
<div class="col-md-8 col-lg-6 mb-7 mb-lg-0">
<!-- Heading -->
<div class="pe-lg-3 mb-7">
<h1 class="display-3 text-white mb-3 mb-md-5">Solving problems for every <span class="text-warning">team</span></h1>
<p class="lead text-white-70">Built on standard web technology, teams use Space to build beautiful cross-platform hybrid apps in a fraction of the time.</p>
</div>
<!-- End Heading -->
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<!-- Info Block -->
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon text-white">
@@include("../assets/vendor/duotone-icons/com/com007.svg")
</span>
</div>
<div class="flex-grow-1 ms-4">
<h6 class="text-white mb-0">24 hours</h6>
<p class="text-white-70">Response time</p>
</div>
</div>
<!-- End Info Block -->
</div>
<!-- End Col -->
<div class="col-sm-6">
<!-- Info Block -->
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon text-white">
@@include("../assets/vendor/duotone-icons/com/com013.svg")
</span>
</div>
<div class="flex-grow-1 ms-4">
<h6 class="text-white mb-0">92%</h6>
<p class="text-white-70">Satisfaction rate</p>
</div>
</div>
<!-- End Info Block -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
<div class="col-md-8 col-lg-6">
<div class="ps-lg-5">
<!-- Card -->
<div class="card card-lg">
<div class="card-body">
<div class="row align-items-sm-center mb-5">
<div class="col-sm-auto order-sm-2 mb-3 mb-sm-0">
<img class="avatar avatar-xxl avatar-4x3" src="../assets/svg/illustrations/oc-chatting.svg" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-sm">
<h5 class="card-title">Join Space</h5>
<p class="card-text">Hundreds of companies using Space to build their business.</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<form>
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="registerEmail">Your name</label>
<input type="text" class="form-control form-control-lg" name="name" id="registerName" placeholder="Type your name" aria-label="Type your name" required data-msg="Please enter your name.">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label class="form-label" for="registerEmail">Your email</label>
<input type="email" class="form-control form-control-lg" name="email" id="registerEmail" placeholder="example@site.com" aria-label="example@site.com" required data-msg="Please enter a valid email address.">
</div>
<!-- End Form -->
<div class="mb-4">
<label class="form-label" for="registerEmail">Company Size</label>
<div class="row">
<div class="col-sm mb-4 mb-sm-0">
<!-- Form Check -->
<label class="form-control form-control-lg" for="registerRadio1">
<span class="form-check form-check-custom">
<input type="radio" class="form-check-input" name="registerRadio" id="registerRadio1" checked>
<span class="form-check-label">1-10</span>
</span>
</label>
<!-- End Form Check -->
</div>
<div class="col-sm">
<!-- Form Check -->
<label class="form-control form-control-lg" for="registerRadio2">
<span class="form-check form-check-custom">
<input type="radio" class="form-check-input" name="registerRadio" id="registerRadio2">
<span class="form-check-label">More than 10</span>
</span>
</label>
<!-- End Form Check -->
</div>
</div>
<!-- End Row -->
</div>
<div class="d-grid text-center">
<button type="submit" class="btn btn-primary btn-lg">Start your free 30-days trial</button>
<span class="form-text">Need help? <a class="link" href="../page-help-center.html">Visit our Help Center <i class="bi-chevron-right small ms-1"></i></a></span>
</div>
</form>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="border-top border-white-10 my-10"></div>
<div class="row">
<div class="col-sm mb-5 mb-sm-0">
<!-- Rating -->
<div class="d-flex gap-1 mb-2">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
</div>
<!-- End Rating -->
<blockquote class="blockquote blockquote-sm text-white mb-4">“ This is a beautiful template with exciting components. ”</blockquote>
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/amazon-white-50.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col-sm mb-5 mb-sm-0">
<!-- Rating -->
<div class="d-flex gap-1 mb-2">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
</div>
<!-- End Rating -->
<blockquote class="blockquote blockquote-sm text-white mb-4">“ The best template I've ever come across. ”</blockquote>
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/airbnb-white-50.svg" alt="Logo">
</div>
<!-- End Col -->
<div class="col-sm mb-5">
<!-- Rating -->
<div class="d-flex gap-1 mb-2">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
<img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
</div>
<!-- End Rating -->
<blockquote class="blockquote blockquote-sm text-white mb-4">“ There one theme is everything that user wants. ”</blockquote>
<img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/google-white-50.svg" alt="Logo">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- Background Shapes -->
<div class="position-absolute top-0 end-0">
<img src="../assets/svg/components/shape-3-soft-light.svg" alt="SVG" width="500">
</div>
<div class="position-absolute bottom-0 end-0 me-10">
<img src="../assets/svg/components/shape-1-soft-light.svg" alt="SVG" width="250">
</div>
<div class="position-absolute bottom-0 start-0">
<img src="../assets/svg/components/shape-2-soft-light.svg" alt="SVG" width="400">
</div>
<!-- End Background Shapes -->
</div>
<!-- End Hero -->
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/typed.js/lib/typed.min.js"></script>
<!-- JS Space -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF TEXT ANIMATION (TYPING)
// =======================================================
const typed = HSCore.components.HSTyped.init('.js-typedjs')
})()
</script>
Log in with Google
