From 13c2d20961e764a251b62c68988a4348ad291046 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Sun, 24 Mar 2024 18:25:53 +0100
Subject: [PATCH] public: update public website (mainly pricing)

---
 apps/public/src/app/features.tsx    |   4 +-
 apps/public/src/app/navbar.tsx      |   3 +
 apps/public/src/app/pricing.tsx     | 103 ++++++++++++++--------------
 apps/public/src/app/punch-lines.tsx |  78 +++++++++++++--------
 4 files changed, 106 insertions(+), 82 deletions(-)

diff --git a/apps/public/src/app/features.tsx b/apps/public/src/app/features.tsx
index e9a90c22..21884d9a 100644
--- a/apps/public/src/app/features.tsx
+++ b/apps/public/src/app/features.tsx
@@ -43,8 +43,8 @@ const features: FeatureItem[] = [
           be accessible.
         </p>
         <p>
-          Mark events as conversions to highlight and soon notifications with
-          out iOS/Android app.
+          Mark events as conversions to highlight and get notifications with our
+          iOS/Android app (app coming soon!)
         </p>
       </>
     ),
diff --git a/apps/public/src/app/navbar.tsx b/apps/public/src/app/navbar.tsx
index 115eda84..0399c52e 100644
--- a/apps/public/src/app/navbar.tsx
+++ b/apps/public/src/app/navbar.tsx
@@ -21,6 +21,9 @@ export function Navbar({ darkText = false, className }: Props) {
         <Logo className="max-sm:[&_span]:hidden" />
         <nav className="flex gap-4">
           {pathname !== '/' && <Link href="/">Home</Link>}
+          <Link href="/#pricing" data-event="click_pricing">
+            Pricing
+          </Link>
           <a href="https://docs.openpanel.dev" target="_blank">
             Docs
           </a>
diff --git a/apps/public/src/app/pricing.tsx b/apps/public/src/app/pricing.tsx
index 7bb904cd..24d87769 100644
--- a/apps/public/src/app/pricing.tsx
+++ b/apps/public/src/app/pricing.tsx
@@ -2,69 +2,66 @@ import { CheckIcon } from 'lucide-react';
 
 import { Heading2, Lead2 } from './copy';
 
+const pricing = [
+  { price: 'Free', events: 3000 },
+  { price: '$5', events: 10_000 },
+  { price: '$10', events: 20_000 },
+  { price: '$20', events: 100_000 },
+  { price: '$30', events: 200_000 },
+  { price: '$50', events: 400_000 },
+  { price: '$70', events: 600_000 },
+  { price: '$90', events: 1_000_000 },
+];
+
 export function Pricing() {
   return (
-    <div className="bg-slate-200 py-32" id="#pricing">
-      <div className="container">
-        <section className="container flex flex-col  gap-6 md:max-w-[64rem]">
-          <div className="mx-auto flex w-full flex-col gap-4 md:max-w-[58rem]">
+    <div className="bg-slate-100 py-32" id="pricing">
+      <div className="sm:max-w-xl md:max-w-3xl mx-auto px-4">
+        <section className="flex flex-col gap-6">
+          <div className="flex w-full flex-col gap-4 md:max-w-[58rem]">
             <Heading2>Simple, transparent pricing</Heading2>
             <Lead2 className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
               Everything is included, just decide how many events you want to
               track each month.
             </Lead2>
           </div>
-          <div className="grid w-full items-start gap-10 rounded-lg border md:p-10 md:grid-cols-[1fr_200px]">
-            <div className="grid gap-6">
-              <h3 className="text-xl font-bold sm:text-2xl">
-                What&apos;s included for{' '}
-                <span className="bg-slate-300 rounded px-0.5">all plans</span>
-              </h3>
-              <ul className="grid gap-3 text-sm text-muted-foreground sm:grid-cols-2">
-                <li className="flex items-center">
-                  <CheckIcon className="mr-2 h-4 w-4" /> Unlimited websites/apps
-                </li>
-                <li className="flex items-center">
-                  <CheckIcon className="mr-2 h-4 w-4" /> Unlimited Users
-                </li>
-
-                <li className="flex items-center">
-                  <CheckIcon className="mr-2 h-4 w-4" /> Unlimted dashboards
-                </li>
-                <li className="flex items-center">
-                  <CheckIcon className="mr-2 h-4 w-4" /> Unlimted charts
-                </li>
-                <li className="flex items-center">
-                  <CheckIcon className="mr-2 h-4 w-4" /> Unlimted tracked
-                  profiles
-                </li>
-                <li className="flex items-center font-bold text-slate-900">
-                  <CheckIcon className="mr-2 h-4 w-4" /> Yes, its that simple
-                </li>
-              </ul>
-            </div>
-            <div className="flex flex-col gap-4 text-left md:text-right">
-              <div>
-                <p className="text-sm font-medium text-muted-foreground">
-                  From
-                </p>
-                <h4 className="text-7xl font-bold">$10</h4>
-                <p className="text-sm font-medium text-muted-foreground">
-                  billed monthly
-                </p>
+          <ul className="grid gap-3 text-muted-foreground sm:grid-cols-2 md:grid-cols-3">
+            <li className="flex items-center">
+              <CheckIcon className="mr-2 h-4 w-4" /> Unlimited websites/apps
+            </li>
+            <li className="flex items-center">
+              <CheckIcon className="mr-2 h-4 w-4" /> Unlimited users
+            </li>
+            <li className="flex items-center">
+              <CheckIcon className="mr-2 h-4 w-4" /> Unlimted dashboards
+            </li>
+            <li className="flex items-center">
+              <CheckIcon className="mr-2 h-4 w-4" /> Unlimted charts
+            </li>
+            <li className="flex items-center">
+              <CheckIcon className="mr-2 h-4 w-4" /> Unlimted tracked profiles
+            </li>
+            <li className="flex items-center font-bold text-slate-900">
+              <CheckIcon className="mr-2 h-4 w-4" /> Yes, its that simple
+            </li>
+          </ul>
+          <div className="grid md:grid-cols-2 gap-6">
+            {pricing.map((item) => (
+              <div
+                key={item.price}
+                className="bg-white rounded-lg border border-blue-dark p-6 flex flex-col gap-1"
+              >
+                <div className="text-3xl font-bold">{item.price}</div>
+                <div className="text-lg flex justify-between">
+                  <span>
+                    {new Intl.NumberFormat('en').format(item.events)} events
+                  </span>
+                  <span className="text-muted-foreground">per month</span>
+                </div>
               </div>
-              {/* <Link href="/login" className={cn(buttonVariants({ size: "lg" }))}>
-            Get Started
-          </Link> */}
-            </div>
-          </div>
-          <div className="mx-auto flex w-full max-w-[58rem] flex-col gap-4">
-            <p className="max-w-[85%] leading-normal text-muted-foreground sm:leading-7">
-              Exact pricing will come soon, but we asure you, it will be cheaper
-              than the competition.
-            </p>
-            <p className="font-bold">During beta everything is free!</p>
+            ))}
           </div>
+          <p className="font-bold">Everything is free during beta period!</p>
         </section>
       </div>
     </div>
diff --git a/apps/public/src/app/punch-lines.tsx b/apps/public/src/app/punch-lines.tsx
index d9523d1c..0ff5583a 100644
--- a/apps/public/src/app/punch-lines.tsx
+++ b/apps/public/src/app/punch-lines.tsx
@@ -7,24 +7,38 @@ import {
   DollarSignIcon,
   HandshakeIcon,
   KeyIcon,
+  ShieldIcon,
+  WebhookIcon,
 } from 'lucide-react';
 import Image from 'next/image';
 
-import { Heading2, Heading3, Heading4 } from './copy';
+import { Heading2, Heading4 } from './copy';
 
 const items = [
   {
     title: 'Own Your Own Data',
     description: (
       <p>
-        All our serveres are hosted in EU (Stockholm) and we are fully GDPR
-        compliant.
+        We believe that you should own your own data. That's why we don't sell
+        your data to third parties. <strong>Ever. Period.</strong>
       </p>
     ),
     icon: KeyIcon,
     color: '#2563EB',
     className: 'bg-blue-light',
   },
+  {
+    title: 'GDPR Compliant',
+    description: (
+      <p>
+        All our serveres are hosted in EU (Stockholm) and we are fully GDPR
+        compliant.
+      </p>
+    ),
+    icon: ShieldIcon,
+    color: '#b051d3',
+    className: 'bg-[#b051d3]',
+  },
   {
     title: 'Cloud or Self-Hosting',
     description: (
@@ -103,37 +117,47 @@ const items = [
     color: '#3ba974',
     className: 'bg-[#e19900]',
   },
+  {
+    title: 'Powerful Export API',
+    description: <p>Use our powerful export API to access your data.</p>,
+    icon: WebhookIcon,
+    color: '#3ba974',
+    className: 'bg-[#e93838]',
+  },
 ];
 
 export function PunchLines() {
   return (
-    <div className="bg-slate-700 py-32">
-      <Heading2 className="text-white text-center mb-16">
-        Not convinced?
-      </Heading2>
-      <div className="container">
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {items.map((item) => {
-            const Icon = item.icon;
-            return (
-              <div
-                className="border border-border p-6 rounded-xl bg-white"
-                key={item.title}
-              >
+    <div className="bg-blue-darker py-32 relative">
+      <div className="inset-0 absolute h-full w-full bg-[radial-gradient(circle,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0)_100%)]"></div>
+      <div className="relative">
+        <Heading2 className="text-white text-center mb-16">
+          Not convinced?
+        </Heading2>
+        <div className="container">
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {items.map((item) => {
+              const Icon = item.icon;
+              return (
                 <div
-                  className={cn(
-                    'h-14 w-14 rounded-full flex items-center justify-center mb-4',
-                    item.color
-                  )}
-                  style={{ background: item.color }}
+                  className="border border-border p-6 rounded-xl bg-white"
+                  key={item.title}
                 >
-                  <Icon color="#fff" />
+                  <div
+                    className={cn(
+                      'h-14 w-14 rounded-full flex items-center justify-center mb-4',
+                      item.color
+                    )}
+                    style={{ background: item.color }}
+                  >
+                    <Icon color="#fff" />
+                  </div>
+                  <Heading4>{item.title}</Heading4>
+                  <div className="prose">{item.description}</div>
                 </div>
-                <Heading4>{item.title}</Heading4>
-                <div className="prose">{item.description}</div>
-              </div>
-            );
-          })}
+              );
+            })}
+          </div>
         </div>
       </div>
     </div>