Add initial cap table

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>
+  );
+};

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',
+  },
+];

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>
 

package-lock.json

@@ -9,6 +9,9 @@
         "apps/*",
         "packages/*"
       ],
+      "dependencies": {
+        "recharts": "^2.7.2"
+      },
       "devDependencies": {
         "dotenv": "^16.0.3",
         "dotenv-cli": "^7.2.1",

package.json

@@ -20,5 +20,8 @@
   "workspaces": [
     "apps/*",
     "packages/*"
-  ]
+  ],
+  "dependencies": {
+    "recharts": "^2.7.2"
+  }
 }