mirror of
https://github.com/istiyakaminsanto/tailShape.git
synced 2026-01-04 22:57:02 +00:00
added other tempalte parts
This commit is contained in:
merajjahir
@@ -1004,6 +1004,340 @@
|
||||
</section>
|
||||
<!-- feature 14 end -->
|
||||
|
||||
|
||||
<!-- feature 15 start -->
|
||||
<section class="section_divider">
|
||||
<div>Feature 15</div>
|
||||
</section>
|
||||
|
||||
<div id="features" class="relative w-full px-8 py-10 border-t border-gray-200 dark:bg-gray-800 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 dark:text-cyan-300 uppercase">Our Features</h2>
|
||||
<h3
|
||||
class="max-w-2xl px-5 mt-2 text-3xl font-black leading-tight text-center text-gray-900 dark:text-emerald-300 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 dark:text-emerald-300 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 dark:text-emerald-200 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 dark:text-emerald-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>
|
||||
|
||||
|
||||
<!-- feature 15 end -->
|
||||
|
||||
|
||||
<!-- feature 16 start -->
|
||||
<section class="section_divider">
|
||||
<div>Feature 16</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="relative w-full py-20 pb-20 overflow-hidden bg-white md:pt-40 md:pb-64">
|
||||
<!-- CURVED SVG BORDER INVERT -->
|
||||
<svg class="absolute top-0 w-full text-yellow-400 fill-current" viewBox="0 0 1400 50" xmlns="http://www.w3.org/2000/svg"><path d="M0 50C309.151 16.667 542.484 0 700 0c157.516 0 390.849 16.667 700 50V0H0v50z"/></svg>
|
||||
<div class="container relative flex flex-col justify-between h-full max-w-6xl px-8 mx-auto xl:px-0">
|
||||
<h2 class="relative flex items-center self-start inline-block w-auto mb-20 text-4xl font-black">
|
||||
<span class="absolute inline-block w-full h-4 mt-3 -ml-2 bg-yellow-400"></span>
|
||||
<span class="relative">Feature List</span>
|
||||
</h2>
|
||||
|
||||
<div class="flex w-full h-full">
|
||||
|
||||
<div class="w-full lg:w-2/3">
|
||||
|
||||
<!-- Feature blocks first column -->
|
||||
<div class="flex flex-col w-full mb-10 sm:flex-row">
|
||||
<div class="w-full mb-10 sm:mb-0 sm:w-1/2">
|
||||
<div class="relative ml-0 mr-0 sm:mr-10">
|
||||
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-indigo-500 rounded-lg"></span>
|
||||
<div class="relative p-5 bg-white border-2 border-indigo-500 rounded-lg">
|
||||
<div class="flex items-center -mt-1">
|
||||
<svg class="w-8 h-8 text-indigo-500 fill-current" viewBox="0 0 20 20">
|
||||
<polygon points="18.198,7.95 3.168,7.95 3.168,8.634 9.317,9.727 9.317,19.564 12.05,19.564 12.05,9.727 18.198,8.634 "></polygon>
|
||||
<path d="M2.485,10.057v-3.41H2.473l0.012-4.845h1.366c0.378,0,0.683-0.306,0.683-0.683c0-0.378-0.306-0.683-0.683-0.683H1.119c-0.378,0-0.683,0.306-0.683,0.683c0,0.378,0.306,0.683,0.683,0.683h0.683v4.845C1.406,6.788,1.119,7.163,1.119,7.609v2.733c0,0.566,0.459,1.025,1.025,1.025c0.053,0,0.105-0.008,0.157-0.016l-0.499,5.481l5.9,2.733h0.931C8.634,13.266,5.234,10.458,2.485,10.057z"></path>
|
||||
<path d="M18.169,6.584c-0.303-3.896-3.202-6.149-7.486-6.149c-4.282,0-7.183,2.252-7.484,6.149H18.169z M15.463,3.187c0.024,0.351-0.103,0.709-0.394,0.977c-0.535,0.495-1.405,0.495-1.94,0c-0.29-0.268-0.418-0.626-0.394-0.977C13.513,3.827,14.683,3.827,15.463,3.187z"></path>
|
||||
<path d="M18.887,10.056c-2.749,0.398-6.154,3.206-6.154,9.508h0.933l5.899-2.733L18.887,10.056z"></path>
|
||||
</svg>
|
||||
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Awesome Dashboard</h3>
|
||||
</div>
|
||||
<p class="mt-3 mb-1 text-xs font-medium text-indigo-500 uppercase">PREMIUM FEATURE</p>
|
||||
<p class="mb-2 text-gray-600">You can get a quick snapshot of all your analytics on your beautiful dashboard.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full sm:w-1/2">
|
||||
<div class="relative ml-0 md:mr-10">
|
||||
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-purple-500 rounded-lg"></span>
|
||||
<div class="relative p-5 bg-white border-2 border-purple-500 rounded-lg">
|
||||
<div class="flex items-center -mt-1">
|
||||
<svg class="w-8 h-8 text-purple-500 fill-current" viewBox="0 0 20 20">
|
||||
<path d="M19.629,9.655c-0.021-0.589-0.088-1.165-0.21-1.723h-3.907V7.244h1.378V6.555h-2.756V5.866h2.067V5.177h-0.689V4.488h-1.378V3.799h0.689V3.11h-1.378V2.421h0.689V1.731V1.294C12.88,0.697,11.482,0.353,10,0.353c-5.212,0-9.446,4.135-9.629,9.302H19.629z M6.555,2.421c1.522,0,2.756,1.234,2.756,2.756S8.077,7.933,6.555,7.933S3.799,6.699,3.799,5.177S5.033,2.421,6.555,2.421z"></path>
|
||||
<path d="M12.067,18.958h-0.689v-0.689h2.067v-0.689h0.689V16.89h2.067v-0.689h0.689v-0.689h-1.378v-0.689h-2.067v-0.689h1.378v-0.689h2.756v-0.689h-1.378v-0.689h3.218c0.122-0.557,0.189-1.134,0.21-1.723H0.371c0.183,5.167,4.418,9.302,9.629,9.302c0.711,0,1.401-0.082,2.067-0.227V18.958z"></path>
|
||||
</svg>
|
||||
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Rad Tools</h3>
|
||||
</div>
|
||||
<p class="mt-3 mb-1 text-xs font-medium text-purple-500 uppercase">NEW FEATURE</p>
|
||||
<p class="mb-2 text-gray-600">We've got some pretty rad tools to help you take on the world.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature blocks second column -->
|
||||
<div class="flex flex-col w-full mb-5 sm:flex-row">
|
||||
<div class="w-full mb-10 sm:mb-0 sm:w-1/2">
|
||||
<div class="relative ml-0 mr-0 sm:mr-10">
|
||||
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-blue-400 rounded-lg"></span>
|
||||
<div class="relative p-5 bg-white border-2 border-blue-400 rounded-lg">
|
||||
<div class="flex items-center -mt-1">
|
||||
<svg class="w-8 h-8 text-blue-400 fill-current" viewBox="0 0 20 20">
|
||||
<path d="M18.21,16.157v-8.21c0-0.756-0.613-1.368-1.368-1.368h-1.368v1.368v1.368v6.841l-1.368,3.421h5.473L18.21,16.157z"></path>
|
||||
<path d="M4.527,9.316V7.948V6.579H3.159c-0.756,0-1.368,0.613-1.368,1.368v8.21l-1.368,3.421h5.473l-1.368-3.421V9.316z"></path>
|
||||
<path d="M14.766,5.895h0.023V5.21c0-2.644-2.145-4.788-4.789-4.788S5.211,2.566,5.211,5.21v0.685h0.023H14.766zM12.737,3.843c0.378,0,0.684,0.307,0.684,0.684s-0.306,0.684-0.684,0.684c-0.378,0-0.684-0.307-0.684-0.684S12.358,3.843,12.737,3.843z M10,1.448c0.755,0,1.368,0.613,1.368,1.368S10.755,4.185,10,4.185c-0.756,0-1.368-0.613-1.368-1.368S9.244,1.448,10,1.448z"></path>
|
||||
<path d="M14.789,6.579H5.211v9.578l1.368,1.368h6.841l1.368-1.368V6.579z M12.052,12.052H7.948c-0.378,0-0.684-0.306-0.684-0.684c0-0.378,0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.306,0.684,0.684C12.737,11.746,12.431,12.052,12.052,12.052z M12.052,9.316H7.948c-0.378,0-0.684-0.307-0.684-0.684s0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.307,0.684,0.684S12.431,9.316,12.052,9.316z"></path>
|
||||
</svg>
|
||||
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Easy Collaboration</h3>
|
||||
</div>
|
||||
<p class="mt-3 mb-1 text-xs font-medium text-blue-400 uppercase">FREE FEATURE</p>
|
||||
<p class="mb-2 text-gray-600">Collaborating with members of your team couldn't be easier.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full sm:w-1/2">
|
||||
<div class="relative ml-0 md:mr-10">
|
||||
<span class="absolute top-0 left-0 w-full h-full mt-1 ml-1 bg-teal-500 rounded-lg"></span>
|
||||
<div class="relative p-5 bg-white border-2 border-teal-500 rounded-lg">
|
||||
<div class="flex items-center -mt-1">
|
||||
<svg class="w-8 h-8 text-teal-500 fill-current" viewBox="0 0 20 20">
|
||||
<path d="M16.853,8.355V5.888c0-3.015-2.467-5.482-5.482-5.482H8.629c-3.015,0-5.482,2.467-5.482,5.482v2.467l-2.741,7.127c0,1.371,4.295,4.112,9.594,4.112s9.594-2.741,9.594-4.112L16.853,8.355z M5.888,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C6.402,17.137,6.173,17.367,5.888,17.367z M5.203,10c0-0.377,0.19-0.928,0.423-1.225c0,0,0.651-0.831,1.976-0.831c0.672,0,1.141,0.309,1.141,0.309C9.057,8.46,9.315,8.938,9.315,9.315v1.028c0,0.188-0.308,0.343-0.685,0.343H5.888C5.511,10.685,5.203,10.377,5.203,10z M7.944,16.853H7.259v-1.371l0.685-0.685V16.853z M9.657,16.853H8.629v-2.741h1.028V16.853zM8.972,13.426v-1.028c0-0.568,0.46-1.028,1.028-1.028c0.568,0,1.028,0.46,1.028,1.028v1.028H8.972z M11.371,16.853h-1.028v-2.741h1.028V16.853z M12.741,16.853h-0.685v-2.056l0.685,0.685V16.853z M14.112,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C14.626,17.137,14.396,17.367,14.112,17.367z M14.112,10.685h-2.741c-0.377,0-0.685-0.154-0.685-0.343V9.315c0-0.377,0.258-0.855,0.572-1.062c0,0,0.469-0.309,1.141-0.309c1.325,0,1.976,0.831,1.976,0.831c0.232,0.297,0.423,0.848,0.423,1.225S14.489,10.685,14.112,10.685z M18.347,15.801c-0.041,0.016-0.083,0.023-0.124,0.023c-0.137,0-0.267-0.083-0.319-0.218l-2.492-6.401c-0.659-1.647-1.474-2.289-2.905-2.289c-0.95,0-1.746,0.589-1.754,0.595c-0.422,0.317-1.084,0.316-1.507,0C9.239,7.505,8.435,6.916,7.492,6.916c-1.431,0-2.246,0.642-2.906,2.292l-2.491,6.398c-0.069,0.176-0.268,0.264-0.443,0.195c-0.176-0.068-0.264-0.267-0.195-0.444l2.492-6.401c0.765-1.911,1.824-2.726,3.543-2.726c1.176,0,2.125,0.702,2.165,0.731c0.179,0.135,0.506,0.135,0.685,0c0.04-0.029,0.99-0.731,2.165-0.731c1.719,0,2.779,0.814,3.542,2.723l2.493,6.404C18.611,15.534,18.524,15.733,18.347,15.801z"></path>
|
||||
</svg>
|
||||
<h3 class="my-2 ml-3 text-lg font-bold text-gray-800">Automated Workflow</h3>
|
||||
</div>
|
||||
<p class="mt-3 mb-1 text-xs font-medium text-teal-500 uppercase">PREMIUM FEATURE</p>
|
||||
<p class="mb-2 text-gray-600">Our automation tools will help you build and grow your marketing empire.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="hidden w-1/3 lg:block">
|
||||
<div class="absolute w-full w-screen max-w-4xl pl-12 -mt-20">
|
||||
<div class="absolute top-0 left-0 w-full h-full mt-2 ml-10 bg-gray-900 rounded-lg"></div>
|
||||
<div class="relative overflow-hidden border-2 border-black rounded-lg">
|
||||
<img src="https://cdn.devdojo.com/images/october2020/screenshot2.png" alt="Screen shot of Flare's hero component" class="object-cover w-full h-full">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blob SVG Border -->
|
||||
<svg class="absolute bottom-0 w-full text-gray-200 fill-current" viewBox="0 0 1400 74" xmlns="http://www.w3.org/2000/svg"><path d="M0 24C87.243 11.422 173.12 5.133 257.633 5.133 468.305 5.133 578.027 74 700 74c136.015 0 290.882-96.208 481.234-68.867C1268.807 17.71 1341.73 24 1400 24v50H0V24z" /></svg>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- feature 16 end -->
|
||||
|
||||
|
||||
<!-- start of script section -->
|
||||
<script type="text/javascript">
|
||||
|
||||
Reference in New Issue
Block a user