2025-04-02 13:24:56 +05:30

1754 lines
86 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html
lang="en"
class="light-style layout-navbar-fixed layout-wide"
dir="ltr"
data-theme="theme-default"
data-assets-path="../../assets/"
data-template="front-pages-no-customizer"
data-style="light">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>Demo : Landing Page - Front Pages | sneat - Bootstrap Dashboard PRO</title>
<meta name="description" content="" />
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="../../assets/img/favicon/favicon.ico" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="../../assets/vendor/fonts/boxicons.css" />
<!-- Core CSS -->
<link rel="stylesheet" href="../../assets/vendor/css/rtl/core.css" />
<link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css" />
<link rel="stylesheet" href="../../assets/css/demo.css" />
<link rel="stylesheet" href="../../assets/vendor/css/pages/front-page.css" />
<!-- Vendors CSS -->
<link rel="stylesheet" href="../../assets/vendor/libs/nouislider/nouislider.css" />
<link rel="stylesheet" href="../../assets/vendor/libs/swiper/swiper.css" />
<!-- Page CSS -->
<link rel="stylesheet" href="../../assets/vendor/css/pages/front-page-landing.css" />
<!-- Helpers -->
<script src="../../assets/vendor/js/helpers.js"></script>
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="../../assets/js/front-config.js"></script>
</head>
<body>
<script src="../../assets/vendor/js/dropdown-hover.js"></script>
<script src="../../assets/vendor/js/mega-dropdown.js"></script>
<!-- Navbar: Start -->
<nav class="layout-navbar shadow-none py-0">
<div class="container">
<div class="navbar navbar-expand-lg landing-navbar px-3 px-md-8">
<!-- Menu logo wrapper: Start -->
<div class="navbar-brand app-brand demo d-flex py-0 me-4 me-xl-8">
<!-- Mobile menu toggle: Start-->
<button
class="navbar-toggler border-0 px-0 me-4"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<i class="tf-icons bx bx-menu bx-lg align-middle text-heading fw-medium"></i>
</button>
<!-- Mobile menu toggle: End-->
<a href="landing-page.html" class="app-brand-link">
<span class="app-brand-logo demo">
<svg
width="25"
viewBox="0 0 25 42"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path
d="M13.7918663,0.358365126 L3.39788168,7.44174259 C0.566865006,9.69408886 -0.379795268,12.4788597 0.557900856,15.7960551 C0.68998853,16.2305145 1.09562888,17.7872135 3.12357076,19.2293357 C3.8146334,19.7207684 5.32369333,20.3834223 7.65075054,21.2172976 L7.59773219,21.2525164 L2.63468769,24.5493413 C0.445452254,26.3002124 0.0884951797,28.5083815 1.56381646,31.1738486 C2.83770406,32.8170431 5.20850219,33.2640127 7.09180128,32.5391577 C8.347334,32.0559211 11.4559176,30.0011079 16.4175519,26.3747182 C18.0338572,24.4997857 18.6973423,22.4544883 18.4080071,20.2388261 C17.963753,17.5346866 16.1776345,15.5799961 13.0496516,14.3747546 L10.9194936,13.4715819 L18.6192054,7.984237 L13.7918663,0.358365126 Z"
id="path-1"></path>
<path
d="M5.47320593,6.00457225 C4.05321814,8.216144 4.36334763,10.0722806 6.40359441,11.5729822 C8.61520715,12.571656 10.0999176,13.2171421 10.8577257,13.5094407 L15.5088241,14.433041 L18.6192054,7.984237 C15.5364148,3.11535317 13.9273018,0.573395879 13.7918663,0.358365126 C13.5790555,0.511491653 10.8061687,2.3935607 5.47320593,6.00457225 Z"
id="path-3"></path>
<path
d="M7.50063644,21.2294429 L12.3234468,23.3159332 C14.1688022,24.7579751 14.397098,26.4880487 13.008334,28.506154 C11.6195701,30.5242593 10.3099883,31.790241 9.07958868,32.3040991 C5.78142938,33.4346997 4.13234973,34 4.13234973,34 C4.13234973,34 2.75489982,33.0538207 2.37032616e-14,31.1614621 C-0.55822714,27.8186216 -0.55822714,26.0572515 -4.05231404e-15,25.8773518 C0.83734071,25.6075023 2.77988457,22.8248993 3.3049379,22.52991 C3.65497346,22.3332504 5.05353963,21.8997614 7.50063644,21.2294429 Z"
id="path-4"></path>
<path
d="M20.6,7.13333333 L25.6,13.8 C26.2627417,14.6836556 26.0836556,15.9372583 25.2,16.6 C24.8538077,16.8596443 24.4327404,17 24,17 L14,17 C12.8954305,17 12,16.1045695 12,15 C12,14.5672596 12.1403557,14.1461923 12.4,13.8 L17.4,7.13333333 C18.0627417,6.24967773 19.3163444,6.07059163 20.2,6.73333333 C20.3516113,6.84704183 20.4862915,6.981722 20.6,7.13333333 Z"
id="path-5"></path>
</defs>
<g id="g-app-brand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Brand-Logo" transform="translate(-27.000000, -15.000000)">
<g id="Icon" transform="translate(27.000000, 15.000000)">
<g id="Mask" transform="translate(0.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use fill="#696cff" xlink:href="#path-1"></use>
<g id="Path-3" mask="url(#mask-2)">
<use fill="#696cff" xlink:href="#path-3"></use>
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<g id="Path-4" mask="url(#mask-2)">
<use fill="#696cff" xlink:href="#path-4"></use>
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-4"></use>
</g>
</g>
<g
id="Triangle"
transform="translate(19.000000, 11.000000) rotate(-300.000000) translate(-19.000000, -11.000000) ">
<use fill="#696cff" xlink:href="#path-5"></use>
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</svg>
</span>
<span class="app-brand-text demo menu-text fw-bold ms-2 ps-1">sneat</span>
</a>
</div>
<!-- Menu logo wrapper: End -->
<!-- Menu wrapper: Start -->
<div class="collapse navbar-collapse landing-nav-menu" id="navbarSupportedContent">
<button
class="navbar-toggler border-0 text-heading position-absolute end-0 top-0 scaleX-n1-rtl p-2"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<i class="tf-icons bx bx-x bx-lg"></i>
</button>
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link fw-medium" aria-current="page" href="landing-page.html#landingHero">Home</a>
</li>
<li class="nav-item">
<a class="nav-link fw-medium" href="landing-page.html#landingFeatures">Features</a>
</li>
<li class="nav-item">
<a class="nav-link fw-medium" href="landing-page.html#landingTeam">Team</a>
</li>
<li class="nav-item">
<a class="nav-link fw-medium" href="landing-page.html#landingFAQ">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link fw-medium" href="landing-page.html#landingContact">Contact us</a>
</li>
<li class="nav-item mega-dropdown">
<a
href="javascript:void(0);"
class="nav-link dropdown-toggle navbar-ex-14-mega-dropdown mega-dropdown fw-medium"
aria-expanded="false"
data-bs-toggle="mega-dropdown"
data-trigger="hover">
<span data-i18n="Pages">Pages</span>
</a>
<div class="dropdown-menu p-4 p-xl-8">
<div class="row gy-4">
<div class="col-12 col-lg">
<div class="h6 d-flex align-items-center mb-3 mb-lg-4">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="bx bx-grid-alt"></i></span>
</div>
<span class="ps-1">Other</span>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="pricing-page.html">
<i class="bx bx-radio-circle me-1"></i>
<span data-i18n="Pricing">Pricing</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="payment-page.html">
<i class="bx bx-radio-circle me-1"></i>
<span data-i18n="Payment">Payment</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="checkout-page.html">
<i class="bx bx-radio-circle me-1"></i>
<span data-i18n="Checkout">Checkout</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="help-center-landing.html">
<i class="bx bx-radio-circle me-1"></i>
<span data-i18n="Help Center">Help Center</span>
</a>
</li>
</ul>
</div>
<div class="col-12 col-lg">
<div class="h6 d-flex align-items-center mb-3 mb-lg-4">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"
><i class="bx bx-lock-open bx-lg"></i
></span>
</div>
<span class="ps-1">Auth Demo</span>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-login-basic.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Login (Basic)
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-login-cover.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Login (Cover)
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-register-basic.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Register (Basic)
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-register-cover.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Register (Cover)
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-register-multisteps.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Register (Multi-steps)
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-forgot-password-basic.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Forgot Password (Basic)
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-forgot-password-cover.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Forgot Password (Cover)
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-reset-password-basic.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Reset Password (Basic)
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-reset-password-cover.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Reset Password (Cover)
</a>
</li>
</ul>
</div>
<div class="col-12 col-lg">
<div class="h6 d-flex align-items-center mb-3 mb-lg-4">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"
><i class="bx bx-image-alt bx-lg"></i
></span>
</div>
<span class="ps-1">Other</span>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/pages-misc-error.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Error
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/pages-misc-under-maintenance.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Under Maintenance
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/pages-misc-comingsoon.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Coming Soon
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/pages-misc-not-authorized.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Not Authorized
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-verify-email-basic.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Verify Email (Basic)
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-verify-email-cover.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Verify Email (Cover)
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-two-steps-basic.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Two Steps (Basic)
</a>
</li>
<li class="nav-item">
<a
class="nav-link mega-dropdown-link"
href="../vertical-menu-template/auth-two-steps-cover.html"
target="_blank">
<i class="bx bx-radio-circle me-1"></i>
Two Steps (Cover)
</a>
</li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="bg-body nav-img-col p-2">
<img
src="../../assets/img/front-pages/misc/nav-item-col-img.png"
alt="nav item col image"
class="w-100" />
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link fw-medium" href="../vertical-menu-template/index.html" target="_blank">Admin</a>
</li>
</ul>
</div>
<div class="landing-menu-overlay d-lg-none"></div>
<!-- Menu wrapper: End -->
<!-- Toolbar: Start -->
<ul class="navbar-nav flex-row align-items-center ms-auto">
<!-- navbar button: Start -->
<li>
<a href="../vertical-menu-template/auth-login-cover.html" class="btn btn-primary" target="_blank"
><span class="tf-icons bx bx-log-in-circle scaleX-n1-rtl me-md-1"></span
><span class="d-none d-md-block">Login/Register</span></a
>
</li>
<!-- navbar button: End -->
</ul>
<!-- Toolbar: End -->
</div>
</div>
</nav>
<!-- Navbar: End -->
<!-- Sections:Start -->
<div data-bs-spy="scroll" class="scrollspy-example">
<!-- Hero: Start -->
<section id="hero-animation">
<div id="landingHero" class="section-py landing-hero position-relative">
<img
src="../../assets/img/front-pages/backgrounds/hero-bg.png"
alt="hero background"
class="position-absolute top-0 start-50 translate-middle-x object-fit-cover w-100 h-100"
data-speed="1" />
<div class="container">
<div class="hero-text-box text-center position-relative">
<h1 class="text-primary hero-title display-6 fw-extrabold">
One dashboard to manage all your businesses
</h1>
<h2 class="hero-sub-title h6 mb-6">
Production-ready & easy to use Admin Template<br class="d-none d-lg-block" />
for Reliability and Customizability.
</h2>
<div class="landing-hero-btn d-inline-block position-relative">
<span class="hero-btn-item position-absolute d-none d-md-flex fw-medium"
>Join community
<img
src="../../assets/img/front-pages/icons/Join-community-arrow.png"
alt="Join community arrow"
class="scaleX-n1-rtl"
/></span>
<a href="#landingPricing" class="btn btn-primary btn-lg">Get early access</a>
</div>
</div>
<div id="heroDashboardAnimation" class="hero-animation-img">
<a href="../vertical-menu-template/app-ecommerce-dashboard.html" target="_blank">
<div id="heroAnimationImg" class="position-relative hero-dashboard-img">
<img
src="../../assets/img/front-pages/landing-page/hero-dashboard-light.png"
alt="hero dashboard"
class="animation-img"
data-app-light-img="front-pages/landing-page/hero-dashboard-light.png"
data-app-dark-img="front-pages/landing-page/hero-dashboard-dark.png" />
<img
src="../../assets/img/front-pages/landing-page/hero-elements-light.png"
alt="hero elements"
class="position-absolute hero-elements-img animation-img top-0 start-0"
data-app-light-img="front-pages/landing-page/hero-elements-light.png"
data-app-dark-img="front-pages/landing-page/hero-elements-dark.png" />
</div>
</a>
</div>
</div>
</div>
<div class="landing-hero-blank"></div>
</section>
<!-- Hero: End -->
<!-- Useful features: Start -->
<section id="landingFeatures" class="section-py landing-features">
<div class="container">
<div class="text-center mb-4">
<span class="badge bg-label-primary">Useful Features</span>
</div>
<h4 class="text-center mb-1">
<span class="position-relative fw-extrabold z-1"
>Everything you need
<img
src="../../assets/img/front-pages/icons/section-title-icon.png"
alt="laptop charging"
class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
to start your next project
</h4>
<p class="text-center mb-12">
Not just a set of tools, the package includes ready-to-deploy conceptual application.
</p>
<div class="features-icon-wrapper row gx-0 gy-6 g-sm-12">
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="text-center mb-4">
<img src="../../assets/img/front-pages/icons/laptop.svg" alt="laptop charging" />
</div>
<h5 class="mb-2">Quality Code</h5>
<p class="features-icon-description">
Code structure that all developers will easily understand and fall in love with.
</p>
</div>
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="text-center mb-4">
<img src="../../assets/img/front-pages/icons/rocket.svg" alt="transition up" />
</div>
<h5 class="mb-2">Continuous Updates</h5>
<p class="features-icon-description">
Free updates for the next 12 months, including new demos and features.
</p>
</div>
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="text-center mb-4">
<img src="../../assets/img/front-pages/icons/paper.svg" alt="edit" />
</div>
<h5 class="mb-2">Stater-Kit</h5>
<p class="features-icon-description">
Start your project quickly without having to remove unnecessary features.
</p>
</div>
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="text-center mb-4">
<img src="../../assets/img/front-pages/icons/check.svg" alt="3d select solid" />
</div>
<h5 class="mb-2">API Ready</h5>
<p class="features-icon-description">
Just change the endpoint and see your own data loaded within seconds.
</p>
</div>
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="text-center mb-4">
<img src="../../assets/img/front-pages/icons/user.svg" alt="user" />
</div>
<h5 class="mb-2">Excellent Support</h5>
<p class="features-icon-description">An easy-to-follow doc with lots of references and code examples.</p>
</div>
<div class="col-lg-4 col-sm-6 text-center features-icon-box">
<div class="text-center mb-4">
<img src="../../assets/img/front-pages/icons/keyboard.svg" alt="keyboard" />
</div>
<h5 class="mb-2">Well Documented</h5>
<p class="features-icon-description">An easy-to-follow doc with lots of references and code examples.</p>
</div>
</div>
</div>
</section>
<!-- Useful features: End -->
<!-- Real customers reviews: Start -->
<section id="landingReviews" class="section-py bg-body landing-reviews pb-0">
<!-- What people say slider: Start -->
<div class="container">
<div class="row align-items-center gx-0 gy-4 g-lg-5 mb-5 pb-md-5">
<div class="col-md-6 col-lg-5 col-xl-3">
<div class="mb-4">
<span class="badge bg-label-primary">Real Customers Reviews</span>
</div>
<h4 class="mb-1">
<span class="position-relative fw-extrabold z-1"
>What people say
<img
src="../../assets/img/front-pages/icons/section-title-icon.png"
alt="laptop charging"
class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
</h4>
<p class="mb-5 mb-md-12">
See what our customers have to<br class="d-none d-xl-block" />
say about their experience.
</p>
<div class="landing-reviews-btns">
<button id="reviews-previous-btn" class="btn btn-icon btn-label-primary reviews-btn me-3" type="button">
<i class="bx bx-chevron-left bx-md"></i>
</button>
<button id="reviews-next-btn" class="btn btn-icon btn-label-primary reviews-btn" type="button">
<i class="bx bx-chevron-right bx-md"></i>
</button>
</div>
</div>
<div class="col-md-6 col-lg-7 col-xl-9">
<div class="swiper-reviews-carousel overflow-hidden">
<div class="swiper" id="swiper-reviews">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img
src="../../assets/img/front-pages/branding/logo-1.png"
alt="client logo"
class="client-logo img-fluid" />
</div>
<p>
“Vuexy is hands down the most useful front end Bootstrap theme I've ever used. I can't wait
to use it again for my next project.”
</p>
<div class="text-warning mb-4">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="../../assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Cecilia Payne</h6>
<p class="small text-muted mb-0">CEO of Airbnb</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img
src="../../assets/img/front-pages/branding/logo-2.png"
alt="client logo"
class="client-logo img-fluid" />
</div>
<p>
“I've never used a theme as versatile and flexible as Vuexy. It's my go to for building
dashboard sites on almost any project.”
</p>
<div class="text-warning mb-4">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="../../assets/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Eugenia Moore</h6>
<p class="small text-muted mb-0">Founder of Hubspot</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img
src="../../assets/img/front-pages/branding/logo-3.png"
alt="client logo"
class="client-logo img-fluid" />
</div>
<p>
This template is really clean & well documented. The docs are really easy to understand and
it's always easy to find a screenshot from their website.
</p>
<div class="text-warning mb-4">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="../../assets/img/avatars/3.png" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Curtis Fletcher</h6>
<p class="small text-muted mb-0">Design Lead at Dribbble</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img
src="../../assets/img/front-pages/branding/logo-4.png"
alt="client logo"
class="client-logo img-fluid" />
</div>
<p>
All the requirements for developers have been taken into consideration, so Im able to build
any interface I want.
</p>
<div class="text-warning mb-4">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="../../assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Sara Smith</h6>
<p class="small text-muted mb-0">Founder of Continental</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img
src="../../assets/img/front-pages/branding/logo-5.png"
alt="client logo"
class="client-logo img-fluid" />
</div>
<p>
“I've never used a theme as versatile and flexible as Vuexy. It's my go to for building
dashboard sites on almost any project.”
</p>
<div class="text-warning mb-4">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Eugenia Moore</h6>
<p class="small text-muted mb-0">Founder of Hubspot</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card h-100">
<div class="card-body text-body d-flex flex-column justify-content-between h-100">
<div class="mb-4">
<img
src="../../assets/img/front-pages/branding/logo-6.png"
alt="client logo"
class="client-logo img-fluid" />
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nemo mollitia, ad eum
officia numquam nostrum repellendus consequuntur!
</p>
<div class="text-warning mb-4">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<div class="d-flex align-items-center">
<div class="avatar me-3 avatar-sm">
<img src="../../assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
</div>
<div>
<h6 class="mb-0">Sara Smith</h6>
<p class="small text-muted mb-0">Founder of Continental</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</div>
<!-- What people say slider: End -->
<hr class="m-0 mt-6 mt-md-12" />
<!-- Logo slider: Start -->
<div class="container">
<div class="swiper-logo-carousel pt-8">
<div class="swiper" id="swiper-clients-logos">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="../../assets/img/front-pages/branding/logo_1-light.png"
alt="client logo"
class="client-logo"
data-app-light-img="front-pages/branding/logo_1-light.png"
data-app-dark-img="front-pages/branding/logo_1-dark.png" />
</div>
<div class="swiper-slide">
<img
src="../../assets/img/front-pages/branding/logo_2-light.png"
alt="client logo"
class="client-logo"
data-app-light-img="front-pages/branding/logo_2-light.png"
data-app-dark-img="front-pages/branding/logo_2-dark.png" />
</div>
<div class="swiper-slide">
<img
src="../../assets/img/front-pages/branding/logo_3-light.png"
alt="client logo"
class="client-logo"
data-app-light-img="front-pages/branding/logo_3-light.png"
data-app-dark-img="front-pages/branding/logo_3-dark.png" />
</div>
<div class="swiper-slide">
<img
src="../../assets/img/front-pages/branding/logo_4-light.png"
alt="client logo"
class="client-logo"
data-app-light-img="front-pages/branding/logo_4-light.png"
data-app-dark-img="front-pages/branding/logo_4-dark.png" />
</div>
<div class="swiper-slide">
<img
src="../../assets/img/front-pages/branding/logo_5-light.png"
alt="client logo"
class="client-logo"
data-app-light-img="front-pages/branding/logo_5-light.png"
data-app-dark-img="front-pages/branding/logo_5-dark.png" />
</div>
</div>
</div>
</div>
</div>
<!-- Logo slider: End -->
</section>
<!-- Real customers reviews: End -->
<!-- Our great team: Start -->
<section id="landingTeam" class="section-py landing-team">
<div class="container">
<div class="text-center mb-4">
<span class="badge bg-label-primary">Our Great Team</span>
</div>
<h4 class="text-center mb-1">
<span class="position-relative fw-extrabold z-1"
>Supported
<img
src="../../assets/img/front-pages/icons/section-title-icon.png"
alt="laptop charging"
class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
by Real People
</h4>
<p class="text-center mb-md-11 pb-0 pb-xl-12">Who is behind these great-looking interfaces?</p>
<div class="row gy-12 mt-2">
<div class="col-lg-3 col-sm-6">
<div class="card mt-3 mt-lg-0 shadow-none">
<div
class="bg-label-primary border border-bottom-0 border-label-primary position-relative team-image-box">
<img
src="../../assets/img/front-pages/landing-page/team-member-1.png"
class="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
alt="human image" />
</div>
<div class="card-body border border-top-0 border-label-primary text-center py-5">
<h5 class="card-title mb-0">Sophie Gilbert</h5>
<p class="text-muted mb-0">Project Manager</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card mt-3 mt-lg-0 shadow-none">
<div class="bg-label-info border border-bottom-0 border-label-info position-relative team-image-box">
<img
src="../../assets/img/front-pages/landing-page/team-member-2.png"
class="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
alt="human image" />
</div>
<div class="card-body border border-top-0 border-label-info text-center py-5">
<h5 class="card-title mb-0">Paul Miles</h5>
<p class="text-muted mb-0">UI Designer</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card mt-3 mt-lg-0 shadow-none">
<div
class="bg-label-danger border border-bottom-0 border-label-danger position-relative team-image-box">
<img
src="../../assets/img/front-pages/landing-page/team-member-3.png"
class="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
alt="human image" />
</div>
<div class="card-body border border-top-0 border-label-danger text-center py-5">
<h5 class="card-title mb-0">Nannie Ford</h5>
<p class="text-muted mb-0">Development Lead</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card mt-3 mt-lg-0 shadow-none">
<div
class="bg-label-success border border-bottom-0 border-label-success position-relative team-image-box">
<img
src="../../assets/img/front-pages/landing-page/team-member-4.png"
class="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
alt="human image" />
</div>
<div class="card-body border border-top-0 border-label-success text-center py-5">
<h5 class="card-title mb-0">Chris Watkins</h5>
<p class="text-muted mb-0">Marketing Manager</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Our great team: End -->
<!-- Pricing plans: Start -->
<section id="landingPricing" class="section-py bg-body landing-pricing">
<div class="container">
<div class="text-center mb-4">
<span class="badge bg-label-primary">Pricing Plans</span>
</div>
<h4 class="text-center mb-1">
<span class="position-relative fw-extrabold z-1"
>Tailored pricing plans
<img
src="../../assets/img/front-pages/icons/section-title-icon.png"
alt="laptop charging"
class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
designed for you
</h4>
<p class="text-center pb-2 mb-7">
All plans include 40+ advanced tools and features to boost your product.<br />Choose the best plan to fit
your needs.
</p>
<div class="text-center mb-12">
<div class="position-relative d-inline-block pt-3 pt-md-0">
<label class="switch switch-sm switch-primary me-0">
<span class="switch-label fs-6 text-body me-3">Pay Monthly</span>
<input type="checkbox" class="switch-input price-duration-toggler" checked />
<span class="switch-toggle-slider">
<span class="switch-on"></span>
<span class="switch-off"></span>
</span>
<span class="switch-label fs-6 text-body ms-3">Pay Annual</span>
</label>
<div class="pricing-plans-item position-absolute d-flex">
<img
src="../../assets/img/front-pages/icons/pricing-plans-arrow.png"
alt="pricing plans arrow"
class="scaleX-n1-rtl" />
<span class="fw-medium mt-2 ms-1"> Save 25%</span>
</div>
</div>
</div>
<div class="row g-6 pt-lg-5">
<!-- Basic Plan: Start -->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<div class="text-center">
<img
src="../../assets/img/front-pages/icons/paper-airplane.png"
alt="paper airplane icon"
class="mb-8 pb-2" />
<h4 class="mb-0">Basic</h4>
<div class="d-flex align-items-center justify-content-center">
<span class="price-monthly h2 text-primary fw-extrabold mb-0">$19</span>
<span class="price-yearly h2 text-primary fw-extrabold mb-0 d-none">$14</span>
<sub class="h6 text-muted mb-n1 ms-1">/mo</sub>
</div>
<div class="position-relative pt-2">
<div class="price-yearly text-muted price-yearly-toggle d-none">$ 168 / year</div>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled pricing-list">
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Timeline
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Basic search
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Live chat widget
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Email marketing
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Custom Forms
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Traffic analytics
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Basic Support
</h6>
</li>
</ul>
<div class="d-grid mt-8">
<a href="payment-page.html" class="btn btn-label-primary">Get Started</a>
</div>
</div>
</div>
</div>
<!-- Basic Plan: End -->
<!-- Favourite Plan: Start -->
<div class="col-xl-4 col-lg-6">
<div class="card border border-primary shadow-xl">
<div class="card-header">
<div class="text-center">
<img src="../../assets/img/front-pages/icons/plane.png" alt="plane icon" class="mb-8 pb-2" />
<h4 class="mb-0">Team</h4>
<div class="d-flex align-items-center justify-content-center">
<span class="price-monthly h2 text-primary fw-extrabold mb-0">$29</span>
<span class="price-yearly h2 text-primary fw-extrabold mb-0 d-none">$22</span>
<sub class="h6 text-muted mb-n1 ms-1">/mo</sub>
</div>
<div class="position-relative pt-2">
<div class="price-yearly text-muted price-yearly-toggle d-none">$ 264 / year</div>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled pricing-list">
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Everything in basic
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Timeline with database
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Advanced search
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Marketing automation
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Advanced chatbot
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Campaign management
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Collaboration tools
</h6>
</li>
</ul>
<div class="d-grid mt-8">
<a href="payment-page.html" class="btn btn-primary">Get Started</a>
</div>
</div>
</div>
</div>
<!-- Favourite Plan: End -->
<!-- Standard Plan: Start -->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-header">
<div class="text-center">
<img
src="../../assets/img/front-pages/icons/shuttle-rocket.png"
alt="shuttle rocket icon"
class="mb-8 pb-2" />
<h4 class="mb-0">Enterprise</h4>
<div class="d-flex align-items-center justify-content-center">
<span class="price-monthly h2 text-primary fw-extrabold mb-0">$49</span>
<span class="price-yearly h2 text-primary fw-extrabold mb-0 d-none">$37</span>
<sub class="h6 text-muted mb-n1 ms-1">/mo</sub>
</div>
<div class="position-relative pt-2">
<div class="price-yearly text-muted price-yearly-toggle d-none">$ 444 / year</div>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled pricing-list">
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Everything in premium
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Timeline with database
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Fuzzy search
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
A/B testing sanbox
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Custom permissions
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Social media automation
</h6>
</li>
<li>
<h6 class="d-flex align-items-center mb-3">
<span class="badge badge-center rounded-pill bg-label-primary p-0 me-3"
><i class="bx bx-check bx-12px"></i
></span>
Sales automation tools
</h6>
</li>
</ul>
<div class="d-grid mt-8">
<a href="payment-page.html" class="btn btn-label-primary">Get Started</a>
</div>
</div>
</div>
</div>
<!-- Standard Plan: End -->
</div>
</div>
</section>
<!-- Pricing plans: End -->
<!-- Fun facts: Start -->
<section id="landingFunFacts" class="section-py landing-fun-facts">
<div class="container">
<div class="row gy-6">
<div class="col-sm-6 col-lg-3">
<div class="card border border-primary shadow-none">
<div class="card-body text-center">
<img src="../../assets/img/front-pages/icons/laptop.svg" alt="laptop" class="mb-4" />
<h3 class="mb-0">7.1k+</h3>
<p class="fw-medium mb-0">
Support Tickets<br />
Resolved
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card border border-success shadow-none">
<div class="card-body text-center">
<img src="../../assets/img/front-pages/icons/user-success.svg" alt="laptop" class="mb-4" />
<h3 class="mb-0">50k+</h3>
<p class="fw-medium mb-0">
Join creatives<br />
community
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card border border-info shadow-none">
<div class="card-body text-center">
<img src="../../assets/img/front-pages/icons/diamond-info.svg" alt="laptop" class="mb-4" />
<h3 class="mb-0">4.8/5</h3>
<p class="fw-medium mb-0">
Highly Rated<br />
Products
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card border border-warning shadow-none">
<div class="card-body text-center">
<img src="../../assets/img/front-pages/icons/check-warning.svg" alt="laptop" class="mb-4" />
<h3 class="mb-0">100%</h3>
<p class="fw-medium mb-0">
Money Back<br />
Guarantee
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Fun facts: End -->
<!-- FAQ: Start -->
<section id="landingFAQ" class="section-py bg-body landing-faq">
<div class="container">
<div class="text-center mb-4">
<span class="badge bg-label-primary">FAQ</span>
</div>
<h4 class="text-center mb-1">
Frequently asked
<span class="position-relative fw-extrabold z-1"
>questions
<img
src="../../assets/img/front-pages/icons/section-title-icon.png"
alt="laptop charging"
class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
</h4>
<p class="text-center mb-12 pb-md-4">
Browse through these FAQs to find answers to commonly asked questions.
</p>
<div class="row gy-12 align-items-center">
<div class="col-lg-5">
<div class="text-center">
<img
src="../../assets/img/front-pages/landing-page/faq-boy-with-logos.png"
alt="faq boy with logos"
class="faq-image" />
</div>
</div>
<div class="col-lg-7">
<div class="accordion" id="accordionExample">
<div class="card accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
type="button"
class="accordion-button"
data-bs-toggle="collapse"
data-bs-target="#accordionOne"
aria-expanded="true"
aria-controls="accordionOne">
Do you charge for each upgrade?
</button>
</h2>
<div id="accordionOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing
marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping
soufflé. Wafer gummi bears marshmallow pastry pie.
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button
type="button"
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#accordionTwo"
aria-expanded="false"
aria-controls="accordionTwo">
Do I need to purchase a license for each website?
</button>
</h2>
<div
id="accordionTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake
dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly
beans candy canes carrot cake. Fruitcake chocolate chupa chups.
</div>
</div>
</div>
<div class="card accordion-item active">
<h2 class="accordion-header" id="headingThree">
<button
type="button"
class="accordion-button"
data-bs-toggle="collapse"
data-bs-target="#accordionThree"
aria-expanded="false"
aria-controls="accordionThree">
What is regular license?
</button>
</h2>
<div
id="accordionThree"
class="accordion-collapse collapse show"
aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Regular license can be used for end products that do not charge users for access or service(access
is free and there will be no monthly subscription fee). Single regular license can be used for
single end product and end product can be used by you or your client. If you want to sell end
product to multiple clients then you will need to purchase separate license for each client. The
same rule applies if you want to use the same end product on multiple domains(unique setup). For
more info on regular license you can check official description.
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="headingFour">
<button
type="button"
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#accordionFour"
aria-expanded="false"
aria-controls="accordionFour">
What is extended license?
</button>
</h2>
<div
id="accordionFour"
class="accordion-collapse collapse"
aria-labelledby="headingFour"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis et aliquid quaerat possimus maxime!
Mollitia reprehenderit neque repellat deleniti delectus architecto dolorum maxime, blanditiis
earum ea, incidunt quam possimus cumque.
</div>
</div>
</div>
<div class="card accordion-item">
<h2 class="accordion-header" id="headingFive">
<button
type="button"
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#accordionFive"
aria-expanded="false"
aria-controls="accordionFive">
Which license is applicable for SASS application?
</button>
</h2>
<div
id="accordionFive"
class="accordion-collapse collapse"
aria-labelledby="headingFive"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi molestias exercitationem ab cum
nemo facere voluptates veritatis quia, eveniet veniam at et repudiandae mollitia ipsam quasi
labore enim architecto non!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ: End -->
<!-- CTA: Start -->
<section id="landingCTA" class="section-py landing-cta position-relative p-lg-0 pb-0">
<img
src="../../assets/img/front-pages/backgrounds/cta-bg-light.png"
class="position-absolute bottom-0 end-0 scaleX-n1-rtl h-100 w-100 z-n1"
alt="cta image"
data-app-light-img="front-pages/backgrounds/cta-bg-light.png"
data-app-dark-img="front-pages/backgrounds/cta-bg-dark.png" />
<div class="container">
<div class="row align-items-center gy-12">
<div class="col-lg-6 text-start text-sm-center text-lg-start">
<h3 class="cta-title text-primary fw-bold mb-1">Ready to Get Started?</h3>
<h5 class="text-body mb-8">Start your project with a 14-day free trial</h5>
<a href="payment-page.html" class="btn btn-lg btn-primary">Get Started</a>
</div>
<div class="col-lg-6 pt-lg-12 text-center text-lg-end">
<img
src="../../assets/img/front-pages/landing-page/cta-dashboard.png"
alt="cta dashboard"
class="img-fluid mt-lg-4" />
</div>
</div>
</div>
</section>
<!-- CTA: End -->
<!-- Contact Us: Start -->
<section id="landingContact" class="section-py bg-body landing-contact">
<div class="container">
<div class="text-center mb-4">
<span class="badge bg-label-primary">Contact US</span>
</div>
<h4 class="text-center mb-1">
<span class="position-relative fw-extrabold z-1"
>Let's work
<img
src="../../assets/img/front-pages/icons/section-title-icon.png"
alt="laptop charging"
class="section-title-img position-absolute object-fit-contain bottom-0 z-n1" />
</span>
together
</h4>
<p class="text-center mb-12 pb-md-4">Any question or remark? just write us a message</p>
<div class="row g-6">
<div class="col-lg-5">
<div class="contact-img-box position-relative border p-2 h-100">
<img
src="../../assets/img/front-pages/icons/contact-border.png"
alt="contact border"
class="contact-border-img position-absolute d-none d-lg-block scaleX-n1-rtl" />
<img
src="../../assets/img/front-pages/landing-page/contact-customer-service.png"
alt="contact customer service"
class="contact-img w-100 scaleX-n1-rtl" />
<div class="p-4 pb-2">
<div class="row g-4">
<div class="col-md-6 col-lg-12 col-xl-6">
<div class="d-flex align-items-center">
<div class="badge bg-label-primary rounded p-1_5 me-3">
<i class="bx bx-envelope bx-lg"></i>
</div>
<div>
<p class="mb-0">Email</p>
<h6 class="mb-0">
<a href="mailto:example@gmail.com" class="text-heading">example@gmail.com</a>
</h6>
</div>
</div>
</div>
<div class="col-md-6 col-lg-12 col-xl-6">
<div class="d-flex align-items-center">
<div class="badge bg-label-success rounded p-1_5 me-3">
<i class="bx bx-phone-call bx-lg"></i>
</div>
<div>
<p class="mb-0">Phone</p>
<h6 class="mb-0"><a href="tel:+1234-568-963" class="text-heading">+1234 568 963</a></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="card h-100">
<div class="card-body">
<h4 class="mb-2">Send a message</h4>
<p class="mb-6">
If you would like to discuss anything related to payment, account, licensing,<br
class="d-none d-lg-block" />
partnerships, or have pre-sales questions, youre at the right place.
</p>
<form>
<div class="row g-4">
<div class="col-md-6">
<label class="form-label" for="contact-form-fullname">Full Name</label>
<input type="text" class="form-control" id="contact-form-fullname" placeholder="john" />
</div>
<div class="col-md-6">
<label class="form-label" for="contact-form-email">Email</label>
<input
type="text"
id="contact-form-email"
class="form-control"
placeholder="johndoe@gmail.com" />
</div>
<div class="col-12">
<label class="form-label" for="contact-form-message">Message</label>
<textarea
id="contact-form-message"
class="form-control"
rows="11"
placeholder="Write a message"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Send inquiry</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Us: End -->
</div>
<!-- / Sections:End -->
<!-- Footer: Start -->
<footer class="landing-footer bg-body footer-text">
<div class="footer-top position-relative overflow-hidden z-1">
<img
src="../../assets/img/front-pages/backgrounds/footer-bg.png"
alt="footer bg"
class="footer-bg banner-bg-img z-n1" />
<div class="container">
<div class="row gx-0 gy-6 g-lg-10">
<div class="col-lg-5">
<a href="landing-page.html" class="app-brand-link mb-6">
<span class="app-brand-logo demo">
<svg
width="25"
viewBox="0 0 25 42"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path
d="M13.7918663,0.358365126 L3.39788168,7.44174259 C0.566865006,9.69408886 -0.379795268,12.4788597 0.557900856,15.7960551 C0.68998853,16.2305145 1.09562888,17.7872135 3.12357076,19.2293357 C3.8146334,19.7207684 5.32369333,20.3834223 7.65075054,21.2172976 L7.59773219,21.2525164 L2.63468769,24.5493413 C0.445452254,26.3002124 0.0884951797,28.5083815 1.56381646,31.1738486 C2.83770406,32.8170431 5.20850219,33.2640127 7.09180128,32.5391577 C8.347334,32.0559211 11.4559176,30.0011079 16.4175519,26.3747182 C18.0338572,24.4997857 18.6973423,22.4544883 18.4080071,20.2388261 C17.963753,17.5346866 16.1776345,15.5799961 13.0496516,14.3747546 L10.9194936,13.4715819 L18.6192054,7.984237 L13.7918663,0.358365126 Z"
id="path-1"></path>
<path
d="M5.47320593,6.00457225 C4.05321814,8.216144 4.36334763,10.0722806 6.40359441,11.5729822 C8.61520715,12.571656 10.0999176,13.2171421 10.8577257,13.5094407 L15.5088241,14.433041 L18.6192054,7.984237 C15.5364148,3.11535317 13.9273018,0.573395879 13.7918663,0.358365126 C13.5790555,0.511491653 10.8061687,2.3935607 5.47320593,6.00457225 Z"
id="path-3"></path>
<path
d="M7.50063644,21.2294429 L12.3234468,23.3159332 C14.1688022,24.7579751 14.397098,26.4880487 13.008334,28.506154 C11.6195701,30.5242593 10.3099883,31.790241 9.07958868,32.3040991 C5.78142938,33.4346997 4.13234973,34 4.13234973,34 C4.13234973,34 2.75489982,33.0538207 2.37032616e-14,31.1614621 C-0.55822714,27.8186216 -0.55822714,26.0572515 -4.05231404e-15,25.8773518 C0.83734071,25.6075023 2.77988457,22.8248993 3.3049379,22.52991 C3.65497346,22.3332504 5.05353963,21.8997614 7.50063644,21.2294429 Z"
id="path-4"></path>
<path
d="M20.6,7.13333333 L25.6,13.8 C26.2627417,14.6836556 26.0836556,15.9372583 25.2,16.6 C24.8538077,16.8596443 24.4327404,17 24,17 L14,17 C12.8954305,17 12,16.1045695 12,15 C12,14.5672596 12.1403557,14.1461923 12.4,13.8 L17.4,7.13333333 C18.0627417,6.24967773 19.3163444,6.07059163 20.2,6.73333333 C20.3516113,6.84704183 20.4862915,6.981722 20.6,7.13333333 Z"
id="path-5"></path>
</defs>
<g id="g-app-brand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Brand-Logo" transform="translate(-27.000000, -15.000000)">
<g id="Icon" transform="translate(27.000000, 15.000000)">
<g id="Mask" transform="translate(0.000000, 8.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use fill="#696cff" xlink:href="#path-1"></use>
<g id="Path-3" mask="url(#mask-2)">
<use fill="#696cff" xlink:href="#path-3"></use>
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<g id="Path-4" mask="url(#mask-2)">
<use fill="#696cff" xlink:href="#path-4"></use>
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-4"></use>
</g>
</g>
<g
id="Triangle"
transform="translate(19.000000, 11.000000) rotate(-300.000000) translate(-19.000000, -11.000000) ">
<use fill="#696cff" xlink:href="#path-5"></use>
<use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</svg>
</span>
<span class="app-brand-text demo text-white fw-bold ms-2 ps-1">sneat</span>
</a>
<p class="footer-text footer-logo-description mb-6">
Most developer friendly & highly customisable Admin Dashboard Template.
</p>
<form class="footer-form">
<label for="footer-email" class="small">Subscribe to newsletter</label>
<div class="d-flex mt-1">
<input
type="email"
class="form-control rounded-0 rounded-start-bottom rounded-start-top"
id="footer-email"
placeholder="Your email" />
<button
type="submit"
class="btn btn-primary shadow-none rounded-0 rounded-end-bottom rounded-end-top">
Subscribe
</button>
</div>
</form>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<h6 class="footer-title mb-6">Demos</h6>
<ul class="list-unstyled">
<li class="mb-4">
<a href="../vertical-menu-template/" target="_blank" class="footer-link">Vertical Layout</a>
</li>
<li class="mb-4">
<a href="../horizontal-menu-template/" target="_blank" class="footer-link">Horizontal Layout</a>
</li>
<li class="mb-4">
<a href="../vertical-menu-template-bordered/" target="_blank" class="footer-link">Bordered Layout</a>
</li>
<li class="mb-4">
<a href="../vertical-menu-template-semi-dark/" target="_blank" class="footer-link"
>Semi Dark Layout</a
>
</li>
<li>
<a href="../vertical-menu-template-dark/" target="_blank" class="footer-link">Dark Layout</a>
</li>
</ul>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<h6 class="footer-title mb-6">Pages</h6>
<ul class="list-unstyled">
<li class="mb-4">
<a href="pricing-page.html" class="footer-link">Pricing</a>
</li>
<li class="mb-4">
<a href="payment-page.html" class="footer-link"
>Payment<span class="badge bg-primary ms-2">New</span></a
>
</li>
<li class="mb-4">
<a href="checkout-page.html" class="footer-link">Checkout</a>
</li>
<li class="mb-4">
<a href="help-center-landing.html" class="footer-link">Help Center</a>
</li>
<li>
<a href="../vertical-menu-template/auth-login-cover.html" target="_blank" class="footer-link"
>Login/Register</a
>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-4">
<h6 class="footer-title mb-6">Download our app</h6>
<a href="javascript:void(0);" class="d-block mb-4"
><img src="../../assets/img/front-pages/landing-page/apple-icon.png" alt="apple icon"
/></a>
<a href="javascript:void(0);" class="d-block"
><img src="../../assets/img/front-pages/landing-page/google-play-icon.png" alt="google play icon"
/></a>
</div>
</div>
</div>
</div>
<div class="footer-bottom py-3 py-md-5">
<div
class="container d-flex flex-wrap justify-content-between flex-md-row flex-column text-center text-md-start">
<div class="mb-2 mb-md-0">
<span class="footer-bottom-text"
>©
<script>
document.write(new Date().getFullYear());
</script>
</span>
<a href="https://themeselection.com" target="_blank" class="text-white">ThemeSelection,</a>
<span class="footer-bottom-text"> Made with ❤️ for a better web.</span>
</div>
<div>
<a href="https://github.com/themeselection" class="me-4" target="_blank">
<img src="../../assets/img/front-pages/icons/github.svg" alt="github icon" />
</a>
<a href="https://www.facebook.com/ThemeSelections/" class="me-4" target="_blank">
<img src="../../assets/img/front-pages/icons/facebook.svg" alt="facebook icon" />
</a>
<a href="https://twitter.com/Theme_Selection" class="me-4" target="_blank">
<img src="../../assets/img/front-pages/icons/twitter.svg" alt="twitter icon" />
</a>
<a href="https://www.instagram.com/themeselection/" target="_blank">
<img src="../../assets/img/front-pages/icons/instagram.svg" alt="google icon" />
</a>
</div>
</div>
</div>
</footer>
<!-- Footer: End -->
<!-- Core JS -->
<!-- build:js assets/vendor/js/core.js -->
<script src="../../assets/vendor/libs/popper/popper.js"></script>
<script src="../../assets/vendor/js/bootstrap.js"></script>
<!-- endbuild -->
<!-- Vendors JS -->
<script src="../../assets/vendor/libs/nouislider/nouislider.js"></script>
<script src="../../assets/vendor/libs/swiper/swiper.js"></script>
<!-- Main JS -->
<script src="../../assets/js/front-main.js"></script>
<!-- Page JS -->
<script src="../../assets/js/front-page-landing.js"></script>
</body>
</html>