Skip to content

Commit 2fb5883

Browse files
driaugdriaug
committed
chore: Add free tier to landing page
1 parent c3a276c commit 2fb5883

1 file changed

Lines changed: 194 additions & 18 deletions

File tree

‎apps/landing/src/pages/pricing.tsx‎

Lines changed: 194 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ export default function Index() {
1515
<NextSeo
1616
title={'Plunk Pricing | The Open-Source Email Platform'}
1717
description={
18-
'Transparent email pricing at $0.001 per email with no contact limits. Free plan includes 3,000 emails/month. No hidden fees, pay only for what you use.'
18+
'Transparent email pricing at $0.001 per email with no contact limits. Free plan includes 1,000 emails/month across transactional, workflow, and campaign emails. No hidden fees, pay only for what you use.'
1919
}
2020
openGraph={{
2121
title: 'Plunk Pricing | The Open-Source Email Platform',
2222
description:
23-
'Transparent email pricing at $0.001 per email with no contact limits. Free plan includes 3,000 emails/month. No hidden fees, pay only for what you use.',
23+
'Transparent email pricing at $0.001 per email with no contact limits. Free plan includes 1,000 emails/month across transactional, workflow, and campaign emails. No hidden fees, pay only for what you use.',
2424
}}
2525
additionalMetaTags={[
2626
{
@@ -42,27 +42,203 @@ export default function Index() {
4242
<p className="mx-auto mt-6 max-w-2xl text-xl text-neutral-600">Start free, pay only for what you use</p>
4343
</div>
4444

45-
{/* Main Pricing Display */}
46-
<div className="mx-auto mt-20 max-w-2xl text-center">
47-
<div className="flex items-baseline justify-center gap-3">
48-
<span className="text-7xl font-bold tracking-tight text-neutral-900">$0.001</span>
49-
<span className="text-2xl text-neutral-500">/email</span>
50-
</div>
45+
{/* Pricing Tiers */}
46+
<div className="mx-auto mt-20 grid max-w-5xl gap-8 lg:grid-cols-2">
47+
{/* Free Tier */}
48+
<motion.div
49+
initial={{opacity: 0, y: 20}}
50+
animate={{opacity: 1, y: 0}}
51+
transition={{delay: 0.2}}
52+
className="relative flex flex-col overflow-hidden rounded-2xl bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900 p-10 shadow-2xl"
53+
>
54+
<div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/5 blur-3xl" />
55+
<div className="absolute -bottom-10 -left-10 h-40 w-40 rounded-full bg-white/5 blur-3xl" />
56+
57+
<div className="relative flex flex-1 flex-col">
58+
<div className="mb-6 inline-block self-start rounded-full border border-white/20 bg-white/10 px-4 py-1.5 text-sm font-semibold text-white backdrop-blur-sm">
59+
Free Forever
60+
</div>
61+
62+
<div className="mb-2 flex items-baseline gap-2">
63+
<span className="text-6xl font-bold tracking-tight text-white">1,000</span>
64+
<span className="text-xl font-medium text-white/60">emails</span>
65+
</div>
66+
<p className="mb-8 text-base text-white/60">per month</p>
67+
68+
<ul className="flex-1 space-y-3">
69+
<li className="flex items-start gap-3 text-white/80">
70+
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
71+
<path
72+
fillRule="evenodd"
73+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
74+
clipRule="evenodd"
75+
/>
76+
</svg>
77+
<span>Transactional emails</span>
78+
</li>
79+
<li className="flex items-start gap-3 text-white/80">
80+
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
81+
<path
82+
fillRule="evenodd"
83+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
84+
clipRule="evenodd"
85+
/>
86+
</svg>
87+
<span>Workflow automation</span>
88+
</li>
89+
<li className="flex items-start gap-3 text-white/80">
90+
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
91+
<path
92+
fillRule="evenodd"
93+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
94+
clipRule="evenodd"
95+
/>
96+
</svg>
97+
<span>Campaign broadcasts</span>
98+
</li>
99+
<li className="flex items-start gap-3 text-white/80">
100+
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
101+
<path
102+
fillRule="evenodd"
103+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
104+
clipRule="evenodd"
105+
/>
106+
</svg>
107+
<span>Custom domains</span>
108+
</li>
109+
<li className="flex items-start gap-3 text-white/80">
110+
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
111+
<path
112+
fillRule="evenodd"
113+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
114+
clipRule="evenodd"
115+
/>
116+
</svg>
117+
<span>Click & open tracking
118+
</span>
119+
</li>
120+
<li className="flex items-start gap-3 text-white/80">
121+
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
122+
<path
123+
fillRule="evenodd"
124+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
125+
clipRule="evenodd"
126+
/>
127+
</svg>
128+
<span>No credit card required</span>
129+
</li>
130+
<li className="flex items-start gap-3 text-white/60">
131+
<svg className="mt-0.5 h-5 w-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
132+
<path
133+
fillRule="evenodd"
134+
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
135+
clipRule="evenodd"
136+
/>
137+
</svg>
138+
<span>Plunk branding</span>
139+
</li>
140+
</ul>
141+
142+
<motion.a
143+
href={`${DASHBOARD_URI}/auth/signup`}
144+
whileHover={{scale: 1.02}}
145+
whileTap={{scale: 0.98}}
146+
className="mt-8 block w-full rounded-lg border-2 border-white bg-white px-6 py-3 text-center font-semibold text-neutral-900 transition hover:bg-white/90"
147+
>
148+
Start for free
149+
</motion.a>
150+
</div>
151+
</motion.div>
51152

52-
<motion.a
53-
href={`${DASHBOARD_URI}/auth/signup`}
54-
whileHover={{scale: 1.02}}
55-
whileTap={{scale: 0.98}}
56-
className={
57-
'mx-auto mt-10 inline-block rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
58-
}
153+
{/* Pay as you grow */}
154+
<motion.div
155+
initial={{opacity: 0, y: 20}}
156+
animate={{opacity: 1, y: 0}}
157+
transition={{delay: 0.3}}
158+
className="relative flex flex-col overflow-hidden rounded-2xl border-2 border-neutral-200 bg-white p-10 shadow-lg"
59159
>
60-
Get started for free
61-
</motion.a>
160+
<div className="mb-6 inline-block self-start rounded-full bg-neutral-100 px-4 py-1.5 text-sm font-semibold text-neutral-900">
161+
Pay as you grow
162+
</div>
163+
164+
<div className="mb-2 flex items-baseline gap-2">
165+
<span className="text-6xl font-bold tracking-tight text-neutral-900">$0.001</span>
166+
<span className="text-xl font-medium text-neutral-500">per email</span>
167+
</div>
168+
<p className="mb-8 text-base text-neutral-500">No contact limits, pay only for what you send</p>
169+
170+
<ul className="flex-1 space-y-3">
171+
<li className="flex items-start gap-3 text-neutral-600">
172+
<svg
173+
className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
174+
fill="currentColor"
175+
viewBox="0 0 20 20"
176+
>
177+
<path
178+
fillRule="evenodd"
179+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
180+
clipRule="evenodd"
181+
/>
182+
</svg>
183+
<span>Everything in Free</span>
184+
</li>
185+
<li className="flex items-start gap-3 text-neutral-600">
186+
<svg
187+
className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
188+
fill="currentColor"
189+
viewBox="0 0 20 20"
190+
>
191+
<path
192+
fillRule="evenodd"
193+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
194+
clipRule="evenodd"
195+
/>
196+
</svg>
197+
<span>No Plunk branding</span>
198+
</li>
199+
<li className="flex items-start gap-3 text-neutral-600">
200+
<svg
201+
className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
202+
fill="currentColor"
203+
viewBox="0 0 20 20"
204+
>
205+
<path
206+
fillRule="evenodd"
207+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
208+
clipRule="evenodd"
209+
/>
210+
</svg>
211+
<span>Billing limits</span>
212+
</li>
213+
<li className="flex items-start gap-3 text-neutral-600">
214+
<svg
215+
className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
216+
fill="currentColor"
217+
viewBox="0 0 20 20"
218+
>
219+
<path
220+
fillRule="evenodd"
221+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
222+
clipRule="evenodd"
223+
/>
224+
</svg>
225+
<span>Unlimited emails</span>
226+
</li>
227+
</ul>
228+
229+
<motion.a
230+
href={`${DASHBOARD_URI}/auth/signup`}
231+
whileHover={{scale: 1.02}}
232+
whileTap={{scale: 0.98}}
233+
className="mt-8 block w-full rounded-lg bg-neutral-900 px-6 py-3 text-center font-semibold text-white transition hover:bg-neutral-800"
234+
>
235+
Start for free
236+
</motion.a>
237+
</motion.div>
62238
</div>
63239

64240
{/* Features Grid */}
65-
<div className="mx-auto mt-20 max-w-5xl">
241+
<div className="mx-auto mt-24 max-w-5xl">
66242
<h2 className="mb-12 text-center text-2xl font-bold text-neutral-900">Everything included</h2>
67243
<div className="grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3">
68244
<div className="bg-white p-8">

0 commit comments

Comments
 (0)