From 6b1fcb819387d40d3bc625d76e20d6ac207a4ca2 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Tue, 1 Aug 2023 17:43:11 +1000
Subject: [PATCH 01/17] feat: open page

---
 apps/marketing/package.json                   |   1 +
 .../src/app/(marketing)/open/data.ts          |  95 ++++++
 .../app/(marketing)/open/funding-raised.tsx   |  51 +++
 .../src/app/(marketing)/open/metric-card.tsx  |  18 +
 .../src/app/(marketing)/open/page.tsx         |  99 ++++++
 .../src/app/(marketing)/open/salary-bands.tsx |  50 +++
 .../src/app/(marketing)/open/team-members.tsx |  56 +++
 apps/marketing/src/app/(marketing)/page.tsx   |  15 +-
 .../src/components/(marketing)/callout.tsx    |  14 +-
 .../src/components/(marketing)/callout.tsx    |  30 +-
 apps/web/src/components/(marketing)/hero.tsx  |  61 ++--
 package-lock.json                             | 322 ++++++++++++++++++
 12 files changed, 768 insertions(+), 44 deletions(-)
 create mode 100644 apps/marketing/src/app/(marketing)/open/data.ts
 create mode 100644 apps/marketing/src/app/(marketing)/open/funding-raised.tsx
 create mode 100644 apps/marketing/src/app/(marketing)/open/metric-card.tsx
 create mode 100644 apps/marketing/src/app/(marketing)/open/page.tsx
 create mode 100644 apps/marketing/src/app/(marketing)/open/salary-bands.tsx
 create mode 100644 apps/marketing/src/app/(marketing)/open/team-members.tsx

diff --git a/apps/marketing/package.json b/apps/marketing/package.json
index 469fe7e11..5fd2ff59e 100644
--- a/apps/marketing/package.json
+++ b/apps/marketing/package.json
@@ -28,6 +28,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
+    "recharts": "^2.7.2",
     "typescript": "5.1.6",
     "zod": "^3.21.4"
   },
diff --git a/apps/marketing/src/app/(marketing)/open/data.ts b/apps/marketing/src/app/(marketing)/open/data.ts
new file mode 100644
index 000000000..fa831d08b
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/data.ts
@@ -0,0 +1,95 @@
+export const TEAM_MEMBERS = [
+  {
+    name: 'Timur Ercan',
+    role: 'Co-Founder, CEO',
+    salary: 95_000,
+    location: 'Germany',
+    joinDate: 'November 14th, 2022',
+  },
+  {
+    name: 'Lucas Smith',
+    role: 'Co-Founder, CTO',
+    salary: 95_000,
+    location: 'Australia',
+    joinDate: 'April 19th, 2023',
+  },
+  {
+    name: 'Ephraim Atta-Duncan',
+    role: 'Software Engineer - Intern (Part-Time)',
+    salary: 15_000,
+    location: 'Ghana',
+    joinDate: 'June 6th, 2023',
+  },
+  {
+    name: 'Florent Merian',
+    role: 'Marketer - III',
+    salary: 80_000,
+    location: 'France',
+    joinDate: 'July 10th, 2023',
+  },
+  {
+    name: 'David Nguyen',
+    role: 'Software Engineer - III',
+    salary: 100_000,
+    location: 'Australia',
+    joinDate: 'July 26th, 2023',
+  },
+];
+
+export const FUNDING_RAISED = [
+  {
+    date: '2023-05-20',
+    amount: 0,
+  },
+  {
+    date: '2023-05-20',
+    amount: 300_000,
+  },
+  {
+    date: '2023-07-25',
+    amount: 1_250_000,
+  },
+];
+
+export const SALARY_BANDS = [
+  {
+    title: 'Software Engineer - Intern',
+    seniority: 'Intern',
+    salary: 30_000,
+  },
+  {
+    title: 'Software Engineer - I',
+    seniority: 'Junior',
+    salary: 60_000,
+  },
+  {
+    title: 'Software Engineer - II',
+    seniority: 'Mid',
+    salary: 80_000,
+  },
+  {
+    title: 'Software Engineer - III',
+    seniority: 'Senior',
+    salary: 100_000,
+  },
+  {
+    title: 'Software Engineer - IV',
+    seniority: 'Principal',
+    salary: 120_000,
+  },
+  {
+    title: 'Marketer - I',
+    seniority: 'Junior',
+    salary: 50_000,
+  },
+  {
+    title: 'Marketer - II',
+    seniority: 'Mid',
+    salary: 65_000,
+  },
+  {
+    title: 'Marketer - III',
+    seniority: 'Senior',
+    salary: 80_000,
+  },
+];
diff --git a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
new file mode 100644
index 000000000..75ba2b2f7
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
+
+export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>;
+
+export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => {
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Funding Raised</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-4 shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={FUNDING_RAISED} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+            <XAxis dataKey="date" />
+            <YAxis
+              tickFormatter={(value) =>
+                Number(value).toLocaleString('en-US', {
+                  style: 'currency',
+                  currency: 'USD',
+                  maximumFractionDigits: 0,
+                })
+              }
+            />
+            <Tooltip
+              itemStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [
+                Number(value).toLocaleString('en-US', {
+                  style: 'currency',
+                  currency: 'USD',
+                  maximumFractionDigits: 0,
+                }),
+                'Amount Raised',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+            <Bar dataKey="amount" fill="hsl(var(--primary))" label="Amount Raised" />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/marketing/src/app/(marketing)/open/metric-card.tsx b/apps/marketing/src/app/(marketing)/open/metric-card.tsx
new file mode 100644
index 000000000..6235f4f5e
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/metric-card.tsx
@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type MetricCardProps = HTMLAttributes<HTMLDivElement> & {
+  title: string;
+  value: string;
+};
+
+export const MetricCard = ({ className, title, value, ...props }: MetricCardProps) => {
+  return (
+    <div className={cn('rounded-md border p-4 shadow-sm hover:shadow', className)} {...props}>
+      <h4 className="text-muted-foreground text-sm font-medium">{title}</h4>
+
+      <p className="mb-2 mt-6 text-4xl font-bold">{value}</p>
+    </div>
+  );
+};
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
new file mode 100644
index 000000000..0ab3318fd
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -0,0 +1,99 @@
+import { z } from 'zod';
+
+import { MetricCard } from '~/app/(marketing)/open/metric-card';
+import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
+
+import { FundingRaised } from './funding-raised';
+import { TeamMembers } from './team-members';
+
+export const revalidate = 86400;
+
+const ZGithubStatsResponse = z.object({
+  stargazers_count: z.number(),
+  forks_count: z.number(),
+  open_issues: z.number(),
+});
+
+const ZMergedPullRequestsResponse = z.object({
+  total_count: z.number(),
+});
+
+// const ZOpenPullRequestsResponse = ZMergedPullRequestsResponse;
+
+export default async function OpenPage() {
+  const {
+    forks_count: forksCount,
+    open_issues: openIssues,
+    stargazers_count: stargazersCount,
+  } = await fetch('https://api.github.com/repos/documenso/documenso', {
+    headers: {
+      accept: 'application/vnd.github.v3+json',
+    },
+  })
+    .then((res) => res.json())
+    .then((res) => ZGithubStatsResponse.parse(res));
+
+  const { total_count: mergedPullRequests } = await fetch(
+    'https://api.github.com/search/issues?q=repo:documenso/documenso/+is:pr+merged:>=2010-01-01&page=0&per_page=1',
+    {
+      headers: {
+        accept: 'application/vnd.github.v3+json',
+      },
+    },
+  )
+    .then((res) => res.json())
+    .then((res) => ZMergedPullRequestsResponse.parse(res));
+
+  return (
+    <div className="mx-auto mt-12 max-w-screen-lg">
+      <div className="flex flex-col items-center justify-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">Open Startup</h1>
+
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
+          All our metrics, finances, and learnings are public. We believe in transparency and want
+          to share our journey with you.
+        </p>
+      </div>
+
+      <div className="mt-12 grid grid-cols-12 gap-8">
+        <div className="col-span-12 grid grid-cols-4 gap-4">
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Stargazers"
+            value={stargazersCount.toLocaleString('en-US')}
+          />
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Forks"
+            value={forksCount.toLocaleString('en-US')}
+          />
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Open Issues"
+            value={openIssues.toLocaleString('en-US')}
+          />
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Merged PR's"
+            value={mergedPullRequests.toLocaleString('en-US')}
+          />
+        </div>
+
+        <TeamMembers className="col-span-12" />
+
+        <SalaryBands className="col-span-12 lg:col-span-6" />
+
+        <FundingRaised className="col-span-12 lg:col-span-6" />
+
+        <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
+          <h2 className="text-2xl font-bold">Where's the rest?</h2>
+
+          <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
+            We're still working on getting all our metrics together. We'll update this page as soon
+            as we have more to share.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/marketing/src/app/(marketing)/open/salary-bands.tsx b/apps/marketing/src/app/(marketing)/open/salary-bands.tsx
new file mode 100644
index 000000000..31c254157
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/salary-bands.tsx
@@ -0,0 +1,50 @@
+import { HTMLAttributes } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { SALARY_BANDS } from '~/app/(marketing)/open/data';
+
+export type SalaryBandsProps = HTMLAttributes<HTMLDivElement>;
+
+export const SalaryBands = ({ className, ...props }: SalaryBandsProps) => {
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Global Salary Bands</h3>
+
+      <div className="border-border mt-2.5 flex-1 rounded-2xl border shadow-sm hover:shadow">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[200px]">Title</TableHead>
+              <TableHead>Seniority</TableHead>
+              <TableHead className="w-[100px] text-right">Salary</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {SALARY_BANDS.map((band, index) => (
+              <TableRow key={index}>
+                <TableCell className="font-medium">{band.title}</TableCell>
+                <TableCell>{band.seniority}</TableCell>
+                <TableCell className="text-right">
+                  {band.salary.toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    maximumFractionDigits: 0,
+                  })}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/marketing/src/app/(marketing)/open/team-members.tsx b/apps/marketing/src/app/(marketing)/open/team-members.tsx
new file mode 100644
index 000000000..f14b5a73d
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/team-members.tsx
@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { TEAM_MEMBERS } from './data';
+
+export type TeamMembersProps = HTMLAttributes<HTMLDivElement>;
+
+export const TeamMembers = ({ className, ...props }: TeamMembersProps) => {
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h2 className="px-4 text-2xl font-semibold">Team</h2>
+
+      <div className="border-border mt-2.5 flex-1 rounded-2xl border shadow-sm hover:shadow">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="">Name</TableHead>
+              <TableHead>Role</TableHead>
+              {/* <TableHead>Status</TableHead> */}
+              <TableHead>Salary</TableHead>
+              <TableHead>Location</TableHead>
+              <TableHead className="w-[100px] text-right">Join Date</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {TEAM_MEMBERS.map((member) => (
+              <TableRow key={member.name}>
+                <TableCell className="font-medium">{member.name}</TableCell>
+                <TableCell>{member.role}</TableCell>
+                {/* <TableCell>{teamMember.employmentStatus}</TableCell> */}
+                <TableCell>
+                  {member.salary.toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    maximumFractionDigits: 0,
+                  })}
+                </TableCell>
+                <TableCell>{member.location}</TableCell>
+                <TableCell className="text-right">{member.joinDate}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/marketing/src/app/(marketing)/page.tsx b/apps/marketing/src/app/(marketing)/page.tsx
index 9992c51a4..09e9e3dec 100644
--- a/apps/marketing/src/app/(marketing)/page.tsx
+++ b/apps/marketing/src/app/(marketing)/page.tsx
@@ -9,6 +9,8 @@ import { Hero } from '~/components/(marketing)/hero';
 import { OpenBuildTemplateBento } from '~/components/(marketing)/open-build-template-bento';
 import { ShareConnectPaidWidgetBento } from '~/components/(marketing)/share-connect-paid-widget-bento';
 
+export const revalidate = 600;
+
 const fontCaveat = Caveat({
   weight: ['500'],
   subsets: ['latin'],
@@ -17,15 +19,24 @@ const fontCaveat = Caveat({
 });
 
 export default async function IndexPage() {
+  const starCount = await fetch('https://api.github.com/repos/documenso/documenso', {
+    headers: {
+      accept: 'application/vnd.github.v3+json',
+    },
+  })
+    .then((res) => res.json())
+    .then((res) => (typeof res.stargazers_count === 'number' ? res.stargazers_count : undefined))
+    .catch(() => undefined);
+
   return (
     <div className={cn('mt-12', fontCaveat.variable)}>
-      <Hero />
+      <Hero starCount={starCount} />
 
       <FasterSmarterBeautifulBento className="my-48" />
       <ShareConnectPaidWidgetBento className="my-48" />
       <OpenBuildTemplateBento className="my-48" />
 
-      <Callout />
+      <Callout starCount={starCount} />
     </div>
   );
 }
diff --git a/apps/marketing/src/components/(marketing)/callout.tsx b/apps/marketing/src/components/(marketing)/callout.tsx
index 30a1abdbf..d83983141 100644
--- a/apps/marketing/src/components/(marketing)/callout.tsx
+++ b/apps/marketing/src/components/(marketing)/callout.tsx
@@ -7,7 +7,12 @@ import { usePlausible } from 'next-plausible';
 
 import { Button } from '@documenso/ui/primitives/button';
 
-export const Callout = () => {
+export type CalloutProps = {
+  starCount?: number;
+  [key: string]: unknown;
+};
+
+export const Callout = ({ starCount }: CalloutProps) => {
   const event = usePlausible();
 
   const onSignUpClick = () => {
@@ -36,7 +41,7 @@ export const Callout = () => {
         onClick={onSignUpClick}
       >
         Get the Community Plan
-        <span className="bg-primary -mr-2 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+        <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
           $30/mo. forever!
         </span>
       </Button>
@@ -49,6 +54,11 @@ export const Callout = () => {
         <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
           <Github className="mr-2 h-5 w-5" />
           Star on Github
+          {starCount && starCount > 0 && (
+            <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+              {starCount.toLocaleString('en-US')}
+            </span>
+          )}
         </Button>
       </Link>
     </div>
diff --git a/apps/web/src/components/(marketing)/callout.tsx b/apps/web/src/components/(marketing)/callout.tsx
index 0c2613ec8..d83983141 100644
--- a/apps/web/src/components/(marketing)/callout.tsx
+++ b/apps/web/src/components/(marketing)/callout.tsx
@@ -7,7 +7,12 @@ import { usePlausible } from 'next-plausible';
 
 import { Button } from '@documenso/ui/primitives/button';
 
-export const Callout = () => {
+export type CalloutProps = {
+  starCount?: number;
+  [key: string]: unknown;
+};
+
+export const Callout = ({ starCount }: CalloutProps) => {
   const event = usePlausible();
 
   const onSignUpClick = () => {
@@ -36,21 +41,26 @@ export const Callout = () => {
         onClick={onSignUpClick}
       >
         Get the Community Plan
-        <span className="bg-primary -mr-2 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+        <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
           $30/mo. forever!
         </span>
       </Button>
 
-      <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm" asChild>
-        <Link
-          href="https://github.com/documenso/documenso"
-          target="_blank"
-          onClick={() => event('view-github')}
-        >
+      <Link
+        href="https://github.com/documenso/documenso"
+        target="_blank"
+        onClick={() => event('view-github')}
+      >
+        <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
           <Github className="mr-2 h-5 w-5" />
           Star on Github
-        </Link>
-      </Button>
+          {starCount && starCount > 0 && (
+            <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+              {starCount.toLocaleString('en-US')}
+            </span>
+          )}
+        </Button>
+      </Link>
     </div>
   );
 };
diff --git a/apps/web/src/components/(marketing)/hero.tsx b/apps/web/src/components/(marketing)/hero.tsx
index 7f7aa6d05..7896a010e 100644
--- a/apps/web/src/components/(marketing)/hero.tsx
+++ b/apps/web/src/components/(marketing)/hero.tsx
@@ -16,6 +16,7 @@ import { Widget } from './widget';
 
 export type HeroProps = {
   className?: string;
+  starCount?: number;
   [key: string]: unknown;
 };
 
@@ -48,7 +49,7 @@ const HeroTitleVariants: Variants = {
   },
 };
 
-export const Hero = ({ className, ...props }: HeroProps) => {
+export const Hero = ({ className, starCount, ...props }: HeroProps) => {
   const event = usePlausible();
 
   const onSignUpClick = () => {
@@ -109,44 +110,44 @@ export const Hero = ({ className, ...props }: HeroProps) => {
             onClick={onSignUpClick}
           >
             Get the Community Plan
-            <span className="bg-primary -mr-2 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+            <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
               $30/mo. forever!
             </span>
           </Button>
 
-          <Button
-            variant="outline"
-            className="rounded-full bg-transparent backdrop-blur-sm"
-            asChild
-          >
-            <Link
-              href="https://github.com/documenso/documenso"
-              onClick={() => event('view-github')}
-            >
+          <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
+            <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
               <Github className="mr-2 h-5 w-5" />
               Star on Github
-            </Link>
-          </Button>
-        </motion.div>
-
-        <motion.div
-          variants={HeroTitleVariants}
-          initial="initial"
-          animate="animate"
-          className="mt-8 flex flex-col items-center justify-center gap-x-6 gap-y-4"
-        >
-          <Link
-            href="https://www.producthunt.com/posts/documenso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-documenso"
-            target="_blank"
-          >
-            <img
-              src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=395047&theme=light&period=daily"
-              alt="Documenso - The open source DocuSign alternative | Product Hunt"
-              style={{ width: '250px', height: '54px' }}
-            />
+              {starCount && starCount > 0 && (
+                <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+                  {starCount.toLocaleString('en-US')}
+                </span>
+              )}
+            </Button>
           </Link>
         </motion.div>
 
+        <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-6">
+          <motion.div
+            variants={HeroTitleVariants}
+            initial="initial"
+            animate="animate"
+            className="mt-8 flex flex-col items-center justify-center gap-x-6 gap-y-4"
+          >
+            <Link
+              href="https://www.producthunt.com/posts/documenso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-documenso"
+              target="_blank"
+            >
+              <img
+                src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=395047&theme=light&period=daily"
+                alt="Documenso - The open source DocuSign alternative | Product Hunt"
+                style={{ width: '250px', height: '54px' }}
+              />
+            </Link>
+          </motion.div>
+        </div>
+
         <motion.div
           className="mt-12"
           variants={{
diff --git a/package-lock.json b/package-lock.json
index 6dd80cd08..91ca63b94 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "react-dom": "18.2.0",
         "react-hook-form": "^7.43.9",
         "react-icons": "^4.8.0",
+        "recharts": "^2.7.2",
         "typescript": "5.1.6",
         "zod": "^3.21.4"
       },
@@ -3836,6 +3837,60 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.5.tgz",
+      "integrity": "sha512-Qk7fpJ6qFp+26VeQ47WY0mkwXaiq8+76RJcncDEfMc2ocRzXLO67bLFRNI4OX1aGBoPzsM5Y2T+/m1pldOgD+A=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA=="
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz",
+      "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA=="
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz",
+      "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.3.tgz",
+      "integrity": "sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.1.tgz",
+      "integrity": "sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg=="
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz",
+      "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g=="
+    },
     "node_modules/@types/debug": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz",
@@ -4884,6 +4939,11 @@
         "url": "https://joebell.co.uk"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -5344,6 +5404,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5360,6 +5425,116 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -5404,6 +5579,11 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
     "node_modules/decode-named-character-reference": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
@@ -5611,6 +5791,14 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -6788,6 +6976,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/execa": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
@@ -6836,6 +7029,14 @@
       "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
       "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="
     },
+    "node_modules/fast-equals": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
+      "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -7780,6 +7981,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -10960,6 +11169,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-pdf": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-7.3.0.tgz",
@@ -11046,6 +11260,18 @@
         }
       }
     },
+    "node_modules/react-resize-detector": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-8.1.0.tgz",
+      "integrity": "sha512-S7szxlaIuiy5UqLhLL1KY3aoyGHbZzsTpYal9eYMwCyKqoqoVLCmIgAgNyIM1FhnP2KyBygASJxdhejrzjMb+w==",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-rnd": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.4.1.tgz",
@@ -11065,6 +11291,20 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
       "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
     },
+    "node_modules/react-smooth": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.3.tgz",
+      "integrity": "sha512-yl4y3XiMorss7ayF5QnBiSprig0+qFHui8uh7Hgg46QX5O+aRMRKlfGGNGLHno35JkQSvSYY8eCWkBfHfrSHfg==",
+      "dependencies": {
+        "fast-equals": "^5.0.0",
+        "react-transition-group": "2.9.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.6.0",
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-ssr-prepass": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/react-ssr-prepass/-/react-ssr-prepass-1.5.0.tgz",
@@ -11095,6 +11335,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "dependencies": {
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0",
+        "react-dom": ">=15.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -11127,6 +11382,52 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.7.2.tgz",
+      "integrity": "sha512-HMKRBkGoOXHW+7JcRa6+MukPSifNtJlqbc+JreGVNA407VLE/vOP+8n3YYjprDVVIF9E2ZgwWnL3D7K/LUFzBg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.19",
+        "react-is": "^16.10.2",
+        "react-resize-detector": "^8.0.4",
+        "react-smooth": "^2.0.2",
+        "recharts-scale": "^0.4.4",
+        "reduce-css-calc": "^2.1.8",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.6.0",
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+      "dependencies": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
+    "node_modules/reduce-css-calc/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -13273,6 +13574,27 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "36.6.11",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.6.11.tgz",
+      "integrity": "sha512-nT8kCiJp8dQh8g991J/R5w5eE2KnO8EAIP0xocWlh9l2okngMWglOPoMZzJvek8Q1KUc4XE/mJxTZnvOB1sTYg==",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

From b718bdeb15d607ea7f025ad7b01b6913d1a6d614 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Sun, 6 Aug 2023 22:46:20 +0000
Subject: [PATCH 02/17] Add initial cap table

---
 .../src/app/(marketing)/open/cap-table.tsx    | 57 +++++++++++++++++++
 .../src/app/(marketing)/open/data.ts          | 15 +++++
 .../src/app/(marketing)/open/page.tsx         |  3 +
 package-lock.json                             |  3 +
 package.json                                  |  5 +-
 5 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 apps/marketing/src/app/(marketing)/open/cap-table.tsx

diff --git a/apps/marketing/src/app/(marketing)/open/cap-table.tsx b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
new file mode 100644
index 000000000..9bf4f9023
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Cell, Pie, PieChart } from 'recharts';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+const data = [
+  { name: 'Founders', percentage: 75.5 },
+  { name: 'Investors', percentage: 14.5 },
+  { name: 'Team Pool', percentage: 10 },
+];
+
+const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
+
+const RADIAN = Math.PI / 180;
+const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.25;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+  return (
+    <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
+      {`${(percent * 100).toFixed(1)}%`}
+    </text>
+  );
+};
+export type CapTableProps = HTMLAttributes<HTMLDivElement>;
+
+export const CapTable = ({ className, ...props }: CapTableProps) => {
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
+        <PieChart width={400} height={400}>
+          <Pie
+            data={data}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            label={renderCustomizedLabel}
+            outerRadius={180}
+            innerRadius={100}
+            fill="#8884d8"
+            dataKey="percentage"
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+        </PieChart>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/marketing/src/app/(marketing)/open/data.ts b/apps/marketing/src/app/(marketing)/open/data.ts
index fa831d08b..083f653dc 100644
--- a/apps/marketing/src/app/(marketing)/open/data.ts
+++ b/apps/marketing/src/app/(marketing)/open/data.ts
@@ -93,3 +93,18 @@ export const SALARY_BANDS = [
     salary: 80_000,
   },
 ];
+
+export const CAP_TABLE = [
+  {
+    shareholder: 'Founders',
+    percentage: '75.5',
+  },
+  {
+    shareholder: 'Investors',
+    percentage: '14.5',
+  },
+  {
+    shareholder: 'Team Pool',
+    percentage: '10',
+  },
+];
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index 0ab3318fd..73de57dd5 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -3,6 +3,7 @@ import { z } from 'zod';
 import { MetricCard } from '~/app/(marketing)/open/metric-card';
 import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 
+import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
 import { TeamMembers } from './team-members';
 
@@ -85,6 +86,8 @@ export default async function OpenPage() {
 
         <FundingRaised className="col-span-12 lg:col-span-6" />
 
+        <CapTable className="col-span-12" />
+
         <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
           <h2 className="text-2xl font-bold">Where's the rest?</h2>
 
diff --git a/package-lock.json b/package-lock.json
index 91ca63b94..c116b2eae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
         "apps/*",
         "packages/*"
       ],
+      "dependencies": {
+        "recharts": "^2.7.2"
+      },
       "devDependencies": {
         "dotenv": "^16.0.3",
         "dotenv-cli": "^7.2.1",
diff --git a/package.json b/package.json
index 428819000..045275faa 100644
--- a/package.json
+++ b/package.json
@@ -20,5 +20,8 @@
   "workspaces": [
     "apps/*",
     "packages/*"
-  ]
+  ],
+  "dependencies": {
+    "recharts": "^2.7.2"
+  }
 }

From e400dbe2ea984734eb7b15b9bc3eb6a59af85e8a Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Sun, 6 Aug 2023 22:59:09 +0000
Subject: [PATCH 03/17] feat: add tooltip to cap table

---
 .../src/app/(marketing)/open/cap-table.tsx      | 17 +++++++++--------
 apps/marketing/src/app/(marketing)/open/data.ts | 15 +++------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/open/cap-table.tsx b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
index 9bf4f9023..214d14e03 100644
--- a/apps/marketing/src/app/(marketing)/open/cap-table.tsx
+++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
@@ -2,15 +2,11 @@
 
 import { HTMLAttributes } from 'react';
 
-import { Cell, Pie, PieChart } from 'recharts';
+import { Cell, Pie, PieChart, Tooltip } from 'recharts';
 
 import { cn } from '@documenso/ui/lib/utils';
 
-const data = [
-  { name: 'Founders', percentage: 75.5 },
-  { name: 'Investors', percentage: 14.5 },
-  { name: 'Team Pool', percentage: 10 },
-];
+import { CAP_TABLE } from './data';
 
 const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
 
@@ -36,7 +32,7 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         <PieChart width={400} height={400}>
           <Pie
-            data={data}
+            data={CAP_TABLE}
             cx="50%"
             cy="50%"
             labelLine={false}
@@ -46,10 +42,15 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
             fill="#8884d8"
             dataKey="percentage"
           >
-            {data.map((entry, index) => (
+            {CAP_TABLE.map((entry, index) => (
               <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
             ))}
           </Pie>
+          <Tooltip
+            formatter={(percent: number, name, props) => {
+              return [`${percent}%`, name || props['name'] || props['payload']['name']];
+            }}
+          />
         </PieChart>
       </div>
     </div>
diff --git a/apps/marketing/src/app/(marketing)/open/data.ts b/apps/marketing/src/app/(marketing)/open/data.ts
index 083f653dc..5a5bc2451 100644
--- a/apps/marketing/src/app/(marketing)/open/data.ts
+++ b/apps/marketing/src/app/(marketing)/open/data.ts
@@ -95,16 +95,7 @@ export const SALARY_BANDS = [
 ];
 
 export const CAP_TABLE = [
-  {
-    shareholder: 'Founders',
-    percentage: '75.5',
-  },
-  {
-    shareholder: 'Investors',
-    percentage: '14.5',
-  },
-  {
-    shareholder: 'Team Pool',
-    percentage: '10',
-  },
+  { name: 'Founders', percentage: 75.5 },
+  { name: 'Investors', percentage: 14.5 },
+  { name: 'Team Pool', percentage: 10 },
 ];

From af2dae8822247c2fad2f31dedc1268fcd186d584 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Sun, 6 Aug 2023 23:01:33 +0000
Subject: [PATCH 04/17] --amend

---
 .../src/app/(marketing)/open/cap-table.tsx    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/open/cap-table.tsx b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
index 214d14e03..5bdea46c4 100644
--- a/apps/marketing/src/app/(marketing)/open/cap-table.tsx
+++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
@@ -9,9 +9,24 @@ import { cn } from '@documenso/ui/lib/utils';
 import { CAP_TABLE } from './data';
 
 const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
-
 const RADIAN = Math.PI / 180;
-const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
+
+export type LabelRenderProps = {
+  cx: number;
+  cy: number;
+  midAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  percent: number;
+};
+const renderCustomizedLabel = ({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  percent,
+}: LabelRenderProps) => {
   const radius = innerRadius + (outerRadius - innerRadius) * 0.25;
   const x = cx + radius * Math.cos(-midAngle * RADIAN);
   const y = cy + radius * Math.sin(-midAngle * RADIAN);
@@ -22,6 +37,7 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, per
     </text>
   );
 };
+
 export type CapTableProps = HTMLAttributes<HTMLDivElement>;
 
 export const CapTable = ({ className, ...props }: CapTableProps) => {

From b710693009db97b2ff8beb21d56c12a94bdbc924 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Tue, 8 Aug 2023 01:53:56 +0000
Subject: [PATCH 05/17] feat: add team members engagement to open page

---
 apps/marketing/src/app/(marketing)/open/data.ts          | 7 ++++++-
 apps/marketing/src/app/(marketing)/open/team-members.tsx | 5 +++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/open/data.ts b/apps/marketing/src/app/(marketing)/open/data.ts
index 5a5bc2451..12de0b563 100644
--- a/apps/marketing/src/app/(marketing)/open/data.ts
+++ b/apps/marketing/src/app/(marketing)/open/data.ts
@@ -4,6 +4,7 @@ export const TEAM_MEMBERS = [
     role: 'Co-Founder, CEO',
     salary: 95_000,
     location: 'Germany',
+    engagement: 'Full-Time',
     joinDate: 'November 14th, 2022',
   },
   {
@@ -11,13 +12,15 @@ export const TEAM_MEMBERS = [
     role: 'Co-Founder, CTO',
     salary: 95_000,
     location: 'Australia',
+    engagement: 'Full-Time',
     joinDate: 'April 19th, 2023',
   },
   {
     name: 'Ephraim Atta-Duncan',
-    role: 'Software Engineer - Intern (Part-Time)',
+    role: 'Software Engineer - Intern',
     salary: 15_000,
     location: 'Ghana',
+    engagement: 'Part-Time',
     joinDate: 'June 6th, 2023',
   },
   {
@@ -25,6 +28,7 @@ export const TEAM_MEMBERS = [
     role: 'Marketer - III',
     salary: 80_000,
     location: 'France',
+    engagement: 'Full-Time',
     joinDate: 'July 10th, 2023',
   },
   {
@@ -32,6 +36,7 @@ export const TEAM_MEMBERS = [
     role: 'Software Engineer - III',
     salary: 100_000,
     location: 'Australia',
+    engagement: 'Full-Time',
     joinDate: 'July 26th, 2023',
   },
 ];
diff --git a/apps/marketing/src/app/(marketing)/open/team-members.tsx b/apps/marketing/src/app/(marketing)/open/team-members.tsx
index f14b5a73d..a79fcd182 100644
--- a/apps/marketing/src/app/(marketing)/open/team-members.tsx
+++ b/apps/marketing/src/app/(marketing)/open/team-members.tsx
@@ -25,8 +25,8 @@ export const TeamMembers = ({ className, ...props }: TeamMembersProps) => {
             <TableRow>
               <TableHead className="">Name</TableHead>
               <TableHead>Role</TableHead>
-              {/* <TableHead>Status</TableHead> */}
               <TableHead>Salary</TableHead>
+              <TableHead>Engagement</TableHead>
               <TableHead>Location</TableHead>
               <TableHead className="w-[100px] text-right">Join Date</TableHead>
             </TableRow>
@@ -36,7 +36,7 @@ export const TeamMembers = ({ className, ...props }: TeamMembersProps) => {
               <TableRow key={member.name}>
                 <TableCell className="font-medium">{member.name}</TableCell>
                 <TableCell>{member.role}</TableCell>
-                {/* <TableCell>{teamMember.employmentStatus}</TableCell> */}
+
                 <TableCell>
                   {member.salary.toLocaleString('en-US', {
                     style: 'currency',
@@ -44,6 +44,7 @@ export const TeamMembers = ({ className, ...props }: TeamMembersProps) => {
                     maximumFractionDigits: 0,
                   })}
                 </TableCell>
+                <TableCell>{member.engagement}</TableCell>
                 <TableCell>{member.location}</TableCell>
                 <TableCell className="text-right">{member.joinDate}</TableCell>
               </TableRow>

From 6f394138f582712e99c5a7ec6f19ac5cc94919d8 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Mon, 14 Aug 2023 14:16:04 +0200
Subject: [PATCH 06/17] chore: team updates, funding cummulative

---
 .../src/app/(marketing)/open/data.ts          | 29 +++++++++++++++----
 .../app/(marketing)/open/funding-raised.tsx   |  2 +-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/open/data.ts b/apps/marketing/src/app/(marketing)/open/data.ts
index 12de0b563..477fb02e2 100644
--- a/apps/marketing/src/app/(marketing)/open/data.ts
+++ b/apps/marketing/src/app/(marketing)/open/data.ts
@@ -26,11 +26,20 @@ export const TEAM_MEMBERS = [
   {
     name: 'Florent Merian',
     role: 'Marketer - III',
-    salary: 80_000,
+    salary: 'Project-Based',
     location: 'France',
     engagement: 'Full-Time',
     joinDate: 'July 10th, 2023',
   },
+  ,
+  {
+    name: 'Thilo Konzok',
+    role: 'Designer',
+    salary: 'Project-Based',
+    location: 'Germany',
+    engagement: 'Full-Time',
+    joinDate: 'April 26th, 2023',
+  },
   {
     name: 'David Nguyen',
     role: 'Software Engineer - III',
@@ -43,16 +52,16 @@ export const TEAM_MEMBERS = [
 
 export const FUNDING_RAISED = [
   {
-    date: '2023-05-20',
+    date: '2023-04',
     amount: 0,
   },
   {
-    date: '2023-05-20',
+    date: '2023-05',
     amount: 300_000,
   },
   {
-    date: '2023-07-25',
-    amount: 1_250_000,
+    date: '2023-07',
+    amount: 1_550_000,
   },
 ];
 
@@ -82,6 +91,16 @@ export const SALARY_BANDS = [
     seniority: 'Principal',
     salary: 120_000,
   },
+  {
+    title: 'Designer - III',
+    seniority: 'Senior',
+    salary: 100_000,
+  },
+  {
+    title: 'Designer - IV',
+    seniority: 'Principal',
+    salary: 120_000,
+  },
   {
     title: 'Marketer - I',
     seniority: 'Junior',
diff --git a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
index 75ba2b2f7..50f9452ee 100644
--- a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
+++ b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
@@ -13,7 +13,7 @@ export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>;
 export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => {
   return (
     <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Funding Raised</h3>
+      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
 
       <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-4 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>

From f999ca48f600c37f48718a91e48a8a9cd6ca1da0 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Mon, 14 Aug 2023 21:33:16 +0000
Subject: [PATCH 07/17] feat: add github stars cummulative

---
 .../src/app/(marketing)/open/gh-stars.tsx     | 108 ++++++++++++++++++
 .../src/app/(marketing)/open/page.tsx         |   4 +-
 2 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 apps/marketing/src/app/(marketing)/open/gh-stars.tsx

diff --git a/apps/marketing/src/app/(marketing)/open/gh-stars.tsx b/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
new file mode 100644
index 000000000..4d1d03254
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+type StargazersType = {
+  [key: string]: {
+    stars?: number;
+    forks?: number;
+    mergedPRs?: number;
+    openIssues?: number;
+  };
+};
+
+const data: StargazersType = {
+  '2023-8': {
+    stars: 2483,
+    forks: 155,
+    mergedPRs: 87,
+    openIssues: 67,
+  },
+  '2023-7': {
+    stars: 2250,
+    forks: 0,
+    mergedPRs: 0,
+    openIssues: 0,
+  },
+  '2023-6': {
+    stars: 2070,
+    forks: 0,
+    mergedPRs: 0,
+    openIssues: 0,
+  },
+  '2023-5': {
+    stars: 1260,
+    forks: 0,
+    mergedPRs: 0,
+    openIssues: 0,
+  },
+  '2023-4': {
+    stars: 90,
+    forks: 0,
+    mergedPRs: 0,
+    openIssues: 0,
+  },
+  '2023-3': {
+    stars: 0,
+    forks: 0,
+    mergedPRs: 0,
+    openIssues: 0,
+  },
+};
+
+function formatMonth(monthStr: string) {
+  const [year, month] = monthStr.split('-');
+  const monthNames = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  return `${monthNames[parseInt(month, 10) - 1]} ${year}`;
+}
+
+const formattedData = Object.keys(data)
+  .map((key) => ({
+    month: formatMonth(key),
+    stars: data[key].stars,
+  }))
+  .reverse();
+
+export type GithubStarsProps = HTMLAttributes<HTMLDivElement>;
+
+export const GithubStars = ({ className, ...props }: GithubStarsProps) => {
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Github Monthly Stars</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+            <XAxis dataKey="month" />
+            <YAxis />
+            <Tooltip
+              itemStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value), 'Stars']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+            <Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index 73de57dd5..bc7740b5a 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -5,6 +5,7 @@ import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
+import { GithubStars } from './gh-stars';
 import { TeamMembers } from './team-members';
 
 export const revalidate = 86400;
@@ -86,7 +87,8 @@ export default async function OpenPage() {
 
         <FundingRaised className="col-span-12 lg:col-span-6" />
 
-        <CapTable className="col-span-12" />
+        <CapTable className="col-span-12 lg:col-span-6" />
+        <GithubStars className="col-span-12 lg:col-span-6" />
 
         <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
           <h2 className="text-2xl font-bold">Where's the rest?</h2>

From bca048c0263d813796992135588c1a47430e24bb Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Mon, 14 Aug 2023 21:51:38 +0000
Subject: [PATCH 08/17] chore: fetch stargazers data from stargazers api

---
 .../src/app/(marketing)/open/gh-stars.tsx     | 55 +++----------------
 .../src/app/(marketing)/open/page.tsx         | 21 ++++++-
 2 files changed, 28 insertions(+), 48 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/open/gh-stars.tsx b/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
index 4d1d03254..4d5137a6a 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
+++ b/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
@@ -15,45 +15,6 @@ type StargazersType = {
   };
 };
 
-const data: StargazersType = {
-  '2023-8': {
-    stars: 2483,
-    forks: 155,
-    mergedPRs: 87,
-    openIssues: 67,
-  },
-  '2023-7': {
-    stars: 2250,
-    forks: 0,
-    mergedPRs: 0,
-    openIssues: 0,
-  },
-  '2023-6': {
-    stars: 2070,
-    forks: 0,
-    mergedPRs: 0,
-    openIssues: 0,
-  },
-  '2023-5': {
-    stars: 1260,
-    forks: 0,
-    mergedPRs: 0,
-    openIssues: 0,
-  },
-  '2023-4': {
-    stars: 90,
-    forks: 0,
-    mergedPRs: 0,
-    openIssues: 0,
-  },
-  '2023-3': {
-    stars: 0,
-    forks: 0,
-    mergedPRs: 0,
-    openIssues: 0,
-  },
-};
-
 function formatMonth(monthStr: string) {
   const [year, month] = monthStr.split('-');
   const monthNames = [
@@ -73,16 +34,16 @@ function formatMonth(monthStr: string) {
   return `${monthNames[parseInt(month, 10) - 1]} ${year}`;
 }
 
-const formattedData = Object.keys(data)
-  .map((key) => ({
-    month: formatMonth(key),
-    stars: data[key].stars,
-  }))
-  .reverse();
+export type GithubStarsProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
 
-export type GithubStarsProps = HTMLAttributes<HTMLDivElement>;
+export const GithubStars = ({ className, data, ...props }: GithubStarsProps) => {
+  const formattedData = Object.keys(data)
+    .map((key) => ({
+      month: formatMonth(key),
+      stars: data[key].stars,
+    }))
+    .reverse();
 
-export const GithubStars = ({ className, ...props }: GithubStarsProps) => {
   return (
     <div className={cn('flex flex-col', className)} {...props}>
       <h3 className="px-4 text-lg font-semibold">Github Monthly Stars</h3>
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index bc7740b5a..d31ae067b 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -20,6 +20,17 @@ const ZMergedPullRequestsResponse = z.object({
   total_count: z.number(),
 });
 
+const ZStargazersLiveResponse = z.record(
+  z.object({
+    stars: z.number(),
+    forks: z.number(),
+    mergedPRs: z.number(),
+    openIssues: z.number(),
+  }),
+);
+
+export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
+
 // const ZOpenPullRequestsResponse = ZMergedPullRequestsResponse;
 
 export default async function OpenPage() {
@@ -46,6 +57,14 @@ export default async function OpenPage() {
     .then((res) => res.json())
     .then((res) => ZMergedPullRequestsResponse.parse(res));
 
+  const STARGAZERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats', {
+    headers: {
+      accept: 'application/json',
+    },
+  })
+    .then((res) => res.json())
+    .then((res) => ZStargazersLiveResponse.parse(res));
+
   return (
     <div className="mx-auto mt-12 max-w-screen-lg">
       <div className="flex flex-col items-center justify-center">
@@ -88,7 +107,7 @@ export default async function OpenPage() {
         <FundingRaised className="col-span-12 lg:col-span-6" />
 
         <CapTable className="col-span-12 lg:col-span-6" />
-        <GithubStars className="col-span-12 lg:col-span-6" />
+        <GithubStars className="col-span-12 lg:col-span-6" data={STARGAZERS_DATA} />
 
         <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
           <h2 className="text-2xl font-bold">Where's the rest?</h2>

From 5f33b1da1efd1576c514464c419fa87bd1c68fa7 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Mon, 14 Aug 2023 22:01:25 +0000
Subject: [PATCH 09/17] chore: format date

---
 .../app/(marketing)/open/funding-raised.tsx   |  8 ++++-
 .../src/app/(marketing)/open/gh-stars.tsx     | 29 ++-----------------
 packages/lib/client-only/format-month.ts      | 18 ++++++++++++
 3 files changed, 27 insertions(+), 28 deletions(-)
 create mode 100644 packages/lib/client-only/format-month.ts

diff --git a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
index 50f9452ee..c6601f547 100644
--- a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
+++ b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
@@ -4,6 +4,7 @@ import { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
+import { formatMonth } from '@documenso/lib/client-only/format-month';
 import { cn } from '@documenso/ui/lib/utils';
 
 import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
@@ -11,13 +12,18 @@ import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
 export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>;
 
 export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => {
+  const formattedData = FUNDING_RAISED.map((item) => ({
+    amount: Number(item.amount),
+    date: formatMonth(item.date),
+  }));
+
   return (
     <div className={cn('flex flex-col', className)} {...props}>
       <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
 
       <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-4 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={FUNDING_RAISED} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
             <XAxis dataKey="date" />
             <YAxis
               tickFormatter={(value) =>
diff --git a/apps/marketing/src/app/(marketing)/open/gh-stars.tsx b/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
index 4d5137a6a..1eff5bd07 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
+++ b/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
@@ -4,35 +4,10 @@ import { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
+import { formatMonth } from '@documenso/lib/client-only/format-month';
 import { cn } from '@documenso/ui/lib/utils';
 
-type StargazersType = {
-  [key: string]: {
-    stars?: number;
-    forks?: number;
-    mergedPRs?: number;
-    openIssues?: number;
-  };
-};
-
-function formatMonth(monthStr: string) {
-  const [year, month] = monthStr.split('-');
-  const monthNames = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-  return `${monthNames[parseInt(month, 10) - 1]} ${year}`;
-}
+import { StargazersType } from './page';
 
 export type GithubStarsProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
 
diff --git a/packages/lib/client-only/format-month.ts b/packages/lib/client-only/format-month.ts
new file mode 100644
index 000000000..cda27163d
--- /dev/null
+++ b/packages/lib/client-only/format-month.ts
@@ -0,0 +1,18 @@
+export const formatMonth = (monthStr: string) => {
+  const [year, month] = monthStr.split('-');
+  const monthNames = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  return `${monthNames[parseInt(month, 10) - 1]} ${year}`;
+};

From e2471a8eb4486028f4b958c4c8a9c3dc7e43973c Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Mon, 14 Aug 2023 22:03:56 +0000
Subject: [PATCH 10/17] chore: fix eslint error in data

---
 apps/marketing/src/app/(marketing)/open/data.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/marketing/src/app/(marketing)/open/data.ts b/apps/marketing/src/app/(marketing)/open/data.ts
index 477fb02e2..c0dc01005 100644
--- a/apps/marketing/src/app/(marketing)/open/data.ts
+++ b/apps/marketing/src/app/(marketing)/open/data.ts
@@ -31,7 +31,6 @@ export const TEAM_MEMBERS = [
     engagement: 'Full-Time',
     joinDate: 'July 10th, 2023',
   },
-  ,
   {
     name: 'Thilo Konzok',
     role: 'Designer',

From 96f7ca4e369e0e4b86cb89a6fa089f71445b7ddf Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Tue, 15 Aug 2023 08:45:24 +0000
Subject: [PATCH 11/17] feat: add other charts

---
 .../src/app/(marketing)/open/gh-forks.tsx     | 44 +++++++++++++++++++
 .../app/(marketing)/open/gh-merged-prs.tsx    | 44 +++++++++++++++++++
 .../app/(marketing)/open/gh-open-issues.tsx   | 44 +++++++++++++++++++
 .../src/app/(marketing)/open/gh-stars.tsx     |  2 +-
 .../src/app/(marketing)/open/page.tsx         |  6 +++
 5 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 apps/marketing/src/app/(marketing)/open/gh-forks.tsx
 create mode 100644 apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx
 create mode 100644 apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx

diff --git a/apps/marketing/src/app/(marketing)/open/gh-forks.tsx b/apps/marketing/src/app/(marketing)/open/gh-forks.tsx
new file mode 100644
index 000000000..c2776ea91
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/gh-forks.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { formatMonth } from '@documenso/lib/client-only/format-month';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { StargazersType } from './page';
+
+export type GithubForksProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
+
+export const GithubForks = ({ className, data, ...props }: GithubForksProps) => {
+  const formattedData = Object.keys(data)
+    .map((key) => ({
+      month: formatMonth(key),
+      stars: data[key].forks,
+    }))
+    .reverse();
+
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Github: Forks</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+            <XAxis dataKey="month" />
+            <YAxis />
+            <Tooltip
+              itemStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value), 'Stars']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+            <Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx b/apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx
new file mode 100644
index 000000000..2c9cc2ef0
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { formatMonth } from '@documenso/lib/client-only/format-month';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { StargazersType } from './page';
+
+export type GithubMergedPrsProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
+
+export const GithubMergedPrs = ({ className, data, ...props }: GithubMergedPrsProps) => {
+  const formattedData = Object.keys(data)
+    .map((key) => ({
+      month: formatMonth(key),
+      stars: data[key].mergedPRs,
+    }))
+    .reverse();
+
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Github: Merged PRs</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+            <XAxis dataKey="month" />
+            <YAxis />
+            <Tooltip
+              itemStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value), 'Stars']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+            <Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx b/apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx
new file mode 100644
index 000000000..ce0390b1d
--- /dev/null
+++ b/apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { formatMonth } from '@documenso/lib/client-only/format-month';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { StargazersType } from './page';
+
+export type GithubOpenIssuesProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
+
+export const GithubOpenIssues = ({ className, data, ...props }: GithubOpenIssuesProps) => {
+  const formattedData = Object.keys(data)
+    .map((key) => ({
+      month: formatMonth(key),
+      stars: data[key].openIssues,
+    }))
+    .reverse();
+
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Github: Open Issues</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+            <XAxis dataKey="month" />
+            <YAxis />
+            <Tooltip
+              itemStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value), 'Stars']}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+            <Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/marketing/src/app/(marketing)/open/gh-stars.tsx b/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
index 1eff5bd07..8d696a358 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
+++ b/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
@@ -21,7 +21,7 @@ export const GithubStars = ({ className, data, ...props }: GithubStarsProps) =>
 
   return (
     <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Github Monthly Stars</h3>
+      <h3 className="px-4 text-lg font-semibold">Github: Stars</h3>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index d31ae067b..202b58f41 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -5,6 +5,9 @@ import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
+import { GithubForks } from './gh-forks';
+import { GithubMergedPrs } from './gh-merged-prs';
+import { GithubOpenIssues } from './gh-open-issues';
 import { GithubStars } from './gh-stars';
 import { TeamMembers } from './team-members';
 
@@ -108,6 +111,9 @@ export default async function OpenPage() {
 
         <CapTable className="col-span-12 lg:col-span-6" />
         <GithubStars className="col-span-12 lg:col-span-6" data={STARGAZERS_DATA} />
+        <GithubForks className="col-span-12 lg:col-span-4" data={STARGAZERS_DATA} />
+        <GithubMergedPrs className="col-span-12 lg:col-span-4" data={STARGAZERS_DATA} />
+        <GithubOpenIssues className="col-span-12 lg:col-span-4 " data={STARGAZERS_DATA} />
 
         <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
           <h2 className="text-2xl font-bold">Where's the rest?</h2>

From d3cdd2c317e36e3836cda7e7fd2a1701428ea0c1 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Tue, 15 Aug 2023 09:17:51 +0000
Subject: [PATCH 12/17] chore: use correct names on tooltip

---
 apps/marketing/src/app/(marketing)/open/gh-forks.tsx   | 10 +++++-----
 .../src/app/(marketing)/open/gh-merged-prs.tsx         | 10 +++++-----
 .../src/app/(marketing)/open/gh-open-issues.tsx        | 10 +++++-----
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/open/gh-forks.tsx b/apps/marketing/src/app/(marketing)/open/gh-forks.tsx
index c2776ea91..6e2c7e8c6 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-forks.tsx
+++ b/apps/marketing/src/app/(marketing)/open/gh-forks.tsx
@@ -15,7 +15,7 @@ export const GithubForks = ({ className, data, ...props }: GithubForksProps) =>
   const formattedData = Object.keys(data)
     .map((key) => ({
       month: formatMonth(key),
-      stars: data[key].forks,
+      forks: data[key].forks,
     }))
     .reverse();
 
@@ -24,18 +24,18 @@ export const GithubForks = ({ className, data, ...props }: GithubForksProps) =>
       <h3 className="px-4 text-lg font-semibold">Github: Forks</h3>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
-        <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+        <ResponsiveContainer width="100%" height={300}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 20 }}>
             <XAxis dataKey="month" />
             <YAxis />
             <Tooltip
               itemStyle={{
                 color: 'hsl(var(--primary-foreground))',
               }}
-              formatter={(value) => [Number(value), 'Stars']}
+              formatter={(value) => [Number(value), 'Forks']}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
-            <Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
+            <Bar dataKey="forks" fill="hsl(var(--primary))" label="Forks" />
           </BarChart>
         </ResponsiveContainer>
       </div>
diff --git a/apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx b/apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx
index 2c9cc2ef0..8f32458d8 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx
+++ b/apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx
@@ -15,7 +15,7 @@ export const GithubMergedPrs = ({ className, data, ...props }: GithubMergedPrsPr
   const formattedData = Object.keys(data)
     .map((key) => ({
       month: formatMonth(key),
-      stars: data[key].mergedPRs,
+      mergedPRs: data[key].mergedPRs,
     }))
     .reverse();
 
@@ -24,18 +24,18 @@ export const GithubMergedPrs = ({ className, data, ...props }: GithubMergedPrsPr
       <h3 className="px-4 text-lg font-semibold">Github: Merged PRs</h3>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
-        <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+        <ResponsiveContainer width="100%" height={300}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 20 }}>
             <XAxis dataKey="month" />
             <YAxis />
             <Tooltip
               itemStyle={{
                 color: 'hsl(var(--primary-foreground))',
               }}
-              formatter={(value) => [Number(value), 'Stars']}
+              formatter={(value) => [Number(value), 'Merged PRs']}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
-            <Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
+            <Bar dataKey="mergedPRs" fill="hsl(var(--primary))" label="Merged PRs" />
           </BarChart>
         </ResponsiveContainer>
       </div>
diff --git a/apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx b/apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx
index ce0390b1d..7f761ddb1 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx
+++ b/apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx
@@ -15,7 +15,7 @@ export const GithubOpenIssues = ({ className, data, ...props }: GithubOpenIssues
   const formattedData = Object.keys(data)
     .map((key) => ({
       month: formatMonth(key),
-      stars: data[key].openIssues,
+      openIssues: data[key].openIssues,
     }))
     .reverse();
 
@@ -24,18 +24,18 @@ export const GithubOpenIssues = ({ className, data, ...props }: GithubOpenIssues
       <h3 className="px-4 text-lg font-semibold">Github: Open Issues</h3>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
-        <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+        <ResponsiveContainer width="100%" height={300}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 20 }}>
             <XAxis dataKey="month" />
             <YAxis />
             <Tooltip
               itemStyle={{
                 color: 'hsl(var(--primary-foreground))',
               }}
-              formatter={(value) => [Number(value), 'Stars']}
+              formatter={(value) => [Number(value), 'Open Issues']}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
-            <Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
+            <Bar dataKey="openIssues" fill="hsl(var(--primary))" label="Open Issues" />
           </BarChart>
         </ResponsiveContainer>
       </div>

From 5130dc5f3123f7a7ac38fac21ae9b10d4e7e86c9 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Tue, 15 Aug 2023 09:43:24 +0000
Subject: [PATCH 13/17] chore: refactor github charts into a single component

---
 .../app/(marketing)/open/gh-merged-prs.tsx    | 44 -------------------
 .../open/{gh-forks.tsx => gh-metrics.tsx}     | 28 +++++++++---
 .../app/(marketing)/open/gh-open-issues.tsx   | 44 -------------------
 .../src/app/(marketing)/open/gh-stars.tsx     | 44 -------------------
 .../src/app/(marketing)/open/page.tsx         | 41 +++++++++++++----
 5 files changed, 54 insertions(+), 147 deletions(-)
 delete mode 100644 apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx
 rename apps/marketing/src/app/(marketing)/open/{gh-forks.tsx => gh-metrics.tsx} (62%)
 delete mode 100644 apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx
 delete mode 100644 apps/marketing/src/app/(marketing)/open/gh-stars.tsx

diff --git a/apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx b/apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx
deleted file mode 100644
index 8f32458d8..000000000
--- a/apps/marketing/src/app/(marketing)/open/gh-merged-prs.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-import { HTMLAttributes } from 'react';
-
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-
-import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
-
-import { StargazersType } from './page';
-
-export type GithubMergedPrsProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
-
-export const GithubMergedPrs = ({ className, data, ...props }: GithubMergedPrsProps) => {
-  const formattedData = Object.keys(data)
-    .map((key) => ({
-      month: formatMonth(key),
-      mergedPRs: data[key].mergedPRs,
-    }))
-    .reverse();
-
-  return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Github: Merged PRs</h3>
-
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
-        <ResponsiveContainer width="100%" height={300}>
-          <BarChart data={formattedData} margin={{ top: 40, right: 20 }}>
-            <XAxis dataKey="month" />
-            <YAxis />
-            <Tooltip
-              itemStyle={{
-                color: 'hsl(var(--primary-foreground))',
-              }}
-              formatter={(value) => [Number(value), 'Merged PRs']}
-              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
-            />
-            <Bar dataKey="mergedPRs" fill="hsl(var(--primary))" label="Merged PRs" />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/marketing/src/app/(marketing)/open/gh-forks.tsx b/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
similarity index 62%
rename from apps/marketing/src/app/(marketing)/open/gh-forks.tsx
rename to apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
index 6e2c7e8c6..552edf167 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-forks.tsx
+++ b/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
@@ -9,22 +9,36 @@ import { cn } from '@documenso/ui/lib/utils';
 
 import { StargazersType } from './page';
 
-export type GithubForksProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
+export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
+  data: StargazersType;
+  metricKey: keyof StargazersType;
+  title: string;
+  label: string;
+  chartHeight?: number;
+};
 
-export const GithubForks = ({ className, data, ...props }: GithubForksProps) => {
+export const GithubMetric = ({
+  className,
+  data,
+  metricKey,
+  title,
+  label,
+  chartHeight = 400,
+  ...props
+}: GithubMetricProps) => {
   const formattedData = Object.keys(data)
     .map((key) => ({
       month: formatMonth(key),
-      forks: data[key].forks,
+      [metricKey]: data[key][metricKey],
     }))
     .reverse();
 
   return (
     <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Github: Forks</h3>
+      <h3 className="px-4 text-lg font-semibold">{title}</h3>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
-        <ResponsiveContainer width="100%" height={300}>
+        <ResponsiveContainer width="100%" height={chartHeight}>
           <BarChart data={formattedData} margin={{ top: 40, right: 20 }}>
             <XAxis dataKey="month" />
             <YAxis />
@@ -32,10 +46,10 @@ export const GithubForks = ({ className, data, ...props }: GithubForksProps) =>
               itemStyle={{
                 color: 'hsl(var(--primary-foreground))',
               }}
-              formatter={(value) => [Number(value), 'Forks']}
+              formatter={(value) => [Number(value), label]}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
-            <Bar dataKey="forks" fill="hsl(var(--primary))" label="Forks" />
+            <Bar dataKey={metricKey} fill="hsl(var(--primary))" label={label} />
           </BarChart>
         </ResponsiveContainer>
       </div>
diff --git a/apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx b/apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx
deleted file mode 100644
index 7f761ddb1..000000000
--- a/apps/marketing/src/app/(marketing)/open/gh-open-issues.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-import { HTMLAttributes } from 'react';
-
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-
-import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
-
-import { StargazersType } from './page';
-
-export type GithubOpenIssuesProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
-
-export const GithubOpenIssues = ({ className, data, ...props }: GithubOpenIssuesProps) => {
-  const formattedData = Object.keys(data)
-    .map((key) => ({
-      month: formatMonth(key),
-      openIssues: data[key].openIssues,
-    }))
-    .reverse();
-
-  return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Github: Open Issues</h3>
-
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
-        <ResponsiveContainer width="100%" height={300}>
-          <BarChart data={formattedData} margin={{ top: 40, right: 20 }}>
-            <XAxis dataKey="month" />
-            <YAxis />
-            <Tooltip
-              itemStyle={{
-                color: 'hsl(var(--primary-foreground))',
-              }}
-              formatter={(value) => [Number(value), 'Open Issues']}
-              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
-            />
-            <Bar dataKey="openIssues" fill="hsl(var(--primary))" label="Open Issues" />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/marketing/src/app/(marketing)/open/gh-stars.tsx b/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
deleted file mode 100644
index 8d696a358..000000000
--- a/apps/marketing/src/app/(marketing)/open/gh-stars.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-import { HTMLAttributes } from 'react';
-
-import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-
-import { formatMonth } from '@documenso/lib/client-only/format-month';
-import { cn } from '@documenso/ui/lib/utils';
-
-import { StargazersType } from './page';
-
-export type GithubStarsProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };
-
-export const GithubStars = ({ className, data, ...props }: GithubStarsProps) => {
-  const formattedData = Object.keys(data)
-    .map((key) => ({
-      month: formatMonth(key),
-      stars: data[key].stars,
-    }))
-    .reverse();
-
-  return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Github: Stars</h3>
-
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
-        <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
-            <XAxis dataKey="month" />
-            <YAxis />
-            <Tooltip
-              itemStyle={{
-                color: 'hsl(var(--primary-foreground))',
-              }}
-              formatter={(value) => [Number(value), 'Stars']}
-              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
-            />
-            <Bar dataKey="stars" fill="hsl(var(--primary))" label="Stars" />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index 202b58f41..e52d01734 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -5,10 +5,7 @@ import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
-import { GithubForks } from './gh-forks';
-import { GithubMergedPrs } from './gh-merged-prs';
-import { GithubOpenIssues } from './gh-open-issues';
-import { GithubStars } from './gh-stars';
+import { GithubMetric } from './gh-metrics';
 import { TeamMembers } from './team-members';
 
 export const revalidate = 86400;
@@ -110,10 +107,38 @@ export default async function OpenPage() {
         <FundingRaised className="col-span-12 lg:col-span-6" />
 
         <CapTable className="col-span-12 lg:col-span-6" />
-        <GithubStars className="col-span-12 lg:col-span-6" data={STARGAZERS_DATA} />
-        <GithubForks className="col-span-12 lg:col-span-4" data={STARGAZERS_DATA} />
-        <GithubMergedPrs className="col-span-12 lg:col-span-4" data={STARGAZERS_DATA} />
-        <GithubOpenIssues className="col-span-12 lg:col-span-4 " data={STARGAZERS_DATA} />
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="stars"
+          title="Github: Stars"
+          label="Stars"
+          className="col-span-12 lg:col-span-6"
+        />
+
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="mergedPRs"
+          title="Github: Merged PRs"
+          label="Merged PRs"
+          chartHeight={300}
+          className="col-span-12 lg:col-span-4"
+        />
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="forks"
+          title="Github: Forks"
+          label="Forks"
+          chartHeight={300}
+          className="col-span-12 lg:col-span-4"
+        />
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="openIssues"
+          title="Github: Open Issues"
+          label="Open Issues"
+          chartHeight={300}
+          className="col-span-12 lg:col-span-4"
+        />
 
         <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
           <h2 className="text-2xl font-bold">Where's the rest?</h2>

From f7c3190346745640670c43cdd0ced2c230e93962 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Tue, 15 Aug 2023 11:13:13 +0000
Subject: [PATCH 14/17] chore: fix ts errors in metrics

---
 apps/marketing/src/app/(marketing)/open/gh-metrics.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx b/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
index 552edf167..1e2fa453d 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
+++ b/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
@@ -11,12 +11,14 @@ import { StargazersType } from './page';
 
 export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
   data: StargazersType;
-  metricKey: keyof StargazersType;
+  metricKey: MetricsDataKey;
   title: string;
   label: string;
   chartHeight?: number;
 };
 
+export type MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues';
+
 export const GithubMetric = ({
   className,
   data,

From 29b4cb7793cdddfbd542467d6a5692a2c58efaf9 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Tue, 15 Aug 2023 14:00:05 +0200
Subject: [PATCH 15/17] chore: add total

---
 apps/marketing/src/app/(marketing)/open/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index e52d01734..975702d14 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -110,7 +110,7 @@ export default async function OpenPage() {
         <GithubMetric
           data={STARGAZERS_DATA}
           metricKey="stars"
-          title="Github: Stars"
+          title="Github: Total Stars"
           label="Stars"
           className="col-span-12 lg:col-span-6"
         />
@@ -118,7 +118,7 @@ export default async function OpenPage() {
         <GithubMetric
           data={STARGAZERS_DATA}
           metricKey="mergedPRs"
-          title="Github: Merged PRs"
+          title="Github: Total Merged PRs"
           label="Merged PRs"
           chartHeight={300}
           className="col-span-12 lg:col-span-4"
@@ -126,7 +126,7 @@ export default async function OpenPage() {
         <GithubMetric
           data={STARGAZERS_DATA}
           metricKey="forks"
-          title="Github: Forks"
+          title="Github: Total Forks"
           label="Forks"
           chartHeight={300}
           className="col-span-12 lg:col-span-4"
@@ -134,7 +134,7 @@ export default async function OpenPage() {
         <GithubMetric
           data={STARGAZERS_DATA}
           metricKey="openIssues"
-          title="Github: Open Issues"
+          title="Github: Total Open Issues"
           label="Open Issues"
           chartHeight={300}
           className="col-span-12 lg:col-span-4"

From b7543298e1d4ae577292d81c329c06f03d6aaf5f Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Tue, 15 Aug 2023 18:02:10 +0000
Subject: [PATCH 16/17] fix: ssr hydration error in piechart

---
 .../src/app/(marketing)/open/cap-table.tsx    | 53 +++++++++++--------
 .../src/app/(marketing)/open/gh-metrics.tsx   |  7 ++-
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/open/cap-table.tsx b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
index 5bdea46c4..b9a27235c 100644
--- a/apps/marketing/src/app/(marketing)/open/cap-table.tsx
+++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, useEffect, useState } from 'react';
 
 import { Cell, Pie, PieChart, Tooltip } from 'recharts';
 
@@ -41,33 +41,40 @@ const renderCustomizedLabel = ({
 export type CapTableProps = HTMLAttributes<HTMLDivElement>;
 
 export const CapTable = ({ className, ...props }: CapTableProps) => {
+  const [isSSR, setIsSSR] = useState(true);
+
+  useEffect(() => {
+    setIsSSR(false);
+  }, []);
   return (
     <div className={cn('flex flex-col', className)} {...props}>
       <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
-        <PieChart width={400} height={400}>
-          <Pie
-            data={CAP_TABLE}
-            cx="50%"
-            cy="50%"
-            labelLine={false}
-            label={renderCustomizedLabel}
-            outerRadius={180}
-            innerRadius={100}
-            fill="#8884d8"
-            dataKey="percentage"
-          >
-            {CAP_TABLE.map((entry, index) => (
-              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-            ))}
-          </Pie>
-          <Tooltip
-            formatter={(percent: number, name, props) => {
-              return [`${percent}%`, name || props['name'] || props['payload']['name']];
-            }}
-          />
-        </PieChart>
+        {!isSSR && (
+          <PieChart width={400} height={400}>
+            <Pie
+              data={CAP_TABLE}
+              cx="50%"
+              cy="50%"
+              labelLine={false}
+              label={renderCustomizedLabel}
+              outerRadius={180}
+              innerRadius={100}
+              fill="#8884d8"
+              dataKey="percentage"
+            >
+              {CAP_TABLE.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+              ))}
+            </Pie>
+            <Tooltip
+              formatter={(percent: number, name, props) => {
+                return [`${percent}%`, name || props['name'] || props['payload']['name']];
+              }}
+            />
+          </PieChart>
+        )}
       </div>
     </div>
   );
diff --git a/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx b/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
index 1e2fa453d..5c0c79716 100644
--- a/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
+++ b/apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
@@ -9,6 +9,7 @@ import { cn } from '@documenso/ui/lib/utils';
 
 import { StargazersType } from './page';
 
+export type MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues';
 export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
   data: StargazersType;
   metricKey: MetricsDataKey;
@@ -17,8 +18,6 @@ export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
   chartHeight?: number;
 };
 
-export type MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues';
-
 export const GithubMetric = ({
   className,
   data,
@@ -39,9 +38,9 @@ export const GithubMetric = ({
     <div className={cn('flex flex-col', className)} {...props}>
       <h3 className="px-4 text-lg font-semibold">{title}</h3>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border pr-2 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={chartHeight}>
-          <BarChart data={formattedData} margin={{ top: 40, right: 20 }}>
+          <BarChart data={formattedData} margin={{ top: 30, right: 20 }}>
             <XAxis dataKey="month" />
             <YAxis />
             <Tooltip

From 61d7f7cbcd0bab2a6db70bf7bcd85aa7e2715636 Mon Sep 17 00:00:00 2001
From: Timur Ercan <timur.ercan31@gmail.com>
Date: Wed, 16 Aug 2023 14:08:21 +0200
Subject: [PATCH 17/17] chore: whitespace

---
 apps/marketing/src/app/(marketing)/open/cap-table.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/marketing/src/app/(marketing)/open/cap-table.tsx b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
index b9a27235c..e1a0913c1 100644
--- a/apps/marketing/src/app/(marketing)/open/cap-table.tsx
+++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
@@ -19,6 +19,7 @@ export type LabelRenderProps = {
   outerRadius: number;
   percent: number;
 };
+
 const renderCustomizedLabel = ({
   cx,
   cy,