Skip to content

Commit 6c7d211

Browse files
danschultzerdanschultzer
committed
Identity provider landing page
1 parent 39f26bb commit 6c7d211

File tree

4 files changed

+221
-0
lines changed

4 files changed

+221
-0
lines changed

‎_layouts/business.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<head>
2+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<meta charset="utf-8">
4+
{% feed_meta %}
5+
{% seo %}
6+
<link rel="stylesheet" href="/css/site.css">
7+
</head>
8+
<html>
9+
<body class="bg-gray-200 text-gray-600">
10+
{{ content }}
11+
12+
<footer class="text-center mb-6 mt-20 px-6">
13+
<p class="text-xs">Copyright © 2019</p>
14+
</footer>
15+
16+
{% if jekyll.environment == 'production' %}
17+
{% include analytics.html %}
18+
{% endif %}
19+
</body>
20+
</html>
21+

‎business.html

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
---
2+
layout: business
3+
title: Zero compromise identity provider for your platform
4+
permalink: /business/
5+
---
6+
7+
<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%);">
8+
<nav class="p-6">
9+
<div class="w-full max-w-screen-xl relative mx-auto px-6 container">
10+
<div class="flex w-full">
11+
<div class="w-1/2 md:w-1/4 xl:w-1/5 pr-6">
12+
<a href="/">
13+
<svg class="fill-current h-10" viewBox="0 0 250 100" xmlns="http://www.w3.org/2000/svg">
14+
<!---->
15+
<defs>
16+
<!---->
17+
<linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="4ac835a4-184e-465d-b92b-7e4b29f60261" gradientTransform="rotate(25)">
18+
<stop stop-color="#e2e8f0" offset="0%"/>
19+
<stop stop-color="#718096" offset="100%"/>
20+
</linearGradient>
21+
</defs>
22+
<defs>
23+
<!---->
24+
</defs>
25+
26+
<defs>
27+
<!---->
28+
</defs>
29+
<g>
30+
<title>background</title>
31+
<rect fill="none" id="canvas_background" height="102" width="252" y="-1" x="-1"/>
32+
</g>
33+
<g>
34+
<title>Layer 1</title>
35+
<rect id="svg_1" class="logo-background-square" height="100" width="250" y="1" x="1" fill="transparent"/>
36+
<g transform="matrix(5.84552 0 0 5.84552 62.0691 109.027)" fill="#e2e8f0" id="d16ce35a-4cdb-47a5-87d9-dc876631df02">
37+
<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"/>
38+
</g>
39+
<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">
40+
<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"/>
41+
</g>
42+
</g>
43+
</svg>
44+
</a>
45+
</div>
46+
<div class="sm:flex justify-end items-center w-1/2 md:w-3/4 xl:w-4/5 hidden">
47+
<a href="#" class="block hover:text-gray-400 mr-10">
48+
Overview
49+
</a>
50+
</div>
51+
</div>
52+
</div>
53+
</nav>
54+
55+
<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;">
56+
<div class="xl:flex -mx-6">
57+
<div class="px-6 text-left md:text-center xl:text-left max-w-2xl md:max-w-3xl mx-auto">
58+
<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>
59+
<p class="mt-6 leading-relaxed sm:text-lg md:text-xl xl:text-lg text-gray-400">
60+
Supercharged Pow-based identity provider that helps you build, launch and scale platforms fast with no compromise in security or flexibility.
61+
</p>
62+
<div class="flex mt-6 justify-start md:justify-center xl:justify-start">
63+
<form class="xl:mt-4 mt-8 flex" action="https://powauth.us4.list-manage.com/subscribe/post?u=3c79430bd0bb2b28cb6b3f97c&amp;id=67a097a682" method="post">
64+
<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>
65+
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3c79430bd0bb2b28cb6b3f97c_67a097a682" tabindex="-1" value=""></div>
66+
<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">
67+
<div class="hidden sm:block">
68+
Join Beta
69+
</div>
70+
<div class="block sm:hidden">
71+
<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>
72+
</div>
73+
</button>
74+
</form>
75+
</div>
76+
</div>
77+
78+
<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">
79+
<div class="mx-auto" style="width:32rem;height:21rem;overflow:hidden;">
80+
<div class="flex flex-col">
81+
<div class="shadow-lg bg-blue-100 p-6 rounded-lg overflow-hidden" style="width:30rem;">
82+
<div class="rounded-lg bg-gray-400 w-1/5 h-3 mx-auto m-3 mt-10"></div>
83+
84+
<div class="w-1/2 bg-white border-2 border-gray-400 rounded-lg mx-auto" data-label="Login">
85+
<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>
86+
87+
<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>
88+
89+
<div class="rounded-lg bg-blue-400 w-1/3 h-3 mx-auto m-5 mb-10" data-label="Button"></div>
90+
</div>
91+
92+
<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">
93+
<div class="mx-auto flex flex-row items-start justify-between w-24 mt-10">
94+
<div class="rounded-lg bg-gray-300 border-2 border-gray-400 w-5 h-3"></div>
95+
<div class="rounded-lg bg-gray-300 border-2 border-gray-400 w-5 h-3"></div>
96+
<div class="rounded-lg bg-gray-300 border-2 border-gray-400 w-5 h-3"></div>
97+
<div class="rounded-lg bg-gray-300 border-2 border-gray-400 w-5 h-3"></div>
98+
</div>
99+
100+
<div class="rounded-lg bg-blue-400 w-1/3 h-3 mx-auto m-5 mb-10" data-label="Button"></div>
101+
</div>
102+
103+
<div class="rounded-lg bg-gray-400 w-1/3 h-1 mx-auto m-3 mb-10"></div>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
111+
<style type="text/css">
112+
#top-animation * {
113+
transition: all 1s
114+
}
115+
#top-animation[data-page="0"] div[data-label="Login"] div[data-label="Button"] {
116+
transform: translateY(-1.5em);
117+
}
118+
#top-animation[data-page="0"] div[data-label="Login"] div[data-label="User ID"] {
119+
transform: translateY(0.5em);
120+
}
121+
#top-animation[data-page="0"] div[data-label="Login"] div[data-label="Password"] {
122+
transform: translateY(-1.0em);
123+
opacity: 0;
124+
}
125+
126+
#top-animation[data-page="2"] div[data-label="Login"] {
127+
transform:translateX(-10em);
128+
opacity:0;
129+
}
130+
131+
#top-animation[data-page="2"] div[data-label="2FA"] {
132+
transform:translateX(-13.5em);
133+
opacity:1 !important;
134+
}
135+
</style>
136+
<script type="text/javascript">
137+
let element = document.querySelector("#top-animation")
138+
139+
function rotateAnimation() {
140+
setTimeout(function() {
141+
let num = element.getAttribute("data-page")
142+
num++;
143+
if (num > 2) { num = 0 }
144+
145+
element.setAttribute("data-page", num)
146+
147+
rotateAnimation()
148+
}, 3000)
149+
}
150+
151+
rotateAnimation();
152+
</script>
153+
154+
<div class="absolute w-full bottom-0" style="margin-left:-5em;">
155+
<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">
156+
<g>
157+
<style type="text/css">
158+
.shape{fill:#edf2f7;}
159+
</style>
160+
<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"/>
161+
</g>
162+
</svg>
163+
</div>
164+
</header>
165+
166+
<section class="w-full max-w-screen-xl relative mx-auto mt-20 lg:px-20 container">
167+
<div class="flex flex-col md:flex-row items-start justify-between">
168+
<div class="w-full px-10 pb-10">
169+
<h4 class="text-xl font-bold text-purple-700">Rapid integration</h4>
170+
<p class="text-gray-600 leading-relaxed">No longer will you have to deal with authentication before you can move on to your business model. Leverage a complete authentication toolset to launch fast and reliably.</p>
171+
</div>
172+
<div class="w-full px-10 pb-10">
173+
<h4 class="text-xl font-bold text-purple-700">Scale with comfort</h4>
174+
<p class="text-gray-600 leading-relaxed">In one step you can enhance the auth story of your platform. Add additional security features ad hoc as your platform scales. It's as easy as one API request or a click.</p>
175+
</div>
176+
<div class="w-full px-10">
177+
<h4 class="text-xl font-bold text-purple-700">Stay compliant</h4>
178+
<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>
179+
</div>
180+
</div>
181+
</section>
182+
183+
<section class="w-full max-w-screen-xl relative mt-10 lg:px-20 pt-20 border-t container mx-auto">
184+
<div class="text-center w-2/3 mx-auto">
185+
<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>
186+
<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>
187+
</div>
188+
189+
<div class="flex flex-col md:flex-row items-start justify-between w-2/3 mx-auto">
190+
<div class="rounded overflow-hidden shadow-lg bg-gray-300 md:w-1/2 p-5 m-5">
191+
<h4 class="text-xl font-bold text-purple-700">Open source core</h4>
192+
<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>
193+
</div>
194+
<div class="rounded overflow-hidden shadow-lg bg-gray-300 md:w-1/2 p-5 m-5">
195+
<h4 class="text-xl font-bold text-purple-700">Supercharged features</h4>
196+
<p class="mt-6 text-gray-600 leading-relaxed">Improve security and user experience in your platform with SSO, MFA, WebAuthn and OAuth server, all in one neat admin interface.</p>
197+
</div>
198+
</div>
199+
</section>

‎css/business.css

Whitespace-only changes.

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ <h1 class="text-3xl sm:text-4xl md:text-5xl xl:text-4xl font-light leading-tight
7272
</p>
7373
<div class="flex mt-6 justify-start md:justify-center xl:justify-start">
7474
<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>
75+
<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>
7576
</div>
7677
</div>
7778
<div class="mt-12 xl:mt-0 px-6 flex-shrink-0 hidden md:block">

0 commit comments

Comments
 (0)