mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2025-12-17 10:27:01 +00:00
875 lines
77 KiB
HTML
875 lines
77 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Landmark</title>
|
|
<!--
|
|
For more customization options, we would advise
|
|
you to build your TailwindCSS from the source.
|
|
https://tailwindcss.com/docs/installation
|
|
-->
|
|
<link rel="stylesheet" href="./../../dist/tailshape.css">
|
|
<!-- Small CSS to Hide elements at 1520px size -->
|
|
<style>
|
|
@media(max-width:1520px) {
|
|
.left-svg {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* small css for the mobile nav close */
|
|
#nav-mobile-btn.close span:first-child {
|
|
transform: rotate(45deg);
|
|
top: 4px;
|
|
position: relative;
|
|
background: #a0aec0;
|
|
}
|
|
|
|
#nav-mobile-btn.close span:nth-child(2) {
|
|
transform: rotate(-45deg);
|
|
margin-top: 0px;
|
|
background: #a0aec0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="overflow-x-hidden antialiased">
|
|
<!-- Header Section -->
|
|
<header class="relative z-50 w-full h-24">
|
|
<div
|
|
class="container flex items-center justify-center h-full max-w-6xl px-8 mx-auto sm:justify-between xl:px-0">
|
|
|
|
<a href="/" class="relative flex items-center inline-block h-5 h-full font-black leading-none">
|
|
<svg class="w-auto h-6 text-indigo-600 fill-current" viewBox="0 0 194 116"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g fill-rule="evenodd">
|
|
<path
|
|
d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z" />
|
|
<path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z" />
|
|
</g>
|
|
</svg>
|
|
<span class="ml-3 text-xl text-gray-800">Landmark<span class="text-pink-500">.</span></span>
|
|
</a>
|
|
|
|
<nav id="nav"
|
|
class="absolute top-0 left-0 z-50 flex flex-col items-center justify-between hidden w-full h-64 pt-5 mt-24 text-sm text-gray-800 bg-white border-t border-gray-200 md:w-auto md:flex-row md:h-24 lg:text-base md:bg-transparent md:mt-0 md:border-none md:py-0 md:flex md:relative">
|
|
<a href="#"
|
|
class="ml-0 mr-0 font-bold duration-100 md:ml-12 md:mr-3 lg:mr-8 transition-color hover:text-indigo-600">Home</a>
|
|
<a href="#features"
|
|
class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color hover:text-indigo-600">Features</a>
|
|
<a href="#pricing"
|
|
class="mr-0 font-bold duration-100 md:mr-3 lg:mr-8 transition-color hover:text-indigo-600">Pricing</a>
|
|
<a href="#testimonials"
|
|
class="font-bold duration-100 transition-color hover:text-indigo-600">Testimonials</a>
|
|
<div class="flex flex-col w-full font-medium border-t border-gray-200 md:hidden">
|
|
<a href="#_" class="w-full py-2 font-bold text-center text-pink-500">Login</a>
|
|
<a href="#_"
|
|
class="relative inline-block w-full px-5 py-3 text-sm leading-none text-center text-white bg-indigo-700 fold-bold">Get
|
|
Started</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div
|
|
class="absolute left-0 flex-col items-center justify-center hidden w-full pb-8 mt-48 border-b border-gray-200 md:relative md:w-auto md:bg-transparent md:border-none md:mt-0 md:flex-row md:p-0 md:items-end md:flex md:justify-between">
|
|
<a href="#_"
|
|
class="relative z-40 px-3 py-2 mr-0 text-sm font-bold text-pink-500 md:px-5 lg:text-white sm:mr-3 md:mt-0">Login</a>
|
|
<a href="#_"
|
|
class="relative z-40 inline-block w-auto h-full px-5 py-3 text-sm font-bold leading-none text-white transition-all transition duration-100 duration-300 bg-indigo-700 rounded shadow-md fold-bold lg:bg-white lg:text-indigo-700 sm:w-full lg:shadow-none hover:shadow-xl">Get
|
|
Started</a>
|
|
<svg class="absolute top-0 left-0 hidden w-screen max-w-3xl -mt-64 -ml-12 lg:block"
|
|
viewBox="0 0 818 815" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="c">
|
|
<stop stop-color="#E614F2" offset="0%" />
|
|
<stop stop-color="#FC3832" offset="100%" />
|
|
</linearGradient>
|
|
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="f">
|
|
<stop stop-color="#657DE9" offset="0%" />
|
|
<stop stop-color="#1C0FD7" offset="100%" />
|
|
</linearGradient>
|
|
<filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
|
|
id="a">
|
|
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
|
|
<feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" in="shadowBlurOuter1" />
|
|
</filter>
|
|
<filter x="-4.7%" y="-3.3%" width="109.3%" height="109.3%" filterUnits="objectBoundingBox"
|
|
id="d">
|
|
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
|
|
<feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter1" />
|
|
</filter>
|
|
<path
|
|
d="M160.52 108.243h497.445c17.83 0 24.296 1.856 30.814 5.342 6.519 3.486 11.635 8.602 15.12 15.12 3.487 6.52 5.344 12.985 5.344 30.815v497.445c0 17.83-1.857 24.296-5.343 30.814-3.486 6.519-8.602 11.635-15.12 15.12-6.52 3.487-12.985 5.344-30.815 5.344H160.52c-17.83 0-24.296-1.857-30.814-5.343-6.519-3.486-11.635-8.602-15.12-15.12-3.487-6.52-5.343-12.985-5.343-30.815V159.52c0-17.83 1.856-24.296 5.342-30.814 3.486-6.519 8.602-11.635 15.12-15.12 6.52-3.487 12.985-5.343 30.815-5.343z"
|
|
id="b" />
|
|
<path
|
|
d="M159.107 107.829H656.55c17.83 0 24.296 1.856 30.815 5.342 6.518 3.487 11.634 8.602 15.12 15.12 3.486 6.52 5.343 12.985 5.343 30.816V656.55c0 17.83-1.857 24.296-5.343 30.815-3.486 6.518-8.602 11.634-15.12 15.12-6.519 3.486-12.985 5.343-30.815 5.343H159.107c-17.83 0-24.297-1.857-30.815-5.343-6.519-3.486-11.634-8.602-15.12-15.12-3.487-6.519-5.343-12.985-5.343-30.815V159.107c0-17.83 1.856-24.297 5.342-30.815 3.487-6.519 8.602-11.634 15.12-15.12 6.52-3.487 12.985-5.343 30.816-5.343z"
|
|
id="e" />
|
|
</defs>
|
|
<g fill="none" fill-rule="evenodd" opacity=".9">
|
|
<g transform="rotate(65 416.452 409.167)">
|
|
<use fill="#000" filter="url(#a)" xlink:href="#b" />
|
|
<use fill="url(#c)" xlink:href="#b" />
|
|
</g>
|
|
<g transform="rotate(29 421.929 414.496)">
|
|
<use fill="#000" filter="url(#d)" xlink:href="#e" />
|
|
<use fill="url(#f)" xlink:href="#e" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="nav-mobile-btn"
|
|
class="absolute top-0 right-0 z-50 block w-6 mt-8 mr-10 cursor-pointer select-none md:hidden sm:mt-10">
|
|
<span class="block w-full h-1 mt-2 duration-200 transform bg-gray-800 rounded-full sm:mt-1"></span>
|
|
<span class="block w-full h-1 mt-1 duration-200 transform bg-gray-800 rounded-full"></span>
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
<!-- End Header Section-->
|
|
|
|
<!-- BEGIN HERO SECTION -->
|
|
<div class="relative items-center justify-center w-full overflow-x-hidden lg:pt-40 lg:pb-40 xl:pt-40 xl:pb-64">
|
|
<div
|
|
class="container flex flex-col items-center justify-between h-full max-w-6xl px-8 mx-auto -mt-32 lg:flex-row xl:px-0">
|
|
<div
|
|
class="z-30 flex flex-col items-center w-full max-w-xl pt-48 text-center lg:items-start lg:w-1/2 lg:pt-20 xl:pt-40 lg:text-left">
|
|
<h1 class="relative mb-4 text-3xl font-black leading-tight text-gray-900 sm:text-6xl xl:mb-8">Build the
|
|
Next
|
|
Great Thing</h1>
|
|
<p class="pr-0 mb-8 text-base text-gray-600 sm:text-lg xl:text-xl lg:pr-20">Are you ready to start your
|
|
adventure and start building the next greatest SAAS app on the market?</p>
|
|
<a href="#_"
|
|
class="relative self-start inline-block w-auto px-8 py-4 mx-auto mt-0 text-base font-bold text-white bg-indigo-600 border-t border-gray-200 rounded-md shadow-xl sm:mt-1 fold-bold lg:mx-0">Signup
|
|
Today!</a>
|
|
<!-- Integrates with section -->
|
|
<div class="flex-col hidden mt-12 sm:flex lg:mt-24">
|
|
<p class="mb-4 text-sm font-medium tracking-widest text-gray-500 uppercase">Integrates With</p>
|
|
<div class="flex">
|
|
<svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
|
|
viewBox="0 0 2499 1037" xmlns="http://www.w3.org/2000/svg">
|
|
<g stroke="none" stroke-width="1">
|
|
<g>
|
|
<path
|
|
d="M261.062 466.768c-53.833-19.912-83.335-35.399-83.335-59.735 0-20.652 16.963-32.45 47.201-32.45 55.31 0 112.09 21.388 151.178 40.559l22.124-136.427c-30.973-14.752-94.397-39.088-182.151-39.088-61.947 0-113.573 16.223-150.443 46.46-38.352 31.71-58.263 77.434-58.263 132.744 0 100.293 61.211 143.07 160.769 179.203 64.159 22.86 85.547 39.088 85.547 64.16 0 24.336-20.652 38.346-58.263 38.346-46.46 0-123.153-22.86-173.302-52.356L0 786.087c42.771 24.337 122.417 49.409 205.017 49.409 65.63 0 120.204-15.487 157.08-44.984 41.293-32.45 62.682-80.381 62.682-142.328 0-102.511-62.683-145.282-163.717-181.416zm523.877-80.387l22.124-135.692H690.265V85.966l-157.035 25.84-22.677 138.883-55.232 8.96-20.675 126.732h75.68v266.227c0 69.32 17.7 117.257 53.833 146.754 30.238 24.336 73.745 36.134 134.956 36.134 47.196 0 75.957-8.109 95.868-13.275V678.416c-11.062 2.953-36.133 8.114-53.097 8.114-36.134 0-51.62-18.435-51.62-60.47V386.38h94.673zm350.752-143.618c-51.62 0-92.92 27.102-109.142 75.775l-11.062-67.849H855.459v573.745h182.887V452.017c22.865-28.026 55.31-38.159 99.558-38.159 9.59 0 19.911 0 32.45 2.213V247.188c-12.539-2.948-23.6-4.425-34.663-4.425zm171.095-48.86c53.098 0 95.869-43.507 95.869-96.604 0-53.839-42.771-96.61-95.869-96.61-53.838 0-96.609 42.771-96.609 96.61 0 53.097 42.771 96.604 96.61 96.604zm-92.184 56.786h183.628v573.745h-183.628V250.689zm703.999 51.62c-32.45-42.035-77.434-62.682-134.956-62.682-53.097 0-99.558 22.124-143.07 68.584l-9.585-57.522h-160.769v786.134l182.893-30.232V822.22c28.02 8.85 56.78 13.275 82.594 13.275 45.725 0 112.096-11.798 163.717-67.843 49.408-53.839 74.485-137.168 74.485-247.052 0-97.345-18.44-171.09-55.31-218.291zm-151.92 353.983c-14.75 28.025-37.61 42.777-64.159 42.777-18.435 0-34.662-3.69-49.408-11.062V415.142c30.973-32.445 58.993-36.134 69.32-36.134 46.46 0 69.32 50.15 69.32 148.23 0 56.045-8.11 99.557-25.073 129.054zm731.566-123.894c0-91.443-19.912-163.717-59-214.602-39.822-51.62-99.557-78.169-175.514-78.169-155.608 0-252.212 115.044-252.212 299.408 0 103.247 25.808 180.68 76.692 230.089 45.725 44.248 111.361 66.372 196.168 66.372 78.169 0 150.442-18.435 196.167-48.673l-19.912-125.365c-44.989 24.336-97.345 37.61-156.344 37.61-35.398 0-59.734-7.378-77.434-22.864-19.175-16.223-30.237-42.771-33.921-80.382h303.097c.736-8.85 2.213-50.15 2.213-63.424zm-306.787-48.672c5.16-81.859 27.284-120.205 69.32-120.205 41.3 0 62.688 39.087 65.636 120.205H2191.46z" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
|
|
viewBox="0 0 2350 2315" xmlns="http://www.w3.org/2000/svg">
|
|
<g stroke="none" stroke-width="1"></g>
|
|
<g>
|
|
<path
|
|
d="M1175 0C525.8 0 0 525.8 0 1175c0 552.2 378.9 1010.5 890.1 1139.7-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4c-79.3 0-152.8-35.2-185.1-99.9-38.2-70.5-44.1-179.2-141-246.8-29.4-23.5-5.9-47 26.4-44.1 61.7 17.6 111.6 58.8 158.6 120.4 47 61.7 67.6 76.4 155.7 76.4 41.1 0 105.7-2.9 164.5-11.8 32.3-82.3 88.1-155.7 155.7-190.9-393.6-47-581.6-240.9-581.6-505.3 0-114.6 49.9-223.3 132.2-317.3-26.4-91.1-61.7-279.1 11.8-352.5 176.3 0 282 114.6 308.4 143.9 88.1-29.4 185.1-47 284.9-47 102.8 0 196.8 17.6 284.9 47 26.4-29.4 132.2-143.9 308.4-143.9 70.5 70.5 38.2 261.4 8.8 352.5 82.3 91.1 129.3 202.7 129.3 317.3 0 264.4-185.1 458.3-575.7 499.4 108.7 55.8 185.1 214.4 185.1 331.9V2256c0 8.8-2.9 17.6-2.9 26.4C2021 2123.8 2350 1689.1 2350 1175 2350 525.8 1824.2 0 1175 0z" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
|
|
viewBox="0 0 2500 2158" xmlns="http://www.w3.org/2000/svg">
|
|
<g stroke="none" stroke-width="1">
|
|
<g transform="translate(-.157)">
|
|
<path
|
|
d="M2498.932 499.093c-11.204 242.78-181.152 575.201-509.837 997.268-339.895 440.74-627.499 661.11-862.808 661.11-145.67 0-268.924-134.462-369.776-403.39l-201.693-739.547C480.115 745.61 399.81 611.145 313.904 611.145c-18.675 0-84.04 39.219-196.095 117.656L.155 577.53a31955.67 31955.67 0 00364.171-324.952C528.669 110.644 651.928 35.944 734.1 28.472c194.224-18.675 313.746 113.921 358.567 397.786 48.556 306.277 82.172 496.767 100.845 571.47 56.027 253.986 117.656 380.98 184.887 380.98 52.29 0 130.73-82.172 235.311-246.516 104.584-164.345 160.609-289.47 168.078-375.376 14.94-141.934-41.085-212.9-168.078-212.9-59.762 0-121.392 13.075-184.887 39.219C1552.082 183.48 1787.393-10.745 2134.757.462c257.721 7.471 379.113 173.683 364.17 498.635l.005-.004z" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
|
|
viewBox="0 0 680 680" xmlns="http://www.w3.org/2000/svg">
|
|
<g stroke="none" stroke-width="1">
|
|
<g transform="translate(-401 -701)">
|
|
<g transform="translate(-293 -236)">
|
|
<g transform="translate(463 909)">
|
|
<g transform="translate(0 28)">
|
|
<g transform="translate(229.885)">
|
|
<path
|
|
d="M242.088 0c-36.478.027-66 29.582-65.973 66-.027 36.418 29.522 65.973 66 66h66V66.027C308.142 29.608 278.593.054 242.088 0c.027 0 .027 0 0 0zm.23 175H66.912c-36.365.027-65.824 29.576-65.797 65.987-.054 36.41 29.405 65.96 65.77 66.013h175.433c36.366-.027 65.824-29.576 65.797-65.987.027-36.437-29.431-65.986-65.797-66.013zM681.115 240.987c.027-36.411-29.522-65.96-66-65.987-36.478.027-66.027 29.576-66 65.987V307h66c36.478-.027 66.027-29.576 66-66.013zm-175 .214V65.772C506.142 29.506 476.614.054 440.13 0c-36.486.027-66.04 29.48-66.014 65.772v175.429c-.054 36.293 29.501 65.745 65.987 65.799 36.485-.027 66.04-29.48 66.013-65.8zM440.115 680c36.478-.027 66.027-29.582 66-66 .027-36.418-29.522-65.973-66-66h-66v66c-.027 36.392 29.522 65.946 66 66zm-.23-175h175.433c36.366-.027 65.824-29.576 65.797-65.987.054-36.41-29.404-65.96-65.77-66.013H439.912c-36.366.027-65.824 29.576-65.797 65.987-.027 36.437 29.405 65.986 65.77 66.013zM1.115 439c-.027 36.418 29.522 65.973 66 66 36.478-.027 66.027-29.582 66-66v-66h-66c-36.478.027-66.027 29.582-66 66zm175-.249v175.444c-.054 36.296 29.501 65.751 65.987 65.805 36.485-.027 66.04-29.482 66.013-65.778V438.805c.054-36.296-29.501-65.751-65.986-65.805-36.513 0-66.04 29.455-66.014 65.751 0 0 0 .027 0 0z" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<svg class="h-8 mr-4 text-gray-500 duration-150 cursor-pointer fill-current transition-color hover:text-gray-600"
|
|
viewBox="0 0 1681 417" xmlns="http://www.w3.org/2000/svg">
|
|
<g stroke="none" stroke-width="1">
|
|
<g>
|
|
<path
|
|
d="M1621.33 306.03l.578.008c34.43 0 58.659-23.855 58.924-57.992.126-16.904-4.757-32.38-13.753-43.558-9.512-11.834-22.829-18.142-38.516-18.267h-.313c-21.17 0-40.83 16.062-60.1 49.112l-1.533 2.638-.984-2.875c-4.866-14.163-9.2-25.963-11.791-33.025-1.817-4.925-2.617-7.138-2.809-7.854-.925-3.575-3.979-5.796-7.987-5.796-2.463 0-5.08.837-7.554 2.412-2.455 1.563-3.825 3.471-4.317 6.021l-.125.383c-19.287 60.155-35.188 89.359-48.662 89.359-1.959-.017-3.492-.654-4.634-1.93-3.529-3.9-2.662-13.174-1.462-26.016.879-9.433 1.883-20.112 1.466-31.446-.791-21.787-12.716-34.87-31.879-35.012-24.358-.009-40.141 25.933-47.412 41.395l-2.171 4.609-.48-5.083c-1.816-19.134-8.237-41.988-28.512-42.138-23.65 0-41.667 27.75-52.658 51.042l-2.946 6.241.292-6.891c1.304-31.063 2.375-49.404 3.187-54.492.8-5.104.38-8.53-1.292-10.492-1.583-1.837-4.566-2.516-8.941-2.241-7.571.479-11.442 5.087-17.271 20.533-9.575 25.367-33.93 84.383-53.375 84.383-3.858-.029-6.912-1.341-9.15-3.912-8.154-9.346-4.892-34.621-.38-69.592l.342-2.646c2.138-16.558-1.504-20.091-10.5-21.745a15.487 15.487 0 00-2.733-.267c-7.183 0-10.541 6.879-17.25 25.996-11.937 34.016-27.291 69.791-45.241 69.791-.659 0-1.305-.05-1.967-.154-9.513-1.62-9.304-15.729-9.042-33.608.134-9.667.296-20.63-1.191-30.525-2.684-17.758-13.142-28.846-27.313-28.958-28.267 0-47.33 36.2-56.196 57.783l-2.008 4.883-.671-5.242a486.444 486.444 0 01-3.43-41.729l-.024-.52.32-.409c52.905-66.596 76.647-114.654 76.963-155.829.204-26.304-11.933-42.104-32.462-42.267-15.013 0-50.705 12.505-63.109 128.321a669.633 669.633 0 00-3.75 65.45l-.008.434-.246.35c-24.204 35.033-75.862 95.295-126.437 95.295-45.696 0-82.154-36.97-82.154-102.229 0-87.483 61.92-141.196 108.52-141.196h.388c10.125.075 18.808 2.904 25.108 8.18 6.542 5.474 9.971 13.15 9.9 22.191-.091 12.08-4.029 18.288-7.833 24.284-.971 1.545-1.95 3.079-2.842 4.704-.9 1.641-1.72 4.02-.525 6.058 1.225 2.087 4.354 3.4 8.167 3.43 11.091 0 27.866-16.06 28.05-40.25.192-25.322-21.138-51.413-59.192-51.413-57.587 0-135.15 63.266-135.15 165.8 0 72.529 45.475 122.658 107.075 122.658 43.713 0 86.954-31.3 125.25-83.58l2.346-3.166.167 3.934c.812 19.137 2.2 34.212 3.212 45.224.654 7.08 1.13 12.192 1.113 15.013-.05 6.18.954 10.48 3.091 13.112 2.13 2.638 5.513 3.884 10.646 3.917 8.6 0 10.325-5.862 13.73-20.329l.978-4.13c4.234-17.528 19.867-74.745 43.38-74.745 3.841.037 6.804 1.17 8.908 3.4 5.192 5.508 4.625 16.813 3.967 29.908-.417 8.171-.834 16.609-.017 24.83 2.213 22.191 11.796 33.045 29.292 33.17 17.966.009 36.716-19.346 46.612-37.329l1.867-3.387.729 3.808c1.825 9.625 9.992 41.217 35.563 41.217 23.175 0 43.058-24.404 64.85-74.634l2.854-6.558-.175 7.154c-.463 19.034-1.492 42.275-1.5 60.246-.009 13.9 1.396 19.204 7.82 19.204l1.459.067c6.162 0 10.346-3.68 12.433-10.954 16.4-57.155 30.571-83.771 44.613-83.771 13.75.104 15.037 25.246 16.141 69.67l.075 3.117c.334 15.538.896 22.413 10.546 22.484 7.325 0 9.146-5.755 12.934-19.921.725-2.7 1.508-5.663 2.437-8.863 13.242-45.937 24.217-64.679 37.883-64.679 11.7.088 12.35 12.15 12.567 16.113.45 8.487-.425 17.375-1.267 25.954-.787 7.975-1.596 16.225-1.291 23.887.716 17.967 10.55 27.938 27.7 28.067 22.258 0 42.35-26.033 59.946-77.358l1.22-3.575 1.396 3.52c3.196 8.067 7.354 18.988 11.2 32.017l.146.496-.213.47c-17.041 37.834-29.062 79.976-29.233 102.493-.229 29.654 13.188 48.925 34.184 49.087h.362c11.42 0 38.042-4.587 38.558-47.02.213-17.392-3.9-41.984-12.204-73.105l-.954-3.563 3.063 2.042c10.637 7.038 22.591 10.8 34.616 10.9zm-573.697-143.913c.475-10.634 1.371-20.988 2.642-30.78 8.242-63.091 25.433-107.15 41.83-107.15h.074c7.817.059 11.725 5.971 11.646 17.563-.225 28.487-18.275 69.27-53.642 121.217l-2.766 4.066.216-4.916zm522.804 226.82c-2.608 3.476-6.241 5.238-10.791 5.238-5.225-.046-9.15-1.863-11.821-5.433-7.483-9.996-5.375-33.496 6.833-76.15a370.41 370.41 0 014.717-15.234l1.417-4.254 1.245 4.304c14.221 49.238 17.046 80.03 8.4 91.53zm4.426-126.145l-.259-.471-.516-1.638.241-.487c16.217-33.417 34.8-52.571 50.967-52.571h.167c18.258.137 30.883 16.57 30.708 39.942-.121 15.6-7 24.583-12.742 29.37-6.554 5.467-15.283 8.592-23.95 8.592-21.367-.162-36.033-12.458-44.617-22.737zM540.55 300.504c25.033-2 44.892-36.046 52.267-50.596l1.9-3.75.72 4.142c3.542 20.458 14.671 54.833 49.484 55.108h.291c15.059 0 32.142-9.212 49.409-26.633l1.267-1.28.92 1.538c11.625 19.442 27.217 29.771 43.817 28.921 24.438-1.27 39.27-18.587 40.575-30.617.333-3.066-.475-5.954-2.23-7.9-2.195-2.45-5.387-2.733-7.728-.487l-1.121 1.058c-5.688 5.463-16.288 15.642-27.838 16.242-14.141.692-24.6-7.762-31.358-25.212l-.28-.734.476-.616c38.887-50.863 66.175-128.471 63.479-180.525-1.242-24.092-8.246-52.813-34.558-52.813l-1.963.05c-10.079.52-19.246 5.325-27.241 14.27-24.413 27.313-37.188 94.538-32.55 171.267.958 15.942 3.729 30.842 8.225 44.271l.254.754-.513.609c-14.429 16.862-28.667 26.15-40.091 26.15-27.488 0-26.563-46.092-24.392-84.309.47-8.241 1.167-13.491-1.271-16.475-1.742-2.137-4.658-3.191-8.908-3.225l-.496-.004c-9.784 0-11.83 2.013-16.833 16.53-10.413 30.158-30.967 80.77-51.642 80.77-5.73-.054-10.104-2.008-13.1-5.825-10.03-12.8-2.413-44.725 3.704-70.387 1.1-4.613 2.154-9.042 3.058-13.142 1.338-6.083.93-10.52-1.22-13.208-2.159-2.68-6.463-3.763-12.142-3.313-8.854.709-14.517 4.417-17.254 21.254l-.55 3.5-2.059-2.491c-3.866-5.708-11.404-12.508-25.4-12.508-1.225 0-2.495.05-3.808.154-14.933 1.225-31.938 11.629-44.383 27.158-14.53 18.13-21.471 41.075-19.538 64.62.1 1.247.28 2.442.459 3.63l.1.654-.45.496c-8.692 9.467-17.55 14.275-26.326 14.275-13.545-.1-21.316-10.167-21.316-26.938 0-28.225 19.129-113.32 19.129-144.125 0-32.783-14.608-50.629-39.975-50.825h-.383c-37.042 0-65.909 42.03-93.534 128.505a1413.034 1413.034 0 00-7.641 24.975l-3.88 13.004 1.146-13.517a1682.328 1682.328 0 005.238-87.112c1.375-41.792-4.271-68.688-17.275-82.221-7.013-7.3-16.288-10.896-28.371-10.988h-.308c-45.325 0-67.038 76.442-82.85 130.38-4.771 16.283-14.175 53.012-20.454 78.12l3.72-6.046c2.788-31.616 10.867-110.812 10.338-153.779-.575-46.091-15.917-66.754-49.771-67.012h-.417c-18.083 0-30.629 8.987-37.966 16.525C7.358 52.92.017 70.604.425 85.875c.25 9.283 5.946 17.546 10.262 17.546 2.813 0 4.371-3.754 5.046-5.992 10.475-34.62 24.03-51.454 41.421-51.454 7.213.054 12.583 2.18 16.6 6.5 13.592 14.58 11.117 53.946 6.638 125.417-1.45 23.033-3.084 49.129-4.463 78.816-.24 4.899-.527 9.795-.858 14.688-1.321 20.612-2.371 36.904 5.45 38.116 10.175 1.588 16.796-2.545 20.187-12.612 5.025-14.942 16.296-55.78 38.105-130.4 20.925-71.608 36.733-97.662 56.958-97.662 23.367 0 25.108 40.12 20.825 124.787-.913 17.95-2.133 38.28-3.071 60.4-.13 3.108-.275 6.125-.425 9.025-.9 18.32-1.608 32.767 3.625 38.308 1.633 1.725 3.85 2.58 6.787 2.596 10.13 0 13.175-8.879 18.221-23.6.892-2.596 1.838-5.37 2.892-8.27 34.708-95.746 60.37-178.817 94.817-178.817 10.329 0 18.37 8.391 18.37 24.758 0 37.78-18.475 110.775-18.475 147.792 0 13.262 3.817 25.162 11.026 33.529 7.4 8.591 17.754 13.166 29.941 13.27h.267c11.525 0 23.529-5.6 35.696-16.641l1.141-1.033.917 1.237c8.012 10.767 20.938 16.554 34.896 15.48 21.408-1.667 39.37-20.73 46.054-38.705l1.308-3.517 1.304 3.517c4.967 13.338 15.709 29.413 38.663 27.55zM737.817 50.33l.366-.008c2.446 0 4.596 1.225 6.38 3.65 8.5 11.492 8.629 53.437-5.992 101.162-8.354 27.275-19.592 53.042-32.484 74.504l-2.058 3.417-.525-3.954c-1.517-11.542-2.267-23.558-2.792-33.783-3.729-72.138 18.092-144 37.105-144.988zM500.283 218.925c-7.491 30.146-21.858 66.537-47.762 68.62l-2.108.088c-10.746 0-16.771-7.033-17.909-20.916-1.425-17.367 6.063-37.704 19.071-51.825 8.28-8.992 17.62-13.942 26.3-13.942h.175c10.954.083 18.633 8.88 22.162 17.083l.188.425-.117.467zm120.146-110.52c-9.562 0-17.283 7.532-17.358 16.795-.075 9.33 7.6 16.98 17.1 17.05l.137 1.387v-1.387c9.425 0 17.142-7.53 17.217-16.787.075-9.334-7.596-16.984-17.096-17.059zm601.221 0c-9.563 0-17.28 7.532-17.358 16.795-.075 9.33 7.596 16.98 17.1 17.05l.133 1.387v-1.387c9.433 0 17.15-7.53 17.225-16.787.067-9.334-7.6-16.984-17.1-17.059z" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<svg class="absolute left-0 max-w-md mt-24 -ml-64 left-svg" viewBox="0 0 423 423"
|
|
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<linearGradient x1="100%" y1="0%" x2="4.48%" y2="0%" id="linearGradient-1">
|
|
<stop stop-color="#5C54DB" offset="0%" />
|
|
<stop stop-color="#6A82E7" offset="100%" />
|
|
</linearGradient>
|
|
<filter x="-9.3%" y="-6.7%" width="118.7%" height="118.7%" filterUnits="objectBoundingBox"
|
|
id="filter-3">
|
|
<feOffset dy="8" in="SourceAlpha" result="shadowOffsetOuter1" />
|
|
<feGaussianBlur stdDeviation="8" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
|
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" in="shadowBlurOuter1" />
|
|
</filter>
|
|
<rect id="path-2" x="63" y="504" width="300" height="300" rx="40" />
|
|
</defs>
|
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity=".9">
|
|
<g id="Desktop-HD" transform="translate(-39 -531)">
|
|
<g id="Hero" transform="translate(43 83)">
|
|
<g id="Rectangle-6" transform="rotate(45 213 654)">
|
|
<use fill="#000" filter="url(#filter-3)" xlink:href="#path-2" />
|
|
<use fill="url(#linearGradient-1)" xlink:href="#path-2" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="relative z-50 flex flex-col items-end justify-center w-full h-full lg:w-1/2 ms:pl-10">
|
|
<div class="container relative left-0 w-full max-w-4xl lg:absolute xl:max-w-6xl lg:w-screen">
|
|
<img src="https://cdn.devdojo.com/images/september2020/macbook-mockup.png"
|
|
class="w-full h-auto mt-20 mb-20 ml-0 lg:mt-24 xl:mt-40 lg:mb-0 lg:h-full lg:-ml-12">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- HERO SECTION END -->
|
|
|
|
<!-- BEGIN FEATURES SECTION -->
|
|
<div id="features" class="relative w-full px-8 py-10 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
|
|
<div class="container flex flex-col items-center justify-between h-full max-w-6xl mx-auto">
|
|
<h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Features</h2>
|
|
<h3
|
|
class="max-w-2xl px-5 mt-2 text-3xl font-black leading-tight text-center text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl">
|
|
Built and Designed with you in Mind</h3>
|
|
<div class="flex flex-col w-full mt-0 lg:flex-row sm:mt-10 lg:mt-20">
|
|
|
|
<div class="w-full max-w-md p-4 mx-auto mb-0 sm:mb-16 lg:mb-0 lg:w-1/3">
|
|
<div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
|
|
<svg class="absolute w-full h-full text-gray-100 fill-current" viewBox="0 0 377 340"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g>
|
|
<g>
|
|
<path
|
|
d="M342.8 3.7c24.7 14 18.1 75 22.1 124s18.6 85.8 8.7 114.2c-9.9 28.4-44.4 48.3-76.4 62.4-32 14.1-61.6 22.4-95.9 28.9-34.3 6.5-73.3 11.1-95.5-6.2-22.2-17.2-27.6-56.5-47.2-96C38.9 191.4 5 151.5.9 108.2-3.1 64.8 22.7 18 61.8 8.7c39.2-9.2 91.7 19 146 16.6 54.2-2.4 110.3-35.6 135-21.6z" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<!-- FEATURE Icon 1 -->
|
|
<svg class="relative w-20 h-20" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1TriangleIcon1">
|
|
<stop stop-color="#9C09DB" offset="0%" />
|
|
<stop stop-color="#1C0FD7" offset="100%" />
|
|
</linearGradient>
|
|
<filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
|
|
id="filter-3TriangleIcon1">
|
|
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
|
|
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
|
|
result="shadowBlurOuter1" />
|
|
<feColorMatrix
|
|
values="0 0 0 0 0.141176471 0 0 0 0 0.031372549 0 0 0 0 0.501960784 0 0 0 0.15 0"
|
|
in="shadowBlurOuter1" />
|
|
</filter>
|
|
<path
|
|
d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
|
|
id="path-2TriangleIcon1" />
|
|
</defs>
|
|
<g id="Page-1TriangleIcon1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="Desktop-HDTriangleIcon1" transform="translate(-291 -1278)">
|
|
<g id="FeaturesTriangleIcon1" transform="translate(170 915)">
|
|
<g id="Group-9TriangleIcon1" transform="translate(0 365)">
|
|
<g id="Group-8TriangleIcon1" transform="translate(125)">
|
|
<g id="Rectangle-9TriangleIcon1">
|
|
<use fill="#000" filter="url(#filter-3TriangleIcon1)"
|
|
xlink:href="#path-2TriangleIcon1" />
|
|
<use fill="url(#linearGradient-1TriangleIcon1)"
|
|
xlink:href="#path-2TriangleIcon1" />
|
|
</g>
|
|
<g id="playTriangleIcon1" transform="translate(18 15)" fill="#FFF"
|
|
fill-rule="nonzero">
|
|
<path
|
|
d="M9.432 2.023l8.919 14.879a1.05 1.05 0 01-.384 1.452 1.097 1.097 0 01-.548.146H-.42A1.07 1.07 0 01-1.5 17.44c0-.19.052-.375.15-.538L7.567 2.023a1.092 1.092 0 011.864 0z"
|
|
id="TriangleIcon1" transform="rotate(90 8.5 10)" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<h4 class="relative mt-6 text-lg font-bold">Automated Tools</h4>
|
|
<p class="relative mt-2 text-base text-center text-gray-600">Automate your workflow with these
|
|
top of the
|
|
line marketing tools.</p>
|
|
<a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
|
|
More</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full max-w-md p-4 mx-auto mb-0 sm:mb-16 lg:mb-0 lg:w-1/3">
|
|
<div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
|
|
<svg class="absolute w-full h-full text-gray-100 fill-current" viewBox="0 0 358 372"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g>
|
|
<g>
|
|
<path
|
|
d="M315.7 6.5c30.2 15.1 42.6 61.8 41.5 102.5-1.1 40.6-15.7 75.2-24.3 114.8-8.7 39.7-11.3 84.3-34.3 107.2-23 22.9-66.3 23.9-114.5 30.7-48.2 6.7-101.3 19.1-123.2-4.1-21.8-23.2-12.5-82.1-21.6-130.2C30.2 179.3 2.6 141.9.7 102c-2-39.9 21.7-82.2 57.4-95.6 35.7-13.5 83.3 2.1 131.2 1.7 47.9-.4 96.1-16.8 126.4-1.6z" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<!-- FEATURE Icon 2 -->
|
|
<svg class="relative w-20 h-20" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1Icon2">
|
|
<stop stop-color="#F2C314" offset="0%" />
|
|
<stop stop-color="#FC3832" offset="100%" />
|
|
</linearGradient>
|
|
<filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
|
|
id="filter-3Icon2">
|
|
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
|
|
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
|
|
result="shadowBlurOuter1" />
|
|
<feColorMatrix
|
|
values="0 0 0 0 0.501960784 0 0 0 0 0.125490196 0 0 0 0 0 0 0 0 0.15 0"
|
|
in="shadowBlurOuter1" />
|
|
</filter>
|
|
<path
|
|
d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
|
|
id="path-2Icon2" />
|
|
</defs>
|
|
<g id="Page-1Icon2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="Desktop-HDIcon2" transform="translate(-691 -1278)">
|
|
<g id="FeaturesIcon2" transform="translate(170 915)">
|
|
<g id="Group-9-CopyIcon2" transform="translate(400 365)">
|
|
<g id="Group-8Icon2" transform="translate(125)">
|
|
<g id="Rectangle-9Icon2">
|
|
<use fill="#000" filter="url(#filter-3Icon2)"
|
|
xlink:href="#path-2Icon2" />
|
|
<use fill="url(#linearGradient-1Icon2)" xlink:href="#path-2Icon2" />
|
|
</g>
|
|
<g id="machine-learningIcon2" transform="translate(14 12)" fill="#FFF"
|
|
fill-rule="nonzero">
|
|
<path
|
|
d="M10.554 21.418v-2.68c-1.1-.204-1.932-1.143-1.932-2.271 0-.468.143-.903.388-1.267l-2.32-1.662L4.367 15.2a2.254 2.254 0 01-.005 2.541l5.28 4.05c.268-.182.577-.311.911-.373zm.892 0c.334.062.643.191.912.373l5.28-4.05a2.254 2.254 0 01-.006-2.54l-2.321-1.663L12.99 15.2c.245.364.388.8.388 1.267 0 1.128-.832 2.067-1.932 2.27v2.681zm1.538.997c.25.365.394.803.394 1.274C13.378 24.965 12.314 26 11 26s-2.378-1.035-2.378-2.311c0-.471.145-.91.394-1.274l-5.28-4.05c-.385.26-.853.413-1.358.413C1.065 18.778 0 17.743 0 16.467c0-1.129.832-2.068 1.932-2.27v-2.393C.832 11.6 0 10.662 0 9.534c0-1.277 1.065-2.312 2.378-2.312.505 0 .973.153 1.358.414l5.28-4.05a2.254 2.254 0 01-.394-1.275C8.622 1.035 9.686 0 11 0s2.378 1.035 2.378 2.311c0 .471-.145.91-.394 1.274l5.28 4.05c.385-.26.853-.413 1.358-.413C20.935 7.222 22 8.257 22 9.533c0 1.129-.832 2.068-1.932 2.27v2.393c1.1.203 1.932 1.142 1.932 2.27 0 1.277-1.065 2.312-2.378 2.312-.505 0-.973-.153-1.358-.414l-5.28 4.05zm-9.243-7.843L5.937 13l-2.196-1.572c-.27.183-.58.314-.917.376v2.392c.336.062.647.193.917.376zm.627-3.772l2.321 1.662L9.01 10.8a2.254 2.254 0 01-.388-1.267c0-1.128.832-2.067 1.932-2.27V4.582a2.403 2.403 0 01-.912-.373l-5.28 4.05a2.254 2.254 0 01.006 2.54zm13.89 3.772c.27-.183.582-.314.918-.376v-2.392a2.403 2.403 0 01-.917-.376L16.063 13l2.196 1.572zm-.62-6.313l-5.28-4.05a2.403 2.403 0 01-.912.373v2.68c1.1.204 1.932 1.143 1.932 2.271 0 .468-.143.903-.388 1.267l2.32 1.662 2.322-1.662a2.254 2.254 0 01.005-2.541zm-8 6.313A2.415 2.415 0 0111 14.156c.507 0 .977.154 1.363.416L14.559 13l-2.196-1.572a2.415 2.415 0 01-1.363.416c-.507 0-.977-.154-1.363-.416L7.441 13l2.196 1.572zM11 10.978c.821 0 1.486-.647 1.486-1.445 0-.797-.665-1.444-1.486-1.444s-1.486.647-1.486 1.444c0 .798.665 1.445 1.486 1.445zm0 6.933c.821 0 1.486-.647 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.486.647-1.486 1.445c0 .797.665 1.444 1.486 1.444zm8.622-6.933c.82 0 1.486-.647 1.486-1.445 0-.797-.665-1.444-1.486-1.444s-1.487.647-1.487 1.444c0 .798.666 1.445 1.487 1.445zm0 6.933c.82 0 1.486-.647 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.487.647-1.487 1.445c0 .797.666 1.444 1.487 1.444zM2.378 10.978c.821 0 1.487-.647 1.487-1.445 0-.797-.666-1.444-1.487-1.444-.82 0-1.486.647-1.486 1.444 0 .798.665 1.445 1.486 1.445zm0 6.933c.821 0 1.487-.647 1.487-1.444 0-.798-.666-1.445-1.487-1.445-.82 0-1.486.647-1.486 1.445 0 .797.665 1.444 1.486 1.444zM11 25.133c.821 0 1.486-.646 1.486-1.444 0-.798-.665-1.445-1.486-1.445s-1.486.647-1.486 1.445.665 1.444 1.486 1.444zm0-21.377c.821 0 1.486-.647 1.486-1.445S11.821.867 11 .867s-1.486.646-1.486 1.444c0 .798.665 1.445 1.486 1.445z"
|
|
id="ShapeIcon2" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<h4 class="relative mt-6 text-lg font-bold">Machine Learning</h4>
|
|
<p class="relative mt-2 text-base text-center text-gray-600">Your Marketing tools will learn how
|
|
to better
|
|
convert and sell.</p>
|
|
<a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
|
|
More</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full max-w-md p-4 mx-auto mb-16 lg:mb-0 lg:w-1/3">
|
|
<div class="relative flex flex-col items-center justify-center w-full h-full p-20 mr-5 rounded-lg">
|
|
<svg class="absolute w-full h-full text-gray-100 fill-current" viewBox="0 0 378 410"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g>
|
|
<g>
|
|
<path
|
|
d="M305.9 14.4c23.8 24.6 16.3 84.9 26.6 135.1 10.4 50.2 38.6 90.3 43.7 137.8 5.1 47.5-12.8 102.4-50.7 117.4-37.9 15.1-95.7-9.8-151.7-12.2-56.1-2.5-110.3 17.6-130-3.4-19.7-20.9-4.7-82.9-11.5-131.2C25.5 209.5-3 174.7 1.2 147c4.2-27.7 41-48.3 75-69.6C110.1 56.1 141 34.1 184 17.5c43.1-16.6 98.1-27.7 121.9-3.1z" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<!-- FEATURE Icon 3 -->
|
|
<svg class="relative w-20 h-20" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-1Icon3">
|
|
<stop stop-color="#32FBFC" offset="0%" />
|
|
<stop stop-color="#3214F2" offset="100%" />
|
|
</linearGradient>
|
|
<filter x="-14%" y="-10%" width="128%" height="128%" filterUnits="objectBoundingBox"
|
|
id="filter-3Icon3">
|
|
<feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
|
|
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1"
|
|
result="shadowBlurOuter1" />
|
|
<feColorMatrix
|
|
values="0 0 0 0 0.031372549 0 0 0 0 0.149019608 0 0 0 0 0.658823529 0 0 0 0.15 0"
|
|
in="shadowBlurOuter1" />
|
|
</filter>
|
|
<path
|
|
d="M17.947 0h14.106c6.24 0 8.503.65 10.785 1.87a12.721 12.721 0 015.292 5.292C49.35 9.444 50 11.707 50 17.947v14.106c0 6.24-.65 8.503-1.87 10.785a12.721 12.721 0 01-5.292 5.292C40.556 49.35 38.293 50 32.053 50H17.947c-6.24 0-8.503-.65-10.785-1.87a12.721 12.721 0 01-5.292-5.292C.65 40.556 0 38.293 0 32.053V17.947c0-6.24.65-8.503 1.87-10.785A12.721 12.721 0 017.162 1.87C9.444.65 11.707 0 17.947 0z"
|
|
id="path-2Icon3" />
|
|
</defs>
|
|
<g id="Page-1Icon3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="Desktop-HDIcon3" transform="translate(-1091 -1278)">
|
|
<g id="FeaturesIcon3" transform="translate(170 915)">
|
|
<g id="Group-9-Copy-2Icon3" transform="translate(800 365)">
|
|
<g id="Group-8Icon3" transform="translate(125)">
|
|
<g id="Rectangle-9Icon3">
|
|
<use fill="#000" filter="url(#filter-3Icon3)"
|
|
xlink:href="#path-2Icon3" />
|
|
<use fill="url(#linearGradient-1Icon3)" xlink:href="#path-2Icon3" />
|
|
</g>
|
|
<g id="smart-notificationsIcon3" transform="translate(15 11)"
|
|
fill="#FFF" fill-rule="nonzero">
|
|
<path
|
|
d="M12.519 3.243a6.808 6.808 0 00-.187 1.298h-8.44a2.595 2.595 0 00-2.595 2.594v12.973a2.595 2.595 0 002.595 2.595h12.973a2.595 2.595 0 002.594-2.595v-8.44c.445-.02.88-.084 1.298-.187v8.627A3.892 3.892 0 0116.865 24H3.892A3.892 3.892 0 010 20.108V7.135a3.892 3.892 0 013.892-3.892h8.627zm6.616 6.487a4.865 4.865 0 110-9.73 4.865 4.865 0 010 9.73z"
|
|
id="IconIcon3" />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<h4 class="relative mt-6 text-lg font-bold">Smart Notifications</h4>
|
|
<p class="relative mt-2 text-base text-center text-gray-600">Our smart notifications will notify
|
|
you when
|
|
users convert.</p>
|
|
<a href="#_" class="relative flex mt-2 text-sm font-medium text-indigo-500 underline">Learn
|
|
More</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END FEATURES SECTION -->
|
|
|
|
<!-- Pricing Section -->
|
|
<div class="relative px-8 py-10 bg-white border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
|
|
|
|
<div id="pricing" class="container flex flex-col items-center h-full max-w-6xl mx-auto">
|
|
<h2 class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our Pricing</h2>
|
|
<h3
|
|
class="w-full max-w-2xl px-5 px-8 mt-2 text-2xl font-black leading-tight text-center text-gray-900 sm:mt-0 sm:px-0 sm:text-6xl md:px-0">
|
|
Simple, Transparent Pricing for Everyone</h3>
|
|
|
|
<div class="max-w-full mx-auto md:max-w-6xl sm:px-8">
|
|
<!-- Basic Pricing -->
|
|
<div class="relative flex flex-col items-center block sm:flex-row">
|
|
<div
|
|
class="relative z-0 w-11/12 max-w-sm my-8 border border-gray-200 rounded-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-mr-4">
|
|
<div class="overflow-hidden text-black bg-white border-t border-gray-100 rounded-lg shadow-sm">
|
|
<div
|
|
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
|
<h3 class="p-3 text-lg font-bold tracking-wide text-center uppercase">Basic<span
|
|
class="ml-2 font-light">Plan</span></h3>
|
|
<h4
|
|
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
|
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>48</h4>
|
|
<p class="text-sm text-gray-600">In our basic plan you can take advantage of all these
|
|
features below.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap px-6 mt-8">
|
|
<ul>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">Awesome Feature</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">And Another Cool Feature</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">One More Feature</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex items-center block p-8 uppercase">
|
|
<a href="#_"
|
|
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
|
This Plan</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Pro Pricing -->
|
|
<div
|
|
class="relative z-10 w-full max-w-md my-8 bg-white rounded-lg shadow-lg sm:w-2/3 lg:w-1/3 sm:my-5">
|
|
<div
|
|
class="py-4 text-sm font-semibold leading-none tracking-wide text-center text-white uppercase bg-indigo-500 rounded-t">
|
|
Most Popular</div>
|
|
<div class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-6">
|
|
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Pro<span
|
|
class="ml-2 font-light">Plan</span></h3>
|
|
<h4
|
|
class="flex items-center justify-center pb-6 text-5xl font-bold text-center text-gray-900">
|
|
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>98</h4>
|
|
<p class="text-sm text-gray-600">Our most popular package is the Pro Plan which gives you
|
|
access to the
|
|
following:</p>
|
|
</div>
|
|
<div class="flex justify-start pl-12 mt-8 sm:justify-start">
|
|
<ul>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">Really Cool Features</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">Another Cool Feature</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">And One More</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="flex items-center block p-8 uppercase">
|
|
<a href="#_"
|
|
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-indigo-600">Select
|
|
This Plan</a>
|
|
</div>
|
|
</div>
|
|
<!-- Premium Pricing -->
|
|
<div
|
|
class="relative z-0 w-11/12 max-w-sm my-8 rounded-lg shadow-lg sm:w-3/5 lg:w-1/3 sm:my-5 md:-ml-4">
|
|
<div class="overflow-hidden text-black bg-white rounded-lg shadow-lg shadow-inner">
|
|
<div
|
|
class="block max-w-sm px-8 mx-auto mt-5 text-sm text-left text-black sm:text-md lg:px-8">
|
|
<h3 class="p-3 pb-1 text-lg font-bold tracking-wide text-center uppercase">Premium<span
|
|
class="ml-2 font-light">Plan</span></h3>
|
|
<h4
|
|
class="flex items-center justify-center pb-6 text-4xl font-bold text-center text-gray-900">
|
|
<span class="mr-1 -ml-2 text-lg text-gray-700">$</span>78</h4>
|
|
<p class="pl-2 text-sm text-gray-600">With our premium plan you can take advantage of
|
|
all the following
|
|
features:</p>
|
|
</div>
|
|
<div class="flex flex-wrap px-8 mt-8">
|
|
<ul>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">Totally Tubular Feature</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">Super Cool Feature</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<div class="p-2 text-green-500 rounded-full fill-current ">
|
|
<svg class="w-6 h-6 align-middle" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<span class="ml-3 text-lg text-gray-700">And One More</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="flex items-center block p-8 uppercase">
|
|
<a href="#_"
|
|
class="block w-full px-6 py-4 mt-3 text-lg font-semibold text-center text-white bg-gray-900 rounded shadow-sm hover:bg-green-600">Select
|
|
This Plan</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- End Pricing Section -->
|
|
|
|
<!-- Start Testimonials -->
|
|
<div id="testimonials"
|
|
class="flex items-center justify-center w-full px-8 py-10 border-t border-gray-200 md:py-16 lg:py-24 xl:py-40 xl:px-0">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="flex-col items-center ">
|
|
<div class="flex flex-col items-center justify-center w-full h-full max-w-2xl pr-8 mx-auto text-center">
|
|
<p class="my-5 text-base font-medium tracking-tight text-indigo-500 uppercase">Our customers love
|
|
our product
|
|
</p>
|
|
<h2
|
|
class="text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">
|
|
Testimonials</h2>
|
|
<p class="my-6 text-xl font-medium text-gray-500">Don't just take our word for it, read from our
|
|
extensive
|
|
list of case studies and customer testimonials.</p>
|
|
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center max-w-2xl py-8 mx-auto xl:flex-row xl:max-w-full">
|
|
<div class="w-full xl:w-1/2 xl:pr-8">
|
|
<blockquote
|
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
|
|
<div class="flex flex-col pr-8">
|
|
<div class="relative pl-12">
|
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
|
<path
|
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
|
</svg>
|
|
<p class="mt-2 text-base text-gray-600">I'm loving these templates! Very nice
|
|
features and layouts.
|
|
</p>
|
|
</div>
|
|
|
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Sandra
|
|
Walton <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
|
|
SomeCompany</span></h3>
|
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
|
</div>
|
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
|
src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2694&q=80"
|
|
alt="">
|
|
</blockquote>
|
|
<blockquote
|
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 mb-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease xl:mb-0">
|
|
<div class="flex flex-col pr-10">
|
|
<div class="relative pl-12">
|
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
|
<path
|
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
|
</svg>
|
|
<p class="mt-2 text-base text-gray-600">Really digging this service. Now I can
|
|
quickly bootstrap any
|
|
project.</p>
|
|
</div>
|
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Kenny
|
|
Jones <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
|
|
SomeCompany</span></h3>
|
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
|
</div>
|
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
|
src="https://images.unsplash.com/photo-1546820389-44d77e1f3b31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80"
|
|
alt="">
|
|
</blockquote>
|
|
</div>
|
|
<div class="w-full xl:w-1/2 xl:pl-8">
|
|
<blockquote
|
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
|
|
<div class="flex flex-col pr-10">
|
|
<div class="relative pl-12">
|
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
|
<path
|
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
|
</svg>
|
|
<p class="mt-2 text-base text-gray-600">Extremely helpful in every single project we
|
|
have released.
|
|
</p>
|
|
</div>
|
|
|
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Mike Smith
|
|
<span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO SomeCompany</span>
|
|
</h3>
|
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
|
</div>
|
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
|
src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
|
|
alt="">
|
|
</blockquote>
|
|
<blockquote
|
|
class="flex flex-col-reverse items-center justify-between w-full col-span-1 p-6 mt-16 text-center transition-all duration-200 bg-gray-100 rounded-lg md:flex-row md:text-left hover:bg-white hover:shadow ease">
|
|
<div class="flex flex-col pr-10">
|
|
<div class="relative pl-12">
|
|
<svg class="absolute left-0 w-10 h-10 text-indigo-500 fill-current"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
|
|
<path
|
|
d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" />
|
|
</svg>
|
|
<p class="mt-2 text-base text-gray-600">Finally a quick and easy system I can use
|
|
for any type of
|
|
project.</p>
|
|
</div>
|
|
|
|
<h3 class="pl-12 mt-3 text-base font-medium leading-5 text-gray-800 truncate">Molly
|
|
Sanchez <span class="mt-1 text-sm leading-5 text-gray-500 truncate">- CEO
|
|
SomeCompany</span></h3>
|
|
<p class="mt-1 text-sm leading-5 text-gray-500 truncate"></p>
|
|
</div>
|
|
<img class="flex-shrink-0 object-cover w-24 h-24 mb-5 bg-gray-300 rounded-full md:mb-0"
|
|
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80"
|
|
alt="">
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Testimonials-->
|
|
|
|
|
|
<footer class="px-4 pt-12 pb-8 text-white bg-white border-t border-gray-200">
|
|
<div class="container flex flex-col justify-between max-w-6xl px-4 mx-auto overflow-hidden lg:flex-row">
|
|
<div class="w-full pl-12 mr-4 text-left lg:w-1/4 sm:text-center sm:pl-0 lg:text-left">
|
|
<a href="/"
|
|
class="flex justify-start block text-left sm:text-center lg:text-left sm:justify-center lg:justify-start">
|
|
<span class="flex items-start sm:items-center">
|
|
<svg class="w-auto h-6 text-gray-800 fill-current" viewBox="0 0 194 116"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g fill-rule="evenodd">
|
|
<path
|
|
d="M96.869 0L30 116h104l-9.88-17.134H59.64l47.109-81.736zM0 116h19.831L77 17.135 67.088 0z">
|
|
</path>
|
|
<path d="M87 68.732l9.926 17.143 29.893-51.59L174.15 116H194L126.817 0z"></path>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
<p class="mt-6 mr-4 text-base text-gray-500">Crafting the next-level of user experience and engagement.
|
|
</p>
|
|
</div>
|
|
<div class="block w-full pl-10 mt-6 text-sm lg:w-3/4 sm:flex lg:mt-0">
|
|
<ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
|
|
<li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
|
|
Product</li>
|
|
<li><a href="#_"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Features</a>
|
|
</li>
|
|
<li><a href="#_"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Integrations</a>
|
|
</li>
|
|
<li><a href="#_"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Pricing</a>
|
|
</li>
|
|
<li><a href="#_"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">FAQ</a></li>
|
|
</ul>
|
|
<ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
|
|
<li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
|
|
Company</li>
|
|
<li><a href="#_"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Privacy</a>
|
|
</li>
|
|
<li><a href="#_" class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Terms
|
|
of
|
|
Service</a></li>
|
|
</ul>
|
|
<ul class="flex flex-col w-full p-0 font-medium text-left text-gray-700 list-none">
|
|
<li class="inline-block px-3 py-2 mt-5 font-bold tracking-wide text-gray-800 uppercase md:mt-0">
|
|
TailwindCSS
|
|
</li>
|
|
<li><a href="https://devdojo.com/tailwindcss/components"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Tailwind
|
|
Components</a></li>
|
|
<li><a href="https://devdojo.com/tailwindcss/templates"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Tailwind
|
|
Templates</a></li>
|
|
<li><a href="https://devdojo.com/tails"
|
|
class="inline-block px-3 py-2 text-gray-500 no-underline hover:text-gray-600">Tails</a></li>
|
|
</ul>
|
|
<div class="flex flex-col w-full text-gray-700">
|
|
<div class="inline-block px-3 py-2 mt-5 font-bold text-gray-800 uppercase md:mt-0">Follow Us</div>
|
|
<div class="flex justify-start pl-4 mt-2">
|
|
<a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600"
|
|
target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
|
|
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z" />
|
|
</svg>
|
|
</a>
|
|
<a class="flex items-center block mr-6 text-gray-400 no-underline hover:text-gray-600"
|
|
target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
|
|
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" />
|
|
</svg>
|
|
</a>
|
|
<a class="flex items-center block text-gray-400 no-underline hover:text-gray-600"
|
|
target="_blank" rel="noopener noreferrer" href="https://devdojo.com">
|
|
<svg viewBox="0 0 24 24" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-4 pt-6 mt-10 text-center text-gray-400 border-t border-gray-100">© 2020 Landmark. All rights
|
|
reserved.</div>
|
|
</footer>
|
|
|
|
<!-- a little JS for the mobile nav button -->
|
|
<script>
|
|
if (document.getElementById('nav-mobile-btn')) {
|
|
document.getElementById('nav-mobile-btn').addEventListener('click', function () {
|
|
if (this.classList.contains('close')) {
|
|
document.getElementById('nav').classList.add('hidden');
|
|
this.classList.remove('close');
|
|
} else {
|
|
document.getElementById('nav').classList.remove('hidden');
|
|
this.classList.add('close');
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|