Skip to content

Commit

Permalink
Merge pull request #67 from CriticalMoments/pricing_layout
Browse files Browse the repository at this point in the history 
Move the pricing FAQ/table into only the pricing page.
  • Loading branch information
@scosman
scosman authored May 10, 2024
2 parents 7904d41 + 0b50f93 commit 3b9d431
Show file tree
Hide file tree
Showing 4 changed files with 205 additions and 198 deletions.
7 changes: 5 additions & 2 deletions src/routes/(admin)/account/(menu)/billing/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,15 @@
<title>Billing</title>
</svelte:head>

<h1 class="text-2xl font-bold mb-6">
<h1 class="text-2xl font-bold mb-2">
{data.isActiveCustomer ? "Billing" : "Select a Plan"}
</h1>
<div>
View our <a href="/pricing" target="_blank" class="link">pricing page</a> for details.
</div>

{#if !data.isActiveCustomer}
<div class="mt-12">
<div class="mt-8">
<PricingModule {currentPlanId} callToAction="Select Plan" center={false} />
</div>

Expand Down
6 changes: 5 additions & 1 deletion src/routes/(admin)/account/select_plan/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@
>
<div class="flex flex-col w-full px-6">
<div>
<h1 class="text-2xl font-bold mb-6">Select a Plan</h1>
<h1 class="text-2xl font-bold mb-2">Select a Plan</h1>
<div class="mb-6">
View our <a href="/pricing" target="_blank" class="link">pricing page</a
> for details.
</div>
<PricingModule callToAction="Select Plan" />
</div>
</div>
Expand Down
195 changes: 195 additions & 0 deletions src/routes/(marketing)/pricing/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,51 @@
<script lang="ts">
import PricingModule from "./pricing_module.svelte"
import { WebsiteName } from "./../../../config"
type PlanFeatureRow = {
name: string
freeIncluded?: boolean
proIncluded?: boolean
freeString?: string
proString?: string
header?: boolean
}
const planFeatures: PlanFeatureRow[] = [
{
name: "Section 1",
header: true,
},
{
name: "Feature 1",
freeIncluded: true,
proIncluded: true,
},
{
name: "Feature 2",
freeIncluded: false,
proIncluded: true,
},
{
name: "Feature 3",
freeString: "3",
proString: "Unlimited",
},
{
name: "Section 2",
header: true,
},
{
name: "Feature 4",
freeIncluded: true,
proIncluded: true,
},
{
name: "Feature 5",
freeIncluded: false,
proIncluded: true,
},
]
</script>

<svelte:head>
Expand All @@ -16,5 +61,155 @@

<div class="w-full my-8">
<PricingModule callToAction="Get Started" highlightedPlanId="pro" />
<h1 class="text-2xl font-bold text-center mt-24">Pricing FAQ</h1>
<div class="flex place-content-center">
<div class="join join-vertical max-w-xl py-6 mx-auto">
<div class="collapse collapse-arrow join-item border border-primary">
<input type="radio" name="faq-accordion" />
<div class="collapse-title text-lg font-medium">
Is this template free to use?
</div>
<div class="collapse-content">
<p>Yup! This template is free to use for any project.</p>
</div>
</div>
<div class="collapse collapse-arrow join-item border border-primary">
<input type="radio" name="faq-accordion" />
<div class="collapse-title text-lg font-medium">
Why does a free template have a pricing page?
</div>
<div class="collapse-content">
<p>
The pricing page is part of the boilerplate. It shows how the
pricing page integrates into the billing portal and the Stripe
Checkout flows.
</p>
</div>
</div>
<div class="collapse collapse-arrow join-item border border-primary">
<input type="radio" name="faq-accordion" />
<div class="collapse-title text-lg font-medium">
What license is the template under?
</div>
<div class="collapse-content">
<p>The template is under the MIT license.</p>
</div>
</div>
<div class="collapse collapse-arrow join-item border border-primary">
<input type="radio" name="faq-accordion" />
<div class="collapse-title text-lg font-medium">
Can I try out purchase flows without real a credit card?
</div>
<div class="collapse-content">
<p>
Our demo page <a href="https://saasstarter.work" class="link"
>SaasStarter.work</a
> has a functional demo page, using Stripe's test environment.
</p>
<p class="mt-4">
You can use the credit card number 4242 4242 4242 4242 with any
future expiry date to test the payment and upgrade flows.
</p>
</div>
</div>
</div>
</div>

<svg style="display:none" version="2.0">
<defs>
<symbol
id="checkcircle"
viewBox="0 0 24 24"
stroke-width="2"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M16.417 10.283A7.917 7.917 0 1 1 8.5 2.366a7.916 7.916 0 0 1 7.917 7.917zm-4.105-4.498a.791.791 0 0 0-1.082.29l-3.828 6.63-1.733-2.08a.791.791 0 1 0-1.216 1.014l2.459 2.952a.792.792 0 0 0 .608.285.83.83 0 0 0 .068-.003.791.791 0 0 0 .618-.393L12.6 6.866a.791.791 0 0 0-.29-1.081z"
/>
</symbol>
</defs>
</svg>

<svg style="display:none" version="2.0">
<defs>
<symbol id="nocircle" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm4,11H8a1,1,0,0,1,0-2h8a1,1,0,0,1,0,2Z"
/>
</symbol>
</defs>
</svg>

<h1 class="text-2xl font-bold text-center mt-16">Plan Features</h1>
<h2 class="text-xl text-center text-slate-500 mt-1 pb-3">
Example feature table
</h2>

<div class="overflow-visible mx-auto max-w-xl mt-4">
<table class="table">
<thead
class="text-lg sticky top-0 bg-base-100 bg-opacity-50 z-10 backdrop-blur"
>
<tr>
<th></th>
<th class="text-center">Free</th>
<th class="text-center">Pro</th>
</tr>
</thead>
<tbody>
{#each planFeatures as feature}
{#if feature.header}
<tr class="bg-base-200 font-bold">
<td colspan="3">{feature.name} </td>
</tr>
{:else}
<tr class="relative">
<td>{feature.name} </td>
<td class="text-center">
{#if feature.freeString}
{feature.freeString}
{:else if feature.freeIncluded}
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 ml-2 inline text-success"
>
<use href="#checkcircle" />
</svg>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-[26px] h-[26px] inline text-base-200"
>
<use href="#nocircle" />
</svg>
{/if}
</td>
<td class="text-center">
{#if feature.proString}
{feature.proString}
{:else if feature.proIncluded}
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 ml-2 inline text-success"
>
<use href="#checkcircle" />
</svg>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-[26px] h-[26px] inline text-base-200"
>
<use href="#nocircle" />
</svg>
{/if}
</td>
</tr>
{/if}
{/each}
</tbody>
</table>
</div>
</div>
</div>
Loading

0 comments on commit 3b9d431

Please sign in to comment.