Skip to content

Commit

Permalink
Merge pull request #16 from CriticalMoments/pricing2
Browse files Browse the repository at this point in the history 
Pricing Page Update
  • Loading branch information
@scosman
scosman authored Feb 18, 2024
2 parents b32ccd3 + 2fa8695 commit 258b6c9
Show file tree
Hide file tree
Showing 2 changed files with 184 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ set -e
npm run format_check
npm run lint
npm run build
npm run check
```

Finally: if you find build, formatting or linting rules too tedious, you can disable enforcement by deleting the CI files (`.github/workflows/*`) and remove the git hook (`.git/hooks/pre-commit`).
Expand Down
183 changes: 183 additions & 0 deletions src/routes/(marketing)/pricing/pricing_module.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,46 @@
export let callToAction: string
export let currentPlanId: string = ""
export let center = true
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: "Section 2",
header: true,
},
{
name: "Feature 3",
freeIncluded: true,
proIncluded: true,
},
{
name: "Feature 4",
freeIncluded: false,
proIncluded: true,
},
]
</script>

<div
Expand Down Expand Up @@ -58,3 +98,146 @@
</div>
{/each}
</div>

<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}
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 ml-2 inline text-success"
>
<use href="#checkcircle" />
</svg>
{/if}
</td>
</tr>
{/if}
{/each}
</tbody>
</table>
</div>

0 comments on commit 258b6c9

Please sign in to comment.