public: update public website (mainly pricing)

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
+          Mark events as conversions to highlight and get notifications with our
-          out iOS/Android app.
+          iOS/Android app (app coming soon!)
         </p>
       </>
     ),

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>

apps/public/src/app/pricing.tsx

@@ -2,32 +2,36 @@ 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="bg-slate-100 py-32" id="pricing">
-      <div className="container">
+      <div className="sm:max-w-xl md:max-w-3xl mx-auto px-4">
-        <section className="container flex flex-col  gap-6 md:max-w-[64rem]">
+        <section className="flex flex-col gap-6">
-          <div className="mx-auto flex w-full flex-col gap-4 md:max-w-[58rem]">
+          <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]">
+          <ul className="grid gap-3 text-muted-foreground sm:grid-cols-2 md:grid-cols-3">
-            <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
+              <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>
@@ -35,36 +39,29 @@ export function Pricing() {
               <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
+              <CheckIcon className="mr-2 h-4 w-4" /> Unlimted tracked profiles
-                  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="grid md:grid-cols-2 gap-6">
-            <div className="flex flex-col gap-4 text-left md:text-right">
+            {pricing.map((item) => (
-              <div>
+              <div
-                <p className="text-sm font-medium text-muted-foreground">
+                key={item.price}
-                  From
+                className="bg-white rounded-lg border border-blue-dark p-6 flex flex-col gap-1"
-                </p>
+              >
-                <h4 className="text-7xl font-bold">$10</h4>
+                <div className="text-3xl font-bold">{item.price}</div>
-                <p className="text-sm font-medium text-muted-foreground">
+                <div className="text-lg flex justify-between">
-                  billed monthly
+                  <span>
-                </p>
+                    {new Intl.NumberFormat('en').format(item.events)} events
-              </div>
+                  </span>
-              {/* <Link href="/login" className={cn(buttonVariants({ size: "lg" }))}>
+                  <span className="text-muted-foreground">per month</span>
-            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>

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
+        We believe that you should own your own data. That's why we don't sell
-        compliant.
+        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,11 +117,20 @@ 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">
+    <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>
@@ -137,5 +160,6 @@ export function PunchLines() {
           </div>
         </div>
       </div>
+    </div>
   );
 }