cesnimda
2815 lines
176 KiB
HTML
2815 lines
176 KiB
HTML
<!doctype html>
|
||
<html lang="en" @@bodySetup>
|
||
|
||
<head>
|
||
<title>SaasAble Tailwind Multipurpose UI Kit</title>
|
||
<!-- [Meta] -->
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="description" content="The multipurpose SaaS UI Kit built with Tailwind CSS is designed for businesses of all sizes to streamline customer management, sales tracking, and marketing optimization. Create a stunning SaaS landing with just a few clicks!" />
|
||
<meta name="keywords" content="Tailwind Templates, Tailwind Theme, SaaS UI Kit, SaaS Template"/>
|
||
<meta name="author" content="Phoenixcoded" />
|
||
|
||
<!-- [Favicon] icon -->
|
||
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon" />
|
||
<!-- [Page specific CSS] start -->
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
|
||
<!-- [Page specific CSS] end -->
|
||
<!-- [Font] Family -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
|
||
<!-- [Tabler Icons] https://tablericons.com -->
|
||
<link rel="stylesheet" href="assets/fonts/tabler-icons.min.css" />
|
||
<link rel="stylesheet" href="assets/css/plugins/tiny-slider.css" />
|
||
<!-- [Template CSS Files] -->
|
||
<link rel="stylesheet" href="assets/css/style.css" id="main-style-link" />
|
||
<script src="assets/js/tech-stack.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- [ Pre-loader ] start -->
|
||
<div class="loader-bg">
|
||
<div class="loader-track">
|
||
<div class="loader-fill"></div>
|
||
</div>
|
||
</div>
|
||
<!-- [ Pre-loader ] End -->
|
||
<!-- [ Nav ] start -->
|
||
<nav class="bg-neutral-100 z-50 w-full relative">
|
||
<div class="container">
|
||
<div class="static flex py-4 items-center justify-between">
|
||
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-between">
|
||
<div class="flex flex-1 flex-shrink-0 items-center justify-between text-primary-500">
|
||
<!-- [ Logo main ] start -->
|
||
<a href="index.html">
|
||
<svg class="w-[112px] lg:w-[140px] h-auto" viewBox="0 0 140 27" fill="none"
|
||
xmlns="http://www.w3.org/2000/svg">
|
||
<path fillRule="evenodd" clipRule="evenodd"
|
||
d="M18.8829 0.427107C21.4241 -0.961272 24.4323 1.23978 23.8814 4.08446L20.2026 23.083C20.1771 23.2543 20.1385 23.4244 20.0865 23.5919C19.9716 23.983 19.8053 24.3088 19.5985 24.5713L19.5803 24.5963C18.4651 26.1231 16.3244 26.456 14.7989 25.3398C14.0423 24.7862 13.5792 23.9802 13.4405 23.1221L13.4413 23.1226C13.018 21.5306 13.6228 17.2572 16.7968 10.4168L18.0197 11.7888L19.6391 5.17618C19.7118 4.87928 19.3889 4.64305 19.1283 4.80246L13.3241 8.35306L15.0704 9.15363C11.7777 12.6269 7.19306 15.8763 3.94258 16.2187C3.13058 16.3043 2.15871 16.0911 1.40248 15.5377C-0.123006 14.4215 -0.455588 12.279 0.659645 10.7522L0.66829 10.7404L0.678147 10.7271C0.865156 10.4504 1.1246 10.1932 1.46169 9.96519C1.60563 9.86452 1.75619 9.77586 1.91185 9.69943L18.8829 0.427107ZM6.39334 23.161C7.37266 23.8631 8.73948 23.6318 9.44623 22.6444C9.91583 21.9883 10.2609 19.8511 10.4396 18.4907C10.5082 17.9682 9.98185 17.5908 9.50966 17.8239C8.28019 18.431 6.36939 19.4456 5.8998 20.1017C5.19305 21.0891 5.41402 22.4588 6.39334 23.161Z"
|
||
fill="currentColor" />
|
||
<path
|
||
d="M38.1793 21.288C37.2193 21.288 36.3073 21.192 35.4433 21C34.5793 20.808 33.8113 20.504 33.1393 20.088C32.4833 19.656 31.9633 19.12 31.5793 18.48C31.2113 17.824 31.0273 17.032 31.0273 16.104C31.0273 16.024 31.0273 15.944 31.0273 15.864C31.0273 15.768 31.0353 15.696 31.0513 15.648H34.6033C34.5873 15.696 34.5793 15.76 34.5793 15.84C34.5793 15.92 34.5793 15.992 34.5793 16.056C34.5793 16.568 34.7153 17 34.9873 17.352C35.2753 17.704 35.6913 17.968 36.2353 18.144C36.7793 18.32 37.4113 18.408 38.1313 18.408C38.5953 18.408 39.0033 18.384 39.3553 18.336C39.7233 18.272 40.0433 18.192 40.3153 18.096C40.6033 17.984 40.8353 17.856 41.0113 17.712C41.2033 17.568 41.3393 17.4 41.4193 17.208C41.5153 17.016 41.5633 16.8 41.5633 16.56C41.5633 16.128 41.4193 15.776 41.1313 15.504C40.8593 15.232 40.4753 15 39.9793 14.808C39.4993 14.616 38.9553 14.44 38.3473 14.28C37.7393 14.12 37.1153 13.96 36.4753 13.8C35.8353 13.624 35.2113 13.416 34.6033 13.176C33.9953 12.92 33.4513 12.616 32.9713 12.264C32.4913 11.912 32.1073 11.464 31.8193 10.92C31.5313 10.376 31.3873 9.72 31.3873 8.952C31.3873 8.136 31.5553 7.432 31.8913 6.84C32.2433 6.248 32.7313 5.76 33.3553 5.376C33.9793 4.992 34.6993 4.712 35.5153 4.536C36.3313 4.344 37.2193 4.248 38.1793 4.248C39.0753 4.248 39.9233 4.344 40.7233 4.536C41.5233 4.712 42.2273 5 42.8353 5.4C43.4433 5.8 43.9153 6.304 44.2513 6.912C44.6033 7.52 44.7793 8.24 44.7793 9.072V9.36H41.2993V9.168C41.2993 8.736 41.1713 8.368 40.9153 8.064C40.6593 7.76 40.2993 7.52 39.8353 7.344C39.3713 7.168 38.8273 7.08 38.2033 7.08C37.5313 7.08 36.9553 7.144 36.4753 7.272C36.0113 7.4 35.6513 7.592 35.3953 7.848C35.1553 8.088 35.0353 8.376 35.0353 8.712C35.0353 9.096 35.1713 9.416 35.4433 9.672C35.7313 9.912 36.1153 10.128 36.5953 10.32C37.0913 10.496 37.6433 10.656 38.2513 10.8C38.8593 10.944 39.4833 11.104 40.1233 11.28C40.7633 11.456 41.3873 11.664 41.9953 11.904C42.6033 12.144 43.1473 12.448 43.6273 12.816C44.1073 13.168 44.4913 13.608 44.7793 14.136C45.0673 14.664 45.2113 15.296 45.2113 16.032C45.2113 17.296 44.9073 18.312 44.2993 19.08C43.6913 19.848 42.8593 20.408 41.8033 20.76C40.7473 21.112 39.5393 21.288 38.1793 21.288ZM51.1083 21.288C50.6923 21.288 50.2443 21.24 49.7643 21.144C49.3003 21.048 48.8603 20.88 48.4443 20.64C48.0283 20.384 47.6843 20.024 47.4123 19.56C47.1563 19.08 47.0283 18.472 47.0283 17.736C47.0283 16.856 47.2203 16.128 47.6043 15.552C47.9883 14.976 48.5323 14.528 49.2363 14.208C49.9563 13.872 50.8123 13.64 51.8043 13.512C52.7963 13.384 53.8923 13.32 55.0923 13.32V12.384C55.0923 12.016 55.0283 11.696 54.9003 11.424C54.7883 11.152 54.5803 10.936 54.2763 10.776C53.9883 10.616 53.5803 10.536 53.0523 10.536C52.5243 10.536 52.0923 10.6 51.7563 10.728C51.4363 10.856 51.2043 11.024 51.0603 11.232C50.9323 11.424 50.8683 11.64 50.8683 11.88V12.168H47.6283C47.6123 12.088 47.6043 12.016 47.6043 11.952C47.6043 11.872 47.6043 11.776 47.6043 11.664C47.6043 10.928 47.8283 10.296 48.2763 9.768C48.7243 9.224 49.3563 8.808 50.1723 8.52C50.9883 8.232 51.9403 8.088 53.0283 8.088C54.1963 8.088 55.1723 8.24 55.9563 8.544C56.7563 8.848 57.3643 9.296 57.7803 9.888C58.2123 10.48 58.4283 11.224 58.4283 12.12V17.856C58.4283 18.144 58.5083 18.36 58.6683 18.504C58.8443 18.632 59.0363 18.696 59.2443 18.696H60.0363V20.88C59.8763 20.96 59.6283 21.04 59.2923 21.12C58.9563 21.216 58.5483 21.264 58.0683 21.264C57.6043 21.264 57.1883 21.192 56.8203 21.048C56.4683 20.92 56.1723 20.736 55.9323 20.496C55.6923 20.24 55.5243 19.936 55.4283 19.584H55.2603C54.9883 19.92 54.6523 20.216 54.2523 20.472C53.8683 20.728 53.4123 20.928 52.8843 21.072C52.3723 21.216 51.7803 21.288 51.1083 21.288ZM52.2363 18.768C52.6843 18.768 53.0843 18.704 53.4363 18.576C53.7883 18.432 54.0843 18.248 54.3243 18.024C54.5643 17.784 54.7483 17.496 54.8763 17.16C55.0203 16.824 55.0923 16.464 55.0923 16.08V15.384C54.1963 15.384 53.3963 15.448 52.6923 15.576C51.9883 15.688 51.4283 15.888 51.0123 16.176C50.6123 16.464 50.4123 16.864 50.4123 17.376C50.4123 17.664 50.4843 17.912 50.6283 18.12C50.7723 18.328 50.9803 18.488 51.2523 18.6C51.5243 18.712 51.8523 18.768 52.2363 18.768ZM65.0302 21.288C64.6142 21.288 64.1662 21.24 63.6862 21.144C63.2222 21.048 62.7822 20.88 62.3662 20.64C61.9502 20.384 61.6062 20.024 61.3342 19.56C61.0782 19.08 60.9502 18.472 60.9502 17.736C60.9502 16.856 61.1422 16.128 61.5262 15.552C61.9102 14.976 62.4542 14.528 63.1582 14.208C63.8782 13.872 64.7342 13.64 65.7262 13.512C66.7182 13.384 67.8142 13.32 69.0142 13.32V12.384C69.0142 12.016 68.9502 11.696 68.8222 11.424C68.7102 11.152 68.5022 10.936 68.1982 10.776C67.9102 10.616 67.5022 10.536 66.9742 10.536C66.4462 10.536 66.0142 10.6 65.6782 10.728C65.3582 10.856 65.1262 11.024 64.9822 11.232C64.8542 11.424 64.7902 11.64 64.7902 11.88V12.168H61.5502C61.5342 12.088 61.5262 12.016 61.5262 11.952C61.5262 11.872 61.5262 11.776 61.5262 11.664C61.5262 10.928 61.7502 10.296 62.1982 9.768C62.6462 9.224 63.2782 8.808 64.0942 8.52C64.9102 8.232 65.8622 8.088 66.9502 8.088C68.1182 8.088 69.0942 8.24 69.8782 8.544C70.6782 8.848 71.2862 9.296 71.7022 9.888C72.1342 10.48 72.3502 11.224 72.3502 12.12V17.856C72.3502 18.144 72.4302 18.36 72.5902 18.504C72.7662 18.632 72.9582 18.696 73.1662 18.696H73.9582V20.88C73.7982 20.96 73.5502 21.04 73.2142 21.12C72.8782 21.216 72.4702 21.264 71.9902 21.264C71.5262 21.264 71.1102 21.192 70.7422 21.048C70.3902 20.92 70.0942 20.736 69.8542 20.496C69.6142 20.24 69.4462 19.936 69.3502 19.584H69.1822C68.9102 19.92 68.5742 20.216 68.1742 20.472C67.7902 20.728 67.3342 20.928 66.8062 21.072C66.2942 21.216 65.7022 21.288 65.0302 21.288ZM66.1582 18.768C66.6062 18.768 67.0062 18.704 67.3582 18.576C67.7102 18.432 68.0062 18.248 68.2462 18.024C68.4862 17.784 68.6702 17.496 68.7982 17.16C68.9422 16.824 69.0142 16.464 69.0142 16.08V15.384C68.1182 15.384 67.3182 15.448 66.6142 15.576C65.9102 15.688 65.3502 15.888 64.9342 16.176C64.5342 16.464 64.3342 16.864 64.3342 17.376C64.3342 17.664 64.4062 17.912 64.5502 18.12C64.6942 18.328 64.9022 18.488 65.1742 18.6C65.4462 18.712 65.7742 18.768 66.1582 18.768ZM80.7281 21.288C79.8481 21.288 79.0561 21.192 78.3521 21C77.6481 20.808 77.0481 20.544 76.5521 20.208C76.0561 19.856 75.6721 19.44 75.4001 18.96C75.1441 18.48 75.0161 17.936 75.0161 17.328C75.0161 17.264 75.0161 17.2 75.0161 17.136C75.0161 17.072 75.0241 17.024 75.0401 16.992H78.2561C78.2561 17.024 78.2561 17.056 78.2561 17.088C78.2561 17.12 78.2561 17.152 78.2561 17.184C78.2721 17.584 78.4001 17.912 78.6401 18.168C78.8801 18.408 79.1921 18.584 79.5761 18.696C79.9761 18.808 80.3921 18.864 80.8241 18.864C81.2081 18.864 81.5761 18.832 81.9281 18.768C82.2961 18.688 82.6001 18.552 82.8401 18.36C83.0961 18.168 83.2241 17.92 83.2241 17.616C83.2241 17.232 83.0641 16.936 82.7441 16.728C82.4401 16.52 82.0321 16.352 81.5201 16.224C81.0241 16.096 80.4801 15.952 79.8881 15.792C79.3441 15.664 78.8001 15.52 78.2561 15.36C77.7121 15.184 77.2161 14.96 76.7681 14.688C76.3361 14.416 75.9841 14.064 75.7121 13.632C75.4401 13.184 75.3041 12.624 75.3041 11.952C75.3041 11.296 75.4481 10.728 75.7361 10.248C76.0241 9.752 76.4161 9.344 76.9121 9.024C77.4241 8.704 78.0161 8.472 78.6881 8.328C79.3761 8.168 80.1121 8.088 80.8961 8.088C81.6321 8.088 82.3201 8.168 82.9601 8.328C83.6001 8.472 84.1601 8.696 84.6401 9C85.1201 9.288 85.4961 9.656 85.7681 10.104C86.0401 10.536 86.1761 11.024 86.1761 11.568C86.1761 11.68 86.1761 11.784 86.1761 11.88C86.1761 11.976 86.1681 12.04 86.1521 12.072H82.9601V11.88C82.9601 11.592 82.8721 11.352 82.6961 11.16C82.5201 10.952 82.2641 10.792 81.9281 10.68C81.6081 10.568 81.2161 10.512 80.7521 10.512C80.4321 10.512 80.1361 10.536 79.8641 10.584C79.6081 10.632 79.3841 10.704 79.1921 10.8C79.0001 10.896 78.8481 11.016 78.7361 11.16C78.6401 11.288 78.5921 11.448 78.5921 11.64C78.5921 11.912 78.7041 12.136 78.9281 12.312C79.1681 12.472 79.4801 12.608 79.8641 12.72C80.2481 12.832 80.6721 12.952 81.1361 13.08C81.7121 13.24 82.3121 13.4 82.9361 13.56C83.5761 13.704 84.1681 13.904 84.7121 14.16C85.2561 14.416 85.6961 14.784 86.0321 15.264C86.3681 15.728 86.5361 16.36 86.5361 17.16C86.5361 17.928 86.3841 18.576 86.0801 19.104C85.7921 19.632 85.3841 20.056 84.8561 20.376C84.3281 20.696 83.7121 20.928 83.0081 21.072C82.3041 21.216 81.5441 21.288 80.7281 21.288ZM87.56 21L93.896 4.536H98.312L104.648 21H100.784L99.608 17.76H92.432L91.256 21H87.56ZM93.464 14.88H98.576L97.112 10.824C97.048 10.648 96.968 10.44 96.872 10.2C96.792 9.944 96.704 9.664 96.608 9.36C96.512 9.056 96.416 8.76 96.32 8.472C96.24 8.168 96.16 7.896 96.08 7.656H95.936C95.856 7.96 95.752 8.32 95.624 8.736C95.496 9.136 95.368 9.528 95.24 9.912C95.112 10.28 95.008 10.584 94.928 10.824L93.464 14.88ZM113.375 21.288C112.559 21.288 111.807 21.128 111.119 20.808C110.447 20.472 109.903 19.968 109.487 19.296H109.319L109.055 21H106.319V3.648H109.655V9.768H109.799C110.055 9.4 110.367 9.088 110.735 8.832C111.103 8.576 111.519 8.392 111.983 8.28C112.447 8.152 112.951 8.088 113.495 8.088C114.487 8.088 115.351 8.32 116.087 8.784C116.839 9.248 117.423 9.968 117.839 10.944C118.255 11.904 118.463 13.144 118.463 14.664C118.463 16.184 118.255 17.432 117.839 18.408C117.439 19.384 116.855 20.112 116.087 20.592C115.335 21.056 114.431 21.288 113.375 21.288ZM112.343 18.552C113.015 18.552 113.543 18.424 113.927 18.168C114.327 17.896 114.615 17.496 114.791 16.968C114.967 16.44 115.055 15.776 115.055 14.976V14.424C115.055 13.624 114.967 12.96 114.791 12.432C114.615 11.888 114.327 11.488 113.927 11.232C113.543 10.96 113.015 10.824 112.343 10.824C111.863 10.824 111.455 10.912 111.119 11.088C110.783 11.248 110.503 11.488 110.279 11.808C110.071 12.112 109.911 12.496 109.799 12.96C109.687 13.424 109.631 13.936 109.631 14.496V14.928C109.631 15.68 109.727 16.328 109.919 16.872C110.111 17.416 110.407 17.832 110.807 18.12C111.207 18.408 111.719 18.552 112.343 18.552ZM120.921 21V3.648H124.257V21H120.921ZM133.055 21.288C131.663 21.288 130.495 21.056 129.551 20.592C128.607 20.112 127.895 19.384 127.415 18.408C126.935 17.432 126.695 16.192 126.695 14.688C126.695 13.168 126.935 11.928 127.415 10.968C127.895 9.992 128.599 9.272 129.527 8.808C130.471 8.328 131.623 8.088 132.983 8.088C134.263 8.088 135.343 8.32 136.223 8.784C137.103 9.232 137.767 9.936 138.215 10.896C138.663 11.84 138.887 13.064 138.887 14.568V15.432H130.079C130.111 16.168 130.223 16.792 130.415 17.304C130.623 17.816 130.935 18.2 131.351 18.456C131.783 18.696 132.351 18.816 133.055 18.816C133.439 18.816 133.783 18.768 134.087 18.672C134.407 18.576 134.679 18.432 134.903 18.24C135.127 18.048 135.303 17.808 135.431 17.52C135.559 17.232 135.623 16.904 135.623 16.536H138.887C138.887 17.336 138.743 18.032 138.455 18.624C138.167 19.216 137.767 19.712 137.255 20.112C136.743 20.496 136.127 20.792 135.407 21C134.703 21.192 133.919 21.288 133.055 21.288ZM130.127 13.32H135.455C135.455 12.84 135.391 12.424 135.263 12.072C135.151 11.72 134.991 11.432 134.783 11.208C134.575 10.984 134.319 10.824 134.015 10.728C133.727 10.616 133.399 10.56 133.031 10.56C132.423 10.56 131.911 10.664 131.495 10.872C131.095 11.064 130.783 11.368 130.559 11.784C130.351 12.184 130.207 12.696 130.127 13.32Z"
|
||
fill="currentColor" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<div class="nav-collapse grow hidden w-full lg:flex lg:w-full flex-auto justify-center"
|
||
id="main-navbar-collapse">
|
||
<div class="justify-center flex flex-col lg:flex-row p-0 lg:bg-neutral-200 lg:rounded-full">
|
||
<a class="inline-block text-neutral-900 hover:bg-primary-500/[.04] dark:text-themedark-bodycolor rounded-full px-[18px] lg:px-6 py-3 text-[14px] font-medium transition-all leading-[1.429] open:text-primary-500 open:font-semibold"
|
||
href="index.html" open>
|
||
Home
|
||
</a>
|
||
<div class="btn-group group">
|
||
<button
|
||
class="inline-flex text-neutral-900 hover:bg-primary-500/[.04] dark:text-themedark-bodycolor rounded-full px-[18px] py-3 text-[14px] font-medium transition-all leading-[1.429] dropdown-toggle arrow-none ltr:text-left rtl:text-right max-lg:w-full justify-between items-center"
|
||
type="button" data-pc-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Landings
|
||
<i class="ti ti-chevron-down"></i>
|
||
</button>
|
||
<div
|
||
class="dropdown-menu dropdown-center group-[.drp-show]:max-lg:!relative !w-[936px] max-lg:!w-full max-lg:!transform-none !p-0 overflow-hidden shadow-[0px_0px_2px_0px_rgba(0,0,0,0.2),_rgba(26,28,30,0.06)_0px_16px_10px_0px]">
|
||
<div class="p-2">
|
||
<div class="grid grid-cols-12 gap-2">
|
||
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
|
||
<a href="#" class="group/landinglinks block cursor-default">
|
||
<div class="p-2 rounded-xl overflow-hidden group-hover/landinglinks:bg-neutral-50 transition-all duration-300">
|
||
<div class="flex flex-col gap-2">
|
||
<img src="../assets/images/mega-menu/crm-light.svg" class="block dark:hidden w-full" alt="images">
|
||
<img src="../assets/images/mega-menu/crm-dark.svg" class="hidden dark:block w-full" alt="images">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<h6 class="subtitle1 text-theme-text-primary mt-0.5">CRM</h6>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
|
||
<a href="#" class="group/landinglinks block cursor-default">
|
||
<div class="p-2 rounded-xl overflow-hidden group-hover/landinglinks:bg-neutral-50 transition-all duration-300">
|
||
<div class="flex flex-col gap-2">
|
||
<img src="../assets/images/mega-menu/ai-light.svg" class="block dark:hidden w-full" alt="images">
|
||
<img src="../assets/images/mega-menu/ai-dark.svg" class="hidden dark:block w-full" alt="images">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<h6 class="subtitle1 text-theme-text-primary mt-0.5">AI</h6>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
|
||
<a href="#" class="group/landinglinks block cursor-default">
|
||
<div class="p-2 rounded-xl overflow-hidden group-hover/landinglinks:bg-neutral-50 transition-all duration-300">
|
||
<div class="flex flex-col gap-2">
|
||
<img src="../assets/images/mega-menu/crypto-light.svg" class="block dark:hidden w-full" alt="images">
|
||
<img src="../assets/images/mega-menu/crypto-dark.svg" class="hidden dark:block w-full" alt="images">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<h6 class="subtitle1 text-theme-text-primary mt-0.5">Crypto</h6>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
|
||
<a href="#" class="group/landinglinks block cursor-default">
|
||
<div class="p-2 rounded-xl overflow-hidden group-hover/landinglinks:bg-neutral-50 transition-all duration-300">
|
||
<div class="flex flex-col gap-2">
|
||
<img src="../assets/images/mega-menu/hosting-light.svg" class="block dark:hidden w-full" alt="images">
|
||
<img src="../assets/images/mega-menu/hosting-dark.svg" class="hidden dark:block w-full" alt="images">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<h6 class="subtitle1 text-theme-text-primary mt-0.5">Hosting</h6>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
|
||
<a href="#" class="group/landinglinks block cursor-default">
|
||
<div class="p-2 rounded-xl overflow-hidden group-hover/landinglinks:bg-neutral-50 transition-all duration-300">
|
||
<div class="flex flex-col gap-2">
|
||
<img src="../assets/images/mega-menu/pms-light.svg" class="block dark:hidden w-full" alt="images">
|
||
<img src="../assets/images/mega-menu/pms-dark.svg" class="hidden dark:block w-full" alt="images">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<h6 class="subtitle1 text-theme-text-primary mt-0.5">PMS</h6>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
|
||
<a href="#" class="group/landinglinks block cursor-default">
|
||
<div class="p-2 rounded-xl overflow-hidden group-hover/landinglinks:bg-neutral-50 transition-all duration-300">
|
||
<div class="flex flex-col gap-2">
|
||
<img src="../assets/images/mega-menu/hrm-light.svg" class="block dark:hidden w-full" alt="images">
|
||
<img src="../assets/images/mega-menu/hrm-dark.svg" class="hidden dark:block w-full" alt="images">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<h6 class="subtitle1 text-theme-text-primary mt-0.5">HRM</h6>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
|
||
<a href="#" class="group/landinglinks block cursor-default">
|
||
<div class="p-2 rounded-xl overflow-hidden group-hover/landinglinks:bg-neutral-50 transition-all duration-300">
|
||
<div class="flex flex-col gap-2">
|
||
<img src="../assets/images/mega-menu/plugin-light.svg" class="block dark:hidden w-full" alt="images">
|
||
<img src="../assets/images/mega-menu/plugin-dark.svg" class="hidden dark:block w-full" alt="images">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<h6 class="subtitle1 text-theme-text-primary mt-0.5">Plugin</h6>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-4 lg:col-span-3">
|
||
<a href="#" class="group/landinglinks block cursor-default">
|
||
<div class="p-2 rounded-xl overflow-hidden group-hover/landinglinks:bg-neutral-50 transition-all duration-300">
|
||
<div class="flex flex-col gap-2">
|
||
<img src="../assets/images/mega-menu/lms-light.svg" class="block dark:hidden w-full grayscale blur-[2px]" alt="images">
|
||
<img src="../assets/images/mega-menu/lms-dark.svg" class="hidden dark:block w-full grayscale blur-[2px]" alt="images">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<h6 class="subtitle1 text-theme-text-primary mt-0.5">LMS</h6>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Coming Soon</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-5 bg-neutral-100">
|
||
<div class="flex flex-col sm:flex-row gap-3 justify-between items-start sm:items-center">
|
||
<div class="flex flex-col gap-2">
|
||
<div class="flex items-center gap-3">
|
||
<h5>Explore our range of landing demos tailored to suit your needs</h5>
|
||
<div class="bg-theme-bg-default py-1 px-2 rounded-full hidden sm:inline-flex">
|
||
<h6 class="caption flex flex-row items-center">
|
||
<img class="w-4 h-4" src="assets/images/shared/celebration.svg" alt="celebration">
|
||
<span class="px-3 py-1">Featured</span>
|
||
</h6>
|
||
</div>
|
||
</div>
|
||
<p class="body2 block">SaasAble offers 200+ customizable blocks, empowering you to effortlessly design and build landing pages tailored to your product or service needs.</p>
|
||
</div>
|
||
<a href="@@buy_now" target="_blank" class="buy_now_link btn btn-primary px-4 py-2.5 shrink-0">Buy Now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="block/block.html"
|
||
class="inline-block text-neutral-900 hover:bg-primary-500/[.04] dark:text-themedark-bodycolor rounded-full px-[18px] lg:px-6 py-3 text-[14px] font-medium transition-all leading-[1.429] open:text-primary-500 open:font-semibold">
|
||
Blocks
|
||
</a>
|
||
<div class="btn-group">
|
||
<button
|
||
class="inline-block text-neutral-900 hover:bg-primary-500/[.04] dark:text-themedark-bodycolor rounded-full px-[18px] lg:px-6 py-3 text-[14px] font-medium transition-all leading-[1.429] open:text-primary-500 open:font-semibold dropdown-toggle arrow-none"
|
||
type="button" data-pc-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Pages
|
||
<i class="ti ti-chevron-down"></i>
|
||
</button>
|
||
<div
|
||
class="dropdown-menu dropdown-center group-[.drp-show]:max-lg:!relative !w-[860px] max-lg:!w-full max-lg:!transform-none !p-0 overflow-hidden shadow-[0px_0px_2px_0px_rgba(0,0,0,0.2),_rgba(26,28,30,0.06)_0px_16px_10px_0px]">
|
||
<div class="grid grid-cols-12 gap-3">
|
||
<div class="col-span-12 sm:col-span-4 p-2">
|
||
<div class="p-5 bg-neutral-100 h-full rounded-lg">
|
||
<div class="flex flex-col items-start gap-6 h-full justify-center">
|
||
<div class="flex flex-col gap-2">
|
||
<div class="flex flex-col items-start gap-3">
|
||
<div class="bg-theme-bg-default rounded-full hidden sm:inline-flex">
|
||
<span class="caption flex flex-row items-center">
|
||
<img class="w-4 h-4 ltr:ml-2.5 rtl:mr-2.5"
|
||
src="assets/images/shared/celebration.svg" alt="celebration">
|
||
<span class="subtitle2 px-3 py-1">SaasAble UI Kit</span>
|
||
</span>
|
||
</div>
|
||
<h4>Kickstart your project with pre-built essentials pages.</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-12 sm:col-span-8">
|
||
<div class="grid grid-cols-12 gap-2">
|
||
<div class="col-span-12 sm:col-span-4">
|
||
<div class="flex flex-col p-2 h-full max-w-full lg:max-w-[860px]">
|
||
<div class="subtitle1 p-2 text-theme-text-primary">General</div>
|
||
<ul class="*:*:block *:*:px-2.5 *:*:py-1 *:*:my-0.5 *:*:rounded-lg *:*:hover:bg-neutral-50 focus:*:*:bg-neutral-200 *:*:transition-all *:*:duration-300">
|
||
<li>
|
||
<a href="pages/about.html" target="_blank">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">About</div>
|
||
<i class="ti ti-arrow-up-right text-neutral-800 text-base leading-none"></i>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="cursor-default">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Career</div>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="pages/privacy-policy.html" target="_blank">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Privacy Policy</div>
|
||
<i class="ti ti-arrow-up-right text-neutral-800 text-base leading-none"></i>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="cursor-default">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Contact Us</div>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="cursor-default">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">FAQs</div>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="cursor-default">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Pricing</div>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-12 sm:col-span-4">
|
||
<div class="flex flex-col p-2 h-full max-w-full lg:max-w-[860px]">
|
||
<div class="subtitle1 p-2 text-theme-text-primary">Maintenance</div>
|
||
<ul class="*:*:block *:*:px-2.5 *:*:py-1 *:*:my-0.5 *:*:rounded-lg *:*:hover:bg-neutral-50 focus:*:*:bg-neutral-200 *:*:transition-all *:*:duration-300">
|
||
<li>
|
||
<a href="#" class="cursor-default">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Coming Soon</div>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="error404/error404-1.html" target="_blank">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Error 404</div>
|
||
<i class="ti ti-arrow-up-right text-neutral-800 text-base leading-none"></i>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="error500/error500-1.html" target="_blank">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Error 500</div>
|
||
<i class="ti ti-arrow-up-right text-neutral-800 text-base leading-none"></i>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="cursor-default">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Under Maintenance</div>
|
||
<span class="px-2 py-1 text-primary-500 bg-primary-100 rounded-full caption">Pro</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-12 sm:col-span-4">
|
||
<div class="flex flex-col p-2 h-full max-w-full lg:max-w-[860px]">
|
||
<div class="subtitle1 p-2 text-theme-text-primary">External</div>
|
||
<ul class="*:*:block *:*:px-2.5 *:*:py-1 *:*:my-0.5 *:*:rounded-lg *:*:hover:bg-neutral-50 focus:*:*:bg-neutral-200 *:*:transition-all *:*:duration-300">
|
||
<li>
|
||
<a href="https://blog.saasable.io/" target="_blank">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Blog</div>
|
||
<i class="ti ti-arrow-up-right text-neutral-800 text-base leading-none"></i>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://phoenixcoded.gitbook.io/saasable-tailwind" target="_blank">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Documentation</div>
|
||
<i class="ti ti-arrow-up-right text-neutral-800 text-base leading-none"></i>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://phoenixcoded.authordesk.app/" target="_blank">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Support</div>
|
||
<i class="ti ti-arrow-up-right text-neutral-800 text-base leading-none"></i>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://discord.com/invite/gmqz4BWYA8" target="_blank">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Discord</div>
|
||
<i class="ti ti-arrow-up-right text-neutral-800 text-base leading-none"></i>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://codedthemes.com/terms-and-conditions/" target="_blank">
|
||
<div class="flex flex-row justify-between items-center">
|
||
<div class="body1 my-1 truncate">Terms & Conditions</div>
|
||
<i class="ti ti-arrow-up-right text-neutral-800 text-base leading-none"></i>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="https://phoenixcoded.gitbook.io/saasable-tailwind" target="_blank"
|
||
class="inline-block text-neutral-900 hover:bg-primary-500/[.04] dark:text-themedark-bodycolor rounded-full px-[18px] lg:px-6 py-3 text-[14px] font-medium transition-all leading-[1.429] open:text-primary-500 open:font-semibold">
|
||
Docs
|
||
<i class="ti ti-pin-invoke text-[16px]"></i>
|
||
</a>
|
||
<div class="py-5 px-6 bg-neutral-100 flex items-center justify-between sm:hidden">
|
||
<a href="https://github.com/phoenixcoded/saasable-ui" type="button" target="_blank"
|
||
class="flex items-center justify-center h-10 w-10 rounded-full btn-outline-primary p-[9px_24px]">
|
||
<i class="ti ti-brand-github text-lg leading-none"></i>
|
||
</a>
|
||
<a href="@@buy_now" target="_blank" class="buy_now_link btn-primary btn">Buy Now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="btn-group">
|
||
<a href="#" type="button"
|
||
class="flex items-center justify-center h-10 w-10 rounded-full btn-outline-primary dropdown-toggle arrow-none p-[9px_24px]"
|
||
type="button" data-pc-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="ti ti-settings text-lg leading-none"></i>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-end leading-none">
|
||
<div class="dropdown-item !bg-transparent">
|
||
<label class="flex items-center gap-3 flex-1" for="theme-setup-dark">
|
||
<div class="shrink-0">
|
||
<i class="ti ti-sun-moon !text-2xl !leading-none"></i>
|
||
</div>
|
||
<div class="grow text-base leading-none" for="theme-setup-dark">Dark</div>
|
||
<div class="shrink-0">
|
||
<div class="form-check form-switch custom-switch-v1 !inline-flex !m-0">
|
||
<input type="checkbox" class="form-check-input input-primary" id="theme-setup-dark">
|
||
</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
<div class="dropdown-item !bg-transparent">
|
||
<label class="flex items-center gap-3 flex-1" for="theme-setup-rtl">
|
||
<div class="shrink-0">
|
||
<i class="ti ti-text-direction-ltr !text-2xl !leading-none"></i>
|
||
</div>
|
||
<div class="grow text-base leading-none">RTL</div>
|
||
<div class="shrink-0">
|
||
<div class="form-check form-switch custom-switch-v1 !inline-flex !m-0">
|
||
<input type="checkbox" class="form-check-input input-primary" id="theme-setup-rtl">
|
||
</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="https://github.com/phoenixcoded/saasable-ui" type="button" target="_blank"
|
||
class="max-sm:hidden flex items-center justify-center h-10 w-10 rounded-full btn-outline-primary p-[9px_24px]">
|
||
<i class="ti ti-brand-github text-lg leading-none"></i>
|
||
</a>
|
||
<a href="@@buy_now" target="_blank" class="buy_now_link btn-primary btn max-sm:hidden">Buy Now</a>
|
||
</div>
|
||
<button data-pc-toggle="nav-collapse" type="button" data-pc-target="#main-navbar-collapse"
|
||
class="inline-flex ltr:ml-2 rtl:mr-2 items-center p-2 w-10 h-10 justify-center text-sm text-neutral-900 rounded-full lg:hidden hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-200 dark:focus:ring-gray-600">
|
||
<i class="ti ti-menu-2 text-2xl leading-none"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<!-- [ Nav ] start -->
|
||
|
||
<!-- [ hero ] start -->
|
||
<section class="relative overflow-hidden">
|
||
<div class="absolute top-0 z-10 inset-x-0 block bg-neutral-100 h-[592px] sm:h-[738px] lg:h-[878px] overflow-hidden rounded-b-3xl sm:rounded-b-[32px] lg:rounded-b-[40px]">
|
||
<div class=" relative z-10 h-full bg-[length:35px_35px] bg-[url('data:image/svg+xml;utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2050%2060%22><text%20x=%220%22%20y=%2225%22%20fill=%22%23E6E8EE%22%20font-size=%2280px%22>.%3C/text%3E</svg>')] dark:bg-[url('data:image/svg+xml;utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2050%2060%22><text%20x=%220%22%20y=%2225%22%20fill=%22%23272A2E%22%20font-size=%2280px%22>.%3C/text%3E</svg>')]">
|
||
</div>
|
||
</div>
|
||
<div class="common-section relative z-20">
|
||
<div class="container animation-ref">
|
||
<div class="pb-5 sm:pb-11 lg:pb-12">
|
||
<div class="flex flex-col items-center gap-3">
|
||
<div class="animate-y delay-reset inline-flex items-center p-1 rounded-full border border-neutral-300 bg-neutral-100">
|
||
<span class="px-2 text-[12px] font-semibold font-figtree text-neutral-800">One Kit, Endless</span>
|
||
<div class="bg-primary-100 inline-flex items-center py-1 px-2 rounded-full gap-1">
|
||
<img src="assets/images/shared/celebration.svg" alt="celebration" class="w-5 h-5">
|
||
<span class="text-primary-500 font-semibold text-xs leading-none">Possibilities</span>
|
||
</div>
|
||
</div>
|
||
<h1 class="animate-y max-w-[800px] text-center">
|
||
Multipurpose UI Kit
|
||
</h1>
|
||
<div class="animate-y text-primary-500 pt-1 pb-1.5">
|
||
@@include('images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto"'})
|
||
</div>
|
||
<h6 class="animate-y max-w-[650px] text-center text-theme-text-secondary">Design marketing pages with ease using our UI Kit, built following Tailwind guidelines.</h6>
|
||
</div>
|
||
<div class="flex flex-col items-center gap-4 mt-6 sm:mt-8 lg:mt-10">
|
||
<div class="animate-y">
|
||
<a href="block/block.html" class="btn btn-primary btn-md capitalize">
|
||
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
|
||
<i class="ti ti-sparkles text-base leading-none"></i>
|
||
Explore Blocks
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<div class="animate-y flex flex-row gap-2 justify-center flex-wrap">
|
||
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 dark:border-neutral-800 bg-neutral-100">
|
||
<img src="assets/images/shared/tailwindcss.svg" alt="celebration" class="w-4 h-4">
|
||
<span class="caption2 py-1.5 px-2">Tailwind</span>
|
||
</div>
|
||
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 dark:border-neutral-800 bg-neutral-100">
|
||
<img src="assets/images/shared/html.svg" alt="celebration" class="w-4 h-4">
|
||
<span class="caption2 py-1.5 px-2">Html</span>
|
||
</div>
|
||
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 dark:border-neutral-800 bg-neutral-100">
|
||
<img src="assets/images/shared/scss.svg" alt="celebration" class="w-4 h-4">
|
||
<span class="caption2 py-1.5 px-2">Scss</span>
|
||
</div>
|
||
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 dark:border-neutral-800 bg-neutral-100">
|
||
<img src="assets/images/shared/css.svg" alt="celebration" class="w-4 h-4">
|
||
<span class="caption2 py-1.5 px-2">Css</span>
|
||
</div>
|
||
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 dark:border-neutral-800 bg-neutral-100">
|
||
<img src="assets/images/shared/gulp.svg" alt="celebration" class="w-4 h-4">
|
||
<span class="caption2 py-1.5 px-2">Gulp</span>
|
||
</div>
|
||
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 dark:border-neutral-800 bg-neutral-100">
|
||
<img src="assets/images/shared/javascript.svg" alt="celebration" class="w-4 h-4">
|
||
<span class="caption2 py-1.5 px-2">JavaScript</span>
|
||
</div>
|
||
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 dark:border-neutral-800 bg-neutral-100">
|
||
<img src="assets/images/shared/figma.svg" alt="celebration" class="w-4 h-4">
|
||
<span class="caption2 py-1.5 px-2">Figma</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="img-hero-1 rounded-3xl sm:rounded-[32px] md:rounded-[40px] overflow-hidden h-auto w-full">
|
||
<video autoplay muted playsinline loop width="100%" height="100%" class="flex object-cover w-full h-full">
|
||
<source src="https://d2elhhoq00m1pj.cloudfront.net/saasable-intro.mp4" type="video/mp4">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ hero ] end -->
|
||
<!-- [ Feature ] start -->
|
||
<section class="common-section">
|
||
<div class="container">
|
||
<div class="flex flex-col gap-6 sm:gap-8 md:gap-10">
|
||
<h2 class="animate-y delay-reset text-center">Comprehensive UI Kit Tailored to your Need</h2>
|
||
<div class="animate-y p-6 rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 h-full relative">
|
||
<div class="overflow-hidden">
|
||
<div class="flex flex-row flex-wrap items-stretch divide-x divide-y rtl:divide-x-reverse relative -m-px divide-neutral-300">
|
||
<div class="basis-full sm:basis-6/12 lg:basis-4/12">
|
||
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
|
||
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
|
||
<i class="ti ti-accessible text-2xl leading-none text-primary-500"></i>
|
||
</div>
|
||
<div class="flex flex-col gap-1 md:gap-2 grow">
|
||
<h4>WCAG Compliant</h4>
|
||
<p class="body1 text-theme-text-secondary">Ensure accessibility with WCAG compliant design for
|
||
browsing.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="basis-full sm:basis-6/12 lg:basis-4/12 relative">
|
||
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
|
||
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
|
||
<i class="ti ti-brand-google text-2xl leading-none text-primary-500"></i>
|
||
</div>
|
||
<div class="flex flex-col gap-1 md:gap-2 grow">
|
||
<h4>SEO Friendly</h4>
|
||
<p class="body1 text-theme-text-secondary">Boost visibility with SEO-friendly features for better
|
||
search rankings.</p>
|
||
</div>
|
||
</div>
|
||
<div class="text-neutral-300 max-sm:hidden absolute ltr:-left-[9px] rtl:-right-[9px] -bottom-[9px]">
|
||
@@include('images/star.html', {'substyle': 'class="w-[17px] md:w-[17px] h-auto"'})
|
||
</div>
|
||
</div>
|
||
<div class="basis-full sm:basis-6/12 lg:basis-4/12 relative">
|
||
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
|
||
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
|
||
<i class="ti ti-stack-2 text-2xl leading-none text-primary-500"></i>
|
||
</div>
|
||
<div class="flex flex-col gap-1 md:gap-2 grow">
|
||
<h4>Tailwind CSS</h4>
|
||
<p class="body1 text-theme-text-secondary">Customize design using Tailwind Css for enhanced
|
||
aesthetics.</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="text-neutral-300 max-sm:hidden absolute ltr:-right-[9px] rtl:-left-[9px] ltr:lg:-left-[9px] rtl:lg:-right-[9px] -bottom-[9px]">
|
||
@@include('images/star.html', {'substyle': 'class="w-[17px] md:w-[17px] h-auto"'})
|
||
</div>
|
||
</div>
|
||
<div class="basis-full sm:basis-6/12 lg:basis-4/12">
|
||
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
|
||
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
|
||
<i class="ti ti-rocket text-2xl leading-none text-primary-500"></i>
|
||
</div>
|
||
<div class="flex flex-col gap-1 md:gap-2 grow">
|
||
<h4>High Performance UI</h4>
|
||
<p class="body1 text-theme-text-secondary">Adjust content layout for visual coherence on various
|
||
screen sizes.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="basis-full sm:basis-6/12 lg:basis-4/12">
|
||
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
|
||
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
|
||
<i class="ti ti-help text-2xl leading-none text-primary-500"></i>
|
||
</div>
|
||
<div class="flex flex-col gap-1 md:gap-2 grow">
|
||
<h4>Detailed Documentation</h4>
|
||
<p class="body1 text-theme-text-secondary">Access comprehensive documentation for easy guidance on
|
||
platform usage.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="basis-full sm:basis-6/12 lg:basis-4/12">
|
||
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
|
||
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
|
||
<i class="ti ti-refresh text-2xl leading-none text-primary-500"></i>
|
||
</div>
|
||
<div class="flex flex-col gap-1 md:gap-2 grow">
|
||
<h4>Regular Updates</h4>
|
||
<p class="body1 text-theme-text-secondary">Receive consistent updates to keep the platform secure and
|
||
up-to-date with the latest features.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class=" flex flex-col items-center justify-center gap-6 text-center">
|
||
<h6 class="animate-y text-theme-text-secondary max-w-[75%] sm:max-w-[45%]">Ready to transform your SaaS
|
||
designs with one powerful UI Kit?</h6>
|
||
<div class="animate-y flex flex-wrap gap-3">
|
||
<a href="block/block.html" class="btn btn-outline-primary btn-md capitalize">
|
||
Explore Blocks
|
||
</a>
|
||
<a href="@@buy_now" class="buy_now_link btn btn-primary btn-md capitalize">
|
||
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
|
||
<i class="ti ti-sparkles text-base leading-none"></i>
|
||
Buy Now
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ Feature ] end -->
|
||
<!-- [ Metrics ] start -->
|
||
<section class="common-section">
|
||
<div class="container">
|
||
<div class="flex flex-col gap-6 sm:gap-8">
|
||
<div class="animate-y delay-reset flex flex-col gap-2 sm:gap-3 items-center text-center">
|
||
<h2>Endless Possibilities</h2>
|
||
<h6 class="text-theme-text-secondary max-w-[750px]">
|
||
Everything you need to design the marketing site for your SaaS product.
|
||
</h6>
|
||
</div>
|
||
<div class="flex flex-col gap-3 lg:flex-row">
|
||
<div class="basis-full lg:basis-2/4 flex flex-col sm:flex-row gap-3">
|
||
<div class="basis-full md:basis-2/4">
|
||
<div
|
||
class="animate-y rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full p-4 sm:p-5 md:p-6">
|
||
<div class="flex flex-col h-full gap-1 items-center">
|
||
<div class="flex flex-row items-end">
|
||
<div class="h1">200</div>
|
||
<div class="h3 text-theme-text-secondary mb-0.5 md:mb-1.5">+</div>
|
||
</div>
|
||
<p class="body1 text-center text-theme-text-secondary">Blocks</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="basis-full md:basis-2/4">
|
||
<div
|
||
class="animate-y rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full p-4 sm:p-5 md:p-6">
|
||
<div class="flex flex-col h-full gap-1 items-center">
|
||
<div class="flex flex-row items-end">
|
||
<div class="h1">10</div>
|
||
<div class="h3 text-theme-text-secondary mb-0.5 md:mb-1.5">+</div>
|
||
</div>
|
||
<p class="body1 text-center text-theme-text-secondary">Redy to use Pages</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="basis-full lg:basis-2/4 flex flex-col sm:flex-row gap-3">
|
||
<div class="basis-full md:basis-2/4">
|
||
<div
|
||
class="animate-y rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full p-4 sm:p-5 md:p-6">
|
||
<div class="flex flex-col h-full gap-1 items-center">
|
||
<div class="flex flex-row items-end">
|
||
<div class="h1">7</div>
|
||
<div class="h3 text-theme-text-secondary mb-0.5 md:mb-1.5">+</div>
|
||
</div>
|
||
<p class="body1 text-center text-theme-text-secondary">Landing Demos</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="basis-full md:basis-2/4">
|
||
<div
|
||
class="animate-y rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full p-4 sm:p-5 md:p-6">
|
||
<div class="flex flex-col h-full gap-1 items-center">
|
||
<div class="flex flex-row items-end">
|
||
<div class="h1">1200</div>
|
||
<div class="h3 text-theme-text-secondary mb-0.5 md:mb-1.5">+</div>
|
||
</div>
|
||
<p class="body1 text-center text-theme-text-secondary">Hours Saved</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ Metrics ] end -->
|
||
<!-- [ Integration 2 ] start -->
|
||
<section class="common-section">
|
||
<div class="container">
|
||
<div
|
||
class="animate-y delay-reset bg-neutral-100 p-6 sm:p-8 md:p-10 h-full rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
|
||
<div class="flex flex-col items-center justify-center gap-8 sm:gap-10 md:gap-12">
|
||
<div class="flex flex-col gap-2 sm:gap-3 text-center">
|
||
<h2>Tailored for Every Industry</h2>
|
||
<h6 class="text-theme-text-secondary">From Project Management to AI, see how our UI Kit helps you build SaaS
|
||
applications tailored for a variety of industries.</h6>
|
||
</div>
|
||
<div class="flex flex-wrap items-center justify-center gap-2 w-full">
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>Project Management</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>Customer Relationship Management (CRM)</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>HR & Recruitment</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>Finance & Accounting</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>E-commerce Solutions</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>Marketing Automation</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>Healthcare & Telemedicine</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>LMS</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>AI & ML Platforms</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>Inventory & Supply Chain Management</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>Customer Support & Help Desk</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>Email Marketing and SEO Tools</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>Networking Platforms</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>Blogging Tools</h5>
|
||
</div>
|
||
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-5 md:px-6">
|
||
<h5>Data Analytics & Business Intelligence</h5>
|
||
</div>
|
||
</div>
|
||
<a href="https://phoenixcoded.gitbook.io/saasable-tailwind" target="_blank" class="btn btn-primary btn-lg">
|
||
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
|
||
<i class="ti ti-help text-base leading-none"></i>
|
||
Documentation
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ Integration 2 ] end -->
|
||
<!-- [ other ] start -->
|
||
<section class="common-section">
|
||
<div class="container">
|
||
<div class="flex flex-col gap-6 sm:gap-8">
|
||
<div class="animate-y delay-reset items-center text-center">
|
||
<h2>SaasAble Blocks</h2>
|
||
</div>
|
||
<div class="grid grid-cols-12 gap-3">
|
||
<div class="col-span-6 md:col-span-4">
|
||
<a href="block/hero.html"
|
||
class="animate-y card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
|
||
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
|
||
@@include('images/block-bg.html',{'substyle': 'class="absolute z-10"'})
|
||
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
|
||
<div class="pb-4 lg:pb-2">
|
||
<img src="assets/images/presentation/hero-light.svg" class="block w-full dark:hidden"
|
||
alt="images" />
|
||
<img src="assets/images/presentation/hero-dark.svg" class="hidden w-full dark:block" alt="images" />
|
||
</div>
|
||
<div class="text-primary-500 pt-[7px] text-center">
|
||
@@include('images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
|
||
</div>
|
||
<div class="text-center mt-6">
|
||
<h4 class="text-primary-500 mb-1">Hero</h4>
|
||
<p class="text-theme-text-secondary body-2">8 Different Variants</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 md:col-span-4">
|
||
<a href="block/cta.html"
|
||
class="animate-y card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
|
||
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
|
||
@@include('images/block-bg.html',{'substyle': 'class="absolute z-10"'})
|
||
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
|
||
<div class="pb-4 lg:pb-2">
|
||
<img src="assets/images/presentation/cta-light.svg" class="block w-full dark:hidden" alt="images" />
|
||
<img src="assets/images/presentation/cta-dark.svg" class="hidden w-full dark:block" alt="images" />
|
||
</div>
|
||
<div class="text-primary-500 pt-[7px] text-center">
|
||
@@include('images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
|
||
</div>
|
||
<div class="text-center mt-6">
|
||
<h4 class="text-primary-500 mb-1">Call-To-Action</h4>
|
||
<p class="text-theme-text-secondary body-2">10 Different Variants</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 md:col-span-4">
|
||
<a href="block/feature.html"
|
||
class="animate-y card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
|
||
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
|
||
@@include('images/block-bg.html',{'substyle': 'class="absolute z-10"'})
|
||
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
|
||
<div class="pb-4 lg:pb-2">
|
||
<img src="assets/images/presentation/feature-light.svg" class="block w-full dark:hidden"
|
||
alt="images" />
|
||
<img src="assets/images/presentation/feature-dark.svg" class="hidden w-full dark:block"
|
||
alt="images" />
|
||
</div>
|
||
<div class="text-primary-500 pt-[7px] text-center">
|
||
@@include('images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
|
||
</div>
|
||
<div class="text-center mt-6">
|
||
<h4 class="text-primary-500 mb-1">Feature</h4>
|
||
<p class="text-theme-text-secondary body-2">19 Different Variants</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 md:col-span-4">
|
||
<a href="block/metrics.html"
|
||
class="animate-y card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
|
||
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
|
||
@@include('images/block-bg.html',{'substyle': 'class="absolute z-10"'})
|
||
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
|
||
<div class="pb-4 lg:pb-2">
|
||
<img src="assets/images/presentation/metrics-light.svg" class="block w-full dark:hidden"
|
||
alt="images" />
|
||
<img src="assets/images/presentation/metrics-dark.svg" class="hidden w-full dark:block"
|
||
alt="images" />
|
||
</div>
|
||
<div class="text-primary-500 pt-[7px] text-center">
|
||
@@include('images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
|
||
</div>
|
||
<div class="text-center mt-6">
|
||
<h4 class="text-primary-500 mb-1">Metrics</h4>
|
||
<p class="text-theme-text-secondary body-2">4 Different Variants</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 md:col-span-4">
|
||
<a href="block/process.html" class="animate-y card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
|
||
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
|
||
@@include('images/block-bg.html',{'substyle': 'class="absolute z-10"'})
|
||
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
|
||
<div class="pb-4 lg:pb-2">
|
||
<img src="assets/images/presentation/process-light.svg" class="block w-full dark:hidden"
|
||
alt="images" />
|
||
<img src="assets/images/presentation/process-dark.svg" class="hidden w-full dark:block"
|
||
alt="images" />
|
||
</div>
|
||
<div class="text-primary-500 pt-[7px] text-center">
|
||
@@include('images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
|
||
</div>
|
||
<div class="text-center mt-6">
|
||
<h4 class="text-primary-500 mb-1">Process</h4>
|
||
<p class="text-theme-text-secondary body-2">4 Different Variants</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="col-span-6 md:col-span-4">
|
||
<a href="block/integration.html"
|
||
class="animate-y card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
|
||
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
|
||
@@include('images/block-bg.html',{'substyle': 'class="absolute z-10"'})
|
||
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
|
||
<div class="pb-4 lg:pb-2">
|
||
<img src="assets/images/presentation/integration-light.svg" class="block w-full dark:hidden"
|
||
alt="images" />
|
||
<img src="assets/images/presentation/integration-dark.svg" class="hidden w-full dark:block"
|
||
alt="images" />
|
||
</div>
|
||
<div class="text-primary-500 pt-[7px] text-center">
|
||
@@include('images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
|
||
</div>
|
||
<div class="text-center mt-6">
|
||
<h4 class="text-primary-500 mb-1">Integration</h4>
|
||
<p class="text-theme-text-secondary body-2">6 Different Variants</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col items-center text-center gap-4">
|
||
<h6 class="animate-y w-full sm:w-4/5 lg:w-[65%] text-theme-text-secondary">Explore a wide range of ready-made
|
||
blocks—from Hero to CTA, Features, and more to speed up your design process.</h6>
|
||
<div class="animate-y">
|
||
<a href="block/block.html" class="btn btn-outline-primary">Explore all Blocks</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ other ] end -->
|
||
<!-- [ Call To Action ] start -->
|
||
<section class="common-section">
|
||
<div class="container">
|
||
<div
|
||
class="animate-y delay-reset p-6 sm:p-8 md:p-10 rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden flex flex-col gap-6 h-full">
|
||
<div class="grid grid-cols-12 gap-y-10 sm:gap-0 md:gap-6">
|
||
<div class="col-span-12 sm:col-span-9 lg:col-span-8 self-end">
|
||
<div class="flex flex-col gap-10">
|
||
<div class="flex flex-col gap-2">
|
||
<div class="flex flex-col gap-1">
|
||
<div class="flex -space-x-[14px] *:w-[42px] *:h-[42px] *:rounded-full *:border *:border-theme-bg-paper">
|
||
<img src="assets/images/user/avatar1.png" alt="img" class="z-40">
|
||
<img src="assets/images/user/avatar2.png" alt="img" class="z-30">
|
||
<img src="assets/images/user/avatar3.png" alt="img" class="z-20">
|
||
<img src="assets/images/user/avatar4.png" alt="img" class="z-10">
|
||
<img src="assets/images/user/avatar5.png" alt="img" class="z-0">
|
||
</div>
|
||
<h6 class="subtitle2">250+ Author Reviews (4.65 out of 5)</h6>
|
||
</div>
|
||
<div class="text-primary-500">
|
||
@@include('images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto"'})
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col gap-4 sm:gap-10">
|
||
<h2 class="text-theme-text-primary">Why Trust Phoenixcoded for Your Needs?</h2>
|
||
<div class="flex gap-2 flex-col sm:flex-row sm:gap-x-6 flex-wrap">
|
||
<div class="flex flex-row items-center gap-2 text-theme-text-secondary">
|
||
<i class="ti ti-rosette-discount-check text-2xl leading-none"></i>
|
||
<p class="body2">10+ Years Expertise</p>
|
||
</div>
|
||
<div class="flex flex-row items-center gap-2 text-theme-text-secondary">
|
||
<i class="ti ti-rosette-discount-check text-2xl leading-none"></i>
|
||
<p class="body2">10k+ Satisfied Customers</p>
|
||
</div>
|
||
<div class="flex flex-row items-center gap-2 text-theme-text-secondary">
|
||
<i class="ti ti-rosette-discount-check text-2xl leading-none"></i>
|
||
<p class="body2">100% Moneyback Guarantee</p>
|
||
</div>
|
||
<div class="flex flex-row items-center gap-2 text-theme-text-secondary">
|
||
<i class="ti ti-rosette-discount-check text-2xl leading-none"></i>
|
||
<p class="body2">Timely Support, Guaranteed</p>
|
||
</div>
|
||
<div class="flex flex-row items-center gap-2 text-theme-text-secondary">
|
||
<i class="ti ti-rosette-discount-check text-2xl leading-none"></i>
|
||
<p class="body2">Regular Updates Provided</p>
|
||
</div>
|
||
<div class="flex flex-row items-center gap-2 text-theme-text-secondary">
|
||
<i class="ti ti-rosette-discount-check text-2xl leading-none"></i>
|
||
<p class="body2">Proven Industry Leader</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-12 sm:col-span-3 lg:col-span-4 self-end relative lg:pl-6 lg:pt-6">
|
||
<div class="max-sm:relative max-sm:inline-block">
|
||
<div class="absolute -top-9 sm:-top-[98px] lg:-top-[68px] ltr:-right-[70px] ltr:sm:right-10 ltr:lg:right-[100px] rtl:-left-[70px] rtl:sm:left-10 rtl:lg:left-[100px] ltr:rotate-45 ltr:sm:rotate-[320deg] ltr:lg:rotate-[0deg] ltr:lg:transform-none rtl:-rotate-45 rtl:-scale-x-100 rtl:sm:-rotate-[320deg] rtl:lg:rotate-[0deg]">
|
||
@@include('images/arrow.html', {'substyle': 'class="w-[60px] h-[76px] sm:w-[76px] sm:h-[81px] text-primary-500"'})
|
||
</div>
|
||
<h6 class="subtitle1 text-primary-500 w-[94px] absolute top-[6px] sm:-top-40 lg:-top-[82px] ltr:-right-40 ltr:sm:right-0 rtl:-left-40 rtl:sm:left-0">Learn More</h6>
|
||
<div class="ltr:sm:text-right rtl:sm:text-left max-sm:inline-block">
|
||
<a href="https://blog.saasable.io/a-decade-of-expertise-the-phoenixcoded-story-and-why-you-should-trust-us" target="_blank" class="btn btn-primary btn-lg lg:min-w-[263px]">Read Our Story</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ Call To Action ] end -->
|
||
<!-- [ Testimonial ] start -->
|
||
<section class="common-section">
|
||
<div class="container">
|
||
<div class="flex flex-col gap-6 sm:gap-8">
|
||
<div class="animate-y delay-reset flex flex-col items-center text-center gap-2 sm:gap-3">
|
||
<h2>See What Our Customers Are Saying</h2>
|
||
<h6 class="text-theme-text-secondary max-w-[550px] lg:max-w-[700px]">Trusted by thousands of users worldwide,
|
||
hear how Phoenixcoded helps bring their projects to life.</h6>
|
||
</div>
|
||
<div class="animate-y columns-2 sm:columns-3 gap-3 *:mb-3 relative">
|
||
<div class="absolute inset-0 !m-0 z-10 bg-[radial-gradient(146.46%_68.12%_at_50%_29.86%,_transparent_0%,_var(--theme-bg-default)_100%)]"></div>
|
||
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
|
||
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
|
||
<div class="flex flex-row gap-[6px] text-base leading-none">
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
</div>
|
||
<div class="flex gap-2 flex-col justify-center">
|
||
<h6 class="subtitle1">Customer Support</h6>
|
||
<p class="body1 text-theme-text-secondary">Very organized code base. Love the ability reuse components for many different use cases. Customer service is very active and willing to take suggestions for new features!</p>
|
||
</div>
|
||
<div class="flex gap-1 flex-col justify-center">
|
||
<h6 class="subtitle1">Matt S.</h6>
|
||
<div class="body2 text-theme-text-secondary"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
|
||
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
|
||
<div class="flex flex-row gap-[6px] text-base leading-none">
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
</div>
|
||
<div class="flex gap-2 flex-col justify-center">
|
||
<h6 class="subtitle1">Code Quality</h6>
|
||
<p class="body1 text-theme-text-secondary">This template is awesome! It's super easy to get started, uses Material UI perfectly, and the folder structure is a breeze to navigate. Plus, it's really affordable. The coding style is top-notch too, making everything clear and easy to grasp. Surprisingly, I haven't even needed the documentation to set it up. Big shoutout to the team behind this gem. Can't wait to see what else they come up with! Definitely recommend giving it a try!</p>
|
||
</div>
|
||
<div class="flex gap-1 flex-col justify-center">
|
||
<h6 class="subtitle1">Piyu.</h6>
|
||
<div class="body2 text-theme-text-secondary"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
|
||
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
|
||
<div class="flex flex-row gap-[6px] text-base leading-none">
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
</div>
|
||
<div class="flex gap-2 flex-col justify-center">
|
||
<h6 class="subtitle1">Feature Availability</h6>
|
||
<p class="body1 text-theme-text-secondary">For developers like me, this is the total package!</p>
|
||
</div>
|
||
<div class="flex gap-1 flex-col justify-center">
|
||
<h6 class="subtitle1">Suma.</h6>
|
||
<div class="body2 text-theme-text-secondary">Developer</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
|
||
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
|
||
<div class="flex flex-row gap-[6px] text-base leading-none">
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
</div>
|
||
<div class="flex gap-2 flex-col justify-center">
|
||
<h6 class="subtitle1">Customizability</h6>
|
||
<p class="body1 text-theme-text-secondary">We integrated SaaSable into our project and are extremely pleased with the results. The code quality is excellent, and the architecture is thoughtfully designed. The components are not only visually appealing but also flexible and easily customizable, allowing us to save significant development time. This enabled us to focus fully on essential aspects of our project. Moreover, the support is exceptional-always quick, helpful, and responsive. Highly recommended for any professional project!</p>
|
||
</div>
|
||
<div class="flex gap-1 flex-col justify-center">
|
||
<h6 class="subtitle1">Dmitri H.</h6>
|
||
<div class="body2 text-theme-text-secondary"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
|
||
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
|
||
<div class="flex flex-row gap-[6px] text-base leading-none">
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
</div>
|
||
<div class="flex gap-2 flex-col justify-center">
|
||
<h6 class="subtitle1">Customer Support!</h6>
|
||
<p class="body1 text-theme-text-secondary">The support by Phoenix team is timely and professional. Their dedication to improve their product is amazing. The code is standard and has high quality. The variety of components is pretty good but there is room for adding other customized components and features.</p>
|
||
</div>
|
||
<div class="flex gap-1 flex-col justify-center">
|
||
<h6 class="subtitle1">Indi.</h6>
|
||
<div class="body2 text-theme-text-secondary"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
|
||
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
|
||
<div class="flex flex-row gap-[6px] text-base leading-none">
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
</div>
|
||
<div class="flex gap-2 flex-col justify-center">
|
||
<h6 class="subtitle1">Code Quality</h6>
|
||
<p class="body1 text-theme-text-secondary">Works as described</p>
|
||
</div>
|
||
<div class="flex gap-1 flex-col justify-center">
|
||
<h6 class="subtitle1">Pat4.</h6>
|
||
<div class="body2 text-theme-text-secondary"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
|
||
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
|
||
<div class="flex flex-row gap-[6px] text-base leading-none">
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
</div>
|
||
<div class="flex gap-2 flex-col justify-center">
|
||
<h6 class="subtitle1">Design Quality</h6>
|
||
<p class="body1 text-theme-text-secondary">I am thoroughly impressed with the customer support, code quality, modularity, and quality of the web components. This has been a tremendous support, saving us months of time designing and architecting the project, and significantly enhancing our development efficiency. Truly a valuable resource for anyone looking to build robust solutions.</p>
|
||
</div>
|
||
<div class="flex gap-1 flex-col justify-center">
|
||
<h6 class="subtitle1">Puneet P.</h6>
|
||
<div class="body2 text-theme-text-secondary"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
|
||
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
|
||
<div class="flex flex-row gap-[6px] text-base leading-none">
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
</div>
|
||
<div class="flex gap-2 flex-col justify-center">
|
||
<h6 class="subtitle1">Code Quality</h6>
|
||
<p class="body1 text-theme-text-secondary">Beautiful product, very well structured, very clear, very easy to understand and to use. Thank you so much!.</p>
|
||
</div>
|
||
<div class="flex gap-1 flex-col justify-center">
|
||
<h6 class="subtitle1">Thoma.</h6>
|
||
<div class="body2 text-theme-text-secondary"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
|
||
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
|
||
<div class="flex flex-row gap-[6px] text-base leading-none">
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
</div>
|
||
<div class="flex gap-2 flex-col justify-center">
|
||
<h6 class="subtitle1">Design is Astonishing</h6>
|
||
<p class="body1 text-theme-text-secondary">Code quality is amazing. Design is astonishing. very easy to customize and any developer can use it with ease.</p>
|
||
</div>
|
||
<div class="flex gap-1 flex-col justify-center">
|
||
<h6 class="subtitle1">Shah.</h6>
|
||
<div class="body2 text-theme-text-secondary"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
|
||
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
|
||
<div class="flex flex-row gap-[6px] text-base leading-none">
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
<i class="ti ti-star-filled text-primary-500"></i>
|
||
</div>
|
||
<div class="flex gap-2 flex-col justify-center">
|
||
<h6 class="subtitle1">Customer Quality</h6>
|
||
<p class="body1 text-theme-text-secondary">The author is very nice and solved my problem immediately</p>
|
||
</div>
|
||
<div class="flex gap-1 flex-col justify-center">
|
||
<h6 class="subtitle1">Richi.</h6>
|
||
<div class="body2 text-theme-text-secondary"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ Testimonial ] end -->
|
||
<!-- [ Clientele ] start -->
|
||
<section class="common-section overflow-hidden">
|
||
<div class="container">
|
||
<div class="flex flex-col items-center justify-center gap-5">
|
||
<h6 class="animate-y delay-reset subtitle2 text-theme-text-secondary">Recognized and recommended by top industry experts</h6>
|
||
<div class="animate-y relative overflow-hidden w-full" dir="ltr">
|
||
<span class="absolute h-full w-10 sm:w-[60px] top-0 left-0 z-10 bg-[linear-gradient(90deg,_var(--theme-bg-default)_-8.54%,_transparent_100%)]"></span>
|
||
<div class="clientele-slider3">
|
||
<div class="item">
|
||
<div class="group px-0.5 sm:px-1 md:px-1.5 bg-neutral-100 w-full h-10 sm:h-12 md:h-[60px] rounded-full flex items-center justify-center">
|
||
<div class="opacity-40 group-hover:opacity-100 transition-all duration-500">
|
||
@@include('images/clientele/Mui.html', {
|
||
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[16px] sm:h-[18px] md:h-[26px]"'
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div
|
||
class="group px-0.5 sm:px-1 md:px-1.5 bg-neutral-100 w-full h-10 sm:h-12 md:h-[60px] rounded-full flex items-center justify-center">
|
||
<div class="opacity-40 group-hover:opacity-100 transition-all duration-500">
|
||
@@include('images/clientele/Dribbble.html', {
|
||
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[16px] sm:h-[18px] md:h-[26px]"'
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div
|
||
class="group px-0.5 sm:px-1 md:px-1.5 bg-neutral-100 w-full h-10 sm:h-12 md:h-[60px] rounded-full flex items-center justify-center">
|
||
<div class="opacity-40 group-hover:opacity-100 transition-all duration-500">
|
||
@@include('images/clientele/Devto.html', {
|
||
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[16px] sm:h-[18px] md:h-[26px]"'
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div
|
||
class="group px-0.5 sm:px-1 md:px-1.5 bg-neutral-100 w-full h-10 sm:h-12 md:h-[60px] rounded-full flex items-center justify-center">
|
||
<div class="opacity-40 group-hover:opacity-100 transition-all duration-500">
|
||
@@include('images/clientele/Envato.html', {
|
||
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[16px] sm:h-[18px] md:h-[26px]"'
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div
|
||
class="group px-0.5 sm:px-1 md:px-1.5 bg-neutral-100 w-full h-10 sm:h-12 md:h-[60px] rounded-full flex items-center justify-center">
|
||
<div class="opacity-40 group-hover:opacity-100 transition-all duration-500">
|
||
@@include('images/clientele/Reddit.html', {
|
||
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[16px] sm:h-[18px] md:h-[26px]"'
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div
|
||
class="group px-0.5 sm:px-1 md:px-1.5 bg-neutral-100 w-full h-10 sm:h-12 md:h-[60px] rounded-full flex items-center justify-center">
|
||
<div class="opacity-40 group-hover:opacity-100 transition-all duration-500">
|
||
@@include('images/clientele/Mui.html', {
|
||
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[16px] sm:h-[18px] md:h-[26px]"'
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div
|
||
class="group px-0.5 sm:px-1 md:px-1.5 bg-neutral-100 w-full h-10 sm:h-12 md:h-[60px] rounded-full flex items-center justify-center">
|
||
<div class="opacity-40 group-hover:opacity-100 transition-all duration-500">
|
||
@@include('images/clientele/Dribbble.html', {
|
||
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[16px] sm:h-[18px] md:h-[26px]"'
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div
|
||
class="group px-0.5 sm:px-1 md:px-1.5 bg-neutral-100 w-full h-10 sm:h-12 md:h-[60px] rounded-full flex items-center justify-center">
|
||
<div class="opacity-40 group-hover:opacity-100 transition-all duration-500">
|
||
@@include('images/clientele/Devto.html', {
|
||
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[16px] sm:h-[18px] md:h-[26px]"'
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div
|
||
class="group px-0.5 sm:px-1 md:px-1.5 bg-neutral-100 w-full h-10 sm:h-12 md:h-[60px] rounded-full flex items-center justify-center">
|
||
<div class="opacity-40 group-hover:opacity-100 transition-all duration-500">
|
||
@@include('images/clientele/Envato.html', {
|
||
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[16px] sm:h-[18px] md:h-[26px]"'
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div
|
||
class="group px-0.5 sm:px-1 md:px-1.5 bg-neutral-100 w-full h-10 sm:h-12 md:h-[60px] rounded-full flex items-center justify-center">
|
||
<div class="opacity-40 group-hover:opacity-100 transition-all duration-500">
|
||
@@include('images/clientele/Reddit.html', {
|
||
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[16px] sm:h-[18px] md:h-[26px]"'
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
class="absolute h-full w-10 sm:w-[60px] top-0 right-0 z-10 rotate-180 bg-[linear-gradient(90deg,_var(--theme-bg-default)_-8.54%,_transparent_100%)]"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ Clientele ] end -->
|
||
<!-- [ Pricing ] start -->
|
||
<section class="common-section">
|
||
<div class="container">
|
||
<div class="flex flex-col gap-6 sm:gap-8">
|
||
<div class="animate-y delay-reset flex flex-col text-center items-center gap-2 sm:gap-3">
|
||
<h2>The Affordable Unfair Advantage</h2>
|
||
<h6 class="text-theme-text-secondary">Choose the plan that aligns with your product requirements.</h6>
|
||
</div>
|
||
<div class="tf">
|
||
<div class="flex flex-col justify-center sm:flex-row gap-4 h-full">
|
||
<div class="basis-full sm:basis-5/12">
|
||
<div class="animate-y h-full bg-neutral-100 rounded-2xl sm:rounded-3xl relative border border-neutral-100">
|
||
<div class="pt-8 sm:pt-10 lg:pt-16 px-4 lg:px-10 pb-4 sm:pb-6 lg:pb-10 h-full">
|
||
<div class="flex flex-col gap-10 h-full">
|
||
<div class="flex flex-col gap-4 lg:gap-6">
|
||
<div class="flex flex-col gap-2 lg:gap-3 text-center">
|
||
<h6 class="subtitle1">Regular</h6>
|
||
<div class="flex flex-row items-end justify-center">
|
||
<div class="h1">$9</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-10 justify-between h-full">
|
||
<div class="flex flex-col gap-10">
|
||
<div class="relative">
|
||
<div aria-hidden="true" class="absolute flex inset-0 items-center">
|
||
<div class="w-full border-t border-theme-divider"></div>
|
||
</div>
|
||
<div class="relative flex justify-center">
|
||
<span class="px-4 bg-neutral-100">
|
||
<span
|
||
class="bg-neutral-200 px-3 py-1 rounded-full caption text-theme-text-secondary">Includes</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<ul class="flex flex-col gap-1.5 lg:gap-2 leading-none h-full">
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">One end product</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">UI kit & Redy to use pages</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Lifetime free updates</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">6 months of support</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Lifetime license</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">Use in an end product that's sold</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">Figma design system</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="flex flex-col gap-1.5">
|
||
<p class="body2 text-theme-text-secondary text-center mb-2.5">Learn more about the
|
||
standard <a href="https://themeforest.net/licenses/standard" class="text-primary-500 underline" target="_blank">license</a></p>
|
||
<div class="flex flex-col gap-1.5">
|
||
<a href="@@buy_now" target="_blank" class="buy_now_link btn btn-outline-primary sm:mb-6 lg:mb-7">Get Started</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="basis-full sm:basis-5/12">
|
||
<div class="animate-y h-full bg-neutral-100 rounded-2xl sm:rounded-3xl relative border border-neutral-100">
|
||
<div class="pt-8 sm:pt-10 lg:pt-16 px-4 lg:px-10 pb-4 sm:pb-6 lg:pb-10 h-full">
|
||
<div class="flex flex-col gap-10 h-full">
|
||
<div class="flex flex-col gap-4 lg:gap-6">
|
||
<div class="flex flex-col gap-2 lg:gap-3 text-center">
|
||
<h6 class="subtitle1">Extended</h6>
|
||
<div class="flex flex-row items-end justify-center">
|
||
<div class="h1">$299</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-10 justify-between h-full">
|
||
<div class="flex flex-col gap-10">
|
||
<div class="relative">
|
||
<div aria-hidden="true" class="absolute flex inset-0 items-center">
|
||
<div class="w-full border-t border-theme-divider"></div>
|
||
</div>
|
||
<div class="relative flex justify-center">
|
||
<span class="px-4 bg-neutral-100">
|
||
<span
|
||
class="bg-neutral-200 px-3 py-1 rounded-full caption text-theme-text-secondary">Includes</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<ul class="flex flex-col gap-1.5 lg:gap-2 leading-none h-full">
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">One end product</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">UI kit & Redy to use pages</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Lifetime free updates</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">6 months of support</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Lifetime license</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Use in an end product that's sold</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-start gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Figma design system</p>
|
||
<p class="body2 text-theme-text-secondary">Send us an <a href="mailto:phoenixcodded@gmail.com" class="text-primary-500 underline">Email</a> with your license receipt, and we will send you the Figma file.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="flex flex-col gap-1.5">
|
||
<p class="body2 text-theme-text-secondary text-center mb-2.5">Learn more about the
|
||
Extended <a href="https://themeforest.net/licenses/standard" class="text-primary-500 underline" target="_blank">license</a></p>
|
||
<div class="flex flex-col gap-1.5">
|
||
<a href="@@buy_now" taget="_blank" class="buy_now_link btn btn-outline-primary">Get Started</a>
|
||
<h6 class="subtitle1 text-theme-text-secondary text-center">
|
||
or
|
||
<a class="subtitle1 text-primary-500 hover:underline ltr:ml-1 rtl:mr-1" href="https://phoenixcoded.authordesk.app/" target="_blank">Contact
|
||
Us</a>
|
||
</h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ct">
|
||
<div class="flex flex-col justify-center sm:flex-row gap-4 h-full">
|
||
<div class="basis-full sm:basis-6/12 lg:basis-3/12">
|
||
<div class="animate-y h-full bg-neutral-100 rounded-2xl sm:rounded-3xl relative border border-neutral-100">
|
||
<div class="pt-8 sm:pt-10 lg:pt-16 px-4 lg:px-6 pb-4 sm:pb-6 lg:pb-10 h-full">
|
||
<div class="flex flex-col gap-10 h-full">
|
||
<div class="flex flex-col gap-4 lg:gap-6">
|
||
<div class="flex flex-col gap-2 lg:gap-3 text-center">
|
||
<h6 class="subtitle1">Single Use</h6>
|
||
<div class="flex flex-row items-end justify-center">
|
||
<div class="h1">$49</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-10 justify-between h-full">
|
||
<div class="flex flex-col gap-10">
|
||
<div class="relative">
|
||
<div aria-hidden="true" class="absolute flex inset-0 items-center">
|
||
<div class="w-full border-t border-theme-divider"></div>
|
||
</div>
|
||
<div class="relative flex justify-center">
|
||
<span class="px-4 bg-neutral-100">
|
||
<span class="bg-neutral-200 px-3 py-1 rounded-full caption text-theme-text-secondary">Includes</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<ul class="flex flex-col gap-1.5 lg:gap-2 leading-none h-full">
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">One end product</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">UI kit & Redy to use pages</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">1 year free updates</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">12 months of support</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Lifetime license</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">Use for SaaS end product</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">Figma design system</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="flex flex-col gap-1.5">
|
||
<p class="body2 text-theme-text-secondary text-center mb-2.5">Learn more about the
|
||
<a href="https://themeforest.net/licenses/standard" class="tf text-primary-500 underline" target="_blank">license</a>
|
||
<a href="https://codedthemes.com/license/" class="ct text-primary-500 underline" target="_blank">license</a>
|
||
</p>
|
||
<div class="flex flex-col gap-1.5">
|
||
<a href="@@buy_now" taget="_blank" class="buy_now_link btn btn-outline-primary">Buy Now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="basis-full sm:basis-6/12 lg:basis-3/12">
|
||
<div class="animate-y h-full bg-neutral-100 rounded-2xl sm:rounded-3xl relative border border-primary-500">
|
||
<div class="absolute top-0 left-2/4 -translate-y-2/4 -translate-x-2/4">
|
||
<span class="bg-primary-100 px-3 py-1 rounded-full border border-primary-500 caption text-theme-text-secondary">POPULAR</span>
|
||
</div>
|
||
<div class="pt-8 sm:pt-10 lg:pt-16 px-4 lg:px-6 pb-4 sm:pb-6 lg:pb-10 h-full">
|
||
<div class="flex flex-col gap-10 h-full">
|
||
<div class="flex flex-col gap-4 lg:gap-6">
|
||
<div class="flex flex-col gap-2 lg:gap-3 text-center">
|
||
<h6 class="subtitle1">Multi Use</h6>
|
||
<div class="flex flex-row items-end justify-center">
|
||
<div class="h1">$69</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-10 justify-between h-full">
|
||
<div class="flex flex-col gap-10">
|
||
<div class="relative">
|
||
<div aria-hidden="true" class="absolute flex inset-0 items-center">
|
||
<div class="w-full border-t border-theme-divider"></div>
|
||
</div>
|
||
<div class="relative flex justify-center">
|
||
<span class="px-4 bg-neutral-100">
|
||
<span
|
||
class="bg-neutral-200 px-3 py-1 rounded-full caption text-theme-text-secondary">Includes</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<ul class="flex flex-col gap-1.5 lg:gap-2 leading-none h-full">
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Multiple end product</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">UI kit & Redy to use pages</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">1 year free updates</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">12 months of support</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Lifetime license</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">Use for SaaS end product</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-start gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Figma design system</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="flex flex-col gap-1.5">
|
||
<p class="body2 text-theme-text-secondary text-center mb-2.5">Learn more about the
|
||
<a href="https://themeforest.net/licenses/standard" class="tf text-primary-500 underline" target="_blank">license</a>
|
||
<a href="https://codedthemes.com/license/" class="ct text-primary-500 underline" target="_blank">license</a>
|
||
</p>
|
||
<div class="flex flex-col gap-1.5">
|
||
<a href="@@buy_now" taget="_blank" class="buy_now_link btn btn-outline-primary">Buy Now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="basis-full sm:basis-6/12 lg:basis-3/12">
|
||
<div class="animate-y h-full bg-neutral-100 rounded-2xl sm:rounded-3xl relative border border-neutral-100">
|
||
<div class="pt-8 sm:pt-10 lg:pt-16 px-4 lg:px-6 pb-4 sm:pb-6 lg:pb-10 h-full">
|
||
<div class="flex flex-col gap-10 h-full">
|
||
<div class="flex flex-col gap-4 lg:gap-6">
|
||
<div class="flex flex-col gap-2 lg:gap-3 text-center">
|
||
<h6 class="subtitle1">Extended Use</h6>
|
||
<div class="flex flex-row items-end justify-center">
|
||
<div class="h1">$299</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-10 justify-between h-full">
|
||
<div class="flex flex-col gap-10">
|
||
<div class="relative">
|
||
<div aria-hidden="true" class="absolute flex inset-0 items-center">
|
||
<div class="w-full border-t border-theme-divider"></div>
|
||
</div>
|
||
<div class="relative flex justify-center">
|
||
<span class="px-4 bg-neutral-100">
|
||
<span
|
||
class="bg-neutral-200 px-3 py-1 rounded-full caption text-theme-text-secondary">Includes</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<ul class="flex flex-col gap-1.5 lg:gap-2 leading-none h-full">
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">One end product</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">UI kit & Redy to use pages</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">1 year free updates</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">12 months of support</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Lifetime license</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Use for SaaS end product</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-start gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Figma design system</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="flex flex-col gap-1.5">
|
||
<p class="body2 text-theme-text-secondary text-center mb-2.5">Learn more about the
|
||
<a href="https://themeforest.net/licenses/standard" class="tf text-primary-500 underline" target="_blank">license</a>
|
||
<a href="https://codedthemes.com/license/" class="ct text-primary-500 underline" target="_blank">license</a>
|
||
</p>
|
||
<div class="flex flex-col gap-1.5">
|
||
<a href="@@buy_now" taget="_blank" class="buy_now_link btn btn-outline-primary">Buy Now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="basis-full sm:basis-6/12 lg:basis-3/12">
|
||
<div class="animate-y h-full bg-neutral-100 rounded-2xl sm:rounded-3xl relative border border-neutral-100">
|
||
<div class="pt-8 sm:pt-10 lg:pt-16 px-4 lg:px-6 pb-4 sm:pb-6 lg:pb-10 h-full">
|
||
<div class="flex flex-col gap-10 h-full">
|
||
<div class="flex flex-col gap-4 lg:gap-6">
|
||
<div class="flex flex-col gap-2 lg:gap-3 text-center">
|
||
<h6 class="subtitle1">Multi Extended Use</h6>
|
||
<div class="flex flex-row items-end justify-center">
|
||
<div class="h1">$399</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-10 justify-between h-full">
|
||
<div class="flex flex-col gap-10">
|
||
<div class="relative">
|
||
<div aria-hidden="true" class="absolute flex inset-0 items-center">
|
||
<div class="w-full border-t border-theme-divider"></div>
|
||
</div>
|
||
<div class="relative flex justify-center">
|
||
<span class="px-4 bg-neutral-100">
|
||
<span
|
||
class="bg-neutral-200 px-3 py-1 rounded-full caption text-theme-text-secondary">Includes</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<ul class="flex flex-col gap-1.5 lg:gap-2 leading-none h-full">
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Multiple end product</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">UI kit & Redy to use pages</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">1 year free updates</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">12 months of support</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Lifetime license</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Use for SaaS end product</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-start gap-2.5">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
|
||
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="subtitle1 text-neutral-900">Figma design system</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="flex flex-col gap-1.5">
|
||
<p class="body2 text-theme-text-secondary text-center mb-2.5">Learn more about the
|
||
<a href="https://themeforest.net/licenses/standard" class="tf text-primary-500 underline" target="_blank">license</a>
|
||
<a href="https://codedthemes.com/license/" class="ct text-primary-500 underline" target="_blank">license</a>
|
||
</p>
|
||
<div class="flex flex-col gap-1.5">
|
||
<a href="@@buy_now" taget="_blank" class="buy_now_link btn btn-outline-primary">Buy Now</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ Pricing ] end -->
|
||
<!-- [ Call To Action ] start -->
|
||
<section class="common-section">
|
||
<div class="container">
|
||
<div class="grid grid-cols-12 gap-3">
|
||
<div class="col-span-12 sm:col-span-8 lg:col-span-9">
|
||
<div
|
||
class="animate-y delay-reset rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden relative">
|
||
<div class="flex flex-col items-start gap-11 sm:gap-20 p-6 sm:p-8 lg:p-16 relative z-10">
|
||
<div class="flex flex-col gap-10">
|
||
<div class="flex flex-row items-center gap-2">
|
||
<span class="border border-neutral-600 px-4 py-1.5 rounded-full leading-none">
|
||
<span class="caption text-theme-text-secondary">Join the Community</span>
|
||
</span>
|
||
<span class="border-t-2 border-t-theme-divider w-[63px]"></span>
|
||
</div>
|
||
<div class="flex flex-col gap-2 sm:gap-3">
|
||
<h2>Connect with us on Discord</h2>
|
||
<p class="h6 max-w-[478px] text-theme-text-secondary">Get support, share insights, and grow together.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col gap-1.5 max-lg:w-full lg:w-[60%]">
|
||
<div class="relative w-full">
|
||
<a href="https://discordapp.com/channels/721220829639082034/1357692200250511425" target="_blank" class="btn btn-primary py-[15px] px-8 min-w-[110px] md:min-w-[120px] leading-[1.2]">
|
||
Join Discord Community
|
||
</a>
|
||
</div>
|
||
<p class="body2 text-theme-text-secondary">Have questions? Our community is here to help. Learn more
|
||
about <a href="https://discordapp.com/channels/721220829639082034/1357692200250511425" target="_blank" class="caption2 text-primary-500 hover:underline">our community</a></p>
|
||
</div>
|
||
</div>
|
||
<div class="ltr:-scale-x-100 hidden lg:block absolute ltr:right-[-160px] rtl:left-[-160px] bottom-[-160px]">
|
||
@@include('images/logo-watermark.html', {
|
||
'substyle': 'class="w-[430px] h-[466px] text-primary-500"'
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-12 sm:col-span-4 lg:col-span-3">
|
||
<div class="animate-y flex flex-row sm:flex-col h-full relative">
|
||
<div class="basis-2/4 sm:basis-full sm:min-h-[50%]">
|
||
<div
|
||
class="h-full rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden relative">
|
||
<div class="flex flex-col items-center gap-2 py-4 sm:py-12 md:py-14 px-4 sm:px-7 text-center">
|
||
<div class="h1">10<span class="h2 text-theme-text-secondary">k+</span></div>
|
||
<p class="body1 text-theme-text-secondary">Trusted by professionals worldwide</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 max-sm:rotate-90 z-10">
|
||
<div class="text-primary-500">
|
||
@@include('images/wave.html', {'substyle': 'class="w-[70px] md:w-[122px] h-auto"'})
|
||
</div>
|
||
</div>
|
||
<div class="basis-2/4 sm:basis-full sm:min-h-[50%]">
|
||
<div
|
||
class="h-full rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden relative">
|
||
<div
|
||
class="flex flex-col items-center justify-center gap-2 py-4 sm:py-12 md:py-14 px-4 sm:px-3 text-center h-full">
|
||
<div class="flex flex-col gap-1">
|
||
<div
|
||
class="flex -space-x-[14px] *:w-[40px] *:h-[40px] sm:*:w-[58px] sm:*:h-[58px] *:rounded-full *:border *:border-theme-bg-paper">
|
||
<img src="assets/images/user/avatar1.png" alt="img" class="z-40">
|
||
<img src="assets/images/user/avatar2.png" alt="img" class="z-30">
|
||
<img src="assets/images/user/avatar3.png" alt="img" class="z-20">
|
||
<img src="assets/images/user/avatar4.png" alt="img" class="z-10">
|
||
<img src="assets/images/user/avatar5.png" alt="img" class="z-0">
|
||
</div>
|
||
<h6 class="subtitle2 text-theme-text-secondary">300k+ Reviews (4.65 out of 5)</h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ Call To Action ] end -->
|
||
<!-- [ Faq ] start -->
|
||
<section class="common-section">
|
||
<div class="container">
|
||
<div class="flex flex-col gap-6 sm:gap-8">
|
||
<div class="group flex flex-col sm:flex-row items-start sm:items-end gap-8 relative justify-between">
|
||
<div class="grow">
|
||
<div class="animate-y delay-reset flex flex-col gap-2 sm:gap-3">
|
||
<h2>Frequently Asked Questions</h2>
|
||
<h6 class="text-theme-text-secondary max-w-[650px]">Answers to common queries about SaasAble.</h6>
|
||
</div>
|
||
</div>
|
||
<div class="animate-y leading-none">
|
||
<div class="tf">
|
||
<a href="https://phoenixcoded.authordesk.app/" target="_blank" class="btn btn-primary btn-lg min-w-[215px]">Get in Touch</a>
|
||
</div>
|
||
<div class="ct">
|
||
<a href="https://codedthemes.support-hub.io/" target="_blank" class="btn btn-primary btn-lg min-w-[215px]">Get in Touch</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col gap-4 group/faq-flt faq-fiter-wrapper flt-general">
|
||
<div class="overflow-hidden relative *:*:*:flex" dir="ltr">
|
||
<div class="animate-y faq-slider1 inline-flex items-center gap-2 sm:gap-3 group filter-button flt-all">
|
||
<div class="item"><button
|
||
class="btn btn-md whitespace-nowrap !text-theme-text-primary border-theme-divider hover:bg-neutral-100 hover:!shadow-none group-[.flt-all]/faq-flt:bg-neutral-100"
|
||
data-filter="all">All</button></div>
|
||
<div class="item"><button
|
||
class="btn btn-md whitespace-nowrap !text-theme-text-primary border-theme-divider hover:bg-neutral-100 hover:!shadow-none group-[.flt-general]/faq-flt:bg-neutral-100 active"
|
||
data-filter="general">General</button></div>
|
||
<div class="item"><button
|
||
class="btn btn-md whitespace-nowrap !text-theme-text-primary border-theme-divider hover:bg-neutral-100 hover:!shadow-none group-[.flt-pricing]/faq-flt:bg-neutral-100"
|
||
data-filter="pricing">Pricing & Licenses</button></div>
|
||
<div class="item"><button
|
||
class="btn btn-md whitespace-nowrap flex-wrap !text-theme-text-primary border-theme-divider hover:bg-neutral-100 hover:!shadow-none group-[.flt-support]/faq-flt:bg-neutral-100"
|
||
data-filter="support">Support & Updates</button></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col gap-3" id="accordionExample">
|
||
<div
|
||
class="animate-y hidden group-[.flt-all]/faq-flt:block group-[.flt-general]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
|
||
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
|
||
data-pc-target="#collapse1">
|
||
<span class="absolute inset-0"></span>
|
||
<div class="grow">
|
||
<h4
|
||
class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
Is SaasAble only for SaaS web apps?</h4>
|
||
</div>
|
||
<div class="leading-none">
|
||
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
<i
|
||
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
|
||
<i
|
||
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div id="collapse1" class="hidden" data-pc-parent="#accordionExample">
|
||
<div class="pt-2 sm:pt-3 md:pt-4">
|
||
<p class="body1 text-theme-text-secondary">While SaasAble is designed with
|
||
SaaS applications in mind, it’s not limited to SaaS products. SaasAble is multipurpose and can
|
||
be used for a variety of websites and applications, whether it’s for an agency, digital
|
||
product, CRM, blog, AI platform, or any other system. SaasAble is versatile and adaptable to
|
||
fit any use case, SaaS or not. It’s built for all types of projects!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="animate-y hidden group-[.flt-all]/faq-flt:block group-[.flt-general]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
|
||
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
|
||
data-pc-target="#collapse2">
|
||
<span class="absolute inset-0"></span>
|
||
<div class="grow">
|
||
<h4
|
||
class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
What makes SaasAble different from other UI Kits?</h4>
|
||
</div>
|
||
<div class="leading-none">
|
||
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
<i
|
||
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
|
||
<i
|
||
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div id="collapse2" class="hidden" data-pc-parent="#accordionExample">
|
||
<div class="pt-2 sm:pt-3 md:pt-4">
|
||
<p class="body1 text-theme-text-secondary">SaasAble offers industry-specific
|
||
templates, a Tailwind UI Kit, Figma UI Kit, and flexible customization options that
|
||
cater to both front-end marketing.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="animate-y hidden group-[.flt-all]/faq-flt:block group-[.flt-general]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
|
||
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
|
||
data-pc-target="#collapse3">
|
||
<span class="absolute inset-0"></span>
|
||
<div class="grow">
|
||
<h4
|
||
class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
Is SaasAble suitable for both developers and designers?</h4>
|
||
</div>
|
||
<div class="leading-none">
|
||
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
<i
|
||
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
|
||
<i
|
||
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div id="collapse3" class="hidden" data-pc-parent="#accordionExample">
|
||
<div class="pt-2 sm:pt-3 md:pt-4">
|
||
<p class="body1 text-theme-text-secondary">Yes, SaasAble is built for both,
|
||
with a Figma UI kit for designers and Html code for developers.</p>
|
||
<div class="pt-4 md:pt-5">
|
||
<ul class="*:py-2 *:last:pb-0 *:first:pt-0 leading-none">
|
||
<li>
|
||
<div class="flex items-center gap-[10px]">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
|
||
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">Figma UI Kit for Designers.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-[10px]">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
|
||
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">
|
||
Tailwind UI Code for Developers.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-[10px]">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
|
||
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">Seamless Collaboration.</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="animate-y hidden group-[.flt-all]/faq-flt:block group-[.flt-general]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
|
||
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
|
||
data-pc-target="#collapse4">
|
||
<span class="absolute inset-0"></span>
|
||
<div class="grow">
|
||
<h4
|
||
class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
What is the difference between the Figma and codebase versions?</h4>
|
||
</div>
|
||
<div class="leading-none">
|
||
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
<i
|
||
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
|
||
<i
|
||
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div id="collapse4" class="hidden" data-pc-parent="#accordionExample">
|
||
<div class="pt-2 sm:pt-3 md:pt-4">
|
||
<p class="body1 text-theme-text-secondary">The Figma version is for design and
|
||
prototyping, while the codebase version provides ready-to-use Tailwind components for
|
||
development.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="animate-y hidden group-[.flt-all]/faq-flt:block group-[.flt-general]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
|
||
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
|
||
data-pc-target="#collapse5">
|
||
<span class="absolute inset-0"></span>
|
||
<div class="grow">
|
||
<h4
|
||
class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
How can I download the template after purchase?</h4>
|
||
</div>
|
||
<div class="leading-none">
|
||
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
<i
|
||
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
|
||
<i
|
||
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div id="collapse5" class="hidden" data-pc-parent="#accordionExample">
|
||
<div class="pt-2 sm:pt-3 md:pt-4">
|
||
<div class="ct">
|
||
<p class="body1 text-theme-text-secondary">
|
||
Make sure you are logged in to <a href="https://codedthemes.com/" target="_blank" class="text-primary-500 underline">CodedThemes</a> and navigate to the Downloads. All your purchased items will appear there, where you can download the product.
|
||
</p>
|
||
</div>
|
||
<div class="tf">
|
||
<p class="body1 text-theme-text-secondary">Make sure you have Log in to <a href="https://themeforest.net/" target="_blank" class="text-primary-500 underline">ThemeForest</a> with your Envato account.</p>
|
||
<p class="body1 text-theme-text-secondary">Navigate to the <a href="https://themeforest.net/downloads" target="_blank" class="text-primary-500 underline">Downloads</a> Page. Your all purchases and items appear in this page.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="animate-y hidden group-[.flt-all]/faq-flt:block group-[.flt-pricing]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
|
||
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
|
||
data-pc-target="#collapse6">
|
||
<span class="absolute inset-0"></span>
|
||
<div class="grow">
|
||
<h4
|
||
class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
What's included in the SaasAble license?</h4>
|
||
</div>
|
||
<div class="leading-none">
|
||
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
<i
|
||
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
|
||
<i
|
||
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div id="collapse6" class="hidden" data-pc-parent="#accordionExample">
|
||
<div class="pt-2 sm:pt-3 md:pt-4">
|
||
<p class="body1 text-theme-text-secondary">It includes the Figma UI kit,
|
||
Tailwind UI codebase, regular updates, and customer support.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="animate-y hidden group-[.flt-all]/faq-flt:block group-[.flt-pricing]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
|
||
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
|
||
data-pc-target="#collapse7">
|
||
<span class="absolute inset-0"></span>
|
||
<div class="grow">
|
||
<h4
|
||
class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
Can I use SaasAble for multiple projects?</h4>
|
||
</div>
|
||
<div class="leading-none">
|
||
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
<i
|
||
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
|
||
<i
|
||
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div id="collapse7" class="hidden" data-pc-parent="#accordionExample">
|
||
<div class="pt-2 sm:pt-3 md:pt-4">
|
||
<p class="body1 text-theme-text-secondary">Yes, you can purchase a Multi Use or Multi Extended license based on your project type.</p>
|
||
<div class="pt-4 md:pt-5">
|
||
<ul class="*:py-2 *:last:pb-0 *:first:pt-0 leading-none">
|
||
<li>
|
||
<div class="flex items-center gap-[10px]">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
|
||
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">Multiple non-SaaS based projects → Multi Use</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-[10px]">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
|
||
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">
|
||
Multiple SaaS based projects → Multi Extended Use
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="animate-y hidden group-[.flt-all]/faq-flt:block group-[.flt-pricing]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
|
||
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
|
||
data-pc-target="#collapse8">
|
||
<span class="absolute inset-0"></span>
|
||
<div class="grow">
|
||
<h4
|
||
class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
Do you offer refunds?</h4>
|
||
</div>
|
||
<div class="leading-none">
|
||
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
<i
|
||
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
|
||
<i
|
||
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div id="collapse8" class="hidden" data-pc-parent="#accordionExample">
|
||
<div class="pt-2 sm:pt-3 md:pt-4">
|
||
<p class="body1 text-theme-text-secondary">Yes, we offer refunds, but only if
|
||
you provide a valid reason to support your claim. For more details, please review our
|
||
<span class="tf"><a href="https://themeforest.net/page/customer_refund_policy" class="text-primary-500 underline" target="_blank">Refund Policy</a></span>
|
||
<span class="ct"><a href="https://codedthemes.com/terms-and-conditions/" class="text-primary-500 underline" target="_blank">Refund Policy</a></span>
|
||
.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="animate-y hidden group-[.flt-all]/faq-flt:block group-[.flt-support]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
|
||
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
|
||
data-pc-target="#collapse9">
|
||
<span class="absolute inset-0"></span>
|
||
<div class="grow">
|
||
<h4
|
||
class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
Do I get access to future updates?</h4>
|
||
</div>
|
||
<div class="leading-none">
|
||
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
<i
|
||
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
|
||
<i
|
||
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div id="collapse9" class="hidden" data-pc-parent="#accordionExample">
|
||
<div class="pt-2 sm:pt-3 md:pt-4">
|
||
<p class="body1 text-theme-text-secondary">Yes, you will receive updates for 12 months once you purchase.</p>
|
||
<div class="pt-4 md:pt-5">
|
||
<ul class="*:py-2 *:last:pb-0 *:first:pt-0 leading-none">
|
||
<li>
|
||
<div class="flex items-center gap-[10px]">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
|
||
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">12 months Free Updates</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center gap-[10px]">
|
||
<div class="shrink-0">
|
||
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
|
||
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
|
||
</div>
|
||
</div>
|
||
<div class="grow">
|
||
<p class="body1 text-theme-text-secondary">
|
||
License validity is 12 months
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="animate-y hidden group-[.flt-all]/faq-flt:block group-[.flt-support]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
|
||
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
|
||
data-pc-target="#collapse10">
|
||
<span class="absolute inset-0"></span>
|
||
<div class="grow">
|
||
<h4
|
||
class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
Is support included with the template purchase?</h4>
|
||
</div>
|
||
<div class="leading-none">
|
||
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
|
||
<i
|
||
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
|
||
<i
|
||
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div id="collapse10" class="hidden" data-pc-parent="#accordionExample">
|
||
<div class="pt-2 sm:pt-3 md:pt-4">
|
||
<p class="body1 text-theme-text-secondary">12 months of item support is included for any bugs or design issues in the current version of the template. We are also available for custom work implementation. When you post a comment or submit a support ticket, our team takes it seriously and responds within 12–24 hours.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ Faq ] end -->
|
||
<!-- [ Footer ] start -->
|
||
<section class="common-section">
|
||
<div class="container">
|
||
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-10">
|
||
<div class="animate-y delay-reset flex flex-col lg:flex-row gap-8 lg:gap-6">
|
||
<div class="basis-full lg:basis-6/12">
|
||
<div class="flex flex-col sm:flex-row lg:flex-col gap-6 justify-between h-full">
|
||
<div class="flex flex-col items-start gap-3 sm:gap-6">
|
||
@@include('images/logo-main.html', {'substyle': 'class="w-[112px] lg:w-[140px] h-auto text-primary-500"'})
|
||
<h6 class="max-w-[280px] -mb-2 sm:-mb-5">v1.0.0</h6>
|
||
<p class="body2 max-w-[280px]">Explore the different versions of our SaasAble template.</p>
|
||
</div>
|
||
<div class="flex flex-col gap-4 sm:gap-5 lg:gap-6">
|
||
<div class="flex flex-row gap-2 items-center">
|
||
<i class="ti ti-brand-figma text-2xl leading-none"></i>
|
||
<a class="body2 text-theme-text-secondary" href="https://www.figma.com/community/file/1425095061180549847" target="_blank">
|
||
Figma Version 1.1.0
|
||
</a>
|
||
</div>
|
||
<div class="flex flex-row gap-2 items-center">
|
||
<i class="ti ti-brand-tailwind text-2xl leading-none"></i>
|
||
<a class="body2 text-theme-text-secondary" href="https://tailwindcss.com/" target="_blank">Tailwind CSS v4.1.2</a>
|
||
</div>
|
||
<div class="flex flex-row gap-2 items-center">
|
||
<i class="ti ti-sparkles text-2xl leading-none"></i>
|
||
<a class="body2 text-theme-text-secondary" href="https://phoenixcoded.gitbook.io/saasable-tailwind" >Documentation</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="basis-full lg:basis-6/12">
|
||
<div class="flex flex-row flex-wrap justify-between gap-5 md:gap-8">
|
||
<div class="basis-5/12 sm:basis-auto">
|
||
<div class="flex flex-col md:gap-6 items-start">
|
||
<h4>Company</h4>
|
||
<ul
|
||
class="*:*:min-h-9 sm:*:*:min-h-10 *:*:py-1.5 *:*:my-0.5 *:*:flex *:*:items-center caption2 py-2 *:*:text-neutral-800 *:*:hover:text-primary-500 *:*:transition-all *:*:duration-500">
|
||
<li><a target="_blank" href="https://blog.saasable.io/a-decade-of-expertise-the-phoenixcoded-story-and-why-you-should-trust-us">Why Phoenixcoded?</a></li>
|
||
<li><a target="_blank" href="pages/about.html">About</a></li>
|
||
<li><a target="_blank" href="pages/contact.html">Contact Us</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="basis-5/12 sm:basis-auto">
|
||
<div class="flex flex-col md:gap-6 items-start">
|
||
<h4>Support</h4>
|
||
<ul
|
||
class="*:*:min-h-9 sm:*:*:min-h-10 *:*:py-1.5 *:*:my-0.5 *:*:flex *:*:items-center caption2 py-2 *:*:text-neutral-800 *:*:hover:text-primary-500 *:*:transition-all *:*:duration-500">
|
||
<li><a href="pages/pricing.html" target="_blank">Pricing</a></li>
|
||
<li><a href="pages/faq.html" target="_blank">FAQ</a></li>
|
||
<li>
|
||
<a class="ct" href="https://codedthemes.support-hub.io/" target="_blank">Support</a>
|
||
<a class="tf" href="https://phoenixcoded.authordesk.app/" target="_blank">Support</a>
|
||
</li>
|
||
<li>
|
||
<a class="ct" href="https://codedthemes.com/license/" target="_blank">License Terms</a>
|
||
<a class="tf" href="https://themeforest.net/licenses/standard" target="_blank">License Terms</a>
|
||
</li>
|
||
<li><a href="https://discord.gg/gmqz4BWYA8" target="_blank">Discord</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="basis-6/12 sm:basis-auto">
|
||
<div class="flex flex-col md:gap-6 items-start">
|
||
<h4>Resources</h4>
|
||
<ul
|
||
class="*:*:min-h-9 sm:*:*:min-h-10 *:*:py-1.5 *:*:my-0.5 *:*:flex *:*:items-center caption2 py-2 *:*:text-neutral-800 *:*:hover:text-primary-500 *:*:transition-all *:*:duration-500">
|
||
<li><a href="https://github.com/phoenixcoded/saasable-ui" target="_blank">Freebies</a></li>
|
||
<li><a href="https://phoenixcoded.gitbook.io/saasable-tailwind" target="_blank">Documentation</a></li>
|
||
<li><a href="https://blog.saasable.io/" target="_blank">Blog</a></li>
|
||
<li><a href="https://codedthemes.com/privacy-policy/" target="_blank">Privacy Policy</a></li>
|
||
<li>
|
||
<a href="https://themeforest.net/page/customer_refund_policy" class="tf" target="_blank">Refund Policy</a>
|
||
<a href="https://codedthemes.com/terms-and-conditions/" class="ct" target="_blank">Refund Policy</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="animate-y bg-neutral-100 rounded-3xl sm:rounded-[32px]">
|
||
<div class="flex flex-col sm:flex-row items-center justify-center sm:justify-between gap-3 p-4 sm:py-3 sm:px-6">
|
||
<span class="caption2">Copyright © 2026 Phoenixcoded</span>
|
||
<div class="flex flex-row flex-wrap gap-1 text-2xl leading-none *:flex *:items-center *:justify-center sm:gap-3 *:w-10 sm:*:w-[52px] md:*:w-14 *:h-10 sm:*:h-[52px] md:*:h-14 *:rounded-xl *:text-primary-500 *:hover:bg-neutral-300 *:transition-all *:duration-300">
|
||
<a href="https://in.linkedin.com/company/phoenixcoded" target="_blank"><i class="ti ti-brand-linkedin"></i></a>
|
||
<a href="https://www.facebook.com/Phoenixcoded/" target="_blank"><i class="ti ti-brand-facebook-filled"></i></a>
|
||
<a href="https://www.youtube.com/@Phoenixcoded" target="_blank"><i class="ti ti-brand-youtube-filled"></i></a>
|
||
<a href="https://github.com/phoenixcoded" target="_blank"><i class="ti ti-brand-github-filled"></i></a>
|
||
<a href="https://dribbble.com/Phoenixcoded" target="_blank"><i class="ti ti-brand-dribbble-filled"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [ Footer ] end -->
|
||
<div
|
||
class="floting-button fixed bottom-[20px] ltr:right-[20px] rtl::left-[20px] md:bottom-[40px] ltr:md:right-[40px] rtl:md:left-[40px] z-[1030] group scroll-top">
|
||
<a href="#"
|
||
class="btn btn-primary flex items-center justify-center p-0 w-[40px] h-[40px] lg:w-[52px] lg:h-[52px] rounded-full gap-2 opacity-0 translate-y-5 group-[.scroll-show]:opacity-100 group-[.scroll-show]:translate-y-0 duration-500 delay-300 shadow-[rgba(0,_0,_0,_0.2)_0px_3px_5px_-1px,_rgba(0,_0,_0,_0.14)_0px_6px_10px_0px,_rgba(0,_0,_0,_0.12)_0px_1px]">
|
||
<i class="ti ti-arrow-up text-2xl leading-none text-theme-bodybg"></i>
|
||
</a>
|
||
</div>
|
||
<!-- [ Main Content ] end -->
|
||
<!-- Required Js -->
|
||
<script src="assets/js/plugins/popper.min.js"></script>
|
||
<script src="assets/js/icon/custom-font.js"></script>
|
||
<script src="assets/js/component.js"></script>
|
||
<script src="assets/js/script.js"></script>
|
||
<script src="assets/js/theme.js"></script>
|
||
<!-- [Page Specific JS] start -->
|
||
<script src="assets/js/plugins/tiny-slider.js"></script>
|
||
<script src="assets/js/plugins/motion.js"></script>
|
||
<script type="module">
|
||
const { animate, inView, scroll } = Motion;
|
||
window.addEventListener('load', function () {
|
||
// main hero
|
||
var element = document.querySelector('.img-hero-1');
|
||
var ref = document.querySelector('.animation-ref');
|
||
scroll(animate(element, { scale: [0.9, 0.92, 0.94, 0.96, 1] }), {
|
||
target: ref,
|
||
offset: ['start start', 'end start'],
|
||
});
|
||
|
||
// translate y
|
||
var anim = document.querySelectorAll('.animate-y');
|
||
var sec = 0;
|
||
inView(anim, (element) => {
|
||
if (element.classList.contains("delay-reset")) {
|
||
sec = 0
|
||
} else {
|
||
sec += 0.1;
|
||
}
|
||
animate(
|
||
element,
|
||
{ opacity: [0, 1], y: [50, 0] },
|
||
{
|
||
duration: 1,
|
||
delay: sec,
|
||
ease: [0.215, 0.61, 0.355, 1]
|
||
}
|
||
)
|
||
})
|
||
});
|
||
|
||
var slider = tns({
|
||
container: '.faq-slider1',
|
||
"autoWidth": true,
|
||
nav: false,
|
||
autoHeight: false,
|
||
speed: 500,
|
||
gutter: 12,
|
||
slideBy: 1,
|
||
loop: false,
|
||
controls: false,
|
||
autoplay: false,
|
||
autoplayButtonOutput: false,
|
||
autoplayButton: false,
|
||
});
|
||
|
||
|
||
// Cache elements for repeated use
|
||
const filterButtonContainer = document.querySelector('.filter-button');
|
||
const filterWrapper = document.querySelector('.faq-fiter-wrapper');
|
||
|
||
// Check if elements exist to avoid potential errors
|
||
if (filterButtonContainer && filterWrapper) {
|
||
const buttons = filterButtonContainer.querySelectorAll('button');
|
||
|
||
// Add event listener to each button
|
||
buttons.forEach(button => {
|
||
button.addEventListener('click', (event) => {
|
||
const filterClass = 'flt-' + event.target.getAttribute('data-filter');
|
||
|
||
// Remove existing filter classes
|
||
removeClassByPrefix(filterButtonContainer, 'flt-');
|
||
removeClassByPrefix(filterWrapper, 'flt-');
|
||
|
||
// Add new filter class
|
||
filterButtonContainer.classList.add(filterClass);
|
||
filterWrapper.classList.add(filterClass);
|
||
});
|
||
});
|
||
}
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
var slider = tns({
|
||
container: '.clientele-slider3',
|
||
items: 2,
|
||
center: true,
|
||
nav: false,
|
||
speed: 500,
|
||
gutter: 4,
|
||
autoplayTimeout: 6000,
|
||
slideBy: 1,
|
||
loop: true,
|
||
controls: false,
|
||
autoplay: true,
|
||
autoplayButtonOutput: false,
|
||
autoplayButton: false,
|
||
mouseDrag: true,
|
||
responsive: {
|
||
575: {
|
||
items: 4,
|
||
center: false,
|
||
},
|
||
992: {
|
||
items: 5,
|
||
}
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<!-- [Page Specific JS] end -->
|
||
</body>
|
||
|
||
</html> |