Motion Landing Library React Components
Discover 44 components available in Motion Landing Library React
Logo Area With Title
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col items-center gap-8 mx-auto my-32">
<p data-type='p' className="text-base font-medium leading-7 text-center text-dark-grey-600">Endorsed by the premier 500 global corporations</p>
<div data-type='div' className="flex flex-wrap items-center justify-center w-full gap-6 lg:gap-0 lg:flex-nowrap lg:justify-between">
<span data-type='span'>
<svg data-type='svg' xmlns="http://www.w3.org/2000/svg" width={155} height={65} viewBox="0 0 184 65" fill="none">
<path data-type='path' d="M20.2765 64.8827C14.7995 64.6671 10.3185 63.1822 6.81467 60.4243C6.14599 59.8975 4.55259 58.3178 4.01802 57.6515C2.59718 55.8814 1.6312 54.1586 0.986896 52.2472C-0.995712 46.3634 0.0246651 38.6425 3.90547 30.1689C7.22826 22.9145 12.3555 15.7196 21.3007 5.75465C22.6183 4.28833 26.5423 0 26.5676 0C26.577 0 26.3631 0.367039 26.094 0.813998C23.7681 4.67396 21.778 9.22062 20.6939 13.1568C18.9523 19.4727 19.1624 24.8928 21.3091 29.0957C22.79 31.9911 25.3287 34.4991 28.1835 35.8855C33.1813 38.3117 40.4984 38.5124 49.4342 36.4728C50.0494 36.3315 80.535 28.3133 117.18 18.6541C153.826 8.99389 183.814 1.09648 183.818 1.10298C183.828 1.11136 98.6805 37.2115 54.4788 55.9399C47.4788 58.905 45.6068 59.654 42.3159 60.7988C33.9034 63.7258 26.3678 65.1224 20.2765 64.8827Z" fill="#1B2559" />
</svg>
</span>
<span data-type='span'>
<svg data-type='svg' xmlns="http://www.w3.org/2000/svg" width={155} height={45} viewBox="0 0 155 45" fill="none">
<path data-type='path' d="M32.4462 3.36365H6.77368C3.21473 3.36365 0.330353 6.2606 0.330353 9.83507V35.6195C0.330353 39.194 3.21473 42.0909 6.77368 42.0909H32.4462C36.0052 42.0909 38.8895 39.194 38.8895 35.6195V9.83507C38.8895 6.2606 36.0052 3.36365 32.4462 3.36365ZM31.8802 33.0068C31.8802 34.136 30.9691 35.051 29.8448 35.051H9.37505C8.25076 35.051 7.3397 34.136 7.3397 33.0068V12.4478C7.3397 11.3186 8.25076 10.4036 9.37505 10.4036H29.8448C30.9691 10.4036 31.8802 11.3186 31.8802 12.4478V33.0068ZM15.5199 27.9839C14.8724 27.9839 14.3529 27.4582 14.3529 26.8079V18.5999C14.3529 17.9496 14.8724 17.4201 15.5199 17.4201H23.7039C24.3475 17.4201 24.8708 17.9458 24.8708 18.5999V26.804C24.8708 27.4543 24.3475 27.98 23.7039 27.98H15.5199V27.9839ZM49.1128 27.4232H53.3231C53.5324 29.8178 55.1491 31.6868 58.4095 31.6868C61.321 31.6868 63.1121 30.2422 63.1121 28.0578C63.1121 26.0136 61.7087 25.0986 59.181 24.4989L55.9167 23.7942C52.3732 23.0193 49.706 20.7298 49.706 16.9918C49.706 12.8683 53.3541 10.0492 58.0916 10.0492C63.1082 10.0492 66.3377 12.6931 66.6168 16.6024H62.5461C62.0615 14.7723 60.5495 13.6821 58.0955 13.6821C55.498 13.6821 53.7107 15.0916 53.7107 16.8905C53.7107 18.6895 55.2537 19.7797 57.921 20.3794L61.1504 21.0841C64.6939 21.859 67.113 24.0083 67.113 27.7775C67.113 32.5707 63.5347 35.4248 58.4134 35.4248C52.6562 35.4209 49.4656 32.2864 49.1128 27.4232ZM82.1746 42.0909V35.0783L82.4499 32.0022H82.1746C81.2093 34.2139 79.1817 35.4248 76.4291 35.4248C71.9901 35.4248 68.687 31.7958 68.687 26.2317C68.687 20.6675 71.9901 17.0385 76.4291 17.0385C79.1468 17.0385 81.0736 18.3157 82.1746 20.3209H82.4499V17.3812H86.098V42.0909H82.1746ZM82.3103 26.2278C82.3103 22.6689 80.1431 20.5935 77.4914 20.5935C74.8396 20.5935 72.6724 22.6689 72.6724 26.2278C72.6724 29.7867 74.8396 31.862 77.4914 31.862C80.1431 31.862 82.3103 29.7906 82.3103 26.2278ZM89.0095 28.0617V17.3812H92.9329V27.7152C92.9329 30.5148 94.2743 31.862 96.5112 31.862C99.2638 31.862 101.055 29.8918 101.055 26.8157V17.3812H104.978V35.0744H101.33V31.4104H101.055C100.194 33.7622 98.3023 35.4209 95.3792 35.4209C91.1767 35.4209 89.0095 32.7264 89.0095 28.0617ZM107.366 30.1332C107.366 26.8157 109.673 24.8805 113.767 24.6391L118.617 24.3276V22.9453C118.617 21.2866 117.411 20.2859 115.279 20.2859C113.317 20.2859 112.147 21.2866 111.836 22.7039H107.913C108.328 19.11 111.286 17.0346 115.275 17.0346C119.784 17.0346 122.537 18.9698 122.537 22.7039V35.0744H118.888V31.7919H118.613C117.787 33.9685 116.066 35.4209 112.763 35.4209C109.603 35.4209 107.366 33.2794 107.366 30.1332ZM118.621 27.9566V27.0221L114.663 27.2986C112.53 27.4348 111.565 28.2331 111.565 29.8217C111.565 31.1689 112.666 32.1385 114.213 32.1385C117.004 32.1385 118.621 30.3435 118.621 27.9566ZM125.464 35.0783V17.3812H129.112V20.7687H129.387C129.903 18.4519 131.659 17.3812 134.272 17.3812H136.063V20.9401H133.826C131.279 20.9401 129.387 22.5988 129.387 25.7449V35.0744H125.464V35.0783ZM154.013 26.9559H140.626C140.831 30.2033 143.103 32.0372 145.615 32.0372C147.748 32.0372 149.089 31.1728 149.849 29.7205H153.737C152.671 33.3144 149.539 35.4209 145.581 35.4209C140.386 35.4209 136.737 31.5155 136.737 26.2278C136.737 20.9401 140.486 17.0346 145.615 17.0346C150.776 17.0346 154.148 20.5935 154.148 25.0168C154.152 25.8851 154.082 26.3329 154.013 26.9559ZM150.264 24.2264C150.128 21.7733 148.097 20.1146 145.619 20.1146C143.278 20.1146 141.32 21.602 140.835 24.2264H150.264Z" fill="#1B2559" />
</svg>
</span>
<span data-type='span'>
<svg data-type='svg' xmlns="http://www.w3.org/2000/svg" width={184} height={49} viewBox="0 0 184 49" fill="none">
<path data-type='path' d="M54.5276 15.4252H62.1957C66.4433 15.4252 68.6485 17.1778 68.6485 20.4687V20.6326C68.709 21.597 68.4236 22.5512 67.8442 23.3217C67.2647 24.0922 66.4297 24.6279 65.491 24.8313C66.6152 24.9309 67.6549 25.4727 68.3845 26.3391C69.1141 27.2055 69.4746 28.3265 69.3878 29.4587V29.5722C69.3878 33.1657 67.0447 35.057 62.5466 35.057H54.5276V15.4252ZM61.4815 23.4822C63.6116 23.4822 64.4511 22.7131 64.4511 20.9605V20.847C64.4511 19.2078 63.5239 18.4639 61.4565 18.4639H58.8378V23.5074L61.4815 23.4822ZM61.8574 31.9679C64.0376 31.9679 65.0274 30.9718 65.0274 29.194V29.0805C65.0274 27.2648 64.0376 26.3444 61.6444 26.3444H58.8378V31.9805L61.8574 31.9679Z" fill="#1B2559" />
<path data-type='path' d="M70.5407 31.0601C70.5407 27.7062 73.5854 26.4453 77.9583 26.4453H79.5621V25.8779C79.5621 24.1757 79.0483 23.2427 77.2441 23.2427C76.952 23.2078 76.6559 23.2334 76.3741 23.318C76.0923 23.4026 75.8306 23.5443 75.6052 23.7345C75.3799 23.9246 75.1956 24.1592 75.0637 24.4237C74.9318 24.6883 74.8551 24.9772 74.8384 25.2727H71.0795C71.3301 21.8683 73.9989 20.3553 77.4947 20.3553C80.9904 20.3553 83.4588 21.7801 83.4588 25.6762V35.0318H79.6122V33.3044C79.1294 33.9889 78.4786 34.5357 77.7231 34.8915C76.9677 35.2473 76.1335 35.3999 75.302 35.3344C72.7208 35.3344 70.5407 34.0736 70.5407 31.0601ZM79.5621 30.0135V28.7527H78.0334C75.7405 28.7527 74.4124 29.257 74.4124 30.7827C74.4124 31.8292 75.0388 32.5227 76.4798 32.5227C78.2214 32.5731 79.5621 31.6022 79.5621 30.0135Z" fill="#1B2559" />
<path data-type='path' d="M85.125 30.5305H88.8087C88.9716 31.7914 89.5981 32.5731 91.3147 32.5731C92.8433 32.5731 93.5575 31.9931 93.5575 30.997C93.5575 30.0009 92.7054 29.5975 90.6631 29.3075C86.9042 28.7275 85.4006 27.6305 85.4006 24.8314C85.4006 22.0322 88.1321 20.3553 91.039 20.3553C94.209 20.3553 96.5771 21.5153 96.9279 24.8061H93.3069C93.0939 23.6209 92.4298 23.0788 91.0766 23.0788C89.7234 23.0788 89.0593 23.684 89.0593 24.554C89.0593 25.424 89.7359 25.8148 91.8033 26.1175C95.3743 26.6344 97.3414 27.5422 97.3414 30.6188C97.3414 33.6953 95.1111 35.3344 91.3397 35.3344C87.5683 35.3344 85.2628 33.6322 85.125 30.5305Z" fill="#1B2559" />
<path data-type='path' d="M98.3564 28.0339V27.8196C98.3089 26.8342 98.4653 25.8496 98.8156 24.9283C99.166 24.0069 99.7028 23.1688 100.392 22.4671C101.081 21.7653 101.907 21.2153 102.819 20.8518C103.73 20.4882 104.707 20.3192 105.686 20.3552C109.37 20.3552 112.64 22.5239 112.64 27.6557V28.7526H102.403C102.504 31.1357 103.794 32.5352 105.937 32.5352C107.766 32.5352 108.668 31.7409 108.919 30.5305H112.678C112.214 33.6322 109.758 35.3596 105.862 35.3596C101.489 35.3344 98.3564 32.6235 98.3564 28.0339ZM108.794 26.3065C108.668 24.1378 107.566 23.1544 105.686 23.1544C104.84 23.1503 104.025 23.4765 103.413 24.0643C102.801 24.6521 102.439 25.4558 102.403 26.3065H108.794Z" fill="#1B2559" />
<path data-type='path' d="M113.68 28.0338V27.8195C113.632 26.8319 113.79 25.8451 114.141 24.922C114.493 23.9988 115.032 23.1595 115.724 22.4573C116.416 21.7552 117.245 21.2057 118.16 20.8438C119.074 20.4819 120.053 20.3155 121.035 20.3551C124.343 20.3551 127.388 21.8051 127.751 25.9282H123.992C123.967 25.5743 123.872 25.2291 123.712 24.913C123.551 24.5969 123.33 24.3165 123.06 24.0883C122.79 23.8602 122.477 23.6889 122.14 23.5848C121.803 23.4806 121.448 23.4457 121.098 23.4821C119.055 23.4821 117.69 25.0203 117.69 27.769V27.9834C117.69 30.8708 118.943 32.346 121.185 32.346C121.567 32.3681 121.949 32.3136 122.31 32.1856C122.67 32.0576 123.002 31.8588 123.285 31.6006C123.568 31.3425 123.798 31.0302 123.96 30.6819C124.122 30.3337 124.214 29.9564 124.23 29.5721H127.801C127.588 32.9764 125.132 35.3343 120.985 35.3343C116.838 35.3343 113.68 32.7243 113.68 28.0338Z" fill="#1B2559" />
<path data-type='path' d="M128.716 31.06C128.716 27.7061 131.761 26.4452 136.121 26.4452H137.737V25.8779C137.737 24.1757 137.211 23.2426 135.419 23.2426C135.125 23.204 134.827 23.2269 134.542 23.3097C134.257 23.3926 133.992 23.5337 133.764 23.7242C133.536 23.9148 133.349 24.1506 133.216 24.417C133.082 24.6835 133.005 24.9747 132.989 25.2726H129.23C129.48 21.8683 132.149 20.3552 135.632 20.3552C139.116 20.3552 141.609 21.78 141.609 25.6761V35.0318H137.762V33.3044C137.28 33.9889 136.629 34.5357 135.873 34.8915C135.118 35.2473 134.284 35.3999 133.452 35.3344C130.946 35.3344 128.716 34.0735 128.716 31.06ZM137.737 30.0135V28.7526H136.234C133.941 28.7526 132.6 29.257 132.6 30.7826C132.6 31.8292 133.239 32.5226 134.68 32.5226C136.447 32.5731 137.788 31.6022 137.788 30.0135H137.737Z" fill="#1B2559" />
<path data-type='path' d="M144.39 20.6326H148.337V22.8265C148.768 22.047 149.401 21.4003 150.169 20.956C150.937 20.5117 151.812 20.2865 152.698 20.3047C153.543 20.2367 154.388 20.4454 155.106 20.8999C155.824 21.3543 156.377 22.0301 156.682 22.8265C157.208 22.0356 157.923 21.3903 158.762 20.9497C159.6 20.5091 160.535 20.2873 161.481 20.3047C164.125 20.3047 166.167 21.9817 166.167 25.7895V34.9813H162.245V26.2813C162.245 24.4404 161.431 23.6208 160.002 23.6208C159.622 23.6042 159.243 23.6703 158.891 23.8145C158.539 23.9588 158.222 24.1778 157.961 24.4567C157.701 24.7356 157.503 25.0677 157.382 25.4305C157.26 25.7932 157.218 26.1781 157.258 26.5587V35.0317H153.324V26.2813C153.324 24.4404 152.485 23.6208 151.094 23.6208C150.713 23.6023 150.332 23.667 149.978 23.8104C149.625 23.9538 149.306 24.1726 149.044 24.4517C148.782 24.7308 148.583 25.0636 148.461 25.4273C148.339 25.791 148.297 26.177 148.337 26.5587V35.0317H144.39V20.6326Z" fill="#1B2559" />
<path data-type='path' d="M168.874 20.6326H172.833V22.8895C173.305 22.1001 173.972 21.4471 174.769 20.9942C175.566 20.5412 176.466 20.3037 177.381 20.3048C180.877 20.3048 183.646 22.9148 183.646 27.6556V27.8826C183.646 32.6235 180.977 35.2839 177.381 35.2839C176.467 35.3217 175.559 35.1066 174.757 34.662C173.955 34.2175 173.29 33.5604 172.833 32.7622V39.9239H168.874V20.6326ZM179.587 27.6935C179.587 24.7809 178.171 23.3561 176.178 23.3561C174.186 23.3561 172.695 24.8061 172.695 27.6935V27.9078C172.695 30.7826 174.061 32.1822 176.216 32.1822C178.371 32.1822 179.587 30.7196 179.587 27.9583V27.6935Z" fill="#1B2559" />
<path data-type='path' fillRule="evenodd" clipRule="evenodd" d="M25.2333 8.5724C14.1151 8.5724 8.31686 18.0491 5.07042 27.3116C4.67798 28.4313 3.45784 29.0188 2.34517 28.6239C1.54933 28.3415 1.02403 27.6329 0.932985 26.8426C0.89674 26.5279 0.929326 26.2003 1.04108 25.8815C4.33513 16.4831 11.0666 4.27283 25.2333 4.27283C32.6382 4.27283 37.9384 9.20254 41.3663 15.125C44.8032 21.063 46.6356 28.4156 47.0485 34.3521C47.0782 34.7788 46.9807 35.2047 46.7685 35.5753C44.7833 39.0431 41.4807 41.303 37.7161 42.6871C33.9608 44.0678 29.6108 44.6318 25.2505 44.6333C21.5459 44.6915 17.8724 43.9454 14.4801 42.4458C11.0824 40.9439 8.04706 38.7215 5.58141 35.9306C5.05688 35.3368 4.9005 34.5004 5.17475 33.7554L5.17636 33.751L5.17942 33.7428L5.18987 33.7147L5.22769 33.6143C5.2603 33.5284 5.30759 33.4052 5.3685 33.2501C5.49025 32.94 5.66697 32.5009 5.89038 31.9755C6.33526 30.9294 6.97439 29.5195 7.74214 28.096C8.49979 26.6912 9.43147 25.181 10.4792 23.9911C11.4343 22.9064 12.9189 21.585 14.8192 21.572L14.8337 21.5719C16.1764 21.5719 17.2794 22.1906 18.0733 22.7854C18.8736 23.3849 19.6004 24.1467 20.1828 24.767C20.2497 24.8381 20.3146 24.9074 20.3778 24.9748C20.9202 25.5536 21.335 25.9962 21.7291 26.3276C21.7734 26.3648 21.8141 26.3977 21.8512 26.4266C21.9794 26.2948 22.1323 26.1221 22.3083 25.9025C22.9345 25.1213 23.6377 24.021 24.3183 22.843C24.9899 21.6805 25.6012 20.5095 26.0469 19.6237C26.2689 19.1824 26.4481 18.8153 26.5711 18.56C26.6326 18.4324 26.68 18.3329 26.7116 18.2661L26.7468 18.1913L26.7552 18.1735L26.757 18.1697C27.2578 17.0948 28.53 16.6313 29.5982 17.1352C30.6665 17.6391 31.1266 18.9192 30.6258 19.9942L30.6212 20.0041L30.6101 20.0278L30.569 20.1149C30.5335 20.19 30.4818 20.2985 30.4157 20.4357C30.2836 20.7099 30.0935 21.0994 29.8588 21.5659C29.3909 22.4958 28.7391 23.7456 28.0121 25.004C27.294 26.2469 26.4632 27.5674 25.6339 28.6019C25.2227 29.1149 24.7565 29.6281 24.2524 30.0316C23.8068 30.3883 23.0208 30.915 22.0132 30.915C20.6808 30.915 19.631 30.1664 18.9894 29.6268C18.3847 29.1183 17.7806 28.472 17.2731 27.9291C17.2061 27.8574 17.1408 27.7876 17.0774 27.7201C16.4758 27.0794 15.9841 26.5804 15.522 26.2342C15.117 25.9309 14.9103 25.881 14.8509 25.873C14.8509 25.873 14.8466 25.8746 14.8429 25.876C14.7776 25.8991 14.3852 26.0383 13.677 26.8426C12.9428 27.6764 12.1916 28.8597 11.4973 30.1469C10.8132 31.4154 10.2315 32.6958 9.81846 33.6671C9.76524 33.7922 9.71497 33.9119 9.6678 34.0253C11.548 35.9106 13.7615 37.4321 16.1985 38.5093C19.033 39.7623 22.103 40.3847 25.1985 40.334L25.2333 40.3337C29.2747 40.3337 33.1 39.8068 36.2499 38.6486C39.1477 37.5832 41.3583 36.0304 42.7324 33.9689C42.2667 28.6857 40.5944 22.3342 37.6743 17.2889C34.618 12.0086 30.4708 8.5724 25.2333 8.5724ZM21.5 26.7321C21.5 26.7321 21.5094 26.725 21.5273 26.7157C21.5089 26.7283 21.5 26.7321 21.5 26.7321Z" fill="#1B2559" />
</svg>
</span>
<span data-type='span'>
<svg data-type='svg' xmlns="http://www.w3.org/2000/svg" width={177} height={45} viewBox="0 0 177 45" fill="none">
<path data-type='path' d="M174.225 15.0965C174.225 14.419 173.752 13.9673 172.973 13.9673L171.444 13.9955L171.472 17.4396H172.306V16.2539H172.807L173.53 17.4396H174.503L173.641 16.1128C173.819 16.0123 173.968 15.8649 174.071 15.686C174.173 15.5072 174.227 15.3035 174.225 15.0965ZM172.807 15.5482H172.278V14.673H172.89C173 14.6608 173.111 14.6921 173.199 14.7604C173.287 14.8288 173.346 14.9289 173.363 15.04V15.0683C173.361 15.138 173.344 15.2066 173.314 15.2695C173.285 15.3324 173.242 15.3883 173.19 15.4335C173.137 15.4787 173.076 15.5123 173.01 15.532C172.944 15.5518 172.875 15.5573 172.807 15.5482ZM49.4303 31.0185C48.0119 31.0185 47.0385 29.8893 47.0385 28.2237V20.6297H52.8791V15.2659H47.0524L46.9968 9.11161H40.5443L40.5999 29.607C40.5999 33.7569 43.3255 36.5799 47.3305 36.5799C49.4443 36.5799 51.4468 36.2694 53.0321 35.5354V30.3128C51.9063 30.843 50.6697 31.0854 49.4303 31.0185ZM64.8385 14.9271C58.831 14.9271 54.2141 19.6698 54.2141 25.9652C54.2141 32.2042 58.831 36.5517 65.2 36.5517C68.7879 36.5517 72.1532 35.2531 74.2113 32.5712L69.2607 30.2845C68.2594 31.2161 66.7297 31.5831 65.3669 31.5831C63.1419 31.5831 60.9169 30.4257 60.611 28.0543H75.3794C75.6014 27.207 75.7136 26.3339 75.7132 25.4571C75.7132 18.9923 71.0685 14.9271 64.8524 14.9271H64.8385ZM60.611 23.9044C60.8057 21.0814 62.8082 19.7828 65.0053 19.7828C67.4807 19.7828 69.3441 21.1943 69.3441 23.6221V23.9044H60.611ZM34.4116 31.0185C32.9932 31.0185 32.0197 29.8893 32.0197 28.2237V20.6297H37.8604V15.2659H32.0336L31.978 9.11161H25.5255L25.5811 29.607C25.5811 33.7569 28.3068 36.5799 32.3118 36.5799C34.4255 36.5799 36.428 36.2694 38.0133 35.5354V30.3128C36.8884 30.8456 35.6511 31.088 34.4116 31.0185ZM11.7444 14.9271C6.20973 14.9271 0.396912 18.6253 0.396912 26.0782C0.396912 32.2889 4.51316 36.6364 9.7141 36.6364C12.69 36.6364 14.9429 35.4225 16.4169 33.277L16.6116 36.2694H22.8555V26.3322C22.8555 18.7665 17.3625 14.9271 11.7444 14.9271ZM11.7444 30.9056C8.93535 30.9056 6.90504 28.7883 6.90504 25.7959C6.90504 22.8034 8.90754 20.6861 11.7444 20.6861C14.3588 20.6861 16.5282 23.001 16.5282 25.7959C16.5282 28.5907 14.3588 30.9056 11.7444 30.9056ZM172.668 12.4146C170.637 12.4428 169.33 13.7697 169.358 15.7458C169.386 17.7219 170.721 19.0205 172.751 18.9923C174.726 18.9641 176.061 17.6372 176.033 15.6329C176.005 13.6285 174.67 12.3864 172.668 12.4146ZM172.751 18.4277C171.166 18.4559 170.081 17.3832 170.081 15.7458C170.081 14.1084 171.11 13.0074 172.695 12.9792C174.281 12.951 175.338 14.0237 175.365 15.6893C175.365 17.2985 174.308 18.3995 172.765 18.4277H172.751ZM141.128 15.2941L136.623 28.5625L132.061 15.2941H125.053L133.452 36.2412H139.738L148.137 15.2941H141.128ZM157.843 14.9271C151.836 14.9271 147.219 19.6698 147.219 25.9652C147.219 32.2042 151.836 36.5517 158.205 36.5517C161.793 36.5517 165.158 35.2531 167.216 32.5712L162.266 30.2845C161.264 31.2161 159.735 31.5831 158.372 31.5831C156.147 31.5831 153.922 30.4257 153.616 28.0543H168.384C168.606 27.207 168.719 26.3339 168.718 25.4571C168.718 18.9923 164.073 14.9271 157.843 14.9271ZM162.349 23.9044H153.616C153.811 21.0814 155.813 19.7828 158.01 19.7828C160.486 19.7828 162.349 21.1943 162.349 23.6221V23.9044ZM120.074 6.09094C117.793 6.09094 116.069 7.64363 116.069 9.81738C116.069 11.9911 117.793 13.6003 120.074 13.6003C122.355 13.6003 124.079 12.0194 124.079 9.81738C124.079 7.6154 122.383 6.09094 120.074 6.09094ZM90.7875 14.8989C89.4835 14.8775 88.1962 15.199 87.0509 15.8323C85.9056 16.4655 84.9412 17.3888 84.2516 18.5124L84.0291 15.2941H77.7991V36.2412H84.2516V25.2595C84.3907 22.634 86.4766 20.6297 88.7572 20.6297C91.316 20.6297 92.4841 22.5776 92.4841 25.0336V36.2129H98.9088V24.0173C98.9088 18.71 95.7243 14.8989 90.7875 14.8989ZM110.479 31.0185C109.06 31.0185 108.087 29.8893 108.087 28.2237V20.6297H113.928V15.2659H108.087L108.031 9.11161H101.579L101.634 29.607C101.634 33.7569 104.36 36.5799 108.365 36.5799C110.479 36.5799 112.481 36.2694 114.067 35.5354V30.3128C112.946 30.8433 111.714 31.0857 110.479 31.0185ZM116.82 15.2941V36.2412H123.328V15.2941C122.363 15.9431 121.232 16.2892 120.074 16.2892C118.917 16.2892 117.785 15.9431 116.82 15.2941Z" fill="#1B2559" />
</svg>
</span>
<span data-type='span'>
<svg data-type='svg' xmlns="http://www.w3.org/2000/svg" width={186} height={45} viewBox="0 0 186 45" fill="none">
<path data-type='path' d="M15.8087 22.0943C15.8087 19.0548 13.4675 16.9186 10.5917 16.9186C7.71588 16.9186 5.37468 19.0908 5.37468 22.0943C5.37468 25.0618 7.71588 27.2701 10.5917 27.2701C13.4704 27.2673 15.8087 25.1338 15.8087 22.0943ZM15.8498 31.1409V28.7885C14.431 30.4177 12.3189 31.429 9.78977 31.429C4.53455 31.429 0.54541 27.4474 0.54541 22.0943C0.54541 16.7745 4.6873 12.7236 9.90726 12.7236C12.3631 12.7236 14.434 13.7377 15.8527 15.3281V13.0478H20.5704V31.1409H15.8498Z" fill="#1B2559" />
<path data-type='path' d="M43.4857 27.1233C41.8349 27.1233 41.3766 26.5441 41.3766 25.0258V16.9933H44.4081V13.0478H41.3766V8.63399H36.5415V13.0478H30.3139V11.9478C30.3139 10.4267 30.9279 9.84757 32.617 9.84757H33.6775V6.33703H31.3509C27.3617 6.33703 25.4817 7.56724 25.4817 11.3299V13.045H22.7969V16.9906H25.4817V31.138H30.3169V16.9906H36.5444V25.857C36.5444 29.5476 38.0396 31.1409 41.9524 31.1409H44.4463V27.1233H43.4857Z" fill="#1B2559" />
<path data-type='path' d="M60.8261 20.4651C60.4824 18.1126 58.4467 16.7023 56.0702 16.7023C53.6908 16.7023 51.7345 18.0766 51.238 20.4651H60.8261ZM51.1969 23.2885C51.5436 25.965 53.5763 27.4862 56.1467 27.4862C58.1794 27.4862 59.754 26.5801 60.6733 25.1337H65.623C64.4715 28.9685 60.8261 31.4289 56.0321 31.4289C50.2393 31.4289 46.1738 27.5942 46.1738 22.1302C46.1738 16.6663 50.4714 12.7208 56.1496 12.7208C61.866 12.7208 66.0079 16.7024 66.0079 22.1302C66.0079 22.5293 65.9697 22.9255 65.8933 23.2885H51.1969Z" fill="#1B2559" />
<path data-type='path' d="M96.7489 22.0943C96.7489 19.1628 94.4077 16.9186 91.5319 16.9186C88.6561 16.9186 86.3148 19.0908 86.3148 22.0943C86.3148 25.0618 88.6561 27.2701 91.5319 27.2701C94.4077 27.2673 96.7489 25.0258 96.7489 22.0943ZM81.5561 13.0478H86.2737V15.4002C87.6925 13.735 89.8017 12.7236 92.3338 12.7236C97.5126 12.7236 101.578 16.7412 101.578 22.0583C101.578 27.3781 97.4362 31.4317 92.2193 31.4317C89.8017 31.4317 87.8071 30.5257 86.4265 29.0074V38.5859H81.5561V13.0478Z" fill="#1B2559" />
<path data-type='path' d="M118.583 22.0943C118.583 19.0548 116.245 16.9186 113.366 16.9186C110.49 16.9186 108.149 19.0908 108.149 22.0943C108.149 25.0618 110.49 27.2701 113.366 27.2701C116.245 27.2673 118.583 25.1338 118.583 22.0943ZM118.625 31.1409V28.7885C117.206 30.4177 115.093 31.429 112.564 31.429C107.309 31.429 103.32 27.4474 103.32 22.0943C103.32 16.7745 107.462 12.7236 112.679 12.7236C115.135 12.7236 117.206 13.7377 118.625 15.3281V13.0478H123.343V31.1409H118.625Z" fill="#1B2559" />
<path data-type='path' d="M73.0519 14.8211C73.0519 14.8211 74.2534 12.7236 77.1938 12.7236C78.4511 12.7236 79.2648 13.1309 79.2648 13.1309V17.747C79.2648 17.747 77.4905 16.7135 75.8602 16.9213C74.2299 17.1291 73.1988 18.5422 73.2047 20.4319V31.1436H68.3343V13.0506H73.0519V14.8211Z" fill="#1B2559" />
<path data-type='path' d="M145.376 13.0478L133.464 38.5276H128.442L133.118 28.6776L125.211 13.0478H130.904L135.53 23.4908L140.277 13.0478H145.376Z" fill="#1B2559" />
<path data-type='path' d="M183.4 12.6377L171.591 6.20956C168.125 4.32268 163.792 6.6806 163.792 10.4571V11.1166C163.792 11.7123 164.129 12.2637 164.676 12.5601L166.906 13.7737C167.56 14.1312 168.377 13.6851 168.377 12.973V11.3327C168.377 10.5125 169.318 9.99996 170.07 10.41L180.298 15.9792C181.051 16.3893 181.051 17.4145 180.298 17.8219L170.07 23.3911C169.318 23.8011 168.377 23.2885 168.377 22.4684V21.5955C168.377 17.819 164.045 15.4584 160.576 17.348L148.767 23.7761C145.3 25.6631 145.3 30.3844 148.767 32.2713L160.576 38.6995C164.041 40.5863 168.377 38.2284 168.377 34.4519V33.7924C168.377 33.1967 168.04 32.6481 167.493 32.3488L165.263 31.1325C164.609 30.7751 163.792 31.2212 163.792 31.9333V33.5736C163.792 34.3937 162.853 34.9063 162.1 34.4962L151.872 28.927C151.12 28.5169 151.12 27.4918 151.872 27.0817L162.1 21.5124C162.853 21.1023 163.792 21.6149 163.792 22.4351V23.3079C163.792 27.0844 168.125 29.4452 171.591 27.5555L183.4 21.1273C186.867 19.2459 186.867 14.5246 183.4 12.6377Z" fill="#1B2559" />
</svg>
</span>
</div>
</div>
</div>Stats Simple
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col items-center gap-16 mx-auto my-32">
<div data-type='div' className="grid w-full grid-cols-1 lg:grid-cols-4 md:grid-cols-2 gap-y-8">
<div data-type='div' className="flex flex-col items-center">
<h3 data-type='h3' className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900">250+</h3>
<p data-type='p' className="text-base font-medium leading-7 text-center text-dark-grey-600">Successful Projects</p>
</div>
<div data-type='div' className="flex flex-col items-center">
<h3 data-type='h3' className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900">$12m</h3>
<p data-type='p' className="text-base font-medium leading-7 text-center text-dark-grey-600">Annual Revenue Growth</p>
</div>
<div data-type='div' className="flex flex-col items-center">
<h3 data-type='h3' className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900">2.6k+</h3>
<p data-type='p' className="text-base font-medium leading-7 text-center text-dark-grey-600">Global Partners</p>
</div>
<div data-type='div' className="flex flex-col items-center">
<h3 data-type='h3' className="text-5xl font-extrabold leading-tight text-center text-dark-grey-900">18k+</h3>
<p data-type='p' className="text-base font-medium leading-7 text-center text-dark-grey-600">Daily Website Visitors</p>
</div>
</div>
</div>
</div>Contact Us Section With Cards
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col items-center gap-16 mx-auto my-32">
<div data-type='div' className="grid w-full grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3">
<div data-type='div' className="flex flex-col items-center gap-3 px-8 py-10 bg-white rounded-3xl shadow-main">
<span data-type='span'>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={38}
height={38}
viewBox="0 0 38 38"
fill="none"
>
<path data-type='path'
d="M31.9904 13.965L22.4166 4.40166C21.6057 3.60976 20.5294 3.16817 19.4104 3.16817C18.2914 3.16817 17.2151 3.60976 16.4041 4.40166L6.8304 13.9017C6.40502 14.283 6.0629 14.7524 5.82645 15.279C5.58999 15.8056 5.46454 16.3776 5.45831 16.9575V30.5425C5.47456 31.6946 5.93476 32.793 6.73808 33.5973C7.5414 34.4016 8.62236 34.846 9.74415 34.8333H28.9225C30.0443 34.846 31.1252 34.4016 31.9285 33.5973C32.7319 32.793 33.1921 31.6946 33.2083 30.5425V16.9575C33.2071 16.4009 33.0989 15.85 32.8899 15.3365C32.6809 14.823 32.3752 14.3569 31.9904 13.965ZM18.47 6.68166C18.7058 6.46025 19.0138 6.33747 19.3333 6.33747C19.6528 6.33747 19.9608 6.46025 20.1966 6.68166L28.5833 15.0417L20.1504 23.4017C19.9146 23.6231 19.6066 23.7459 19.2871 23.7459C18.9675 23.7459 18.6596 23.6231 18.4237 23.4017L10.0833 15.0417L18.47 6.68166ZM30.125 30.5425C30.1052 30.8533 29.9688 31.144 29.7445 31.3537C29.5203 31.5633 29.2256 31.6755 28.9225 31.6667H9.74415C9.44102 31.6755 9.14636 31.5633 8.9221 31.3537C8.69785 31.144 8.56147 30.8533 8.54165 30.5425V17.9708L14.7854 24.1458L12.2262 26.6792C11.9391 26.9758 11.7779 27.3771 11.7779 27.7954C11.7779 28.2137 11.9391 28.615 12.2262 28.9117C12.3695 29.066 12.5417 29.1891 12.7324 29.2734C12.9232 29.3578 13.1286 29.4017 13.3362 29.4025C13.7332 29.4009 14.1142 29.2421 14.4 28.9592L17.1287 26.2675C17.8065 26.6928 18.5853 26.9179 19.3796 26.9179C20.1738 26.9179 20.9527 26.6928 21.6304 26.2675L24.3591 28.9592C24.6449 29.2421 25.026 29.4009 25.4229 29.4025C25.6306 29.4017 25.8359 29.3578 26.0267 29.2734C26.2174 29.1891 26.3896 29.066 26.5329 28.9117C26.82 28.615 26.9812 28.2137 26.9812 27.7954C26.9812 27.3771 26.82 26.9758 26.5329 26.6792L23.9583 24.1458L30.125 17.9708V30.5425Z"
fill="#581ff8"
/>
</svg>
</span>
<p data-type='p' className="text-2xl font-extrabold text-dark-grey-900">Email</p>
<p data-type='p' className="text-base leading-7 text-dark-grey-600">Contact us at</p>
<a data-type='a'
className="text-lg font-bold text-purple-blue-500"
href="mailto: [email protected]"
>
[email protected]
</a>
</div>
<div data-type='div' className="flex flex-col items-center gap-3 px-8 py-10 bg-white rounded-3xl shadow-main">
<span data-type='span'>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={38}
height={38}
viewBox="0 0 38 38"
fill="none"
>
<path data-type='path'
d="M30.4237 20.5833C30.0846 20.5833 29.73 20.4725 29.3908 20.3933C28.7045 20.2357 28.0297 20.0294 27.3712 19.7758C26.656 19.5086 25.8699 19.5225 25.164 19.8148C24.4582 20.1071 23.8826 20.6572 23.5479 21.3592L23.2087 22.0875C21.7115 21.2154 20.3283 20.1513 19.0925 18.9208C17.8944 17.6516 16.8583 16.231 16.0092 14.6933L16.7183 14.3608C17.4018 14.0171 17.9374 13.4259 18.222 12.701C18.5067 11.9761 18.5202 11.1687 18.26 10.4342C18.0151 9.7518 17.8143 9.05363 17.6587 8.34417C17.5817 7.99584 17.52 7.63167 17.4737 7.28334C17.2865 6.16807 16.7177 5.1581 15.8698 4.4353C15.0219 3.7125 13.9506 3.32439 12.8487 3.34084H8.20832C7.55657 3.33996 6.91201 3.48056 6.31687 3.75343C5.72174 4.02629 5.18948 4.42526 4.75498 4.92417C4.31148 5.43662 3.98125 6.04161 3.78698 6.69756C3.59271 7.35351 3.53901 8.04489 3.62957 8.72417C4.4676 15.3142 7.39927 21.4362 11.97 26.1408C16.5508 30.8351 22.5117 33.846 28.9283 34.7067C29.1284 34.7224 29.3294 34.7224 29.5296 34.7067C30.6664 34.7084 31.7641 34.28 32.6129 33.5033C33.0987 33.0571 33.4871 32.5105 33.7528 31.8992C34.0185 31.288 34.1554 30.626 34.1546 29.9567V25.2067C34.1463 24.1126 33.7705 23.0551 33.0907 22.2127C32.411 21.3704 31.4689 20.7948 30.4237 20.5833ZM31.1791 30.0833C31.1786 30.3043 31.1331 30.5227 31.0455 30.7245C30.9579 30.9263 30.8301 31.107 30.6704 31.255C30.5014 31.4131 30.3004 31.5306 30.0817 31.5991C29.8631 31.6676 29.6323 31.6852 29.4062 31.6508C23.6532 30.8792 18.3066 28.1865 14.19 23.9875C10.0698 19.756 7.4252 14.2458 6.66665 8.31251C6.63316 8.08028 6.65037 7.84332 6.71702 7.61877C6.78368 7.39422 6.89813 7.1877 7.05207 7.01417C7.19794 6.84816 7.3764 6.71577 7.57569 6.62571C7.77499 6.53565 7.99059 6.48997 8.20832 6.49167H12.8333C13.1897 6.48273 13.5381 6.6009 13.8192 6.82607C14.1002 7.05124 14.2967 7.3695 14.375 7.72667C14.375 8.15417 14.5137 8.59751 14.6062 9.025C14.7844 9.85446 15.0214 10.6694 15.3154 11.4633L13.1571 12.5083C12.7861 12.6832 12.4978 13.0021 12.3554 13.395C12.2012 13.7805 12.2012 14.2129 12.3554 14.5983C14.5742 19.4794 18.3945 23.4029 23.1471 25.6817C23.5224 25.84 23.9434 25.84 24.3187 25.6817C24.7013 25.5354 25.0118 25.2393 25.1821 24.8583L26.1533 22.6417C26.9487 22.9395 27.7624 23.1828 28.5891 23.37C28.99 23.465 29.4217 23.5442 29.8379 23.6075C30.1857 23.6879 30.4956 23.8897 30.7148 24.1784C30.934 24.467 31.0491 24.8248 31.0404 25.1908L31.1791 30.0833ZM22.0833 3.16667C21.7287 3.16667 21.3587 3.16667 21.0042 3.16667C20.5953 3.20237 20.217 3.40341 19.9524 3.72558C19.6879 4.04776 19.5588 4.46466 19.5935 4.88459C19.6283 5.30451 19.824 5.69306 20.1377 5.96476C20.4514 6.23645 20.8574 6.36903 21.2662 6.33334H22.0833C24.5366 6.33334 26.8893 7.33423 28.6241 9.11582C30.3588 10.8974 31.3333 13.3138 31.3333 15.8333C31.3333 16.1183 31.3333 16.3875 31.3333 16.6725C31.2991 17.0902 31.4276 17.5048 31.6906 17.8253C31.9536 18.1459 32.3296 18.3463 32.7362 18.3825H32.8596C33.2455 18.3841 33.618 18.237 33.9034 17.9702C34.1889 17.7035 34.3665 17.3364 34.4012 16.9417C34.4012 16.5775 34.4012 16.1975 34.4012 15.8333C34.4012 12.4767 33.104 9.25725 30.7943 6.88225C28.4847 4.50724 25.3516 3.17087 22.0833 3.16667ZM25.1667 15.8333C25.1667 16.2533 25.3291 16.656 25.6182 16.9529C25.9073 17.2499 26.2994 17.4167 26.7083 17.4167C27.1172 17.4167 27.5093 17.2499 27.7984 16.9529C28.0876 16.656 28.25 16.2533 28.25 15.8333C28.25 14.1536 27.6003 12.5427 26.4438 11.355C25.2873 10.1673 23.7188 9.50001 22.0833 9.50001C21.6744 9.50001 21.2823 9.66682 20.9932 9.96375C20.7041 10.2607 20.5417 10.6634 20.5417 11.0833C20.5417 11.5033 20.7041 11.906 20.9932 12.2029C21.2823 12.4999 21.6744 12.6667 22.0833 12.6667C22.9011 12.6667 23.6853 13.0003 24.2636 13.5942C24.8418 14.188 25.1667 14.9935 25.1667 15.8333Z"
fill="#581ff8"
/>
</svg>
</span>
<p data-type='p' className="text-2xl font-extrabold text-dark-grey-900">Phone</p>
<p data-type='p' className="text-base leading-7 text-dark-grey-600">
Reach out to us by phone
</p>
<a data-type='a'
className="text-lg font-bold text-purple-blue-500"
href="tel:+516-486-5135"
>
+516-486-5135
</a>
</div>
<div data-type='div' className="flex flex-col items-center gap-3 px-8 py-10 bg-white rounded-3xl shadow-main">
<span data-type='span'>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={38}
height={38}
viewBox="0 0 38 38"
fill="none"
>
<path data-type='path'
d="M31.7091 15.2475C31.4927 12.9341 30.6966 10.7177 29.3984 8.81412C28.1003 6.91054 26.3443 5.38464 24.3014 4.38503C22.2585 3.38541 19.9984 2.94614 17.7412 3.10998C15.4839 3.27383 13.3065 4.03522 11.4208 5.32C9.8008 6.43252 8.44083 7.89972 7.43858 9.6162C6.43633 11.3327 5.81667 13.2558 5.62413 15.2475C5.43524 17.2261 5.67758 19.2231 6.33355 21.0936C6.98953 22.9641 8.04269 24.6611 9.41663 26.0617L17.5875 34.4692C17.7308 34.6176 17.9013 34.7354 18.0892 34.8157C18.277 34.8961 18.4785 34.9375 18.682 34.9375C18.8856 34.9375 19.0871 34.8961 19.2749 34.8157C19.4628 34.7354 19.6333 34.6176 19.7766 34.4692L27.9166 26.0617C29.2906 24.6611 30.3437 22.9641 30.9997 21.0936C31.6557 19.2231 31.898 17.2261 31.7091 15.2475ZM25.7583 23.8292L18.6666 31.1125L11.575 23.8292C10.5298 22.7557 9.72928 21.4578 9.23081 20.0288C8.73233 18.5997 8.54834 17.075 8.69204 15.5642C8.83668 14.0301 9.31143 12.5482 10.082 11.2256C10.8525 9.90299 11.8996 8.77278 13.1475 7.91666C14.7831 6.80079 16.703 6.20555 18.6666 6.20555C20.6302 6.20555 22.5502 6.80079 24.1858 7.91666C25.4299 8.76947 26.4747 9.89469 27.245 11.2115C28.0154 12.5283 28.4922 14.0039 28.6412 15.5325C28.7896 17.0484 28.6079 18.5793 28.1093 20.0142C27.6107 21.4491 26.8076 22.7522 25.7583 23.8292ZM18.6666 9.5C17.2945 9.5 15.9532 9.91787 14.8124 10.7008C13.6715 11.4837 12.7823 12.5965 12.2572 13.8984C11.7321 15.2003 11.5947 16.6329 11.8624 18.015C12.1301 19.3971 12.7908 20.6667 13.7611 21.6631C14.7313 22.6596 15.9674 23.3382 17.3132 23.6131C18.6589 23.888 20.0538 23.7469 21.3215 23.2076C22.5892 22.6684 23.6726 21.7551 24.4349 20.5834C25.1972 19.4117 25.6041 18.0342 25.6041 16.625C25.6001 14.7366 24.8678 12.9268 23.5677 11.5915C22.2675 10.2562 20.5053 9.50418 18.6666 9.5ZM18.6666 20.5833C17.9043 20.5833 17.1592 20.3512 16.5254 19.9162C15.8916 19.4813 15.3976 18.8631 15.1058 18.1398C14.8141 17.4165 14.7378 16.6206 14.8865 15.8528C15.0352 15.0849 15.4023 14.3796 15.9413 13.826C16.4803 13.2724 17.1671 12.8955 17.9147 12.7427C18.6623 12.59 19.4373 12.6684 20.1416 12.968C20.8458 13.2676 21.4477 13.7749 21.8712 14.4259C22.2947 15.0768 22.5208 15.8421 22.5208 16.625C22.5208 17.6748 22.1147 18.6816 21.3919 19.424C20.6691 20.1663 19.6888 20.5833 18.6666 20.5833Z"
fill="#581ff8"
/>
</svg>
</span>
<p data-type='p' className="text-2xl font-extrabold text-dark-grey-900">Location</p>
<p data-type='p' className="text-base leading-7 text-dark-grey-600">
Find us at our office
</p>
<a data-type='a'
className="text-lg font-bold text-purple-blue-500"
target="_blank"
href="https://goo.gl/maps/QcWzYETAh4FS3KTD7"
>
10924 Urna Convallis
</a>
</div>
</div>
</div>
</div>Header With Navbar And Image
Component from
Motion Landing Library React
Builder
<div data-type='div' className="container flex flex-col mx-auto draggable">
<div data-type='div' className="relative flex flex-wrap items-center justify-between w-full bg-white group py-7 shrink-0">
<div data-type='div'>
<img data-type='img'
className="h-8"
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-nav-0.png"
/>
</div>
<div data-type='div' className="items-center justify-between hidden gap-12 text-black md:flex">
<a data-type='a'
className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
href="javascript:void(0)"
>
Product
</a>
<a data-type='a'
className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
href="javascript:void(0)"
>
Features
</a>
<a data-type='a'
className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
href="javascript:void(0)"
>
Pricing
</a>
<a data-type='a'
className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
href="javascript:void(0)"
>
Company
</a>
</div>
<div data-type='div' className="items-center hidden gap-8 md:flex">
<button data-type='button' className="flex items-center text-sm font-normal text-gray-800 hover:text-gray-900 transition duration-300">
Log In
</button>
<button data-type='button' className="flex items-center px-4 py-2 text-sm font-bold rounded-xl bg-purple-blue-100 text-purple-blue-600 hover:bg-purple-blue-600 hover:text-white transition duration-300">
Sign Up
</button>
</div>
<button data-type='button'
className="flex md:hidden"
>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path data-type='path'
d="M3 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H3C2.73478 6 2.48043 6.10536 2.29289 6.29289C2.10536 6.48043 2 6.73478 2 7C2 7.26522 2.10536 7.51957 2.29289 7.70711C2.48043 7.89464 2.73478 8 3 8ZM21 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z"
fill="black"
/>
</svg>
</button>
<div data-type='div' className="absolute flex md:hidden transition-all duration-300 ease-in-out flex-col items-start shadow-main justify-center w-full gap-3 overflow-hidden bg-white max-h-0 group-[.open]:py-4 px-4 rounded-2xl group-[.open]:max-h-64 top-full">
<a data-type='a'
className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
href="javascript:void(0)"
>
Product
</a>
<a data-type='a'
className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
href="javascript:void(0)"
>
Features
</a>
<a data-type='a'
className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
href="javascript:void(0)"
>
Pricing
</a>
<a data-type='a'
className="text-sm font-normal text-dark-grey-700 hover:text-dark-grey-900"
href="javascript:void(0)"
>
Company
</a>
<button data-type='button' className="flex items-center text-sm font-normal text-black">
Log In
</button>
<button data-type='button' className="flex items-center px-4 py-2 text-sm font-bold rounded-xl bg-purple-blue-100 text-purple-blue-600 hover:bg-purple-blue-600 hover:text-white transition duration-300">
Sign Up
</button>
</div>
</div>
<div data-type='div' className="grid w-full grid-cols-1 my-auto mt-12 mb-8 md:grid-cols-2 xl:gap-14 md:gap-5">
<div data-type='div' className="flex flex-col justify-center col-span-1 text-center lg:text-start">
<div data-type='div' className="flex items-center justify-center mb-4 lg:justify-normal">
<img data-type='img'
className="h-5"
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-1.png"
alt="logo"
/>
<h4 data-type='h4' className="ml-2 text-sm font-bold tracking-widest text-primary uppercase">
Explore the Latest Tailwind Template
</h4>
</div>
<h1 data-type='h1' className="mb-8 text-4xl font-extrabold leading-tight lg:text-6xl text-dark-grey-900">
Elevate your website with Motion
</h1>
<p data-type='p' className="mb-6 text-base font-normal leading-7 lg:w-3/4 text-grey-900">
Say goodbye to endless hours spent on building templates from scratch.
Experience the quickest, most responsive, and trendiest dashboard
solution available. Seriously.
</p>
<div data-type='div' className="flex flex-col items-center gap-4 lg:flex-row">
<button data-type='button' className="flex items-center py-4 text-sm font-bold text-white px-7 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300 rounded-xl">
Get started now
</button>
<button data-type='button' className="flex items-center py-4 text-sm font-medium px-7 text-dark-grey-700 hover:text-dark-grey-900 transition duration-300 rounded-2xl">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-5 h-5 mr-2"
>
<path data-type='path'
fillRule="evenodd"
d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"
clipRule="evenodd"
/>
</svg>
Book a free call
</button>
</div>
</div>
<div data-type='div' className="items-center justify-end hidden col-span-1 md:flex">
<img data-type='img'
className="w-4/5 rounded-md"
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/header-1.png"
alt="header image"
/>
</div>
</div>
</div>How It Works Section With Image
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col items-center gap-16 mx-auto my-32">
<div data-type='div' className="grid w-full grid-cols-1 gap-32 lg:grid-cols-2">
<div data-type='div' className="bg-cover bg-center hidden lg:block rounded-3xl overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/auth-3-bg.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col gap-16">
<div data-type='div' className="flex flex-col gap-2 text-center md:text-start">
<h2 data-type='h2' className="text-3xl font-extrabold md:text-4xl lg:text-5xl text-dark-grey-900">
How Motion Works?
</h2>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Motion's operation involves seamlessly integrating various functions
to deliver optimal performance. Our platform is designed to provide
efficient solutions and streamline your experience.
</p>
</div>
<div data-type='div' className="grid w-full grid-cols-1 md:grid-cols-2 gap-y-16 gap-x-10">
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
1
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Exquisite Culinary Creations
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Explore a world of flavors that will tantalize your taste buds.
</p>
</div>
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
2
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Seamless Dining Coordination
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
We make sure every culinary journey detail is perfect.
</p>
</div>
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
3
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Savor the Ambiance
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Immerse yourself in a captivating dining ambiance.
</p>
</div>
<div data-type='div' className="flex flex-col items-start gap-1">
<div data-type='div' className="flex items-center justify-center w-12 h-12 rounded-full bg-purple-blue-500 mb-2">
<span data-type='span' className="text-base font-bold leading-7 text-white">
4
</span>
</div>
<h3 data-type='h3' className="text-base font-bold leading-tight text-dark-grey-900">
Gourmet Delights
</h3>
<p data-type='p' className="text-base font-medium leading-7 text-dark-grey-600">
Treat your palate to an array of gourmet dishes.
</p>
</div>
</div>
</div>
</div>
</div>
</div>Feature With 3 Cards
Component from
Motion Landing Library React
Builder
<div data-type='div' className="h-full mx-auto lg:container draggable">
<div data-type='div' className="flex flex-col items-center justify-center h-full">
<div data-type='div' className="grid grid-cols-1 gap-10 mt-20 lg:grid-cols-3 px-5">
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M22.8233 8C22.8233 7.28 22.4533 6.65 21.8833 6.3L12.8333 1L3.78331 6.3C3.21331 6.65 2.83331 7.28 2.83331 8V18C2.83331 19.1 3.73331 20 4.83331 20H20.8333C21.9333 20 22.8333 19.1 22.8333 18L22.8233 8ZM20.8233 8V8.01L12.8333 13L4.83331 8L12.8333 3.32L20.8233 8ZM4.83331 18V10.34L12.8333 15.36L20.8233 10.37L20.8333 18H4.83331Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Seamless Web Integration
</h4>
<p data-type='p' className="font-medium text-grey-700">
Integrate our shared team inboxes seamlessly with your website.
Enhance the user experience and provide efficient communication
channels.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5 bg-white shadow-main rounded-3xl">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M3.28996 14.78L3.19996 14.69C2.80996 14.3 2.80996 13.67 3.19996 13.28L9.28996 7.18C9.67996 6.79 10.31 6.79 10.7 7.18L13.99 10.47L20.38 3.29C20.76 2.86 21.43 2.85 21.83 3.25C22.2 3.63 22.22 4.23 21.87 4.62L14.7 12.69C14.32 13.12 13.66 13.14 13.25 12.73L9.99996 9.48L4.69996 14.78C4.31996 15.17 3.67996 15.17 3.28996 14.78ZM4.69996 20.78L9.99996 15.48L13.25 18.73C13.66 19.14 14.32 19.12 14.7 18.69L21.87 10.62C22.22 10.23 22.2 9.63 21.83 9.25C21.43 8.85 20.76 8.86 20.38 9.29L13.99 16.47L10.7 13.18C10.31 12.79 9.67996 12.79 9.28996 13.18L3.19996 19.28C2.80996 19.67 2.80996 20.3 3.19996 20.69L3.28996 20.78C3.67996 21.17 4.31996 21.17 4.69996 20.78Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Effortless Team Management
</h4>
<p data-type='p' className="font-medium text-grey-700">
Manage your team effortlessly with our shared team inboxes. Simplify
team reporting and ensure smooth operations.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M15.8766 12.71C16.857 11.9387 17.5726 10.8809 17.9239 9.68394C18.2751 8.48697 18.2445 7.21027 17.8364 6.03147C17.4283 4.85267 16.6629 3.83039 15.6467 3.10686C14.6305 2.38332 13.4141 1.99451 12.1666 1.99451C10.9192 1.99451 9.70274 2.38332 8.68655 3.10686C7.67037 3.83039 6.90497 4.85267 6.49684 6.03147C6.0887 7.21027 6.05814 8.48697 6.40938 9.68394C6.76063 10.8809 7.47623 11.9387 8.45662 12.71C6.7767 13.383 5.31091 14.4994 4.21552 15.9399C3.12012 17.3805 2.43619 19.0913 2.23662 20.89C2.22218 21.0213 2.23374 21.1542 2.27065 21.2811C2.30756 21.4079 2.36909 21.5263 2.45173 21.6293C2.61864 21.8375 2.86141 21.9708 3.12662 22C3.39184 22.0292 3.65778 21.9518 3.86595 21.7849C4.07411 21.618 4.20745 21.3752 4.23662 21.11C4.45621 19.1552 5.38831 17.3498 6.85484 16.0388C8.32137 14.7278 10.2195 14.003 12.1866 14.003C14.1537 14.003 16.0519 14.7278 17.5184 16.0388C18.9849 17.3498 19.917 19.1552 20.1366 21.11C20.1638 21.3557 20.2811 21.5827 20.4657 21.747C20.6504 21.9114 20.8894 22.0015 21.1366 22H21.2466C21.5088 21.9698 21.7483 21.8373 21.9132 21.6313C22.078 21.4252 22.1547 21.1624 22.1266 20.9C21.9261 19.0962 21.2385 17.381 20.1375 15.9382C19.0364 14.4954 17.5635 13.3795 15.8766 12.71ZM12.1666 12C11.3755 12 10.6021 11.7654 9.94434 11.3259C9.28655 10.8864 8.77385 10.2616 8.4711 9.53074C8.16835 8.79983 8.08914 7.99557 8.24348 7.21964C8.39782 6.44372 8.77879 5.73099 9.3382 5.17158C9.89761 4.61217 10.6103 4.2312 11.3863 4.07686C12.1622 3.92252 12.9665 4.00173 13.6974 4.30448C14.4283 4.60724 15.053 5.11993 15.4925 5.77772C15.932 6.43552 16.1666 7.20888 16.1666 8C16.1666 9.06087 15.7452 10.0783 14.9951 10.8284C14.2449 11.5786 13.2275 12 12.1666 12Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Gain Insights with Analytics
</h4>
<p data-type='p' className="font-medium text-grey-700">
Gain valuable insights and data analytics for your team through our
analytics dashboard. Make informed decisions and track your progress
effectively.
</p>
</div>
</div>
</div>
</div>
</div>Footer Centered With Logo
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col mx-auto">
<div data-type='div' className="flex flex-col items-center w-full my-20">
<span data-type='span' className="mb-8">
<svg data-type='svg'
width={140}
viewBox="0 0 419 95"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path data-type='path'
d="M121.4 69V25.32H132.6V30.68C133.72 28.5467 135.347 26.9733 137.48 25.96C139.613 24.8933 142.067 24.36 144.84 24.36C147.72 24.36 150.333 24.9733 152.68 26.2C155.08 27.3733 156.893 29 158.12 31.08C159.667 28.7867 161.587 27.1067 163.88 26.04C166.227 24.92 168.813 24.36 171.64 24.36C174.787 24.36 177.56 25.0533 179.96 26.44C182.413 27.8267 184.333 29.7733 185.72 32.28C187.107 34.7333 187.8 37.6133 187.8 40.92V69H175.8V43.48C175.8 40.9733 175.107 38.9733 173.72 37.48C172.387 35.9333 170.547 35.16 168.2 35.16C165.853 35.16 163.987 35.9333 162.6 37.48C161.267 38.9733 160.6 40.9733 160.6 43.48V69H148.6V43.48C148.6 40.9733 147.907 38.9733 146.52 37.48C145.187 35.9333 143.347 35.16 141 35.16C138.653 35.16 136.787 35.9333 135.4 37.48C134.067 38.9733 133.4 40.9733 133.4 43.48V69H121.4ZM217.377 69.96C213.057 69.96 209.11 68.9733 205.537 67C202.017 65.0267 199.19 62.3333 197.057 58.92C194.977 55.4533 193.937 51.5333 193.937 47.16C193.937 42.7333 194.977 38.8133 197.057 35.4C199.19 31.9867 202.017 29.2933 205.537 27.32C209.11 25.3467 213.057 24.36 217.377 24.36C221.697 24.36 225.617 25.3467 229.137 27.32C232.657 29.2933 235.457 31.9867 237.537 35.4C239.67 38.8133 240.737 42.7333 240.737 47.16C240.737 51.5333 239.67 55.4533 237.537 58.92C235.457 62.3333 232.657 65.0267 229.137 67C225.617 68.9733 221.697 69.96 217.377 69.96ZM217.377 59.16C220.63 59.16 223.27 58.04 225.297 55.8C227.324 53.56 228.337 50.68 228.337 47.16C228.337 43.6933 227.324 40.84 225.297 38.6C223.27 36.3067 220.63 35.16 217.377 35.16C214.124 35.16 211.457 36.3067 209.377 38.6C207.35 40.84 206.337 43.6933 206.337 47.16C206.337 50.68 207.35 53.56 209.377 55.8C211.457 58.04 214.124 59.16 217.377 59.16ZM268.065 69.48C262.785 69.48 258.678 68.0667 255.745 65.24C252.865 62.36 251.425 58.36 251.425 53.24V35.72H244.065V25.32H244.465C249.105 25.32 251.425 23.08 251.425 18.6V15.4H263.425V25.32H273.665V35.72H263.425V52.44C263.425 56.8667 265.905 59.08 270.865 59.08C271.612 59.08 272.545 59 273.665 58.84V69C272.865 69.1067 271.958 69.2133 270.945 69.32C269.932 69.4267 268.972 69.48 268.065 69.48ZM280.697 21.4V9.39999H292.697V21.4H280.697ZM280.697 69V25.32H292.697V69H280.697ZM323.158 69.96C318.838 69.96 314.891 68.9733 311.318 67C307.798 65.0267 304.971 62.3333 302.838 58.92C300.758 55.4533 299.718 51.5333 299.718 47.16C299.718 42.7333 300.758 38.8133 302.838 35.4C304.971 31.9867 307.798 29.2933 311.318 27.32C314.891 25.3467 318.838 24.36 323.158 24.36C327.478 24.36 331.398 25.3467 334.918 27.32C338.438 29.2933 341.238 31.9867 343.318 35.4C345.451 38.8133 346.518 42.7333 346.518 47.16C346.518 51.5333 345.451 55.4533 343.318 58.92C341.238 62.3333 338.438 65.0267 334.918 67C331.398 68.9733 327.478 69.96 323.158 69.96ZM323.158 59.16C326.411 59.16 329.051 58.04 331.078 55.8C333.105 53.56 334.118 50.68 334.118 47.16C334.118 43.6933 333.105 40.84 331.078 38.6C329.051 36.3067 326.411 35.16 323.158 35.16C319.905 35.16 317.238 36.3067 315.158 38.6C313.131 40.84 312.118 43.6933 312.118 47.16C312.118 50.68 313.131 53.56 315.158 55.8C317.238 58.04 319.905 59.16 323.158 59.16ZM353.588 69V25.32H364.788V30.68C365.908 28.5467 367.534 26.9733 369.668 25.96C371.801 24.8933 374.254 24.36 377.028 24.36C380.334 24.36 383.214 25.0533 385.668 26.44C388.174 27.8267 390.121 29.7733 391.508 32.28C392.894 34.7333 393.588 37.6133 393.588 40.92V69H381.588V43.48C381.588 40.9733 380.841 38.9733 379.348 37.48C377.854 35.9333 375.934 35.16 373.588 35.16C371.241 35.16 369.321 35.9333 367.828 37.48C366.334 38.9733 365.588 40.9733 365.588 43.48V69H353.588Z"
fill="url(#paint0_linear_1001_3)"
/>
<path data-type='path'
d="M34.2138 5.86107C34.7122 4.28095 36.3972 3.40401 37.9773 3.90239L76.9347 16.1896C78.5148 16.688 79.3917 18.373 78.8934 19.9531L72.8993 38.9574C72.2692 40.9554 69.8371 41.7086 68.188 40.4165L52.7882 28.3503C52.2168 27.9025 51.5023 27.6772 50.7773 27.7161L31.2415 28.7635C29.1495 28.8757 27.5896 26.8634 28.2198 24.8654L34.2138 5.86107Z"
fill="url(#paint1_linear_1001_3)"
/>
<path data-type='path'
d="M13.3226 80.1965C11.7071 80.5642 10.0994 79.5527 9.73164 77.9371L0.665552 38.1067C0.297829 36.4912 1.30938 34.8834 2.92491 34.5157L22.3551 30.093C24.3979 29.6281 26.2761 31.347 25.9936 33.4229L23.3549 52.808C23.2569 53.5274 23.4232 54.2578 23.8228 54.864L34.5917 71.1973C35.7449 72.9464 34.7957 75.3089 32.7529 75.7738L13.3226 80.1965Z"
fill="url(#paint2_linear_1001_3)"
/>
<path data-type='path'
d="M87.9774 60.8205C89.0945 62.0441 89.008 63.9417 87.7843 65.0587L57.6148 92.5988C56.3911 93.7158 54.4936 93.6294 53.3766 92.4057L39.9419 77.6883C38.5294 76.141 39.0976 73.6592 41.0426 72.8806L59.2053 65.6098C59.8793 65.34 60.4326 64.835 60.7626 64.1883L69.6548 46.762C70.6071 44.8959 73.1303 44.5557 74.5427 46.103L87.9774 60.8205Z"
fill="url(#paint3_linear_1001_3)"
/>
<defs data-type='defs' >
<linearGradient data-type='linearGradient'
id="paint0_linear_1001_3"
x1={268}
y1={0}
x2={268}
y2={86}
gradientUnits="userSpaceOnUse"
>
<stop data-type='stop' stopColor="#1A31A7" />
<stop data-type='stop' offset={1} stopColor="#7C3AED" />
</linearGradient>
<linearGradient data-type='linearGradient'
id="paint1_linear_1001_3"
x1="62.4802"
y1="11.9181"
x2="43.6919"
y2="47.2867"
gradientUnits="userSpaceOnUse"
>
<stop data-type='stop' stopColor="#1A31A7" />
<stop data-type='stop' offset={1} stopColor="#7C3AED" />
</linearGradient>
<linearGradient data-type='linearGradient'
id="paint2_linear_1001_3"
x1="4.27748"
y1="52.74"
x2="44.293"
y2="51.0974"
gradientUnits="userSpaceOnUse"
>
<stop data-type='stop' stopColor="#1A31A7" />
<stop data-type='stop' offset={1} stopColor="#7C3AED" />
</linearGradient>
<linearGradient data-type='linearGradient'
id="paint3_linear_1001_3"
x1="68.56"
y1="82.2363"
x2="47.3853"
y2="48.2426"
gradientUnits="userSpaceOnUse"
>
<stop data-type='stop' stopColor="#1A31A7" />
<stop data-type='stop' offset={1} stopColor="#7C3AED" />
</linearGradient>
</defs>
</svg>
</span>
<div data-type='div' className="flex flex-col items-center gap-6 mb-8">
<div data-type='div' className="flex flex-wrap items-center justify-center gap-5 lg:gap-12 gap-y-3 lg:flex-nowrap text-dark-grey-900">
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
About
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Features
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Blog
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Resources
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Partners
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Help
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-gray-600 hover:text-gray-900"
>
Terms
</a>
</div>
<div data-type='div' className="flex items-center gap-8">
<a data-type='a'
href="javascript:void(0)"
className="text-grey-700 hover:text-grey-900"
>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M13.6348 20.7273V12.766H16.3582L16.7668 9.66246H13.6348V7.68128C13.6348 6.78301 13.8881 6.17085 15.2029 6.17085L16.877 6.17017V3.39424C16.5875 3.35733 15.5937 3.27273 14.437 3.27273C12.0216 3.27273 10.368 4.71881 10.368 7.37391V9.66246H7.63636V12.766H10.368V20.7273H13.6348Z"
fill="currentColor"
/>
<mask data-type='mask'
id="mask0_3320_6483"
maskType="luminance"
maskUnits="userSpaceOnUse"
x={7}
y={3}
width={10}
height={18}
>x
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M13.6348 20.7273V12.766H16.3582L16.7668 9.66246H13.6348V7.68128C13.6348 6.78301 13.8881 6.17085 15.2029 6.17085L16.877 6.17017V3.39424C16.5875 3.35733 15.5937 3.27273 14.437 3.27273C12.0216 3.27273 10.368 4.71881 10.368 7.37391V9.66246H7.63636V12.766H10.368V20.7273H13.6348Z"
fill="white"
/>
</mask>
<g data-type='g' mask="url(#mask0_3320_6483)"></g>
</svg>
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-grey-700 hover:text-grey-900"
>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M21.8182 6.14597C21.1356 6.44842 20.4032 6.65355 19.6337 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.207 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4058 9.03391C9.24436 8.87512 6.44106 7.36048 4.56485 5.05894C4.23688 5.61985 4.0503 6.27342 4.0503 6.97109C4.0503 8.29106 4.72246 9.45573 5.74227 10.1371C5.11879 10.1163 4.53239 9.94476 4.01903 9.65967V9.70718C4.01903 11.5498 5.33088 13.0876 7.07033 13.4376C6.75164 13.5234 6.41558 13.5709 6.06791 13.5709C5.82224 13.5709 5.58467 13.5465 5.35173 13.5002C5.83612 15.0125 7.2407 16.1123 8.90485 16.1424C7.60343 17.1622 5.96246 17.7683 4.18012 17.7683C3.87303 17.7683 3.57055 17.7498 3.27273 17.7162C4.95658 18.7974 6.95564 19.4278 9.10418 19.4278C16.1026 19.4278 19.9281 13.6312 19.9281 8.60397L19.9153 8.11145C20.6628 7.57833 21.3094 6.90851 21.8182 6.14597Z"
fill="currentColor"
/>
<mask data-type='mask'
id="mask0_3320_6484"
maskType="luminance"
maskUnits="userSpaceOnUse"
x={3}
y={4}
width={19}
height={16}
>
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M21.8182 6.14597C21.1356 6.44842 20.4032 6.65355 19.6337 6.74512C20.4194 6.27461 21.0208 5.5283 21.3059 4.64176C20.5689 5.07748 19.7553 5.39388 18.8885 5.56539C18.1943 4.82488 17.207 4.36364 16.1118 4.36364C14.0108 4.36364 12.3072 6.06718 12.3072 8.16706C12.3072 8.46488 12.3408 8.75576 12.4058 9.03391C9.24436 8.87512 6.44106 7.36048 4.56485 5.05894C4.23688 5.61985 4.0503 6.27342 4.0503 6.97109C4.0503 8.29106 4.72246 9.45573 5.74227 10.1371C5.11879 10.1163 4.53239 9.94476 4.01903 9.65967V9.70718C4.01903 11.5498 5.33088 13.0876 7.07033 13.4376C6.75164 13.5234 6.41558 13.5709 6.06791 13.5709C5.82224 13.5709 5.58467 13.5465 5.35173 13.5002C5.83612 15.0125 7.2407 16.1123 8.90485 16.1424C7.60343 17.1622 5.96246 17.7683 4.18012 17.7683C3.87303 17.7683 3.57055 17.7498 3.27273 17.7162C4.95658 18.7974 6.95564 19.4278 9.10418 19.4278C16.1026 19.4278 19.9281 13.6312 19.9281 8.60397L19.9153 8.11145C20.6628 7.57833 21.3094 6.90851 21.8182 6.14597Z"
fill="white"
/>
</mask>
<g data-type='g' mask="url(#mask0_3320_6484)"></g>
</svg>
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-grey-700 hover:text-grey-900"
>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path data-type='path'
d="M12 3C7.0275 3 3 7.13211 3 12.2284C3 16.3065 5.5785 19.7648 9.15375 20.9841C9.60375 21.0709 9.76875 20.7853 9.76875 20.5403C9.76875 20.3212 9.76125 19.7405 9.7575 18.9712C7.254 19.5277 6.726 17.7332 6.726 17.7332C6.3165 16.6681 5.72475 16.3832 5.72475 16.3832C4.9095 15.8111 5.78775 15.8229 5.78775 15.8229C6.6915 15.887 7.16625 16.7737 7.16625 16.7737C7.96875 18.1847 9.273 17.777 9.7875 17.5414C9.8685 16.9443 10.1003 16.5381 10.3575 16.3073C8.35875 16.0764 6.258 15.2829 6.258 11.7471C6.258 10.7399 6.60675 9.91659 7.18425 9.27095C7.083 9.03774 6.77925 8.0994 7.263 6.82846C7.263 6.82846 8.01675 6.58116 9.738 7.77462C10.458 7.56958 11.223 7.46785 11.988 7.46315C12.753 7.46785 13.518 7.56958 14.238 7.77462C15.948 6.58116 16.7017 6.82846 16.7017 6.82846C17.1855 8.0994 16.8818 9.03774 16.7917 9.27095C17.3655 9.91659 17.7142 10.7399 17.7142 11.7471C17.7142 15.2923 15.6105 16.0725 13.608 16.2995C13.923 16.5765 14.2155 17.1423 14.2155 18.0071C14.2155 19.242 14.2043 20.2344 14.2043 20.5341C14.2043 20.7759 14.3617 21.0647 14.823 20.9723C18.4237 19.7609 21 16.3002 21 12.2284C21 7.13211 16.9703 3 12 3Z"
fill="currentColor"
/>
</svg>
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-grey-700 hover:text-grey-900"
>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={18}
height={18}
viewBox="0 0 18 18"
fill="none"
>
<path data-type='path'
d="M16.2 0H1.8C0.81 0 0 0.81 0 1.8V16.2C0 17.19 0.81 18 1.8 18H16.2C17.19 18 18 17.19 18 16.2V1.8C18 0.81 17.19 0 16.2 0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.15 5.67 2.43 4.95 2.43 4.05C2.43 3.15 3.15 2.43 4.05 2.43C4.95 2.43 5.67 3.15 5.67 4.05C5.67 4.95 4.95 5.67 4.05 5.67ZM15.3 15.3H12.6V10.53C12.6 9.81004 11.97 9.18 11.25 9.18C10.53 9.18 9.9 9.81004 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.35 7.56 11.34 7.02 12.15 7.02C13.86 7.02 15.3 8.46 15.3 10.17V15.3Z"
fill="currentColor"
/>
</svg>
</a>
<a data-type='a'
href="javascript:void(0)"
className="text-grey-700 hover:text-grey-900"
>
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M7.60063 2.18182H16.3991C19.3873 2.18182 21.8183 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3873 21.8182 16.3991 21.8182H7.60063C4.6127 21.8182 2.18182 19.3873 2.18182 16.3993V7.60074C2.18182 4.61281 4.6127 2.18182 7.60063 2.18182ZM16.3993 20.0759C18.4266 20.0759 20.0761 18.4266 20.0761 16.3993H20.0759V7.60074C20.0759 5.57348 18.4265 3.92405 16.3991 3.92405H7.60063C5.57336 3.92405 3.92405 5.57348 3.92405 7.60074V16.3993C3.92405 18.4266 5.57336 20.0761 7.60063 20.0759H16.3993ZM6.85714 12.0001C6.85714 9.16424 9.16418 6.85714 12 6.85714C14.8358 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8358 17.1429 12 17.1429C9.16418 17.1429 6.85714 14.8359 6.85714 12.0001ZM8.62798 12C8.62798 13.8593 10.1407 15.3719 12 15.3719C13.8593 15.3719 15.372 13.8593 15.372 12C15.372 10.1406 13.8594 8.6279 12 8.6279C10.1406 8.6279 8.62798 10.1406 8.62798 12Z"
fill="currentColor"
/>
<mask data-type='mask'
id="mask0_3320_6487"
maskType="luminance"
maskUnits="userSpaceOnUse"
x={2}
y={2}
width={20}
height={20}
>
<path data-type='path'
fillRule="evenodd"
clipRule="evenodd"
d="M7.60063 2.18182H16.3991C19.3873 2.18182 21.8183 4.61281 21.8182 7.60074V16.3993C21.8182 19.3872 19.3873 21.8182 16.3991 21.8182H7.60063C4.6127 21.8182 2.18182 19.3873 2.18182 16.3993V7.60074C2.18182 4.61281 4.6127 2.18182 7.60063 2.18182ZM16.3993 20.0759C18.4266 20.0759 20.0761 18.4266 20.0761 16.3993H20.0759V7.60074C20.0759 5.57348 18.4265 3.92405 16.3991 3.92405H7.60063C5.57336 3.92405 3.92405 5.57348 3.92405 7.60074V16.3993C3.92405 18.4266 5.57336 20.0761 7.60063 20.0759H16.3993ZM6.85714 12.0001C6.85714 9.16424 9.16418 6.85714 12 6.85714C14.8358 6.85714 17.1429 9.16424 17.1429 12.0001C17.1429 14.8359 14.8358 17.1429 12 17.1429C9.16418 17.1429 6.85714 14.8359 6.85714 12.0001ZM8.62798 12C8.62798 13.8593 10.1407 15.3719 12 15.3719C13.8593 15.3719 15.372 13.8593 15.372 12C15.372 10.1406 13.8594 8.6279 12 8.6279C10.1406 8.6279 8.62798 10.1406 8.62798 12Z"
fill="white"
/>
</mask>
<g data-type='g' mask="url(#mask0_3320_6487)"></g>
</svg>
</a>
</div>
</div>
<div data-type='div' className="flex items-center">
<p data-type='p' className="text-base font-normal leading-7 text-center text-grey-700">
© 2023 Motion Tailwind CSS Library. All rights reserved.
</p>
</div>
</div>
</div>
</div>Call To Action With Text And Subscribe Input
Component from
Motion Landing Library React
Builder
<div data-type='div' className="container mx-auto draggable">
<div data-type='div' className="flex flex-col items-center justify-center w-full h-full my-auto text-center">
<h2 data-type='h2' className="w-full mb-4 text-4xl font-extrabold leading-tight text-dark-grey-900">
Unlock Motion's Immediate Benefits
</h2>
<p data-type='p' className="mb-10 text-lg font-normal lg:w-6/12 text-grey-700">
Experience Motion like never before with instant access. Our platform
offers unparalleled features and advantages to elevate your experience.
</p>
<div data-type='div' className="flex flex-col items-center justify-center w-full gap-4 mb-4 md:flex-row">
<div data-type='div' className="relative flex items-center">
<span data-type='span' className="absolute ml-3">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-5 h-5 text-grey-700"
>
<path data-type='path'
strokeLinecap="round"
d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"
/>
</svg>
</span>
<input data-type='input'
type="search"
placeholder="E-mail address"
className="flex items-center py-2 pl-10 pr-3 text-sm font-medium border border-solid outline-none grow placeholder:text-dark-grey-500 placeholder:text-sm placeholder:font-medium border-grey-500 focus:border-grey-600 text-dark-grey-900 rounded-xl"
/>
</div>
<button data-type='button' className="flex items-center px-4 py-2 text-sm font-bold text-white border rounded-xl border-purple-blue-500 bg-purple-blue-500 hover:bg-purple-blue-600 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">
Get Free Access
</button>
</div>
</div>
</div>Feature With Icon Title And Description
Component from
Motion Landing Library React
Builder
<div data-type='div' className="container mx-auto draggable">
<div data-type='div' className="flex flex-col items-center justify-center h-full">
<div data-type='div' className="flex flex-col items-center justify-center mt-12">
<h2 data-type='h2' className="mb-4 text-3xl font-extrabold leading-tight text-center lg:text-4xl text-dark-grey-900">
Elevate Your Productivity with Motion
</h2>
<p data-type='p' className="text-lg text-center lg:w-7/12 text-grey-700">
Unlock the full potential of your workflow with Windbase. Our platform
is designed to streamline your operations and boost productivity.
Experience the difference as we help you save time and work more
efficiently.
</p>
</div>
<div data-type='div' className="grid grid-cols-1 gap-10 mt-20 lg:grid-cols-3 md:grid-cols-2">
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M22.8233 8C22.8233 7.28 22.4533 6.65 21.8833 6.3L12.8333 1L3.78331 6.3C3.21331 6.65 2.83331 7.28 2.83331 8V18C2.83331 19.1 3.73331 20 4.83331 20H20.8333C21.9333 20 22.8333 19.1 22.8333 18L22.8233 8ZM20.8233 8V8.01L12.8333 13L4.83331 8L12.8333 3.32L20.8233 8ZM4.83331 18V10.34L12.8333 15.36L20.8233 10.37L20.8333 18H4.83331Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Streamline Team Communication
</h4>
<p data-type='p' className="font-medium text-grey-700">
Streamline communication within your team using our shared team
inboxes. Enhance collaboration and keep everyone on the same page
effortlessly.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5 bg-white shadow-main rounded-3xl">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M3.28996 14.78L3.19996 14.69C2.80996 14.3 2.80996 13.67 3.19996 13.28L9.28996 7.18C9.67996 6.79 10.31 6.79 10.7 7.18L13.99 10.47L20.38 3.29C20.76 2.86 21.43 2.85 21.83 3.25C22.2 3.63 22.22 4.23 21.87 4.62L14.7 12.69C14.32 13.12 13.66 13.14 13.25 12.73L9.99996 9.48L4.69996 14.78C4.31996 15.17 3.67996 15.17 3.28996 14.78ZM4.69996 20.78L9.99996 15.48L13.25 18.73C13.66 19.14 14.32 19.12 14.7 18.69L21.87 10.62C22.22 10.23 22.2 9.63 21.83 9.25C21.43 8.85 20.76 8.86 20.38 9.29L13.99 16.47L10.7 13.18C10.31 12.79 9.67996 12.79 9.28996 13.18L3.19996 19.28C2.80996 19.67 2.80996 20.3 3.19996 20.69L3.28996 20.78C3.67996 21.17 4.31996 21.17 4.69996 20.78Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Gain Insights with Analytics
</h4>
<p data-type='p' className="font-medium text-grey-700">
Gain valuable insights and data analytics for your team through our
analytics dashboard. Make informed decisions and track your progress
effectively.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M15.8766 12.71C16.857 11.9387 17.5726 10.8809 17.9239 9.68394C18.2751 8.48697 18.2445 7.21027 17.8364 6.03147C17.4283 4.85267 16.6629 3.83039 15.6467 3.10686C14.6305 2.38332 13.4141 1.99451 12.1666 1.99451C10.9192 1.99451 9.70274 2.38332 8.68655 3.10686C7.67037 3.83039 6.90497 4.85267 6.49684 6.03147C6.0887 7.21027 6.05814 8.48697 6.40938 9.68394C6.76063 10.8809 7.47623 11.9387 8.45662 12.71C6.7767 13.383 5.31091 14.4994 4.21552 15.9399C3.12012 17.3805 2.43619 19.0913 2.23662 20.89C2.22218 21.0213 2.23374 21.1542 2.27065 21.2811C2.30756 21.4079 2.36909 21.5263 2.45173 21.6293C2.61864 21.8375 2.86141 21.9708 3.12662 22C3.39184 22.0292 3.65778 21.9518 3.86595 21.7849C4.07411 21.618 4.20745 21.3752 4.23662 21.11C4.45621 19.1552 5.38831 17.3498 6.85484 16.0388C8.32137 14.7278 10.2195 14.003 12.1866 14.003C14.1537 14.003 16.0519 14.7278 17.5184 16.0388C18.9849 17.3498 19.917 19.1552 20.1366 21.11C20.1638 21.3557 20.2811 21.5827 20.4657 21.747C20.6504 21.9114 20.8894 22.0015 21.1366 22H21.2466C21.5088 21.9698 21.7483 21.8373 21.9132 21.6313C22.078 21.4252 22.1547 21.1624 22.1266 20.9C21.9261 19.0962 21.2385 17.381 20.1375 15.9382C19.0364 14.4954 17.5635 13.3795 15.8766 12.71ZM12.1666 12C11.3755 12 10.6021 11.7654 9.94434 11.3259C9.28655 10.8864 8.77385 10.2616 8.4711 9.53074C8.16835 8.79983 8.08914 7.99557 8.24348 7.21964C8.39782 6.44372 8.77879 5.73099 9.3382 5.17158C9.89761 4.61217 10.6103 4.2312 11.3863 4.07686C12.1622 3.92252 12.9665 4.00173 13.6974 4.30448C14.4283 4.60724 15.053 5.11993 15.4925 5.77772C15.932 6.43552 16.1666 7.20888 16.1666 8C16.1666 9.06087 15.7452 10.0783 14.9951 10.8284C14.2449 11.5786 13.2275 12 12.1666 12Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Provide Instant Solutions
</h4>
<p data-type='p' className="font-medium text-grey-700">
Deliver instant answers to your customers or team members with our
shared team inboxes. Ensure quick responses and efficient
problem-solving.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M7.83331 4C7.83331 2.89 6.94331 2 5.83331 2C4.72331 2 3.83331 2.89 3.83331 4C3.83331 5.11 4.72331 6 5.83331 6C6.94331 6 7.83331 5.11 7.83331 4ZM11.0233 4.5C10.6133 4.5 10.2633 4.75 10.1033 5.13C9.66331 6.23 8.59331 7 7.33331 7H4.33331C3.50331 7 2.83331 7.67 2.83331 8.5V11H8.83331V8.74C10.2633 8.29 11.4133 7.21 11.9533 5.83C12.2133 5.19 11.7133 4.5 11.0233 4.5ZM19.8333 17C20.9433 17 21.8333 16.11 21.8333 15C21.8333 13.89 20.9433 13 19.8333 13C18.7233 13 17.8333 13.89 17.8333 15C17.8333 16.11 18.7233 17 19.8333 17ZM21.3333 18H18.3333C17.0733 18 16.0033 17.23 15.5633 16.13C15.4133 15.75 15.0533 15.5 14.6433 15.5C13.9533 15.5 13.4533 16.19 13.7033 16.83C14.2533 18.21 15.3933 19.29 16.8233 19.74V22H22.8233V19.5C22.8333 18.67 22.1633 18 21.3333 18ZM18.0833 11.09C18.0833 11.09 18.0833 11.08 18.0933 11.09C17.0333 11.36 16.1933 12.2 15.9233 13.26V13.25C15.8133 13.68 15.4133 14 14.9433 14C14.3933 14 13.9433 13.55 13.9433 13C13.9433 12.95 13.9633 12.86 13.9633 12.86C14.3933 11.01 15.8533 9.55 17.7133 9.13C17.7533 9.13 17.7933 9.12 17.8333 9.12C18.3833 9.12 18.8333 9.57 18.8333 10.12C18.8333 10.58 18.5133 10.98 18.0833 11.09ZM18.8333 6.06C18.8333 6.57 18.4633 6.98 17.9733 7.05C14.7833 7.44 12.2733 9.96 11.8833 13.15C11.8133 13.63 11.3933 14 10.8933 14C10.3433 14 9.89331 13.55 9.89331 13C9.89331 12.98 9.89331 12.96 9.89331 12.94C9.89331 12.93 9.89331 12.92 9.89331 12.91C10.3933 8.79 13.6833 5.53 17.8133 5.06H17.8233C18.3833 5.06 18.8333 5.51 18.8333 6.06Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Enhance Customer Connections
</h4>
<p data-type='p' className="font-medium text-grey-700">
Connect with your customers seamlessly using our shared team
inboxes. Improve customer interactions and build stronger
relationships.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M10.5 13H3.49998C3.23477 13 2.98041 13.1054 2.79288 13.2929C2.60534 13.4804 2.49998 13.7348 2.49998 14V21C2.49998 21.2652 2.60534 21.5196 2.79288 21.7071C2.98041 21.8946 3.23477 22 3.49998 22H10.5C10.7652 22 11.0196 21.8946 11.2071 21.7071C11.3946 21.5196 11.5 21.2652 11.5 21V14C11.5 13.7348 11.3946 13.4804 11.2071 13.2929C11.0196 13.1054 10.7652 13 10.5 13ZM9.49998 20H4.49998V15H9.49998V20ZM21.5 2H14.5C14.2348 2 13.9804 2.10536 13.7929 2.29289C13.6053 2.48043 13.5 2.73478 13.5 3V10C13.5 10.2652 13.6053 10.5196 13.7929 10.7071C13.9804 10.8946 14.2348 11 14.5 11H21.5C21.7652 11 22.0196 10.8946 22.2071 10.7071C22.3946 10.5196 22.5 10.2652 22.5 10V3C22.5 2.73478 22.3946 2.48043 22.2071 2.29289C22.0196 2.10536 21.7652 2 21.5 2ZM20.5 9H15.5V4H20.5V9ZM21.5 13H14.5C14.2348 13 13.9804 13.1054 13.7929 13.2929C13.6053 13.4804 13.5 13.7348 13.5 14V21C13.5 21.2652 13.6053 21.5196 13.7929 21.7071C13.9804 21.8946 14.2348 22 14.5 22H21.5C21.7652 22 22.0196 21.8946 22.2071 21.7071C22.3946 21.5196 22.5 21.2652 22.5 21V14C22.5 13.7348 22.3946 13.4804 22.2071 13.2929C22.0196 13.1054 21.7652 13 21.5 13ZM20.5 20H15.5V15H20.5V20ZM10.5 2H3.49998C3.23477 2 2.98041 2.10536 2.79288 2.29289C2.60534 2.48043 2.49998 2.73478 2.49998 3V10C2.49998 10.2652 2.60534 10.5196 2.79288 10.7071C2.98041 10.8946 3.23477 11 3.49998 11H10.5C10.7652 11 11.0196 10.8946 11.2071 10.7071C11.3946 10.5196 11.5 10.2652 11.5 10V3C11.5 2.73478 11.3946 2.48043 11.2071 2.29289C11.0196 2.10536 10.7652 2 10.5 2ZM9.49998 9H4.49998V4H9.49998V9Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Seamless Web Integration
</h4>
<p data-type='p' className="font-medium text-grey-700">
Integrate our shared team inboxes seamlessly with your website.
Enhance the user experience and provide efficient communication
channels.{""}
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-center col-span-1 gap-6 px-10 py-5">
<div data-type='div'>
<div data-type='div' className="flex items-center justify-center w-16 h-16 rounded-2xl bg-purple-blue-500">
<svg data-type='svg'
xmlns="http://www.w3.org/2000/svg"
width={25}
height={24}
viewBox="0 0 25 24"
fill="none"
>
<path data-type='path'
d="M10.1666 14C9.90141 14 9.64706 14.1054 9.45952 14.2929C9.27198 14.4804 9.16663 14.7348 9.16663 15V21C9.16663 21.2652 9.27198 21.5196 9.45952 21.7071C9.64706 21.8946 9.90141 22 10.1666 22C10.4318 22 10.6862 21.8946 10.8737 21.7071C11.0613 21.5196 11.1666 21.2652 11.1666 21V15C11.1666 14.7348 11.0613 14.4804 10.8737 14.2929C10.6862 14.1054 10.4318 14 10.1666 14ZM5.16663 18C4.90141 18 4.64706 18.1054 4.45952 18.2929C4.27198 18.4804 4.16663 18.7348 4.16663 19V21C4.16663 21.2652 4.27198 21.5196 4.45952 21.7071C4.64706 21.8946 4.90141 22 5.16663 22C5.43184 22 5.6862 21.8946 5.87373 21.7071C6.06127 21.5196 6.16663 21.2652 6.16663 21V19C6.16663 18.7348 6.06127 18.4804 5.87373 18.2929C5.6862 18.1054 5.43184 18 5.16663 18ZM20.1666 2C19.9014 2 19.6471 2.10536 19.4595 2.29289C19.272 2.48043 19.1666 2.73478 19.1666 3V21C19.1666 21.2652 19.272 21.5196 19.4595 21.7071C19.6471 21.8946 19.9014 22 20.1666 22C20.4318 22 20.6862 21.8946 20.8737 21.7071C21.0613 21.5196 21.1666 21.2652 21.1666 21V3C21.1666 2.73478 21.0613 2.48043 20.8737 2.29289C20.6862 2.10536 20.4318 2 20.1666 2ZM15.1666 9C14.9014 9 14.6471 9.10536 14.4595 9.29289C14.272 9.48043 14.1666 9.73478 14.1666 10V21C14.1666 21.2652 14.272 21.5196 14.4595 21.7071C14.6471 21.8946 14.9014 22 15.1666 22C15.4318 22 15.6862 21.8946 15.8737 21.7071C16.0613 21.5196 16.1666 21.2652 16.1666 21V10C16.1666 9.73478 16.0613 9.48043 15.8737 9.29289C15.6862 9.10536 15.4318 9 15.1666 9Z"
fill="white"
/>
</svg>
</div>
</div>
<div data-type='div' className="flex flex-col gap-2 px-2 text-center">
<h4 data-type='h4' className="text-2xl font-extrabold text-dark-grey-900">
Effortless Team Management
</h4>
<p data-type='p' className="font-medium text-grey-700">
Manage your team effortlessly with our shared team inboxes. Simplify
team reporting and ensure smooth operations.{""}
</p>
</div>
</div>
</div>
</div>
</div>Team Section With Images
Component from
Motion Landing Library React
Builder
<div data-type='div' className="w-full draggable">
<div data-type='div' className="container flex flex-col mx-auto my-20 gap-14">
<div data-type='div' className="w-full text-center md:text-start">
<h2 data-type='h2' className="mb-6 text-4xl font-extrabold leading-tight md:text-5xl text-dark-grey-900">
Meet the Exceptional Team
</h2>
<p data-type='p' className="text-lg font-normal md:w-7/12 text-dark-grey-500">
Our dedicated professionals bring unparalleled expertise and commitment
to every endeavor. We believe in the art of innovation, and our passion
propels us forward. Experience the excellence that sets us apart.
</p>
</div>
<div data-type='div' className="grid w-full grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-1.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Olivia Baker
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Director of Finance
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Olivia is our financial wizard, meticulously managing our finances,
investments, and budgets.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-2.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Andrew Foster
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Senior Product Manager
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Andrew oversees our product development, turning ideas into
market-ready solutions.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-3.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Jessica Lee
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Customer Relations Manager
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Jessica is our customer champion, ensuring every client interaction
is a positive one.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-4.jpeg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Richard Ward
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Creative Design Lead
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Richard is our creative genius, transforming ideas into captivating
visuals.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-6.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Michael Chang
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Head of Operations
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Michael is the mastermind behind our efficient operations. He
ensures our processes run like a well-oiled machine.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-9.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Sarah Mitchell
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Chief Marketing Officer (CMO)
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Sarah is the creative force behind our brand. Her marketing prowess
and strategic thinking drive business growth.
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-14.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
David Rodriguez
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Chief Technology Officer (CTO)
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
David is our tech guru, spearheading innovation and ensuring our
products are cutting-edge.{""}
</p>
</div>
</div>
<div data-type='div' className="flex flex-col items-start gap-4">
<div data-type='div' className="w-20 h-20 rounded-full bg-cover bg-center overflow-hidden">
<img data-type='img'
src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-11.jpg"
className="object-cover"
/>
</div>
<div data-type='div' className="flex flex-col items-start">
<p data-type='p' className="text-xl font-extrabold leading-normal text-dark-grey-900">
Emily Clarke
</p>
<p data-type='p' className="text-lg font-bold text-purple-blue-500">
Chief Executive Officer (CEO)
</p>
</div>
<div data-type='div'>
<p data-type='p' className="text-base font-medium leading-8 text-dark-grey-500">
Emily leads our company with a visionary zeal, setting the strategic
direction and inspiring our team to achieve greatness.
</p>
</div>
</div>
</div>
</div>
</div>