Skip to content

Commit

Permalink
Identity provider landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@danschultzer
danschultzer committed Nov 26, 2019
1 parent 5fd0aed commit ce485be
Show file tree
Hide file tree
Showing 4 changed files with 221 additions and 0 deletions.
21 changes: 21 additions & 0 deletions _layouts/business.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
{% feed_meta %}
{% seo %}
<link rel="stylesheet" href="/css/site.css">
</head>
<html>
<body class="bg-gray-200 text-gray-600">
{{ content }}

<footer class="text-center mb-6 mt-20 px-6">
<p class="text-xs">Copyright © 2019</p>
</footer>

{% if jekyll.environment == 'production' %}
{% include analytics.html %}
{% endif %}
</body>
</html>

199 changes: 199 additions & 0 deletions business.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
---
layout: business
title: Zero compromise identity provider for your platform
permalink: /business/
---

<header class="text-gray-300 relative px-20" style="background:rgb(120,190,255);background: linear-gradient(315deg, rgba(120,190,255,1) 0%, rgba(91,11,199,1) 100%);">
<nav class="p-6">
<div class="w-full max-w-screen-xl relative mx-auto px-6 container">
<div class="flex w-full">
<div class="w-1/2 md:w-1/4 xl:w-1/5 pr-6">
<a href="/">
<svg class="fill-current h-10" viewBox="0 0 250 100" xmlns="http://www.w3.org/2000/svg">
<!---->
<defs>
<!---->
<linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="4ac835a4-184e-465d-b92b-7e4b29f60261" gradientTransform="rotate(25)">
<stop stop-color="#e2e8f0" offset="0%"/>
<stop stop-color="#718096" offset="100%"/>
</linearGradient>
</defs>
<defs>
<!---->
</defs>

<defs>
<!---->
</defs>
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="102" width="252" y="-1" x="-1"/>
</g>
<g>
<title>Layer 1</title>
<rect id="svg_1" class="logo-background-square" height="100" width="250" y="1" x="1" fill="transparent"/>
<g transform="matrix(5.84552 0 0 5.84552 62.0691 109.027)" fill="#e2e8f0" id="d16ce35a-4cdb-47a5-87d9-dc876631df02">
<path id="svg_2" d="m5.07631,-3.29044c0,0.75 0.42,0.95 0.91,0.95c0.29,0 0.58,-0.08 0.93,-0.14c-0.16,-1.29 -0.21,-2.56 -0.22,-3.82c0.24,0.04 0.5,0.05 0.76,0.05c1.9,0 3.93,-1.07 3.93,-3.17c0,-1.43 -1.12,-2.86 -3.67,-2.86l-1.99,0c-0.33,0 -0.86,-0.04 -0.86,-0.04c0,0 0.07,0.15 0.14,1.51c0.04,0.9 0.07,2.02 0.07,3.18l0,4.34zm1.61,-3.67l0,-1.05c0,-1.16 0.05,-3.53 0.05,-3.53l0.44,0c1.68,0 2.46,1.11 2.46,2.24c0,1.18 -0.85,2.37 -2.46,2.37c-0.16,0 -0.33,0 -0.49,-0.03zm5.62,1.15c0,1.82 1.21,3.54 3.56,3.54c2.41,0 3.7,-2 3.7,-4.09c0,-1.69 -1.21,-3.33 -3.56,-3.33c-2.42,0 -3.7,1.88 -3.7,3.88zm1.71,-0.24c0,-1.5 0.59,-3 1.84,-3c1.34,0 2,1.47 2,2.94c0,1.6 -0.6,3.2 -1.85,3.2c-1.33,0 -1.99,-1.56 -1.99,-3.14zm8.47,2.56c0.37,1.18 1.81001,1.22 1.81001,1.22l0.49,-1.06c0.35,-0.76 0.85,-1.81 1.01,-2.43l0.07,0c0.29,0.93 0.5,1.67 0.68,2.27c0.37,1.18 1.89,1.22 1.89,1.22l2.12,-5.88c0.37,-1.05 0.72,-1.26 0.72,-1.26l0,-0.07c0,0 -0.21,-0.11 -0.64,-0.11c-1.22001,0 -0.49,0.54 -2.38,5.96l0,0.02l-0.07,0c-0.63,-1.56 -1.4,-4.12 -1.68,-5.32c-0.1,-0.44 -0.63,-0.66 -1.11,-0.66c-0.56,0 -0.81,0.12 -0.81,0.12c0,0 0.73,1.49 0.73,2.33c0,0.75 -0.25,1.59 -1.12,3.53l-0.07,0c-0.62,-1.56 -1.53,-4.12 -1.82,-5.32c-0.11,-0.44 -0.63,-0.66 -1.11,-0.66c-0.49,0 -0.77,0.05 -1.05,0.11l0,0.07c0.27,0.22 0.42,0.55 0.56,0.84c0.52,1.12 1.39,3.81 1.78,5.08z"/>
</g>
<g transform="matrix(0.964697 0 0 0.964697 12.923 73.6106)" fill="url(#4ac835a4-184e-465d-b92b-7e4b29f60261)" id="2942cba9-060b-4c3f-b817-dc26fe81c89c">
<path id="svg_3" d="m9.91768,-67.14058c-4.776,1.17101 -3.477,7.049 0.449,5.098c0.07,0 22.796,-7.63699 37.68999,16.029c1.83,2.908 4.276,-0.855 3.284,-2.92c-3.13599,-6.528 -16.66299,-24.28098 -41.42399,-18.208l0.001,0.001zm-10.801,48.948c-2.816,-18.09901 4.768,-30.09701 14.204,-32.52901c22.46,-5.79 33.57199,21.898 33.57199,36.46301c0,14.212 -10.142,20.47001 -17.37099,19.836c-12.146,-1.067 -17.865,-13.772 -19.63,-23.664c-0.431,-2.411 -3.778,-20.96701 11.22,-21.07901c10.214,-0.075 15.956,17.60201 15.286,24.41401c-0.438,4.451 -2.527,9.10001 -7.254,8.685c-6.302,-0.553 -8.614,-9.611 -8.932,-13.19001c-0.07,-0.568 -1.36,-7.587 2.072,-6.993c2.367,0.41 2.946,4.816 3.027,5.104c0.33,1.057 0.554,2.385 0.69,3.612c0.144,1.04 -0.091,2.234 0.327,3.392c0.41,1.345 1.588,2.102 2.608,2.192c0.834,0.073 2.426,-0.78 2.48,-2.084c0.108,-6.936 -2.796,-19.278 -10.98,-18.552c-4.602,0.408 -7.029,5.676 -5.718,14.17c1.277,8.272 5.584,17.367 14.098,18.11401c9.36,0.822 13.13,-7.713 13.13,-14.144c0,-18.338 -12.402,-35.16801 -27.059,-30.13c-8.417,2.893 -13.525,12.056 -10.65,27c2.98,15.49201 12.146,29.707 25.445,29.322c24.348,-0.70599 22.65699,-26.64 22.65699,-26.64c0,-23.83001 -19.30799,-51.401 -44.06899,-40.66501c-10.208,4.427 -18.192,19.353 -15.178,37.56401c7.646,46.19699 41.032,40.89 42.591,40.65001l0.117,0.013c5.327,-0.771 4.238,-6.711 0.34,-6.044c-22.105,3.785 -34.039,-15.648 -37.022,-34.81601l-0.001,-0.001z"/>
</g>
</g>
</svg>
</a>
</div>
<div class="sm:flex justify-end items-center w-1/2 md:w-3/4 xl:w-4/5 hidden">
<a href="#" class="block hover:text-gray-400 mr-10">
Overview
</a>
</div>
</div>
</div>
</nav>

<div class="w-full max-w-screen-xl relative mx-auto px-6 pt-16 pb-40 md:pb-24 container" style="z-index:1;">
<div class="xl:flex -mx-6">
<div class="px-6 text-left md:text-center xl:text-left max-w-2xl md:max-w-3xl mx-auto">
<h1 class="text-3xl sm:text-4xl md:text-5xl xl:text-4xl font-light leading-tight">Build. Launch. Scale. <span class="sm:block font-normal">Authentication for developers.</span></h1>
<p class="mt-6 leading-relaxed sm:text-lg md:text-xl xl:text-lg text-gray-400">
Supercharged Pow-based identity provider that helps you build, launch and scale platforms fast with no compromise in security or flexibility.
</p>
<div class="flex mt-6 justify-start md:justify-center xl:justify-start">
<form class="xl:mt-4 mt-8 flex" action="https://powauth.us4.list-manage.com/subscribe/post?u=3c79430bd0bb2b28cb6b3f97c&amp;id=67a097a682" method="post">
<input class="rounded-l-full p-2 sm:p-4 border-t mr-0 border-b border-l text-gray-800 border-purple-200 bg-white w-full sm:w-auto" placeholder="[email protected]" type="email" name="EMAIL" required>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3c79430bd0bb2b28cb6b3f97c_67a097a682" tabindex="-1" value=""></div>
<button class="px-8 rounded-r-full bg-purple-600 text-gray-300 hover:text-gray-100 font-bold p-2 sm:p-4 uppercase border-purple-600 border-t border-b border-r" type="submit">
<div class="hidden sm:block">
Join Beta
</div>
<div class="block sm:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path d="M155.896 579.196c-13.795 14.185-13.488 36.863.709 50.682 14.173 13.795 36.862 13.476 50.658-.72l276.736-285.382-25.69-24.969 25.796 25.017c13.82-14.257 13.488-37.017-.768-50.824-.425-.402-.838-.78-1.263-1.157l-274.81-281c-13.796-14.197-36.485-14.516-50.659-.721-14.197 13.82-14.504 36.497-.708 50.682l252.405 258.109-252.405 260.283z" fill="#e2e8f0"></path></svg>
</div>
</button>
</form>
</div>
</div>

<div class="mt-12 xl:mt-0 px-6 flex-shrink-0 hidden md:block" style="transform: perspective(3000px) rotateY(-30deg) rotateX(5deg)" id="top-animation" data-page="0">
<div class="mx-auto" style="width:32rem;height:21rem;overflow:hidden;">
<div class="flex flex-col">
<div class="shadow-lg bg-blue-100 p-6 rounded-lg overflow-hidden" style="width:30rem;">
<div class="rounded-lg bg-gray-400 w-1/5 h-3 mx-auto m-3 mt-10"></div>

<div class="w-1/2 bg-white border-2 border-gray-400 rounded-lg mx-auto" data-label="Login">
<div class="rounded-lg bg-gray-300 border-2 border-gray-400 w-1/2 h-3 mx-auto m-3 mt-10" data-label="User ID"></div>

<div class="rounded-lg bg-gray-300 border-2 border-gray-400 w-1/2 h-3 mx-auto m-3" data-label="Password"></div>

<div class="rounded-lg bg-blue-400 w-1/3 h-3 mx-auto m-5 mb-10" data-label="Button"></div>
</div>

<div class="w-1/2 bg-white border-2 border-gray-400 rounded-lg mx-auto" style="position:absolute;margin-top:-9rem;margin-left:20rem;width:14.5rem;opacity:0;" data-label="2FA">
<div class="mx-auto flex flex-row items-start justify-between w-24 mt-10">
<div class="rounded-lg bg-gray-300 border-2 border-gray-400 w-5 h-3"></div>
<div class="rounded-lg bg-gray-300 border-2 border-gray-400 w-5 h-3"></div>
<div class="rounded-lg bg-gray-300 border-2 border-gray-400 w-5 h-3"></div>
<div class="rounded-lg bg-gray-300 border-2 border-gray-400 w-5 h-3"></div>
</div>

<div class="rounded-lg bg-blue-400 w-1/3 h-3 mx-auto m-5 mb-10" data-label="Button"></div>
</div>

<div class="rounded-lg bg-gray-400 w-1/3 h-1 mx-auto m-3 mb-10"></div>
</div>
</div>
</div>
</div>
</div>
</div>

<style type="text/css">
#top-animation * {
transition: all 1s
}
#top-animation[data-page="0"] div[data-label="Login"] div[data-label="Button"] {
transform: translateY(-1.5em);
}
#top-animation[data-page="0"] div[data-label="Login"] div[data-label="User ID"] {
transform: translateY(0.5em);
}
#top-animation[data-page="0"] div[data-label="Login"] div[data-label="Password"] {
transform: translateY(-1.0em);
opacity: 0;
}

#top-animation[data-page="2"] div[data-label="Login"] {
transform:translateX(-10em);
opacity:0;
}

#top-animation[data-page="2"] div[data-label="2FA"] {
transform:translateX(-13.5em);
opacity:1 !important;
}
</style>
<script type="text/javascript">
let element = document.querySelector("#top-animation")

function rotateAnimation() {
setTimeout(function() {
let num = element.getAttribute("data-page")
num++;
if (num > 2) { num = 0 }

element.setAttribute("data-page", num)

rotateAnimation()
}, 3000)
}

rotateAnimation();
</script>

<div class="absolute w-full bottom-0" style="margin-left:-5em;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1200 300" style="enable-background:new 0 0 1200 300;" xml:space="preserve">
<g>
<style type="text/css">
.shape{fill:#edf2f7;}
</style>
<path class="shape" d="m0,301l199,-50l2,49l1052,-264c0,0 -5,343 -5,344c0,1 -1256,14 -1256,14c0,0 8,-93 8,-93z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#ffffff" fill="#ffffff"/>
</g>
</svg>
</div>
</header>

<section class="w-full max-w-screen-xl relative mx-auto mt-20 lg:px-20 container">
<div class="flex flex-col md:flex-row items-start justify-between">
<div class="w-full px-10 pb-10">
<h4 class="text-xl font-bold text-purple-700">Rapid integration</h4>
<p class="text-gray-600 leading-relaxed">No longer will have you to deal with authentication before you can move on to your business model. Leverage a complete authentication toolset to launch fast and reliably.</p>
</div>
<div class="w-full px-10 pb-10">
<h4 class="text-xl font-bold text-purple-700">Scale with comfort</h4>
<p class="text-gray-600 leading-relaxed">Don't limit yourself when you eventually have to add additional security features. With just an API request or a click you can add additional features in a single step, enhancing your auth story.</p>
</div>
<div class="w-full px-10">
<h4 class="text-xl font-bold text-purple-700">Stay compliant</h4>
<p class="text-gray-600 leading-relaxed">Your platform will be kept up-to-date without a single commit or deploy. Keep your code simple and data secure with a powerful administration interface.</p>
</div>
</div>
</section>

<section class="w-full max-w-screen-xl relative mt-10 lg:px-20 pt-20 border-t container mx-auto">
<div class="text-center w-2/3 mx-auto">
<h3 class="text-3xl font-bold text-purple-700">The identity provider that <span class="sm:block font-normal">helps you focus on your business</span></h3>
<p class="mt-6 text-gray-600 leading-relaxed sm:text-lg md:text-xl xl:text-lg">Authentication is complex. We make it easy. Our identity provider is ready to use with any language. Set up in minutes and start working on your business.</p>
</div>

<div class="flex flex-col md:flex-row items-start justify-between w-2/3 mx-auto">
<div class="rounded overflow-hidden shadow-lg bg-gray-300 md:w-1/2 p-5 m-5">
<h4 class="text-xl font-bold text-purple-700">Open source core</h4>
<p class="mt-6 text-gray-600 leading-relaxed">Our <a href="/" class="text-purple-600">open source authentication solution</a> is being used in numerous platforms which provides a battle-tested, vetted and ever-evolving foundation.</p>
</div>
<div class="rounded overflow-hidden shadow-lg bg-gray-300 md:w-1/2 p-5 m-5">
<h4 class="text-xl font-bold text-purple-700">Supercharged features</h4>
<p class="mt-6 text-gray-600 leading-relaxed">Take care of your platform with SSO, MFA, WebAuthn and OAuth server, all in one neat interface through one click or API request.</p>
</div>
</div>
</section>
Empty file added css/business.css
View file
Empty file.
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ <h1 class="text-3xl sm:text-4xl md:text-5xl xl:text-4xl font-light leading-tight
</p>
<div class="flex mt-6 justify-start md:justify-center xl:justify-start">
<a href="https://hexdocs.pm/pow/README.html#installation" class="rounded-lg px-4 md:px-5 xl:px-4 py-3 md:py-4 xl:py-3 bg-indigo-500 hover:bg-indigo-600 md:text-lg xl:text-base text-gray-300 font-semibold leading-tight shadow-md">Get Started</a>
<a href="/business/" class="ml-4 rounded-lg px-4 md:px-5 xl:px-4 py-3 md:py-4 xl:py-3 bg-gray-400 hover:bg-gray-500 md:text-lg xl:text-base text-gray-800 font-semibold leading-tight shadow-md">For Business</a>
</div>
</div>
<div class="mt-12 xl:mt-0 px-6 flex-shrink-0 hidden md:block">
Expand Down

0 comments on commit ce485be

Please sign in to comment.