zev/userbase-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract common styles in the css file

Browse Source
This commit is contained in:
Daniel Vassallo
2019-09-30 18:35:03 -07:00
parent 55f8885525
commit c6a063df67
2 changed files with 110 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/index.html
View File

@@ -7,56 +7,53 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body class="pb-10">
<div class="container mx-auto text-center max-w-2xl px-4 text-blackish" style="font-size: 16px">
<div class="my-10">
<body>
<div class="container mx-auto max-w-2xl px-4 text-blackish" style="font-size: 16px">
<div class="section">
<div class="flex justify-center">
<img class="w-32 h-32" src="./img/icon.png">
</div>
<h1 class="font-black text-6xl leading-none tracking-tight font-logo">Userbase</h1>
<h2 class="text-2xl leading-tight mt-1 tracking-tight">You won't believe it's not a database!</h2>
<h1 class="font-logo">Userbase</h1>
<h2>You won't believe it's not a database!</h2>
</div>
<hr>
<div class="my-10">
<h3 class="font-black text-3xl tracking-tight" id="what-is-userbase">What is Userbase?</h3>
<div class="text-left font-sans tracking-tight">
<p class="mb-4">Userbase is like a database, but purpose-built for web app user data. It's accessible directly
<div class="section">
<h3 id="what-is-userbase">What is Userbase?</h3>
<p>Userbase is like a database, but purpose-built for web app user data. It's accessible directly
from the browser through a very simple JavaScript SDK.</p>
</div>
</div>
<hr>
<div class="my-10">
<h3 class="font-black text-3xl tracking-tight" id="why-not-a-database">Why isn't it a database?</h3>
<div class="text-left font-sans tracking-tight">
<p class="mb-4">With Userbase you can durably store, update, delete, and query user data. But that's where the
<div class="section">
<h3 id="why-not-a-database">Why isn't it a database?</h3>
<p>With Userbase you can durably store, update, delete, and query user data. But that's where the
similarities with traditional databases end.</p>
<h4 class="font-bold text-xl tracking-tight" id="zero-management">Zero management</h4>
<p class="mb-4">Unlike a real database, all Userbase queries run in the browser, with the server-side acting as
<h4 id="zero-management">Zero management</h4>
<p>Unlike a real database, all Userbase queries run in the browser, with the server-side acting as
a dumb data store. There's no database to manage and worry about.
</p>
<h4 class="font-bold text-xl tracking-tight" id="user-management">Built-in user management</h4>
<p class="mb-4">Unlike a real database, Userbase takes care of your user accounts. It comes with built-in APIs
for user signups, logins, and access control.</p>
<h4 class="font-bold text-xl tracking-tight" id="e2ee">End-to-end encrypted</h4>
<p class="mb-4">Unlike a real database, Userbase won't show you what your users store in your web app.</p>
<p class="mb-4"></p>Wait, what!? — Yes, that's a feature — maybe the most important feature. Userbase spares you
from the liability of handling user data by encrypting everything in the browser, using keys that always stay
with the user.</p>
</div>
<h4 id="user-management">Built-in user management</h4>
<p>Unlike a real database, Userbase takes care of your user accounts. It comes with built-in APIs for user
signups, logins, and access control.</p>
<h4 id="e2ee">End-to-end encrypted</h4>
<p>Unlike a real database, Userbase won't show you what your users store in your web app.</p>
<p>Wait, what!? — Yes, that's a feature — maybe the most important feature. Userbase spares you from the liability
of handling user data by encrypting everything in the browser, using keys that always stay with the user.</p>
</div>
<hr>
<div class="my-10">
<h3 class="font-black text-3xl tracking-tight" id="what-would-i-use-it">When would I use it?</h3>
<div class="text-left font-sans tracking-tight">
<p class="mb-4">If you're building a web app, you will likely need a database. Userbase can substitute your
<div class="section">
<h3 id="what-would-i-use-it">When would I use it?</h3>
<p>If you're building a web app, you will likely need a database. Userbase can substitute your
database... </p>
<ul class="list-disc mb-4 ml-8">
<ul>
<li>If you want to build a web app without writing any backend code.</li>
<li>If you never want to see your users' data.</li>
<li>If you're tired of dealing with databases.</li>
@@ -64,24 +61,22 @@
<li>And if you want to keep things really simple.</li>
</ul>
</div>
</div>
<hr>
<div class="my-10">
<h3 class="font-black text-3xl tracking-tight" id="how-do-i-start">How do I start?</h3>
<div class="text-left font-sans tracking-tight">
<p class="mb-4">Userbase will be available around mid-December 2019.</p>
<div class="section">
<h3 id="how-do-i-start">How do I start?</h3>
<h4 class="font-bold text-xl tracking-tight" id="oss">Open source</h4>
<p class="mb-4">Userbase is being developed in the open, and is <a
href="https://github.com/encrypted-dev/userbase" target="_blank" rel="noopener noreferrer">100%
open-source</a>, MIT licensed. You can modify and extend the backend to your liking, and run it yourself in
your AWS account, always under your control.</p>
<p>Userbase will be available around mid-December 2019.</p>
<h4 class="font-bold text-xl tracking-tight" id="saas">As a service</h4>
<p class="mb-4">Or for just $39/month you can go fully serverless, backendless, databaseless, and AWSless!</p>
<ul class="list-disc mb-4 ml-8">
<h4 id="oss">Open source</h4>
<p>Userbase is being developed in the open, and is <a href="https://github.com/encrypted-dev/userbase"
target="_blank" rel="noopener noreferrer">100% open-source</a>, MIT licensed. You can modify and extend the
backend to your liking, and run it yourself in your AWS account, always under your control.</p>
<h4 id="saas">As a service</h4>
<p>Or for just $39/month you can go fully serverless, backendless, databaseless, and AWSless!</p>
<ul>
<li>Unlimited web apps.</li>
<li>Unlimited users.</li>
<li>1 GB storage included.</li>
@@ -89,23 +84,21 @@
<li>All features included.</li>
</ul>
<h4 class="font-bold text-xl tracking-tight" id="mailing-list">Join the waiting list</h4>
<p class="mb-4">Enter your email to receive occasional updates about Userbase. No spam ever.</p>
</div>
<h4 id="mailing-list">Join the waiting list</h4>
<p>Enter your email to receive occasional updates about Userbase. No spam ever.</p>
<form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank"
class="validate text-center"
action="https://danielvassallo.us20.list-manage.com/subscribe/post?u=e3b0fd293a0e6d7ea0080fafe&amp;id=d0aae9dd3e">
<form
action="https://danielvassallo.us20.list-manage.com/subscribe/post?u=e3b0fd293a0e6d7ea0080fafe&amp;id=d0aae9dd3e"
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate"
target="_blank">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" id="mce-EMAIL" required autocorrect="off" spellcheck="false"
placeholder="Email address"
class="font-light text-sm h-10 p-2 border border-gray-500 outline-none w-64 rounded font-mono my-4 inline-block">
class="font-light text-sm h-10 p-2 border border-gray-500 outline-none w-64 rounded my-4 inline-block">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"
class="rounded-lg w-40 h-10 bg-yellowish font-bold cursor-pointer text-gray-900 inline-block relative"
style="top: 1px;">
</div>
<div class="mc-status" class="hidden"></div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_e3b0fd293a0e6d7ea0080fafe_d0aae9dd3e" tabindex="-1" value=""></div>
@@ -116,18 +109,17 @@
<hr>
<div class="my-10">
<h3 class="font-black text-3xl tracking-tight" id="about">Who's behind this?</h3>
<div class="text-left font-sans tracking-tight">
<p class="mb-4">This product is the work of <a href="https://twitter.com/dvassallo" target="_blank"
rel="noopener noreferrer">Daniel Vassallo</a> and <a href="https://twitter.com/justinberman95"
target="_blank" rel="noopener noreferrer">Justin Berman</a>. We're a small independent business, structured
<div class="section">
<h3 id="about">Who's behind this?</h3>
<p>This product is the work of <a href="https://twitter.com/dvassallo" target="_blank"
rel="noopener noreferrer">Daniel Vassallo</a> and <a href="https://twitter.com/justinberman95" target="_blank"
rel="noopener noreferrer">Justin Berman</a>. We're a small independent business, structured
to be lean, profitable, and sustainable. We're here for the long haul.
</p>
<p class="mb-4">If you have any questions, or there's anything we can do to help you with your web app, please
<a href="mailto:daniel@encrypted.dev">get in touch</a>. Thank you!</p>
</div>
<p>If you have any questions, or there's anything we can do to help you with your web app, please <a
href="mailto:daniel@encrypted.dev">get in touch</a>. Thank you!</p>
</div>
<hr>

32
src/style.css
View File

@@ -2,6 +2,10 @@
@tailwind components;
body {
@apply pb-10;
}
a {
@apply underline;
}
@@ -10,6 +14,34 @@ a:hover {
@apply text-orange-700;
}
p {
@apply mb-4;
}
h1 {
@apply text-center font-black text-6xl leading-none tracking-tight;
}
h2 {
@apply text-center text-2xl leading-tight mt-1 tracking-tight;
}
h3 {
@apply text-center font-black text-3xl tracking-tight;
}
h4 {
@apply font-bold text-xl tracking-tight;
}
ul {
@apply list-disc mb-4 ml-8;
}
.section {
@apply my-10 text-left tracking-tight;
}
.mc-status:focus {
@apply outline-none
}