ourworld_web/www_freeflownation
20
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

navbar improvements

Browse Source
This commit is contained in:
timurgordon 2022-02-10 17:37:18 +03:00
parent 55b6349f1f
commit ac0b2bf88a
1 changed files with 86 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
templates/partials/navbar.html
View File

@ -6,26 +6,26 @@
var inDisplay = ""; var inDisplay = "";
function toggleMenu() { function toggleMenu() {
if (inDisplay === "solutions") { if (inDisplay === "learn") {
hideMenu(); hideMenu();
inDisplay = ""; inDisplay = "";
} }
else { else {
showMenu(); showMenu();
inDisplay = "solutions"; inDisplay = "learn";
} }
} }
function showMenu() { function showMenu() {
document.getElementById('solutions').className = "absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-out duration-150 opacity-1 -translate-y-0"; document.getElementById('learn').className = "absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-out duration-150 opacity-1 -translate-y-0";
} }
function hideMenu() { function hideMenu() {
document.getElementById('solutions').className = "absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-in duration-150 opacity-0 -translate-y-1"; document.getElementById('learn').className = "absolute inset-x-0 transform shadow-lg backdrop-blur transition ease-in duration-150 opacity-0 -translate-y-1";
} }
window.onload = function(){ window.onload = function(){
document.getElementById("solutions-btn").addEventListener( 'click', toggleMenu); document.getElementById("learn-btn").addEventListener( 'click', toggleMenu);
} }
</script> </script>
@ -36,7 +36,7 @@
<div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 sm:px-6 sm:py-4 lg:px-8 md:justify-start md:space-x-10"> <div class="max-w-7xl mx-auto flex justify-between items-center px-4 py-5 sm:px-6 sm:py-4 lg:px-8 md:justify-start md:space-x-10">
<div> <div>
<a href="#" class="flex"> <a href="#" class="flex">
<img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" /> <img class="w-20 h-auto sm:w-32" src="images/ourworld_logo.png" alt="Workflow" />
</a> </a>
</div> </div>
<div class="-mr-2 -my-2 md:hidden"> <div class="-mr-2 -my-2 md:hidden">
@ -51,45 +51,60 @@
<nav class="flex space-x-10"> <nav class="flex space-x-10">
<div class="relative"> <div class="relative">
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" --> <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
<button type="button" id="solutions-btn" class="text-gray-500 group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <button type="button" id="learn-btn" class="text-gray-500 group inline-flex items-center space-x-2 text-sm leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
<span>Solutions</span> <span>Learn</span>
<!-- <!--
Heroicon name: chevron-down Heroicon name: chevron-down
Item active: "text-gray-600", Item inactive: "text-gray-400" Item active: "text-gray-600", Item inactive: "text-gray-400"
--> -->
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button> </button>
</div> </div>
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <div class="relative">
Pricing <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
<button type="button" id="learn-btn" class="text-gray-500 group inline-flex items-center space-x-2 text-sm leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
<span>Learn</span>
<!--
Heroicon name: chevron-down
Item active: "text-gray-600", Item inactive: "text-gray-400"
-->
</button>
</div>
<a href="#" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
Developers
</a> </a>
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <a href="blog" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
Docs Founders & Creators
</a>
<a href="blog" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
Community
</a>
<a href="blog" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
Blog
</a>
<a href="blog" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
Career
</a> </a>
<div class="relative"> <div class="relative">
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" --> <!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
<button type="button" class="text-gray-500 group inline-flex items-center space-x-2 text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <button type="button" class="text-gray-500 group inline-flex items-center space-x-2 text-sm leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
<span>Menu</span> <span>Menu</span>
<!-- <!--
Heroicon name: chevron-down Heroicon name: chevron-down
Item active: "text-gray-600", Item inactive: "text-gray-400" Item active: "text-gray-600", Item inactive: "text-gray-400"
--> -->
<svg class="text-gray-400 h-5 w-5 group-hover:text-gray-500 group-focus:text-gray-500 transition ease-in-out duration-150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button> </button>
</div> </div>
</nav> </nav>
<div class="flex items-center space-x-8"> <div class="flex items-center space-x-8">
<a href="#" class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"> <a href="#" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
Sign in Sign in
</a> </a>
<span class="inline-flex rounded-md shadow-sm"> <span class="inline-flex rounded-md shadow-sm">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"> <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-6 font-normal rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
Sign up Sign up
</a> </a>
</span> </span>
@ -98,9 +113,9 @@
</div> </div>
</div> </div>
<!-- Solutions menu --> <!-- learn menu -->
<!-- <!--
'Solutions' flyout menu, show/hide based on flyout menu state. 'learn' flyout menu, show/hide based on flyout menu state.
Entering: "transition ease-out duration-200" Entering: "transition ease-out duration-200"
From: "opacity-0 -translate-y-1" From: "opacity-0 -translate-y-1"
@ -110,10 +125,10 @@
To: "opacity-0 -translate-y-1" To: "opacity-0 -translate-y-1"
md:block or hidden md:block or hidden
--> -->
<div id="solutions" class="opacity-0 -translate-y-1 absolute inset-x-0 transform shadow-lg backdrop-blur"> <div id="learn" class="opacity-0 -translate-y-1 absolute inset-x-0 transform shadow-lg backdrop-blur">
<div class="bg-semi-white"> <div class="bg-semi-white">
<div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16"> <div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"> <a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4"> <div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12"> <span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
@ -125,20 +140,27 @@
</div> </div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4"> <div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1"> <div class="space-y-1">
<p class="text-base leading-6 font-medium text-gray-900"> <p class="text-sm leading-6 font-normal text-gray-900">
Analytics Analytics
</p> </p>
<p class="text-sm leading-5 text-gray-500"> <p class="text-sm leading-5 text-gray-500">
Get a better understanding of where your traffic is coming from. Get a better understanding of where your traffic is coming from.
</p> </p>
</div> </div>
<p class="text-sm leading-5 font-medium text-indigo-600"> </div>
Learn more &#x2192; <div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1">
<p class="text-sm leading-6 font-normal text-gray-900">
Analytics
</p>
<p class="text-sm leading-5 text-gray-500">
Get a better understanding of where your traffic is coming from.
</p> </p>
</div> </div>
</div> </div>
</div>
</a> </a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"> <a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4"> <div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12"> <span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
@ -150,20 +172,17 @@
</div> </div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4"> <div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1"> <div class="space-y-1">
<p class="text-base leading-6 font-medium text-gray-900"> <p class="text-sm leading-6 font-normal text-gray-900">
Engagement Engagement
</p> </p>
<p class="text-sm leading-5 text-gray-500"> <p class="text-sm leading-5 text-gray-500">
Speak directly to your customers in a more meaningful way. Speak directly to your customers in a more meaningful way.
</p> </p>
</div> </div>
<p class="text-sm leading-5 font-medium text-indigo-600">
Learn more &#x2192;
</p>
</div> </div>
</div> </div>
</a> </a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"> <a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4"> <div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12"> <span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
@ -175,20 +194,17 @@
</div> </div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4"> <div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1"> <div class="space-y-1">
<p class="text-base leading-6 font-medium text-gray-900"> <p class="text-sm leading-6 font-normal text-gray-900">
Security Security
</p> </p>
<p class="text-sm leading-5 text-gray-500"> <p class="text-sm leading-5 text-gray-500">
Your customer data will be safe and secure. Your customer data will be safe and secure.
</p> </p>
</div> </div>
<p class="text-sm leading-5 font-medium text-indigo-600">
Learn more &#x2192;
</p>
</div> </div>
</div> </div>
</a> </a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"> <a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4"> <div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12"> <span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
@ -200,16 +216,13 @@
</div> </div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4"> <div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1"> <div class="space-y-1">
<p class="text-base leading-6 font-medium text-gray-900"> <p class="text-sm leading-6 font-normal text-gray-900">
Integrations Integrations
</p> </p>
<p class="text-sm leading-5 text-gray-500"> <p class="text-sm leading-5 text-gray-500">
Connect with third-party tools that you&apos;re already using. Connect with third-party tools that you&apos;re already using.
</p> </p>
</div> </div>
<p class="text-sm leading-5 font-medium text-indigo-600">
Learn more &#x2192;
</p>
</div> </div>
</div> </div>
</a> </a>
@ -248,7 +261,7 @@
<div id="menu" class="hidden absolute inset-x-0 transform shadow-lg"> <div id="menu" class="hidden absolute inset-x-0 transform shadow-lg">
<div class="bg-semi-white"> <div class="bg-semi-white">
<div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16"> <div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"> <a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4"> <div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12"> <span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
@ -260,20 +273,20 @@
</div> </div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4"> <div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1"> <div class="space-y-1">
<p class="text-base leading-6 font-medium text-gray-900"> <p class="text-sm leading-6 font-normal text-gray-900">
Analytics Analytics
</p> </p>
<p class="text-sm leading-5 text-gray-500"> <p class="text-sm leading-5 text-gray-500">
Get a better understanding of where your traffic is coming from. Get a better understanding of where your traffic is coming from.
</p> </p>
</div> </div>
<p class="text-sm leading-5 font-medium text-indigo-600"> <p class="text-sm leading-5 font-normal text-indigo-600">
Learn more &#x2192; learn more &#x2192;
</p> </p>
</div> </div>
</div> </div>
</a> </a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"> <a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4"> <div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12"> <span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
@ -285,20 +298,20 @@
</div> </div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4"> <div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1"> <div class="space-y-1">
<p class="text-base leading-6 font-medium text-gray-900"> <p class="text-sm leading-6 font-normal text-gray-900">
Engagement Engagement
</p> </p>
<p class="text-sm leading-5 text-gray-500"> <p class="text-sm leading-5 text-gray-500">
Speak directly to your customers in a more meaningful way. Speak directly to your customers in a more meaningful way.
</p> </p>
</div> </div>
<p class="text-sm leading-5 font-medium text-indigo-600"> <p class="text-sm leading-5 font-normal text-indigo-600">
Learn more &#x2192; learn more &#x2192;
</p> </p>
</div> </div>
</div> </div>
</a> </a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"> <a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4"> <div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12"> <span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
@ -310,15 +323,15 @@
</div> </div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4"> <div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1"> <div class="space-y-1">
<p class="text-base leading-6 font-medium text-gray-900"> <p class="text-sm leading-6 font-normal text-gray-900">
Security Security
</p> </p>
<p class="text-sm leading-5 text-gray-500"> <p class="text-sm leading-5 text-gray-500">
Your customer data will be safe and secure. Your customer data will be safe and secure.
</p> </p>
</div> </div>
<p class="text-sm leading-5 font-medium text-indigo-600"> <p class="text-sm leading-5 font-normal text-indigo-600">
Learn more &#x2192; learn more &#x2192;
</p> </p>
</div> </div>
</div> </div>
@ -335,15 +348,15 @@
</div> </div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4"> <div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1"> <div class="space-y-1">
<p class="text-base leading-6 font-medium text-gray-900"> <p class="text-sm leading-6 font-normal text-gray-900">
Integrations Integrations
</p> </p>
<p class="text-sm leading-5 text-gray-500"> <p class="text-sm leading-5 text-gray-500">
Connect with third-party tools that you&apos;re already using. Connect with third-party tools that you&apos;re already using.
</p> </p>
</div> </div>
<p class="text-sm leading-5 font-medium text-indigo-600"> <p class="text-sm leading-5 font-normal text-indigo-600">
Learn more &#x2192; learn more &#x2192;
</p> </p>
</div> </div>
</div> </div>
@ -392,7 +405,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg> </svg>
</div> </div>
<div class="text-base leading-6 font-medium text-gray-900"> <div class="text-sm leading-6 font-normal text-gray-900">
Analytics Analytics
</div> </div>
</a> </a>
@ -403,7 +416,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
</svg> </svg>
</div> </div>
<div class="text-base leading-6 font-medium text-gray-900"> <div class="text-sm leading-6 font-normal text-gray-900">
Engagement Engagement
</div> </div>
</a> </a>
@ -414,7 +427,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg> </svg>
</div> </div>
<div class="text-base leading-6 font-medium text-gray-900"> <div class="text-sm leading-6 font-normal text-gray-900">
Security Security
</div> </div>
</a> </a>
@ -425,13 +438,13 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg> </svg>
</div> </div>
<div class="text-base leading-6 font-medium text-gray-900"> <div class="text-sm leading-6 font-normal text-gray-900">
Integrations Integrations
</div> </div>
</a> </a>
</div> </div>
<div class="text-base leading-6"> <div class="text-sm leading-6">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150"> <a href="#" class="font-normal text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
View all products &#x2192; View all products &#x2192;
</a> </a>
</div> </div>
@ -440,32 +453,32 @@
</div> </div>
<div class="py-6 px-5 space-y-6"> <div class="py-6 px-5 space-y-6">
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150"> <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
Pricing Pricing
</a> </a>
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150"> <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
Docs Docs
</a> </a>
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-700 transition ease-in-out duration-150"> <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
Company Company
</a> </a>
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-600 transition ease-in-out duration-150"> <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
Resources Resources
</a> </a>
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-600 transition ease-in-out duration-150"> <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
Blog Blog
</a> </a>
<a href="#" class="rounded-md text-base leading-6 font-medium text-gray-900 hover:text-gray-600 transition ease-in-out duration-150"> <a href="#" class="rounded-md text-sm leading-6 font-normal text-gray-900 hover:text-gray-600 transition ease-in-out duration-150">
Contact Sales Contact Sales
</a> </a>
</div> </div>
<div class="space-y-6"> <div class="space-y-6">
<span class="w-full flex rounded-md shadow-sm"> <span class="w-full flex rounded-md shadow-sm">
<a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"> <a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-6 font-normal rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
Sign up Sign up
</a> </a>
</span> </span>
<p class="text-center text-base leading-6 font-medium text-gray-500"> <p class="text-center text-sm leading-6 font-normal text-gray-500">
Existing customer? Existing customer?
<a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150"> <a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
Sign in Sign in