Skip to content

Commit 884be18

Browse files
izadoesdevizadoesdev
committed
fix: pricing page
1 parent 137750b commit 884be18

File tree

3 files changed

+124
-167
lines changed

3 files changed

+124
-167
lines changed

‎apps/docs/app/(home)/pricing/_pricing/normalize.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,19 @@ export function getAssistantMessagesPerDay(items: RawItem[]): number | null {
7070

7171
export function normalizePlans(raw: RawPlan[]): NormalizedPlan[] {
7272
return raw.map((plan) => {
73+
if (plan.id === "enterprise") {
74+
return {
75+
id: plan.id,
76+
name: plan.name,
77+
priceMonthly: 0,
78+
includedEventsMonthly: 0,
79+
eventTiers: null,
80+
websitesIncluded: "inf",
81+
websitesOveragePerUnit: null,
82+
assistantMessagesPerDay: null,
83+
};
84+
}
85+
7386
const priceMonthly = getPriceMonthly(plan.items);
7487
const { included: includedEventsMonthly, tiers: eventTiers } =
7588
getEventsInfo(plan.items);

‎apps/docs/app/(home)/pricing/_pricing/table.tsx‎

Lines changed: 80 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,26 @@ import type { NormalizedPlan } from "./types";
55

66
type Props = { plans: NormalizedPlan[] };
77

8+
function FeatureCheck() {
9+
return (
10+
<span className="inline-flex items-center justify-center">
11+
<CheckIcon className="size-4 text-primary" weight="bold" />
12+
</span>
13+
);
14+
}
15+
16+
function FeatureX() {
17+
return (
18+
<span className="inline-flex items-center justify-center">
19+
<XIcon className="size-4 text-muted-foreground" weight="bold" />
20+
</span>
21+
);
22+
}
23+
824
export function PlansComparisonTable({ plans }: Props) {
925
return (
1026
<section className="mb-10">
11-
<div className="group relative overflow-x-auto rounded border border-border bg-card/70 shadow-inner backdrop-blur-sm transition-all duration-300 hover:border-border/80 hover:shadow-primary/10">
27+
<div className="group relative overflow-x-auto border border-border bg-card/70 shadow-inner backdrop-blur-sm transition-all duration-300 hover:border-border/80 hover:shadow-primary/10">
1228
<table className="w-full">
1329
<caption className="sr-only">Databuddy plan comparison</caption>
1430
<thead className="border-border border-b bg-card/20">
@@ -33,6 +49,7 @@ export function PlansComparisonTable({ plans }: Props) {
3349
</tr>
3450
</thead>
3551
<tbody>
52+
{/* Price row */}
3653
<tr className="border-border border-t transition-colors hover:bg-card/10">
3754
<td className="px-4 py-3 text-muted-foreground text-sm sm:px-5 lg:px-6">
3855
Price / month
@@ -42,28 +59,26 @@ export function PlansComparisonTable({ plans }: Props) {
4259
className={`px-4 py-3 text-center text-foreground sm:px-5 lg:px-6 ${p.id === "pro" ? "border-border border-x bg-primary/10" : ""}`}
4360
key={`price-${p.id}`}
4461
>
45-
{p.priceMonthly === 0 ? (
62+
{p.id === "enterprise" ? (
63+
<span className="font-medium text-muted-foreground">
64+
Contact Us
65+
</span>
66+
) : p.priceMonthly === 0 ? (
4667
"Free"
4768
) : p.id === "hobby" ? (
48-
<div className="flex flex-col items-center gap-1">
49-
<div className="flex items-center gap-2">
50-
<span className="text-muted-foreground text-xs line-through">
51-
$9.99
52-
</span>
53-
<span className="font-medium text-green-600">
54-
$2.00
55-
</span>
56-
</div>
57-
<span className="font-medium text-green-600 text-xs">
58-
Limited time!
69+
<div className="flex flex-col items-center gap-0.5">
70+
<span className="font-medium">$2 first month</span>
71+
<span className="text-muted-foreground text-xs">
72+
then $10/mo
5973
</span>
6074
</div>
6175
) : (
62-
`$${p.priceMonthly.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
76+
`$${p.priceMonthly.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`
6377
)}
6478
</td>
6579
))}
6680
</tr>
81+
{/* Events row */}
6782
<tr className="border-border border-t transition-colors hover:bg-card/10">
6883
<td className="px-4 py-3 text-muted-foreground text-sm sm:px-5 lg:px-6">
6984
Included events / month
@@ -73,10 +88,13 @@ export function PlansComparisonTable({ plans }: Props) {
7388
className={`px-4 py-3 text-center text-foreground sm:px-5 lg:px-6 ${p.id === "pro" ? "border-border border-x bg-primary/10" : ""}`}
7489
key={`events-${p.id}`}
7590
>
76-
{p.includedEventsMonthly.toLocaleString()}
91+
{p.id === "enterprise"
92+
? "Custom"
93+
: p.includedEventsMonthly.toLocaleString()}
7794
</td>
7895
))}
7996
</tr>
97+
{/* Assistant messages row */}
8098
<tr className="border-border border-t transition-colors hover:bg-card/10">
8199
<td className="px-4 py-3 text-muted-foreground text-sm sm:px-5 lg:px-6">
82100
Assistant messages / day
@@ -86,19 +104,17 @@ export function PlansComparisonTable({ plans }: Props) {
86104
className={`px-4 py-3 text-center text-foreground sm:px-5 lg:px-6 ${p.id === "pro" ? "border-border border-x bg-primary/10" : ""}`}
87105
key={`msgs-${p.id}`}
88106
>
89-
{p.assistantMessagesPerDay != null ? (
107+
{p.id === "enterprise" ? (
108+
"Unlimited"
109+
) : p.assistantMessagesPerDay != null ? (
90110
Number(p.assistantMessagesPerDay).toLocaleString()
91111
) : (
92-
<span className="inline-flex items-center justify-center">
93-
<XIcon
94-
className="size-4 text-muted-foreground"
95-
weight="bold"
96-
/>
97-
</span>
112+
<FeatureX />
98113
)}
99114
</td>
100115
))}
101116
</tr>
117+
{/* Tiered overage row */}
102118
<tr className="border-border border-t transition-colors hover:bg-card/10">
103119
<td className="px-4 py-3 text-muted-foreground text-sm sm:px-5 lg:px-6">
104120
Tiered overage
@@ -108,37 +124,28 @@ export function PlansComparisonTable({ plans }: Props) {
108124
className={`px-4 py-3 text-center text-foreground sm:px-5 lg:px-6 ${p.id === "pro" ? "border-border border-x bg-primary/10" : ""}`}
109125
key={`over-${p.id}`}
110126
>
111-
{p.eventTiers ? (
112-
<span className="inline-flex items-center justify-center">
113-
<CheckIcon
114-
className="size-4 text-primary"
115-
weight="bold"
116-
/>
117-
</span>
127+
{p.id === "enterprise" || p.eventTiers ? (
128+
<FeatureCheck />
118129
) : (
119-
<span className="inline-flex items-center justify-center">
120-
<XIcon
121-
className="size-4 text-muted-foreground"
122-
weight="bold"
123-
/>
124-
</span>
130+
<FeatureX />
125131
)}
126132
</td>
127133
))}
128134
</tr>
135+
{/* Support row */}
129136
<tr className="border-border border-t transition-colors hover:bg-card/10">
130137
<td className="px-4 py-3 text-muted-foreground text-sm sm:px-5 lg:px-6">
131138
Support
132139
</td>
133140
{plans.map((p) => {
134141
const support =
135142
p.id === "free"
136-
? "Community Support"
143+
? "Community"
137144
: p.id === "hobby"
138-
? "Email Support"
145+
? "Email"
139146
: p.id === "pro"
140-
? "Priority Email Support"
141-
: "Priority Email + Slack Support";
147+
? "Priority Email"
148+
: "Dedicated + Slack";
142149
return (
143150
<td
144151
className={`px-4 py-3 text-center text-foreground sm:px-5 lg:px-6 ${p.id === "pro" ? "border-border border-x bg-primary/10" : ""}`}
@@ -149,57 +156,45 @@ export function PlansComparisonTable({ plans }: Props) {
149156
);
150157
})}
151158
</tr>
159+
{/* SSO row */}
152160
<tr className="border-border border-t transition-colors hover:bg-card/10">
153161
<td className="px-4 py-3 text-muted-foreground text-sm sm:px-5 lg:px-6">
154-
White Glove Onboarding
162+
SSO (SAML/OIDC)
155163
</td>
156164
{plans.map((p) => (
157165
<td
158166
className={`px-4 py-3 text-center text-foreground sm:px-5 lg:px-6 ${p.id === "pro" ? "border-border border-x bg-primary/10" : ""}`}
159-
key={`onboard-${p.id}`}
167+
key={`sso-${p.id}`}
160168
>
161-
{p.id === "scale" ? (
162-
<span className="inline-flex items-center justify-center">
163-
<CheckIcon
164-
className="size-4 text-primary"
165-
weight="bold"
166-
/>
167-
</span>
168-
) : (
169-
<span className="inline-flex items-center justify-center">
170-
<XIcon
171-
className="size-4 text-muted-foreground"
172-
weight="bold"
173-
/>
174-
</span>
175-
)}
169+
{p.id === "enterprise" ? <FeatureCheck /> : <FeatureX />}
176170
</td>
177171
))}
178172
</tr>
173+
{/* Audit logs row */}
179174
<tr className="border-border border-t transition-colors hover:bg-card/10">
180175
<td className="px-4 py-3 text-muted-foreground text-sm sm:px-5 lg:px-6">
181-
Beta / Early Access
176+
Audit Logs
182177
</td>
183178
{plans.map((p) => (
184179
<td
185180
className={`px-4 py-3 text-center text-foreground sm:px-5 lg:px-6 ${p.id === "pro" ? "border-border border-x bg-primary/10" : ""}`}
186-
key={`beta-${p.id}`}
181+
key={`audit-${p.id}`}
187182
>
188-
{p.id === "scale" ? (
189-
<span className="inline-flex items-center justify-center">
190-
<CheckIcon
191-
className="size-4 text-primary"
192-
weight="bold"
193-
/>
194-
</span>
195-
) : (
196-
<span className="inline-flex items-center justify-center">
197-
<XIcon
198-
className="size-4 text-muted-foreground"
199-
weight="bold"
200-
/>
201-
</span>
202-
)}
183+
{p.id === "enterprise" ? <FeatureCheck /> : <FeatureX />}
184+
</td>
185+
))}
186+
</tr>
187+
{/* White glove row */}
188+
<tr className="border-border border-t transition-colors hover:bg-card/10">
189+
<td className="px-4 py-3 text-muted-foreground text-sm sm:px-5 lg:px-6">
190+
White Glove Onboarding
191+
</td>
192+
{plans.map((p) => (
193+
<td
194+
className={`px-4 py-3 text-center text-foreground sm:px-5 lg:px-6 ${p.id === "pro" ? "border-border border-x bg-primary/10" : ""}`}
195+
key={`onboard-${p.id}`}
196+
>
197+
{p.id === "enterprise" ? <FeatureCheck /> : <FeatureX />}
203198
</td>
204199
))}
205200
</tr>
@@ -212,21 +207,25 @@ export function PlansComparisonTable({ plans }: Props) {
212207
key={`cta-${p.id}`}
213208
>
214209
<SciFiButton asChild>
215-
<Link
216-
href={`https://app.databuddy.cc/register?plan=${p.id}`}
217-
rel="noopener noreferrer"
218-
target="_blank"
219-
>
220-
GET STARTED
221-
</Link>
210+
{p.id === "enterprise" ? (
211+
<Link href="mailto:[email protected]">CONTACT US</Link>
212+
) : (
213+
<Link
214+
href={`https://app.databuddy.cc/register?plan=${p.id}`}
215+
rel="noopener noreferrer"
216+
target="_blank"
217+
>
218+
GET STARTED
219+
</Link>
220+
)}
222221
</SciFiButton>
223222
</td>
224223
))}
225224
</tr>
226225
</tbody>
227226
</table>
228227

229-
{/* Decorative corners to match landing cards */}
228+
{/* Decorative corners */}
230229
<div className="pointer-events-none absolute inset-0">
231230
<div className="absolute top-0 left-0 size-2">
232231
<div className="absolute top-0 left-0 h-2 w-0.5 origin-top bg-foreground" />

0 commit comments

Comments
 (0)