From 2fb588357a3fe75bd564edb43d6247a3903147fc Mon Sep 17 00:00:00 2001
From: Dries Augustyns <inbox@driaug.com>
Date: Fri, 19 Dec 2025 17:25:28 +0100
Subject: [PATCH] chore: Add free tier to landing page

---
 apps/landing/src/pages/pricing.tsx | 214 ++++++++++++++++++++++++++---
 1 file changed, 195 insertions(+), 19 deletions(-)

diff --git a/apps/landing/src/pages/pricing.tsx b/apps/landing/src/pages/pricing.tsx
index 6e77a1c..3bc4c68 100644
--- a/apps/landing/src/pages/pricing.tsx
+++ b/apps/landing/src/pages/pricing.tsx
@@ -15,12 +15,12 @@ export default function Index() {
       <NextSeo
         title={'Plunk Pricing | The Open-Source Email Platform'}
         description={
-          '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.'
+          '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.'
         }
         openGraph={{
           title: 'Plunk Pricing | The Open-Source Email Platform',
           description:
-            '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.',
+            '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.',
         }}
         additionalMetaTags={[
           {
@@ -42,27 +42,203 @@ export default function Index() {
               <p className="mx-auto mt-6 max-w-2xl text-xl text-neutral-600">Start free, pay only for what you use</p>
             </div>
 
-            {/* Main Pricing Display */}
-            <div className="mx-auto mt-20 max-w-2xl text-center">
-              <div className="flex items-baseline justify-center gap-3">
-                <span className="text-7xl font-bold tracking-tight text-neutral-900">$0.001</span>
-                <span className="text-2xl text-neutral-500">/email</span>
-              </div>
-
-              <motion.a
-                href={`${DASHBOARD_URI}/auth/signup`}
-                whileHover={{scale: 1.02}}
-                whileTap={{scale: 0.98}}
-                className={
-                  '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'
-                }
+            {/* Pricing Tiers */}
+            <div className="mx-auto mt-20 grid max-w-5xl gap-8 lg:grid-cols-2">
+              {/* Free Tier */}
+              <motion.div
+                initial={{opacity: 0, y: 20}}
+                animate={{opacity: 1, y: 0}}
+                transition={{delay: 0.2}}
+                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"
               >
-                Get started for free
-              </motion.a>
+                <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/5 blur-3xl" />
+                <div className="absolute -bottom-10 -left-10 h-40 w-40 rounded-full bg-white/5 blur-3xl" />
+
+                <div className="relative flex flex-1 flex-col">
+                  <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">
+                    Free Forever
+                  </div>
+
+                  <div className="mb-2 flex items-baseline gap-2">
+                    <span className="text-6xl font-bold tracking-tight text-white">1,000</span>
+                    <span className="text-xl font-medium text-white/60">emails</span>
+                  </div>
+                  <p className="mb-8 text-base text-white/60">per month</p>
+
+                  <ul className="flex-1 space-y-3">
+                    <li className="flex items-start gap-3 text-white/80">
+                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                          fillRule="evenodd"
+                          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"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                      <span>Transactional emails</span>
+                    </li>
+                    <li className="flex items-start gap-3 text-white/80">
+                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                          fillRule="evenodd"
+                          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"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                      <span>Workflow automation</span>
+                    </li>
+                    <li className="flex items-start gap-3 text-white/80">
+                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                          fillRule="evenodd"
+                          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"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                      <span>Campaign broadcasts</span>
+                    </li>
+                    <li className="flex items-start gap-3 text-white/80">
+                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                          fillRule="evenodd"
+                          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"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                      <span>Custom domains</span>
+                    </li>
+                    <li className="flex items-start gap-3 text-white/80">
+                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                          fillRule="evenodd"
+                          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"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                      <span>Click & open tracking
+                      </span>
+                    </li>
+                    <li className="flex items-start gap-3 text-white/80">
+                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                          fillRule="evenodd"
+                          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"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                      <span>No credit card required</span>
+                    </li>
+                    <li className="flex items-start gap-3 text-white/60">
+                      <svg className="mt-0.5 h-5 w-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                        <path
+                          fillRule="evenodd"
+                          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"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                      <span>Plunk branding</span>
+                    </li>
+                  </ul>
+
+                  <motion.a
+                    href={`${DASHBOARD_URI}/auth/signup`}
+                    whileHover={{scale: 1.02}}
+                    whileTap={{scale: 0.98}}
+                    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"
+                  >
+                    Start for free
+                  </motion.a>
+                </div>
+              </motion.div>
+
+              {/* Pay as you grow */}
+              <motion.div
+                initial={{opacity: 0, y: 20}}
+                animate={{opacity: 1, y: 0}}
+                transition={{delay: 0.3}}
+                className="relative flex flex-col overflow-hidden rounded-2xl border-2 border-neutral-200 bg-white p-10 shadow-lg"
+              >
+                <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">
+                  Pay as you grow
+                </div>
+
+                <div className="mb-2 flex items-baseline gap-2">
+                  <span className="text-6xl font-bold tracking-tight text-neutral-900">$0.001</span>
+                  <span className="text-xl font-medium text-neutral-500">per email</span>
+                </div>
+                <p className="mb-8 text-base text-neutral-500">No contact limits, pay only for what you send</p>
+
+                <ul className="flex-1 space-y-3">
+                  <li className="flex items-start gap-3 text-neutral-600">
+                    <svg
+                      className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        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"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span>Everything in Free</span>
+                  </li>
+                  <li className="flex items-start gap-3 text-neutral-600">
+                    <svg
+                      className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        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"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span>No Plunk branding</span>
+                  </li>
+                  <li className="flex items-start gap-3 text-neutral-600">
+                    <svg
+                      className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        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"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span>Billing limits</span>
+                  </li>
+                  <li className="flex items-start gap-3 text-neutral-600">
+                    <svg
+                      className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        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"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <span>Unlimited emails</span>
+                  </li>
+                </ul>
+
+                <motion.a
+                  href={`${DASHBOARD_URI}/auth/signup`}
+                  whileHover={{scale: 1.02}}
+                  whileTap={{scale: 0.98}}
+                  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"
+                >
+                  Start for free
+                </motion.a>
+              </motion.div>
             </div>
 
             {/* Features Grid */}
-            <div className="mx-auto mt-20 max-w-5xl">
+            <div className="mx-auto mt-24 max-w-5xl">
               <h2 className="mb-12 text-center text-2xl font-bold text-neutral-900">Everything included</h2>
               <div className="grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3">
                 <div className="bg-white p-8">