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