SaaS boilerplate landing page

This commit is contained in:
Samuel Štancl 2020-06-30 02:03:21 +02:00
parent 1b7f8133e6
commit 5e24433561
2 changed files with 267 additions and 30 deletions

View file

@ -5,10 +5,10 @@
<div class="relative max-w-xl mx-auto">
<div class="text-center">
<h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
Contact me
Contact us
</h2>
<p class="mt-4 text-lg leading-6 text-gray-500">
You can contact me if you need consulting, want to have your implementation audited, or want to discuss something.
You can contact us if you need consulting, want to have your implementation audited, or want to discuss something.
</p>
<p class="mt-4 text-lg leading-6 text-gray-500">
You can also use email: <a class="text-indigo-700" href="mailto:samuel@tenancyforlaravel.com">samuel@tenancyforlaravel.com</a>.

View file

@ -11,38 +11,12 @@
</span>
</h2>
<p class="mt-3 max-w-md mx-auto text-base text-gray-600 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
An application skeleton on top of which you can build your multi-tenant SaaS. <span class="font-semibold">Coming soon.</span>
An application skeleton on top of which you can build your multi-tenant SaaS.
</p>
</div>
</div>
<div class="bg-white">
<div class="max-w-screen-xl mx-auto px-4 pt-12 sm:px-6 lg:pt-16 lg:px-8">
<div class="px-6 py-6 bg-indigo-700 rounded-lg md:py-12 md:px-12 lg:py-16 lg:px-16 xl:flex xl:items-center">
<div class="xl:w-0 xl:flex-1">
<h2 class="text-2xl leading-8 font-extrabold tracking-tight text-white sm:text-3xl sm:leading-9">
Join the waiting list
</h2>
<p class="mt-3 max-w-3xl text-lg leading-6 text-indigo-200" id="newsletter-headline">
We'll notify you when it's ready to be used.
</p>
</div>
<div class="mt-8 sm:w-full sm:max-w-md xl:mt-0 xl:ml-8">
<form action="https://github.us3.list-manage.com/subscribe/post?u=6a33c422777aedd88e9a9488e&amp;id=9b99f013b8" method="post" target="_blank" class="sm:flex" aria-labelledby="newsletter-headline">
<input aria-label="Email address" name="EMAIL" type="email" required class="appearance-none w-full px-5 py-3 border border-transparent text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 transition duration-150 ease-in-out" placeholder="Enter your email" />
<input type="hidden" value="8" name="group[27425][8]" id="mce-group[27425]-27425-3">
<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400 transition duration-150 ease-in-out">
Notify me
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="py-12 bg-white">
<div class="mt-12 bg-white">
<div class="max-w-xl mx-auto px-4 sm:px-6 lg:max-w-screen-xl lg:px-8">
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
<div>
@ -85,4 +59,267 @@
</div>
</div>
<div class="mt-12 bg-white">
<div class="max-w-xl mx-auto px-4 sm:px-6 lg:max-w-screen-xl lg:px-8">
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
<div>
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z" clip-rule="evenodd"></path></svg>
</div>
<div class="mt-5">
<h5 class="text-lg leading-6 font-medium text-gray-900">Domain management
</h5>
<p class="mt-2 text-base leading-6 text-gray-600">
Customers can manage their domains &mdash; change subdomains and add custom 2nd level domains.
</p>
</div>
</div>
<div class="mt-10 lg:mt-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2 10a4 4 0 004 4h3v3a1 1 0 102 0v-3h3a4 4 0 000-8 4 4 0 00-8 0 4 4 0 00-4 4zm9 4H9V9.414l-1.293 1.293a1 1 0 01-1.414-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 9.414V14z" clip-rule="evenodd"></path></svg>
</div>
<div class="mt-5">
<h5 class="text-lg leading-6 font-medium text-gray-900">Ploi integration
</h5>
<p class="mt-2 text-base leading-6 text-gray-600">
Integration with <a href="http://ploi.io/">ploi.io</a>. Automatic creation of vhosts and HTTPS certificates when customers add domains. <em>(Coming by the end of the week.)</em>
</p>
</div>
</div>
<div class="mt-10 lg:mt-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
</div>
<div class="mt-5">
<h5 class="text-lg leading-6 font-medium text-gray-900">Tenant-aware test suite
</h5>
<p class="mt-2 text-base leading-6 text-gray-600">
Tests structured for separate central and tenant tests. The tenant test suite works so smooth that you don't even have to think about multi-tenancy when writing the tests &mdash; just like when using the package.
</p>
</div>
</div>
</div>
</div>
</div>
<h2 class="mt-16 text-center text-xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
UI showcase
</h2>
<div class="mt-8 flex justify-center">
<iframe width="1020" height="630" src="https://www.youtube.com/embed/xbdhjZLSAEo?controls=0&list=PLGo_dYdM42qSrun8QGjAdXqwV320mIGBy" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h2 class="mt-16 text-center text-xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
User settings
</h2>
<div class="mt-8 flex justify-center">
<img class="w-3/4" alt="User settings" src="https://i.imgur.com/1Ddn2q6.png">
</div>
<h2 class="mt-16 text-center text-xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
Tenant-aware test suite
</h2>
<div class="mt-8 flex justify-center">
<img class="w-3/4" alt="Tenant-aware test suite" src="https://i.imgur.com/pgG0ctW.png">
</div>
<h2 class="mt-16 text-center text-xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
Nova resources
</h2>
<div class="mt-8 flex justify-center">
<img class="w-3/4" alt="Nova resources" src="https://i.imgur.com/lwJaO0q.png">
</div>
<div class="mt-12 bg-gray-900">
<div class="pt-12 sm:pt-16 lg:pt-24">
<div class="max-w-screen-xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto lg:max-w-none">
<h2 class="text-lg leading-6 font-semibold text-gray-300 uppercase tracking-wider">
Pricing
</h2>
<p class="mt-2 text-3xl leading-9 font-extrabold text-white sm:text-4xl sm:leading-10 lg:text-5xl lg:leading-none">
The right price for you
</p>
<p class="mt-2 text-xl leading-7 text-gray-300">
We try to make the boilerplate affordable for small startups, while also providing premium services for enterprise clients.
</p>
<p class="mt-2 text-xl leading-7 text-gray-300">
One time payment.
</p>
</div>
</div>
</div>
<div class="mt-8 pb-12 bg-gray-50 sm:mt-12 sm:pb-16 lg:mt-16 lg:pb-24">
<div class="relative">
<div class="absolute inset-0 h-3/4 bg-gray-900"></div>
<div class="relative z-10 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-md mx-auto lg:max-w-5xl lg:grid lg:grid-cols-2 lg:gap-5">
<div class="rounded-lg shadow-lg overflow-hidden">
<div class="px-6 py-8 bg-white sm:p-10 sm:pb-6">
<div>
<h3 class="inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase bg-indigo-100 text-indigo-600" id="tier-standard">
Standard
</h3>
</div>
<div class="mt-4 flex items-baseline text-6xl leading-none font-extrabold">
$199
<span class="ml-1 line-through text-2xl leading-8 font-medium text-gray-500">
$299
</span>
</div>
<p class="mt-5 text-lg leading-7 text-gray-500">
The perfect starting point for small SaaS companies.
</p>
</div>
<div class="px-6 pt-6 pb-8 bg-gray-50 sm:p-10 sm:pt-6">
<ul>
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p class="ml-3 text-base leading-6 text-gray-700">
Asynchronous tenant onboarding flow
</p>
</li>
<li class="mt-4 flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p class="ml-3 text-base leading-6 text-gray-700">
Domain management UI
</p>
</li>
<li class="mt-4 flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p class="ml-3 text-base leading-6 text-gray-700">
Billing logic integrated
</p>
</li>
<li class="mt-4 flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p class="ml-3 text-base leading-6 text-gray-700">
Nova admin resources
</p>
</li>
</ul>
<div class="mt-6 rounded-md shadow">
<a href="https://gumroad.com/l/saas-boilerplate/launch-website" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out" aria-describedby="tier-standard">
Details
</a>
</div>
</div>
</div>
<div class="mt-4 rounded-lg shadow-lg overflow-hidden lg:mt-0">
<div class="px-6 py-8 bg-white sm:p-10 sm:pb-6">
<div>
<h3 class="inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase bg-indigo-100 text-indigo-600" id="tier-enterprise">
Enterprise
</h3>
</div>
<div class="mt-4 flex items-baseline text-6xl leading-none font-extrabold">
$379
<span class="ml-1 line-through text-2xl leading-8 font-medium text-gray-500">
$499
</span>
</div>
<p class="mt-5 text-lg leading-7 text-gray-500">
Premium service for clients with enterprise needs.
</p>
</div>
<div class="px-6 pt-6 pb-8 bg-gray-50 sm:p-10 sm:pt-6">
<ul>
<li class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p class="ml-3 text-base leading-6 text-gray-700">
All <em>Standard</em> features
</p>
</li>
<li class="mt-4 flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p class="ml-3 text-base leading-6 text-gray-700">
&gt; $60k annual revenue
</p>
</li>
<li class="mt-4 flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p class="ml-3 text-base leading-6 text-gray-700">
Priority support
</p>
</li>
<li class="mt-4 flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p class="ml-3 text-base leading-6 text-gray-700">
Company listed as a sponsor
</p>
</li>
</ul>
<div class="mt-6 rounded-md shadow">
<a href="https://gumroad.com/l/saas-boilerplate-enterprise/launch-website" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out" aria-describedby="tier-enterprise">
Details
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 lg:mt-5">
<div class="max-w-md mx-auto lg:max-w-5xl">
<div class="rounded-lg bg-gray-100 px-6 py-8 sm:p-10 lg:flex lg:items-center">
<div class="flex-1">
<div>
<h3 class="inline-flex px-4 py-1 rounded-full text-sm leading-5 font-semibold tracking-wide uppercase bg-white text-gray-800">
Price parity
</h3>
</div>
<div class="mt-4 text-lg leading-7 text-gray-600">
<p>
If you're from a low-income country and working on a small startup, we'll gladly give you a discount.
</p>
<p class="mt-2">
We want the boilerplate profits to sustain the package's development, but more importantly we want to help you build a better future for yourself.
</p>
</div>
</div>
<div class="mt-6 rounded-md shadow lg:mt-0 lg:ml-10 lg:flex-shrink-0">
<a href="/contact" class="flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-gray-900 bg-white hover:text-gray-700 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
Send us a message
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://gumroad.com/js/gumroad.js"></script>
@endsection