Skip to content

feat(site): add pricing page #7708

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

Merged
mhartington merged 2 commits into from
Mar 26, 2026
Merged

feat(site): add pricing page #7708

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
175c0e8
feat(site): add pricing page
mhartington Mar 26, 2026
a89d85e
feat(site): pricing page feedback
mhartington Mar 26, 2026
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
Binary file added apps/site/public/og/og-pricing.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
182 changes: 182 additions & 0 deletions apps/site/src/app/pricing/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
import type { Metadata } from "next";
import {
Accordion,
Accordions,
Button,
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@prisma/eclipse";
import { comparisonSections, faqs } from "./pricing-data";
import { PricingPageContent } from "./pricing-page-content";

export const metadata: Metadata = {
title: "Pricing | Prisma Postgres",
description: "Get started for free using Prisma's products or choose the right plan that meets your needs",
alternates: {
canonical: "https://www.prisma.io/pricing",
},
openGraph: {
title: "Pricing | Prisma Postgres",
description:
"Get started for free using Prisma's products or choose the right plan that meets your needs",
url: "https://www.prisma.io/pricing",
images: [
{
url: "/og/og-pricing.png",
},
],
},
twitter: {
card: "summary_large_image",
title: "Pricing | Prisma Postgres",
description:
"Get started for free using Prisma's products or choose the right plan that meets your needs",
images: ["/og/og-pricing.png"],
},
};

export default function SiteHome() {
return (
<main className="flex-1 w-full -mt-24 bg-background-default text-background-neutral-weak">
<PricingPageContent />


{/* Compare plans */}
<section className="px-4 py-16">
<div className="max-w-[1200px] mx-auto flex flex-col items-center gap-6">
<h3 className="m-0 text-center text-foreground-neutral text-5xl font-sans-display [font-variation-settings:'wght'_900]">
Compare plans
</h3>
<p className="m-0 text-center text-foreground-neutral-weak">
All of the features below are included with Prisma Postgres.
</p>
<button className="rounded-full bg-background-ppg-reverse px-4 py-2 text-base font-sans-display text-white">
Use Prisma Postgres
</button>
</div>
<div className="max-w-[996px] mx-auto mt-10 border border-background-neutral-reverse-weak rounded-xl overflow-hidden">
<Table className="table-fixed">
<TableHeader className="[&_tr]:border-b-0">
<TableRow className="hover:bg-transparent border-b border-background-neutral-reverse bg-background-neutral-weak">
<TableHead className="bg-background-neutral-weak text-base uppercase tracking-[1.6px] font-sans-display [font-variation-settings:'wght'_800] text-background-neutral-weak">
{comparisonSections[0]?.title}
</TableHead>
{["Free", "Starter", "Pro", "Business"].map((label) => (
<TableHead
key={label}
className="bg-background-neutral-weak text-left text-background-neutral-weak"
>
<span
className={`inline-flex rounded-md px-3 py-1 text-sm ${
label === "Pro"
? "bg-background-ppg-strong text-foreground-ppg-strong"
: label === "Starter"
? "bg-background-orm-strong text-foreground-orm-strong"
: label === "Business"
? "bg-background-warning text-foreground-warning-strong"
: "bg-background-neutral-reverse text-background-neutral-strong"
}`}
>
{label}
</span>
</TableHead>
))}
</TableRow>
</TableHeader>
{comparisonSections.map((section) => (
<TableBody key={section.title}>

<TableRow className="hover:bg-transparent border-t border-b border-background-neutral-reverse-weak bg-background-neutral-weak">
<TableCell
colSpan={5}
className="bg-background-neutral-weak text-base uppercase tracking-[1.6px] font-sans-display [font-variation-settings:'wght'_800] text-foreground-neutral"
>
{section.title}
</TableCell>
</TableRow>

{section.rows.map((row) => (
<TableRow
key={row[0]}
className="hover:bg-transparent border-b border-background-neutral-reverse-weak"
>
<TableCell className="font-semibold text-sm text-foreground-neutral">
{row[0]}
</TableCell>
{row.slice(1).map((value, valueIndex) => (
<TableCell
key={`${row[0]}-${valueIndex}-${value}`}
className="text-sm text-foreground-neutral-weak"
>
{value}
</TableCell>
))}
</TableRow>
))}
</TableBody>
))}
</Table>
</div>
</section>

{/* FAQ */}
<section className="px-4 py-16">
<div className="max-w-[996px] mx-auto">
<h4 className="m-0 text-center text-foreground-neutral text-5xl font-sans-display [font-variation-settings:'wght'_900]">
FAQ
</h4>
<Accordions
type="single"
className="mt-10 border border-stroke-neutral-weak rounded-md overflow-hidden"
>
{faqs.map((faq, index) => (
<Accordion
key={faq.question}
value={`faq-${index}`}
title={faq.question}
className="border-b border-stroke-neutral-weak last:border-b-0"
>
<div
className="m-0 text-foreground-neutral-weak [&_p]:my-0 [&_p+p]:mt-4 [&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-6 [&_li]:my-2"
dangerouslySetInnerHTML={{ __html: faq.answer }}
/>
</Accordion>
))}
</Accordions>
<p className="m-0 mt-8 text-center text-xs text-foreground-neutral-weak">
If you have any questions, please reach out to our support team at{" "}
<a href="mailto:[email protected]" className="underline">
[email protected]
</a>
.
</p>
</div>
</section>

{/* Try Prisma Postgres */}
<section className="px-4 py-16 border-t border-stroke-neutral-weak">
<div className="max-w-[427px] mx-auto text-center">
<h5 className="m-0 text-5xl text-foreground-neutral font-sans-display [font-variation-settings:'wght'_900]">
Try Prisma Postgres
</h5>
<p className="m-0 mt-4 text-xl text-foreground-neutral-weak">Deploy a Postgres database instantly.</p>
<div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
<Button variant="ppg" size="2xl" href="https://console.prisma.io/sign-up?utm_source=website&utm_medium=pricing&utm_campaign=cta">
<span>Create your first Database</span>
<i className="fa-regular fa-arrow-right ml-2" />
</Button>
<Button variant="default-stronger" size="2xl" href="https://www.prisma.io/docs/">
<span>Read the docs</span>
<i className="fa-regular fa-book-open ml-2" />
</Button>
</div>
<p className="m-0 mt-4 text-xs text-foreground-neutral-weak">Free to get started, no credit card needed.</p>
</div>
</section>
</main>
);
}
Loading
Loading