created new navbar partial
This commit is contained in:
timurgordon
167
css/nav.css
167
css/nav.css
@@ -1,166 +1,7 @@
|
||||
/*
|
||||
CSS-only and **accessible** menu based on... https://codepen.io/jonraedeke/pen/WRwJQX ...but considerably changed since then, especially due to change to Tailwind CSS
|
||||
*/
|
||||
|
||||
.nav__item {
|
||||
margin: 0px;
|
||||
}
|
||||
/*
|
||||
@apply font-sans p-0 m-0;
|
||||
|
||||
|
||||
& a {
|
||||
@apply block py-1 px-4 mb-1 text-white no-underline transition-opacity duration-500 ease-linear;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
@apply text-blue;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply no-underline opacity-75;
|
||||
}
|
||||
}
|
||||
.backdrop-blur {
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
}
|
||||
|
||||
*/
|
||||
@media (min-width: 900px) {
|
||||
.nav__item {
|
||||
@apply font-bold lowercase text-xs inline-block;
|
||||
font-variant: small-caps;
|
||||
letter-spacing: 0.15rem;
|
||||
& a {
|
||||
@apply inline-block pt-1 pb-0 no-underline;
|
||||
}
|
||||
}
|
||||
.bg-semi-white {
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.nav__icon {
|
||||
@apply block absolute cursor-pointer;
|
||||
top: 15px;
|
||||
right: 13px;
|
||||
height: 27px;
|
||||
width: 27px;
|
||||
text-indent: -9999px;
|
||||
/* hide the label */
|
||||
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
/* Remove blinking cursor */
|
||||
@apply border-none text-transparent text-center;
|
||||
text-shadow: 0 0 0 gray;
|
||||
&:focus {
|
||||
@apply outline-none;
|
||||
}
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
.nav__icon {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.nav__icon-line {
|
||||
@apply absolute block bg-white rounded left-0 transition-all duration-500 w-6 h-1 ease-linear;
|
||||
|
||||
&:first-child {
|
||||
@apply top-0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Checkbox hack for toggling mobile menu */
|
||||
input[type="checkbox"] {
|
||||
@apply hidden invisible;
|
||||
&:checked {
|
||||
& ~ nav .nav__items {
|
||||
height: auto;
|
||||
/*@apply bg-black dark:bg-blue-700 transition-all duration-500 ease-linear;*/
|
||||
max-height: 30rem;
|
||||
}
|
||||
& ~ label .nav__icon-line:first-child {
|
||||
@apply top-0 -rotate-45 translate-y-2 w-6;
|
||||
}
|
||||
& ~ label .nav__icon-line:nth-child(2) {
|
||||
@apply opacity-0;
|
||||
}
|
||||
& ~ label .nav__icon-line:nth-child(3) {
|
||||
@apply rotate-45 -translate-y-2 w-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
@apply absolute text-left left-0 w-full transition duration-500 ease-linear scale-x-100 scale-y-0 origin-top;
|
||||
top: 100%;
|
||||
& ul {
|
||||
@apply pl-0 m-0 text-right list-none transition duration-500 ease-linear;
|
||||
}
|
||||
& li {
|
||||
@apply mb-2 inline;
|
||||
margin-right: 5%;
|
||||
@media screen and (max-width: 899px) {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
& a {
|
||||
@apply text-white text-lg opacity-0;
|
||||
text-decoration: none !important;
|
||||
border: 0 !important;
|
||||
} /*
|
||||
& a:hover, & a:active {
|
||||
@apply border-b-0 text-gray-500;
|
||||
}*/
|
||||
}
|
||||
|
||||
.nav-toggle:checked ~ nav {
|
||||
transform: scale(1, 1);
|
||||
& a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Beginning of primary settings for larger screens === */
|
||||
@media screen and (min-width: 900px) {
|
||||
.nav-toggle-label {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
@apply fixed grid grid-cols-5;
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
@apply z-50 text-left col-start-1 col-end-3 text-lg;
|
||||
padding-left: 8%;
|
||||
}
|
||||
|
||||
nav {
|
||||
@apply mt-0 col-start-4 col-end-6;
|
||||
top: 15%;
|
||||
transform: none;
|
||||
& a {
|
||||
@apply opacity-100 relative;
|
||||
}
|
||||
& ul {
|
||||
padding-right: 10%;
|
||||
@apply text-right;
|
||||
}
|
||||
& li {
|
||||
@apply inline-block p-0 mb-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-logo-holder {
|
||||
@apply mt-1 pt-1 w-full;
|
||||
& a {
|
||||
@apply no-underline border-b-0;
|
||||
}
|
||||
}
|
||||
/* === End of primary settings for larger screens === */
|
||||
|
||||
@@ -8,9 +8,7 @@ async function main() {
|
||||
|
||||
async function deploy() {
|
||||
try {
|
||||
// must find way to get twinId and proxyUrl
|
||||
// perhaps use getMyTwinId @ grid3_client_ts/src/clients/tf-grid/twins.ts
|
||||
const rmb = new HTTPMessageBusClient(0, "https://gridproxy.test.grid.tf", "https://graphql.dev.grid.tf/graphql", "<mnemonics>");
|
||||
const rmb = new HTTPMessageBusClient(414, "https://gridproxy.test.grid.tf", "https://graphql.test.grid.tf/graphql", "idle tourist member mail flame often invest ring region fashion cloth zebra"); // second url graph url
|
||||
const msg = rmb.prepare("zos.statistics.get", [dstNodeId], 0, 2);
|
||||
const retMsg = await rmb.send(msg, "{'test':'test'}");
|
||||
const result = await rmb.read(retMsg);
|
||||
@@ -24,6 +22,7 @@ async function main() {
|
||||
}
|
||||
|
||||
deploy();
|
||||
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
BIN
static/.DS_Store
vendored
Normal file
BIN
static/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -1,8 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" charset="utf-8">
|
||||
{% include "partials/head.html" %}
|
||||
{% include "partials/navbar.html" %}
|
||||
|
||||
<body>
|
||||
{% include "partials/header.html" %}
|
||||
|
||||
<div id="content">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
{% extends "_default/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<img src="processed_images/threefold_img2.png" alt="">
|
||||
<div class="sm:w-5/6 md:w-4/5 xl:w-1/2 mt-10 mr-auto ml-auto px-6 lg:px-16">
|
||||
<article class="article">
|
||||
<div class="border-blue-700 dark:border-white mx-auto my-auto w-4/5 border-solid border-b-4"></div>
|
||||
{{ page.content | safe }}
|
||||
</article>
|
||||
</div>
|
||||
{% if page.earlier or page.later %}
|
||||
<div class="font-sans w-full px-8 md:px-0 bg-blue-700 align-middle mt-10 mb-10">
|
||||
<h3 class="text-center text-3xl tracking-normal mb-2 pt-2"><a href="/posts" class="border-transparent text-blue-100 hover:text-white">Other posts</a></h3>
|
||||
{% if page.later %}
|
||||
<p class="text-center mt-2 mb-0 text-xl text-white leading-tight tracking-tight">
|
||||
<strong>Next</strong>:
|
||||
<a class="border-transparent text-blue-100 hover:text-white hover:border-blue-100" href="{{ page.later.permalink }}">{{ page.later.title }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if page.earlier %}
|
||||
<p class="text-center pb-4 mt-2 text-xl text-white leading-tight tracking-tight">
|
||||
<strong>Previous</strong>:
|
||||
<a class="border-transparent text-blue-100 hover:text-white hover:border-blue-100" href="{{ page.earlier.permalink }}">{{ page.earlier.title}}</a>
|
||||
</p>
|
||||
{% else %}
|
||||
<span class="text-xs"> </span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock content %}
|
||||
@@ -1,27 +1,27 @@
|
||||
{% extends "_default/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- Landing page template, has a banner and rows of page summaries -->
|
||||
<main class="pt-16">
|
||||
|
||||
<!-- Landing page banner -->
|
||||
{% include "partials/splitRow.html" %}
|
||||
|
||||
<!-- Landing page vertical image -->
|
||||
<!-- Landing page full width vertical image -->
|
||||
<img src="processed_images/threefold_img2.png" alt="">
|
||||
<br/>
|
||||
|
||||
{%- set section = get_section(path="about/community/_index.md") %}
|
||||
<br/>
|
||||
<!-- Landing page banner -->
|
||||
{% include "partials/splitRow.html" %}
|
||||
<br/>
|
||||
|
||||
<!-- Summary row of sustainability page -->
|
||||
{%- set section = get_section(path="about/sustainability/_index.md") %}
|
||||
|
||||
<br/>
|
||||
<!-- Landing page banner -->
|
||||
{% include "partials/splitRow.html" %}
|
||||
{%- set section = get_section(path="about/creators/_index.md") %}
|
||||
|
||||
<br/>
|
||||
<!-- Landing page banner -->
|
||||
|
||||
<!-- Summary row of creators page -->
|
||||
{%- set section = get_section(path="about/creators/_index.md") %}
|
||||
{% include "partials/splitRow.html" %}
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
{% extends "_default/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- Default page template for blog posts and basic informative markdown files -->
|
||||
<h1 class="title">
|
||||
{{ section.title }}
|
||||
</h1>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
{% extends "_default/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- Default page template for blog posts and basic informative markdown files -->
|
||||
<div class="sm:w-5/6 md:w-4/5 mr-auto ml-auto px-6 lg:px-16 xl:w-11/12">
|
||||
<img src="/processed_images/threefold_blog.png" alt="">
|
||||
<div>
|
||||
|
||||
@@ -0,0 +1,480 @@
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ -->
|
||||
<script type="text/javascript">
|
||||
var inDisplay = "";
|
||||
|
||||
function toggleMenu() {
|
||||
if (inDisplay === "solutions") {
|
||||
hideMenu();
|
||||
inDisplay = "";
|
||||
}
|
||||
else {
|
||||
showMenu();
|
||||
inDisplay = "solutions";
|
||||
}
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
|
||||
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";
|
||||
}
|
||||
|
||||
window.onload = function(){
|
||||
document.getElementById("solutions-btn").addEventListener( 'click', toggleMenu);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<div class="z-10 relative bg-semi-white">
|
||||
<div class="relative z-10 shadow">
|
||||
<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>
|
||||
<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" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="-mr-2 -my-2 md:hidden">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: menu -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden md:flex-1 md:flex md:items-center md:justify-between md:space-x-12">
|
||||
<nav class="flex space-x-10">
|
||||
<div class="relative">
|
||||
<!-- 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">
|
||||
<span>Solutions</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
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>
|
||||
</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">
|
||||
Pricing
|
||||
</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">
|
||||
Docs
|
||||
</a>
|
||||
<div class="relative">
|
||||
<!-- 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">
|
||||
<span>Menu</span>
|
||||
<!--
|
||||
Heroicon name: chevron-down
|
||||
|
||||
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>
|
||||
</div>
|
||||
</nav>
|
||||
<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">
|
||||
Sign in
|
||||
</a>
|
||||
<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">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Solutions menu -->
|
||||
<!--
|
||||
'Solutions' flyout menu, show/hide based on flyout menu state.
|
||||
|
||||
Entering: "transition ease-out duration-200"
|
||||
From: "opacity-0 -translate-y-1"
|
||||
To: "opacity-100 translate-y-0"
|
||||
Leaving: "transition ease-in duration-150"
|
||||
From: "opacity-100 translate-y-0"
|
||||
To: "opacity-0 -translate-y-1"
|
||||
md:block or hidden
|
||||
-->
|
||||
<div id="solutions" class="opacity-0 -translate-y-1 absolute inset-x-0 transform shadow-lg backdrop-blur">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
</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-1">
|
||||
<p class="text-base leading-6 font-medium 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>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
</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-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Speak directly to your customers in a more meaningful way.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
</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-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Your customer data will be safe and secure.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
</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-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Connect with third-party tools that you're already using.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- More menu -->
|
||||
<!--
|
||||
'More' flyout menu, show/hide based on flyout menu state.
|
||||
|
||||
Entering: "transition ease-out duration-200"
|
||||
From: "opacity-0 -translate-y-1"
|
||||
To: "opacity-100 translate-y-0"
|
||||
Leaving: "transition ease-in duration-150"
|
||||
From: "opacity-100 translate-y-0"
|
||||
To: "opacity-0 -translate-y-1"
|
||||
-->
|
||||
|
||||
<!--
|
||||
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
|
||||
Read the documentation to get started: https://tailwindui.com/documentation
|
||||
--><!-- This example requires Tailwind CSS v1.4.0+ -->
|
||||
|
||||
|
||||
<!--
|
||||
Flyout menu, show/hide based on flyout menu state.
|
||||
|
||||
Entering: "transition ease-out duration-200"
|
||||
From: "opacity-0 -translate-y-1"
|
||||
To: "opacity-100 translate-y-0"
|
||||
Leaving: "transition ease-in duration-150"
|
||||
From: "opacity-100 translate-y-0"
|
||||
To: "opacity-0 -translate-y-1"
|
||||
-->
|
||||
<div id="menu" class="hidden absolute inset-x-0 transform shadow-lg">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
</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-1">
|
||||
<p class="text-base leading-6 font-medium 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>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
</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-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Speak directly to your customers in a more meaningful way.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
</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-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Your customer data will be safe and secure.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</span>
|
||||
</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-1">
|
||||
<p class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</p>
|
||||
<p class="text-sm leading-5 text-gray-500">
|
||||
Connect with third-party tools that you're already using.
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm leading-5 font-medium text-indigo-600">
|
||||
Learn more →
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
Mobile menu, show/hide based on mobile menu state.
|
||||
|
||||
Entering: "duration-200 ease-out"
|
||||
From: "opacity-0 scale-95"
|
||||
To: "opacity-100 scale-100"
|
||||
Leaving: "duration-100 ease-in"
|
||||
From: "opacity-100 scale-100"
|
||||
To: "opacity-0 scale-95"
|
||||
-->
|
||||
<div class="absolute z-20 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div class="rounded-lg shadow-lg">
|
||||
<div class="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
|
||||
<div class="pt-5 pb-6 px-5 space-y-6 sm:space-y-8 sm:pb-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/v1/workflow-mark-on-white.svg" alt="Workflow" />
|
||||
</div>
|
||||
<div class="-mr-2">
|
||||
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
|
||||
<!-- Heroicon name: x -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="space-y-8">
|
||||
<div class="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
|
||||
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: chart-bar -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Analytics
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: cursor-click -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Engagement
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: shield-check -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Security
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="-m-3 space-x-4 flex items-center p-3 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
|
||||
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
||||
<!-- Heroicon name: view-grid -->
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
</div>
|
||||
<div class="text-base leading-6 font-medium text-gray-900">
|
||||
Integrations
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-base leading-6">
|
||||
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
View all products →
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-6 px-5 space-y-6">
|
||||
<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">
|
||||
Pricing
|
||||
</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">
|
||||
Docs
|
||||
</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">
|
||||
Company
|
||||
</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">
|
||||
Resources
|
||||
</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">
|
||||
Blog
|
||||
</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">
|
||||
Contact Sales
|
||||
</a>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<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">
|
||||
Sign up
|
||||
</a>
|
||||
</span>
|
||||
<p class="text-center text-base leading-6 font-medium text-gray-500">
|
||||
Existing customer?
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
<!-- Split Row partial.
|
||||
Basic row with a heading, description and link (optional) on the left,
|
||||
And an img on the right. Used to summarize pages in landing page etc, and as page headers.
|
||||
-->
|
||||
<body>
|
||||
|
||||
|
||||
<div class="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center m-20">
|
||||
|
||||
<div class="relative lg:w-11/12">
|
||||
<h1 class="text-5xl fw-500 font-normal mb-10">
|
||||
{{ section.title }}
|
||||
@@ -13,6 +18,7 @@
|
||||
<div class="mt-10 -mx-4 relative lg:mt-0 max-w-full">
|
||||
<img class="relative mx-auto max-w-full max-h-80 mr-0" src={{section.extra.imgPath}} alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
<body>
|
||||
|
||||
<div class="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center m-20">
|
||||
<div class="relative lg:w-11/12">
|
||||
{{ section.content | safe }}
|
||||
</div>
|
||||
|
||||
<div class="mt-10 -mx-4 relative lg:mt-0 max-w-full">
|
||||
<img class="relative mx-auto max-w-full max-h-80 mr-0" src={{section.extra.imgPath}} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
Reference in New Issue
Block a user