minor fixes before OSS

README.md

@@ -1,4 +1,4 @@
-![hero](github.png)
+![hero](apps/public/public/ogimage.png)
 
 <p align="center">
 	<h1 align="center"><b>Openpanel</b></h1>

apps/dashboard/src/app/(app)/create-organization.tsx

@@ -2,6 +2,7 @@
 
 import { CreateClientSuccess } from '@/components/clients/create-client-success';
 import { LogoSquare } from '@/components/logo';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button, buttonVariants } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -92,6 +93,20 @@ export function CreateOrganization() {
         Create your organization below (can be personal or a company) and your
         first project.
       </div>
+      <Alert className="mt-8">
+        <AlertTitle>Free during beta</AlertTitle>
+        <AlertDescription>
+          Openpanel is free during beta. Check our{' '}
+          <a
+            href="https://openpanel.dev/#pricing"
+            target="_blank"
+            className="text-blue-600 underline"
+          >
+            pricing
+          </a>{' '}
+          if you&apos;re curious. We&apos;ll also have a free tier.
+        </AlertDescription>
+      </Alert>
       <form
         className="mt-8 flex flex-col gap-4"
         onSubmit={form.handleSubmit(onSubmit)}

apps/dashboard/src/utils/meta.ts

@@ -12,8 +12,8 @@ export const defaultMeta: Metadata = {
     images: [
       {
         url: 'https://openpanel.dev/ogimage.png',
-        width: 1200,
+        width: 2011,
-        height: 630,
+        height: 1339,
         alt: title,
       },
     ],

apps/public/src/app/footer.tsx

@@ -1,4 +1,5 @@
 import { Logo } from '@/components/Logo';
+import { ALink } from '@/components/ui/button';
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -12,10 +13,18 @@ export default function Footer() {
       <div className="container relative flex flex-col items-center text-center">
         <div className="my-24">
           <Heading2 className="mb-2 text-white">Get early access</Heading2>
-          <Lead2>Ready to set your analytics free? Get on our waitlist.</Lead2>
+          <Lead2>
+            Ready to set your analytics free? Create your account today!
+          </Lead2>
 
           <div className="mt-8">
-            <JoinWaitlist className="border-white/30 bg-white/20 text-white focus:ring-white" />
+            <ALink
+              className="font-semibold"
+              size="lg"
+              href="https://dashboard.openpanel.dev"
+            >
+              Create your account
+            </ALink>
           </div>
         </div>
 

apps/public/src/app/hero.tsx

@@ -1,13 +1,25 @@
-import { Heading1, Lead2 } from './copy';
+import { ALink } from '@/components/ui/button';
-import { JoinWaitlistHero } from './join-waitlist-hero';
-import { SocialProofServer } from './social-proof';
 
-export function Hero() {
+import { chQuery } from '@openpanel/db';
+
+import { Heading1, Lead2 } from './copy';
+
+export async function Hero() {
+  const projects = await chQuery<{ project_id: string; count: number }>(
+    'SELECT project_id, count(*) as count from events GROUP by project_id order by count()'
+  );
+  const projectCount = projects.length;
+  const eventCount = projects.reduce((acc, { count }) => acc + count, 0);
   return (
     <div className="relative overflow-hidden">
       {/* <div className="bg-blue-50 w-2/5 h-full absolute top-0 right-0"></div> */}
       <div className="container relative flex min-h-[700px] flex-col items-center gap-4 max-md:pt-32 md:h-screen md:flex-row md:gap-8">
         <div className="flex-1 max-md:text-center sm:min-w-[350px] lg:min-w-[400px]">
+          <div className="mb-4 flex justify-center md:justify-start">
+            <div className="rounded-full border border-border p-2 px-4 text-sm">
+              NOW OPEN BETA!
+            </div>
+          </div>
           <Heading1 className="mb-4 text-slate-950">
             An open-source
             <br />
@@ -17,8 +29,33 @@ export function Hero() {
             The power of Mixpanel, the ease of Plausible and nothing from Google
             Analytics 😉
           </Lead2>
-          <JoinWaitlistHero />
+
-          <SocialProofServer className="mt-6" />
+          <div className="flex justify-center gap-2 md:justify-start">
+            <ALink
+              className="font-semibold"
+              size="lg"
+              href="https://dashboard.openpanel.dev"
+            >
+              Create account
+            </ALink>
+            <ALink
+              className="font-semibold"
+              size="lg"
+              variant="secondary"
+              href="https://dashboard.openpanel.dev/share/overview/ZQsEhG"
+            >
+              See demo
+            </ALink>
+          </div>
+          <p className="mt-2">
+            We have{' '}
+            <span className="font-semibold">{projectCount} projects</span>{' '}
+            receiving{' '}
+            <span className="font-semibold">
+              {new Intl.NumberFormat('en').format(eventCount)} events
+            </span>{' '}
+            in total!
+          </p>
         </div>
         <div className="mt-16 w-full md:pt-16">
           <div className="flex h-[max(90vh,650px)] rounded-2xl bg-black/5 md:p-2">

apps/public/src/app/meta.ts

@@ -14,8 +14,8 @@ export const defaultMeta: Metadata = {
     images: [
       {
         url: 'https://openpanel.dev/ogimage.png',
-        width: 1200,
+        width: 2011,
-        height: 630,
+        height: 1339,
         alt: title,
       },
     ],

apps/public/src/app/navbar.tsx

@@ -15,11 +15,15 @@ export function Navbar({ darkText = false, className }: Props) {
   const textColor = darkText ? 'text-blue-dark' : 'text-white';
   return (
     <div
-      className={cn('absolute left-0 right-0 top-0 z-10', textColor, className)}
+      className={cn(
+        'fixed left-0 right-0 top-0 z-10 flex h-20 items-center border-b border-border bg-white',
+        textColor,
+        className
+      )}
     >
       <div className="container flex items-center justify-between py-4">
         <Logo className="max-sm:[&_span]:hidden" />
-        <nav className="flex gap-4">
+        <nav className="flex gap-4 text-sm">
           {pathname !== '/' && <Link href="/">Home</Link>}
           <Link href="/#pricing" data-event="click_pricing">
             Pricing
@@ -27,6 +31,9 @@ export function Navbar({ darkText = false, className }: Props) {
           <a href="https://docs.openpanel.dev" target="_blank">
             Docs
           </a>
+          <a href="https://github.com/Openpanel-dev/openpanel" target="_blank">
+            Github
+          </a>
           <a href="https://dashboard.openpanel.dev" target="_blank">
             Sign in
           </a>