Skip to content

Commit b137cb2

Browse files
danieldanieleckidanieldanielecki
committed
fix: refine pricing page descriptions and features; add technical setup instructions for Ollama and browser compatibility notes
1 parent ecbe794 commit b137cb2

1 file changed

Lines changed: 58 additions & 45 deletions

File tree

‎app/pricing/page.tsx‎

Lines changed: 58 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,13 @@ const pricingTiers: PricingTier[] = [
3333
name: "Local Explanations",
3434
price: "€2.99",
3535
priceId: (process.env.NEXT_PUBLIC_STRIPE_PRICE_LOCAL || "").trim(),
36-
description:
37-
"Get AI explanations using your local Ollama setup. Requires some technical setup; best with Firefox (works out of the box) or Chrome/Edge (permission popup). Not supported in Opera or Safari.",
36+
description: "Get AI explanations using your local Ollama setup.",
3837
features: [
3938
"Everything in Ads Free",
4039
"Ollama explanations",
4140
"Privacy-focused (local AI)",
4241
"No API costs",
4342
"Offline explanations",
44-
"Browser note: Firefox ✓ · Chrome/Edge ✓ (allow popup) · Opera/Safari ✗",
4543
],
4644
},
4745
{
@@ -53,9 +51,12 @@ const pricingTiers: PricingTier[] = [
5351
popular: true,
5452
features: [
5553
"Everything in Local",
56-
"OpenAI, Gemini, Mistral, DeepSeek access",
57-
"API key management",
54+
5855
"Multiple AI providers",
56+
"DeepSeek supported",
57+
"Google Gemini supported",
58+
"Mistral AI supported",
59+
"OpenAI supported",
5960
],
6061
},
6162
{
@@ -152,11 +153,11 @@ export default function PricingPage() {
152153
</div>
153154

154155
{/* Pricing Grid */}
155-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
156+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 items-stretch">
156157
{pricingTiers.map((tier) => (
157158
<div
158159
key={tier.id}
159-
className={`relative bg-white dark:bg-gray-800 rounded-2xl shadow-lg border-2 transition-all duration-200 hover:shadow-xl ${
160+
className={`relative flex flex-col h-full bg-white dark:bg-gray-800 rounded-2xl shadow-lg border-2 transition-all duration-200 hover:shadow-xl ${
160161
tier.popular
161162
? "border-primary-500 scale-105"
162163
: "border-gray-200 dark:border-gray-700"
@@ -170,45 +171,47 @@ export default function PricingPage() {
170171
</div>
171172
)}
172173

173-
<div className="p-6">
174-
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
175-
{tier.name}
176-
</h3>
177-
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
178-
{tier.description}
179-
</p>
174+
<div className="p-6 flex flex-col flex-1 min-h-0">
175+
<div className="flex-1 min-h-0">
176+
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
177+
{tier.name}
178+
</h3>
179+
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
180+
{tier.description}
181+
</p>
180182

181-
<div className="mb-6">
182-
<span className="text-3xl font-bold text-gray-900 dark:text-white">
183-
{tier.price}
184-
</span>
185-
<span className="text-gray-600 dark:text-gray-400">
186-
/month
187-
</span>
188-
</div>
183+
<div className="mb-6">
184+
<span className="text-3xl font-bold text-gray-900 dark:text-white">
185+
{tier.price}
186+
</span>
187+
<span className="text-gray-600 dark:text-gray-400">
188+
/month
189+
</span>
190+
</div>
189191

190-
<ul className="space-y-3 mb-8">
191-
{tier.features.map((feature, index) => (
192-
<li key={index} className="flex items-start">
193-
<svg
194-
className="w-5 h-5 text-green-500 mr-3 mt-0.5 flex-shrink-0"
195-
fill="none"
196-
stroke="currentColor"
197-
viewBox="0 0 24 24"
198-
>
199-
<path
200-
strokeLinecap="round"
201-
strokeLinejoin="round"
202-
strokeWidth={2}
203-
d="M5 13l4 4L19 7"
204-
/>
205-
</svg>
206-
<span className="text-gray-700 dark:text-gray-300 text-sm">
207-
{feature}
208-
</span>
209-
</li>
210-
))}
211-
</ul>
192+
<ul className="space-y-3 mb-8">
193+
{tier.features.map((feature, index) => (
194+
<li key={index} className="flex items-start">
195+
<svg
196+
className="w-5 h-5 text-green-500 mr-3 mt-0.5 flex-shrink-0"
197+
fill="none"
198+
stroke="currentColor"
199+
viewBox="0 0 24 24"
200+
>
201+
<path
202+
strokeLinecap="round"
203+
strokeLinejoin="round"
204+
strokeWidth={2}
205+
d="M5 13l4 4L19 7"
206+
/>
207+
</svg>
208+
<span className="text-gray-700 dark:text-gray-300 text-sm">
209+
{feature}
210+
</span>
211+
</li>
212+
))}
213+
</ul>
214+
</div>
212215

213216
<Button
214217
intent={tier.popular ? "primary" : "secondary"}
@@ -219,7 +222,7 @@ export default function PricingPage() {
219222
!tier.priceId ||
220223
tier.priceId.trim() === ""
221224
}
222-
className="w-full"
225+
className="w-full mt-auto"
223226
>
224227
{loading === tier.id
225228
? "Processing..."
@@ -266,6 +269,16 @@ export default function PricingPage() {
266269
costs. You just need to install Ollama locally.
267270
</p>
268271
</div>
272+
<div>
273+
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">
274+
How do I run Ollama?
275+
</h3>
276+
<p className="text-gray-600 dark:text-gray-400 text-sm">
277+
It requires some technical setup. Ollama works best with Firefox
278+
(works out of the box) or Chrome/Edge (permission popup). Not
279+
supported in Opera or Safari.
280+
</p>
281+
</div>
269282
<div>
270283
<h3 className="font-semibold text-gray-900 dark:text-white mb-2">
271284
What payment methods do you accept?

0 commit comments

Comments
 (0)