From facafe09971ab95cff479aed2a8d0567f11cd693 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Thu, 21 Mar 2024 01:39:14 +0000
Subject: [PATCH] feat: place card titles in the box

---
 .../src/app/(marketing)/open/bar-metrics.tsx  | 15 +++++----
 .../src/app/(marketing)/open/cap-table.tsx    | 10 +++---
 .../app/(marketing)/open/funding-raised.tsx   | 11 ++++---
 .../monthly-completed-documents-chart.tsx     | 11 +++----
 .../open/monthly-new-users-chart.tsx          | 11 +++----
 .../open/monthly-total-users-chart.tsx        | 11 +++----
 .../src/app/(marketing)/open/page.tsx         | 31 ++++++++++---------
 .../open/total-signed-documents-chart.tsx     | 11 +++----
 .../src/app/(marketing)/open/typefully.tsx    | 11 ++++---
 .../src/components/(marketing)/callout.tsx    |  2 +-
 .../src/components/(marketing)/hero.tsx       |  2 +-
 11 files changed, 62 insertions(+), 64 deletions(-)

diff --git a/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx b/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
index 940adb8fc..fb9c61f11 100644
--- a/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
+++ b/apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { 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';
 
 export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
   data: T;
@@ -34,13 +33,13 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
     .reverse();
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">{title}</h3>
-        <span>{extraInfo}</span>
-      </div>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+          <span>{extraInfo}</span>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={chartHeight}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />
diff --git a/apps/marketing/src/app/(marketing)/open/cap-table.tsx b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
index ba6a12dc4..05c122aa5 100644
--- a/apps/marketing/src/app/(marketing)/open/cap-table.tsx
+++ b/apps/marketing/src/app/(marketing)/open/cap-table.tsx
@@ -5,8 +5,6 @@ import { useEffect, useState } from 'react';
 
 import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
 
-import { cn } from '@documenso/ui/lib/utils';
-
 import { CAP_TABLE } from './data';
 
 const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
@@ -49,10 +47,12 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
     setIsSSR(false);
   }, []);
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Cap Table</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         {!isSSR && (
           <PieChart width={400} height={400}>
             <Pie
diff --git a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
index fbfce47da..55708544b 100644
--- a/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
+++ b/apps/marketing/src/app/(marketing)/open/funding-raised.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { 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';
 
 export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
   data: Record<string, string | number>[];
@@ -18,10 +17,12 @@ export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps)
   }));
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Funding Raised</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
             <XAxis dataKey="date" />
diff --git a/apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx b/apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx
index 77059f80a..9626838ed 100644
--- a/apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx
+++ b/apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx
@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyCompletedDocumentsChartProps = {
   className?: string;
@@ -23,12 +22,12 @@ export const MonthlyCompletedDocumentsChart = ({
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Completed Documents per Month</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Completed Documents per Month</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />
diff --git a/apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx b/apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx
index 0df73e30c..fe7941336 100644
--- a/apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx
+++ b/apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx
@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyNewUsersChartProps = {
   className?: string;
@@ -20,12 +19,12 @@ export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartPr
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">New Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">New Users</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />
diff --git a/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx b/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx
index 96ce34556..6ab5572ec 100644
--- a/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx
+++ b/apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx
@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyTotalUsersChartProps = {
   className?: string;
@@ -20,12 +19,12 @@ export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersCha
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Total Users</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Users</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />
diff --git a/apps/marketing/src/app/(marketing)/open/page.tsx b/apps/marketing/src/app/(marketing)/open/page.tsx
index ea7ffda14..31990519e 100644
--- a/apps/marketing/src/app/(marketing)/open/page.tsx
+++ b/apps/marketing/src/app/(marketing)/open/page.tsx
@@ -11,6 +11,7 @@ import { CallToAction } from '~/components/(marketing)/call-to-action';
 import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
 import { FundingRaised } from './funding-raised';
+import { MetricCard } from './metric-card';
 import { MonthlyCompletedDocumentsChart } from './monthly-completed-documents-chart';
 import { MonthlyNewUsersChart } from './monthly-new-users-chart';
 import { MonthlyTotalUsersChart } from './monthly-total-users-chart';
@@ -128,17 +129,17 @@ const fetchEarlyAdopters = async () => {
 
 export default async function OpenPage() {
   const [
-    // { forks_count: forksCount, stargazers_count: stargazersCount },
-    // { total_count: openIssues },
-    // { total_count: mergedPullRequests },
+    { forks_count: forksCount, stargazers_count: stargazersCount },
+    { total_count: openIssues },
+    { total_count: mergedPullRequests },
     STARGAZERS_DATA,
     EARLY_ADOPTERS_DATA,
     MONTHLY_USERS,
     MONTHLY_COMPLETED_DOCUMENTS,
   ] = await Promise.all([
-    // fetchGithubStats(),
-    // fetchOpenIssues(),
-    // fetchMergedPullRequests(),
+    fetchGithubStats(),
+    fetchOpenIssues(),
+    fetchMergedPullRequests(),
     fetchStargazers(),
     fetchEarlyAdopters(),
     getUserMonthlyGrowth(),
@@ -166,7 +167,7 @@ export default async function OpenPage() {
         </div>
 
         <div className="my-12 grid grid-cols-12 gap-8">
-          {/* <div className="col-span-12 grid grid-cols-4 gap-4">
+          <div className="col-span-12 grid grid-cols-4 gap-4">
             <MetricCard
               className="col-span-2 lg:col-span-1"
               title="Stargazers"
@@ -187,7 +188,7 @@ export default async function OpenPage() {
               title="Merged PR's"
               value={mergedPullRequests.toLocaleString('en-US')}
             />
-          </div> */}
+          </div>
 
           <TeamMembers className="col-span-12" />
 
@@ -206,7 +207,7 @@ export default async function OpenPage() {
           <BarMetric<StargazersType>
             data={STARGAZERS_DATA}
             metricKey="stars"
-            title="Github: Total Stars"
+            title="GitHub: Total Stars"
             label="Stars"
             className="col-span-12 lg:col-span-6"
           />
@@ -214,27 +215,27 @@ export default async function OpenPage() {
           <BarMetric<StargazersType>
             data={STARGAZERS_DATA}
             metricKey="mergedPRs"
-            title="Github: Total Merged PRs"
+            title="GitHub: Total Merged PRs"
             label="Merged PRs"
-            chartHeight={300}
+            chartHeight={400}
             className="col-span-12 lg:col-span-6"
           />
 
           <BarMetric<StargazersType>
             data={STARGAZERS_DATA}
             metricKey="forks"
-            title="Github: Total Forks"
+            title="GitHub: Total Forks"
             label="Forks"
-            chartHeight={300}
+            chartHeight={400}
             className="col-span-12 lg:col-span-6"
           />
 
           <BarMetric<StargazersType>
             data={STARGAZERS_DATA}
             metricKey="openIssues"
-            title="Github: Total Open Issues"
+            title="GitHub: Total Open Issues"
             label="Open Issues"
-            chartHeight={300}
+            chartHeight={400}
             className="col-span-12 lg:col-span-6"
           />
 
diff --git a/apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx b/apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx
index 239d15de9..c2b7561de 100644
--- a/apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx
+++ b/apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx
@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
 import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
-import { cn } from '@documenso/ui/lib/utils';
 
 export type TotalSignedDocumentsChartProps = {
   className?: string;
@@ -20,12 +19,12 @@ export const TotalSignedDocumentsChart = ({ className, data }: TotalSignedDocume
   });
 
   return (
-    <div className={cn('flex flex-col', className)}>
-      <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Total Signed Documents</h3>
-      </div>
+    <div className={className}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Total Signed Documents</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">
         <ResponsiveContainer width="100%" height={400}>
           <BarChart data={formattedData}>
             <XAxis dataKey="month" />
diff --git a/apps/marketing/src/app/(marketing)/open/typefully.tsx b/apps/marketing/src/app/(marketing)/open/typefully.tsx
index a233904db..4f298fbb3 100644
--- a/apps/marketing/src/app/(marketing)/open/typefully.tsx
+++ b/apps/marketing/src/app/(marketing)/open/typefully.tsx
@@ -6,18 +6,19 @@ import Link from 'next/link';
 
 import { FaXTwitter } from 'react-icons/fa6';
 
-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
 export type TypefullyProps = HTMLAttributes<HTMLDivElement>;
 
 export const Typefully = ({ className, ...props }: TypefullyProps) => {
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <h3 className="px-4 text-lg font-semibold">Twitter Stats</h3>
+    <div className={className} {...props}>
+      <div className="border-border flex flex-col justify-center rounded-2xl border p-6 pl-2 shadow-sm hover:shadow">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">Twitter Stats</h3>
+        </div>
 
-      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border py-8 shadow-sm hover:shadow">
-        <div className="flex flex-col items-center gap-y-4 text-center">
+        <div className="my-12 flex flex-col items-center gap-y-4 text-center">
           <FaXTwitter className="h-12 w-12" />
           <Link href="https://typefully.com/documenso/stats" target="_blank">
             <h1>Documenso on X</h1>
diff --git a/apps/marketing/src/components/(marketing)/callout.tsx b/apps/marketing/src/components/(marketing)/callout.tsx
index faa486c46..dfd358c71 100644
--- a/apps/marketing/src/components/(marketing)/callout.tsx
+++ b/apps/marketing/src/components/(marketing)/callout.tsx
@@ -53,7 +53,7 @@ export const Callout = ({ starCount }: CalloutProps) => {
       >
         <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
           <LuGithub className="mr-2 h-5 w-5" />
-          Star on Github
+          Star on GitHub
           {starCount && starCount > 0 && (
             <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
               {starCount.toLocaleString('en-US')}
diff --git a/apps/marketing/src/components/(marketing)/hero.tsx b/apps/marketing/src/components/(marketing)/hero.tsx
index ce520b86a..f416cc4ca 100644
--- a/apps/marketing/src/components/(marketing)/hero.tsx
+++ b/apps/marketing/src/components/(marketing)/hero.tsx
@@ -123,7 +123,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
             <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
               <LuGithub className="mr-2 h-5 w-5" />
-              Star on Github
+              Star on GitHub
             </Button>
           </Link>
         </motion.div>