Skip to content

feat: new pricing page #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bombabobo wants to merge 1 commit into
base: staging
Choose a base branch
from
Open

feat: new pricing page #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/frontend/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,6 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts

# clerk configuration (can include secrets)
/.clerk/
180 changes: 175 additions & 5 deletions apps/frontend/src/app/(marketing)/pricing/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
import React from 'react';
import { createMetadata } from '@/utils/metadata';
import type { Metadata } from 'next';
import { UnderConstruction } from '@/components/under-construction';

export const metadata: Metadata = createMetadata({
title: 'Pricing | Graphical Playground',
Expand All @@ -15,8 +14,179 @@ export const metadata: Metadata = createMetadata({

export default function PricingPage() {
return (
<div className='w-full h-[50vh] flex justify-center items-center'>
<UnderConstruction />
</div>
<main className="mx-auto max-w-7xl px-6 py-20">
<section className="text-center">
<h1 className="text-5xl font-bold tracking-tight">
Simple pricing for everyone
</h1>

<p className="mt-6 text-lg text-neutral-600 max-w-2xl mx-auto">
Learn for free as an individual, or equip your school or company with
powerful learning tools, analytics and certification management.
</p>
</section>

<section className="mt-16 grid gap-8 lg:grid-cols-3">
{/* Individual */}
<div className="rounded-2xl border p-8 shadow-sm">
<h2 className="text-2xl font-semibold">Individual</h2>

<div className="mt-6">
<span className="text-5xl font-bold">Free</span>
</div>

<p className="mt-4 text-neutral-600">
Perfect for students and hobbyists.
</p>

<ul className="mt-8 space-y-3 text-sm">
<li>✓ Unlimited access to public curriculum</li>
<li>✓ Personal dashboard</li>
<li>✓ Track your progress</li>
<li>✓ Community support</li>
<li>✓ Access to the editor</li>
</ul>

<button className="mt-10 w-full rounded-lg bg-black py-3 text-white transition hover:bg-neutral-800">
Get Started
</button>
</div>

{/* School */}
<div className="rounded-2xl border-2 border-blue-600 p-8 shadow-lg">
<span className="rounded-full bg-blue-600 px-3 py-1 text-xs font-semibold text-white">
Most Popular
</span>

<h2 className="mt-4 text-2xl font-semibold">School</h2>

<div className="mt-6">
<span className="text-5xl font-bold">€199</span>
<span className="text-neutral-500"> / month</span>
</div>

<p className="mt-4 text-neutral-600">
For classrooms and educational institutions.
</p>

<ul className="mt-8 space-y-3 text-sm">
<li>✓ Up to 100 students</li>
<li>✓ Teacher dashboard</li>
<li>✓ Student management</li>
<li>✓ Classroom analytics</li>
<li>✓ Private curricula</li>
<li>✓ Certification management</li>
</ul>

<button className="mt-10 w-full rounded-lg bg-blue-600 py-3 text-white transition hover:bg-blue-700">
Contact Sales
</button>
</div>

{/* Company */}
<div className="rounded-2xl border p-8 shadow-sm">
<h2 className="text-2xl font-semibold">Company</h2>

<div className="mt-6">
<span className="text-5xl font-bold">€999</span>
<span className="text-neutral-500"> / month</span>
</div>

<p className="mt-4 text-neutral-600">
Upskill your engineering teams.
</p>

<ul className="mt-8 space-y-3 text-sm">
<li>✓ Up to 250 employees</li>
<li>✓ Team management</li>
<li>✓ Learning analytics</li>
<li>✓ Custom learning paths</li>
<li>✓ API access</li>
<li>✓ Priority support</li>
</ul>

<button className="mt-10 w-full rounded-lg bg-black py-3 text-white transition hover:bg-neutral-800">
Request Demo
</button>
</div>
</section>

<section className="mt-24">
<div className="text-center">
<h2 className="text-3xl font-bold">
Official Certification Credits
</h2>

<p className="mt-4 text-neutral-600">
Learning is free. Official certifications require certification
credits that can be purchased separately.
</p>
</div>

<div className="mt-10 overflow-hidden rounded-2xl border">
<table className="w-full">
<thead className="bg-neutral-100">
<tr>
<th className="px-6 py-4 text-left">Credits</th>
<th className="px-6 py-4 text-left">Price</th>
<th className="px-6 py-4 text-left">Recommended for</th>
</tr>
</thead>

<tbody>
<tr className="border-t">
<td className="px-6 py-4">5</td>
<td className="px-6 py-4">€25</td>
<td className="px-6 py-4">Individuals</td>
</tr>

<tr className="border-t">
<td className="px-6 py-4">25</td>
<td className="px-6 py-4">€100</td>
<td className="px-6 py-4">Small teams</td>
</tr>

<tr className="border-t">
<td className="px-6 py-4">100</td>
<td className="px-6 py-4">€350</td>
<td className="px-6 py-4">Schools</td>
</tr>

<tr className="border-t">
<td className="px-6 py-4">500</td>
<td className="px-6 py-4">€1500</td>
<td className="px-6 py-4">Enterprises</td>
</tr>
</tbody>
</table>
</div>

<p className="mt-6 text-center text-sm text-neutral-500">
One credit grants one certification attempt. Credits never expire and
can be assigned to any learner in your organization.
</p>
</section>

<section className="mt-24 rounded-3xl bg-neutral-900 px-8 py-16 text-center text-white">
<h2 className="text-4xl font-bold">
Ready to start learning?
</h2>

<p className="mt-4 text-neutral-300">
Join Graphical Playground today and build the next generation of
graphics engineers.
</p>

<div className="mt-8 flex flex-wrap justify-center gap-4">
<button className="rounded-lg bg-white px-6 py-3 font-medium text-black">
Start for Free
</button>

<button className="rounded-lg border border-white px-6 py-3">
Contact Sales
</button>
</div>
</section>
</main>
);
}
}