Skip to content

Commit

Permalink
Add a kind of pricing page prototype which dumby content
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlandauer
mlandauer committed Mar 20, 2024
1 parent ab225fb commit 1ec1841
Showing 1 changed file with 128 additions and 0 deletions.
128 changes: 128 additions & 0 deletions app/views/_tailwind/api_keys/requests/new.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,131 @@
You have don't oodles lying around that you could use to pay for API access
</li>
</ul>

<%# TODO: Note that almost none of content is yet relevant to our situation. It's mostly a placeholder %>
<section class="bg-white">
<div class="max-w-screen-xl px-4 py-8 mx-auto lg:py-16 lg:px-6">
<div class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0">
<!-- Pricing Card -->
<div class="flex flex-col max-w-md p-6 mx-auto text-center border rounded-lg text-navy border-light-grey2 xl:p-8">
<h3 class="mb-4 text-3xl font-semibold">Community Access Grant</h3>
<p class="text-2xl font-light text-navy">Best option for personal use & for your next project.</p>
<div class="flex items-baseline justify-center my-8">
<span class="mr-2 text-5xl font-extrabold">$0</span>
<span class="text-gray-500">/month</span>
</div>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Team size: <span class="font-semibold">1 developer</span></span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Premium support: <span class="font-semibold">6 months</span></span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Free updates: <span class="font-semibold">6 months</span></span>
</li>
</ul>
<%= render Tailwind::ButtonComponent.new(tag: :a, size: "2xl", type: :primary, href: new_api_keys_non_commercial_path) do %>
Apply
<% end %>
</div>
<!-- Pricing Card -->
<div class="flex flex-col max-w-md p-6 mx-auto text-center border rounded-lg text-navy border-light-grey2 xl:p-8">
<h3 class="mb-4 text-3xl font-semibold">Commercial</h3>
<p class="text-2xl font-light text-gray-500">Relevant for multiple users, extended & premium support.</p>
<div class="flex items-baseline justify-center my-8">
<span class="mr-2 text-5xl font-extrabold">$2499</span>
<span>/month</span>
</div>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Team size: <span class="font-semibold">10 developers</span></span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Premium support: <span class="font-semibold">24 months</span></span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Free updates: <span class="font-semibold">24 months</span></span>
</li>
</ul>
<%= render Tailwind::ButtonComponent.new(tag: :a, size: "2xl", type: :primary, href: new_api_keys_paid_path) do %>
Get Started
<% end %>
</div>
<!-- Pricing Card -->
<div class="flex flex-col max-w-md p-6 mx-auto text-center border rounded-lg text-navy border-light-grey2 xl:p-8">
<h3 class="mb-4 text-3xl font-semibold">Commercial+</h3>
<p class="text-2xl font-light text-gray-500">Relevant for multiple users, extended & premium support.</p>
<div class="flex items-baseline justify-center my-8">
<span class="mr-2 text-5xl font-extrabold">$2499</span>
<span>/month</span>
</div>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Team size: <span class="font-semibold">10 developers</span></span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Premium support: <span class="font-semibold">24 months</span></span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-lavender" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<span>Free updates: <span class="font-semibold">24 months</span></span>
</li>
</ul>
<%= render Tailwind::ButtonComponent.new(tag: :a, size: "2xl", type: :primary, href: new_api_keys_paid_path) do %>
Get Started
<% end %>
</div>
</div>
</div>
</section>

0 comments on commit 1ec1841

Please sign in to comment.