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

164
src/index.html
View File

@@ -7,105 +7,98 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head> </head>
<body class="pb-10"> <body>
<div class="container mx-auto text-center max-w-2xl px-4 text-blackish" style="font-size: 16px"> <div class="container mx-auto max-w-2xl px-4 text-blackish" style="font-size: 16px">
<div class="my-10"> <div class="section">
<div class="flex justify-center"> <div class="flex justify-center">
<img class="w-32 h-32" src="./img/icon.png"> <img class="w-32 h-32" src="./img/icon.png">
</div> </div>
<h1 class="font-black text-6xl leading-none tracking-tight font-logo">Userbase</h1> <h1 class="font-logo">Userbase</h1>
<h2 class="text-2xl leading-tight mt-1 tracking-tight">You won't believe it's not a database!</h2> <h2>You won't believe it's not a database!</h2>
</div> </div>
<hr> <hr>
<div class="my-10"> <div class="section">
<h3 class="font-black text-3xl tracking-tight" id="what-is-userbase">What is Userbase?</h3> <h3 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 <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> from the browser through a very simple JavaScript SDK.</p>
</div>
</div> </div>
<hr> <hr>
<div class="my-10"> <div class="section">
<h3 class="font-black text-3xl tracking-tight" id="why-not-a-database">Why isn't it a database?</h3> <h3 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 <p>With Userbase you can durably store, update, delete, and query user data. But that's where the
similarities with traditional databases end.</p> similarities with traditional databases end.</p>
<h4 class="font-bold text-xl tracking-tight" id="zero-management">Zero management</h4> <h4 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 <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. a dumb data store. There's no database to manage and worry about.
</p> </p>
<h4 class="font-bold text-xl tracking-tight" id="user-management">Built-in user management</h4> <h4 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 <p>Unlike a real database, Userbase takes care of your user accounts. It comes with built-in APIs for user
for user signups, logins, and access control.</p> signups, logins, and access control.</p>
<h4 class="font-bold text-xl tracking-tight" id="e2ee">End-to-end encrypted</h4> <h4 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>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 <p>Wait, what!? — Yes, that's a feature — maybe the most important feature. Userbase spares you from the liability
from the liability of handling user data by encrypting everything in the browser, using keys that always stay of handling user data by encrypting everything in the browser, using keys that always stay with the user.</p>
with the user.</p>
</div>
</div> </div>
<hr> <hr>
<div class="my-10"> <div class="section">
<h3 class="font-black text-3xl tracking-tight" id="what-would-i-use-it">When would I use it?</h3> <h3 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 <p>If you're building a web app, you will likely need a database. Userbase can substitute your
database... </p> 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 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 never want to see your users' data.</li>
<li>If you're tired of dealing with databases.</li> <li>If you're tired of dealing with databases.</li>
<li>If you want to radically simplify your GDPR compliance.</li> <li>If you want to radically simplify your GDPR compliance.</li>
<li>And if you want to keep things really simple.</li> <li>And if you want to keep things really simple.</li>
</ul> </ul>
</div>
</div> </div>
<hr> <hr>
<div class="my-10"> <div class="section">
<h3 class="font-black text-3xl tracking-tight" id="how-do-i-start">How do I start?</h3> <h3 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>
<h4 class="font-bold text-xl tracking-tight" id="oss">Open source</h4> <p>Userbase will be available around mid-December 2019.</p>
<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>
<h4 class="font-bold text-xl tracking-tight" id="saas">As a service</h4> <h4 id="oss">Open source</h4>
<p class="mb-4">Or for just $39/month you can go fully serverless, backendless, databaseless, and AWSless!</p> <p>Userbase is being developed in the open, and is <a href="https://github.com/encrypted-dev/userbase"
<ul class="list-disc mb-4 ml-8"> target="_blank" rel="noopener noreferrer">100% open-source</a>, MIT licensed. You can modify and extend the
<li>Unlimited web apps.</li> backend to your liking, and run it yourself in your AWS account, always under your control.</p>
<li>Unlimited users.</li>
<li>1 GB storage included.</li>
<li>Unlimited extra storage at $1/month per GB.</li>
<li>All features included.</li>
</ul>
<h4 class="font-bold text-xl tracking-tight" id="mailing-list">Join the waiting list</h4> <h4 id="saas">As a service</h4>
<p class="mb-4">Enter your email to receive occasional updates about Userbase. No spam ever.</p> <p>Or for just $39/month you can go fully serverless, backendless, databaseless, and AWSless!</p>
</div> <ul>
<li>Unlimited web apps.</li>
<li>Unlimited users.</li>
<li>1 GB storage included.</li>
<li>Unlimited extra storage at $1/month per GB.</li>
<li>All features included.</li>
</ul>
<form <h4 id="mailing-list">Join the waiting list</h4>
action="https://danielvassallo.us20.list-manage.com/subscribe/post?u=e3b0fd293a0e6d7ea0080fafe&amp;id=d0aae9dd3e" <p>Enter your email to receive occasional updates about Userbase. No spam ever.</p>
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate"
target="_blank"> <form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank"
<div class="mc-field-group"> class="validate text-center"
<input type="email" value="" name="EMAIL" id="mce-EMAIL" required autocorrect="off" spellcheck="false" action="https://danielvassallo.us20.list-manage.com/subscribe/post?u=e3b0fd293a0e6d7ea0080fafe&amp;id=d0aae9dd3e">
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"> <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 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;">
<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 class="mc-status" class="hidden"></div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"> <div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_e3b0fd293a0e6d7ea0080fafe_d0aae9dd3e" tabindex="-1" value=""></div> <input type="text" name="b_e3b0fd293a0e6d7ea0080fafe_d0aae9dd3e" tabindex="-1" value=""></div>
@@ -116,18 +109,17 @@
<hr> <hr>
<div class="my-10"> <div class="section">
<h3 class="font-black text-3xl tracking-tight" id="about">Who's behind this?</h3> <h3 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
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 <p>This product is the work of <a href="https://twitter.com/dvassallo" target="_blank"
<a href="mailto:daniel@encrypted.dev">get in touch</a>. Thank you!</p> rel="noopener noreferrer">Daniel Vassallo</a> and <a href="https://twitter.com/justinberman95" target="_blank"
</div> 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>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> </div>
<hr> <hr>

32
src/style.css
View File

@@ -2,6 +2,10 @@
@tailwind components; @tailwind components;
body {
@apply pb-10;
}
a { a {
@apply underline; @apply underline;
} }
@@ -10,6 +14,34 @@ a:hover {
@apply text-orange-700; @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 { .mc-status:focus {
@apply outline-none @apply outline-none
} }