wip: refresh design

apps/web/src/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,94 @@
+import Link from 'next/link';
+
+import { Clock, File, FileCheck } from 'lucide-react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
+import { getStats } from '@documenso/lib/server-only/document/get-stats';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
+import { DocumentStatus } from '~/components/formatter/document-status';
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { UploadDocument } from './upload-document';
+
+export default async function DashboardPage() {
+  const session = await getRequiredServerComponentSession();
+
+  const [stats, results] = await Promise.all([
+    getStats({
+      userId: session.id,
+    }),
+    findDocuments({
+      userId: session.id,
+      perPage: 10,
+    }).then((r) => ({ ...r, data: [] })),
+  ]);
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">Dashboard</h1>
+
+      <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3">
+        <CardMetric icon={FileCheck} title="Completed" value={stats.COMPLETED} />
+        <CardMetric icon={File} title="Drafts" value={stats.DRAFT} />
+        <CardMetric icon={Clock} title="Pending" value={stats.PENDING} />
+      </div>
+
+      <div className="mt-12">
+        <UploadDocument />
+
+        <h2 className="mt-8 text-2xl font-semibold">Recent Documents</h2>
+
+        <div className="mt-8 overflow-x-auto rounded-lg border border-slate-200">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[100px]">ID</TableHead>
+                <TableHead>Title</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="text-right">Created</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {results.data.map((document) => (
+                <TableRow key={document.id}>
+                  <TableCell className="font-medium">{document.id}</TableCell>
+                  <TableCell>
+                    <Link
+                      href={`/documents/${document.id}`}
+                      className="font-medium hover:underline"
+                    >
+                      {document.title}
+                    </Link>
+                  </TableCell>
+                  <TableCell>
+                    <DocumentStatus status={document.status} />
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <LocaleDate date={document.created} />
+                  </TableCell>
+                </TableRow>
+              ))}
+              {results.data.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={4} className="h-24 text-center">
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/dashboard/upload-document.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCreateDocument } from '~/api/document/create/fetcher';
+import { DocumentDropzone } from '~/components/(dashboard)/document-dropzone/document-dropzone';
+
+export type UploadDocumentProps = {
+  className?: string;
+};
+
+export const UploadDocument = ({ className }: UploadDocumentProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const { isLoading, mutateAsync: createDocument } = useCreateDocument();
+
+  const onFileDrop = async (file: File) => {
+    try {
+      const { id } = await createDocument({
+        file: file,
+      });
+
+      toast({
+        title: 'Document uploaded',
+        description: 'Your document has been uploaded successfully.',
+        duration: 5000,
+      });
+
+      router.push(`/documents/${id}`);
+    } catch (error) {
+      console.error(error);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while uploading your document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className={cn('relative', className)}>
+      <DocumentDropzone className="min-h-[40vh]" onDrop={onFileDrop} />
+
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-12 w-12 animate-spin text-slate-500" />
+        </div>
+      )}
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/documents/[id]/loadable-pdf-card.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { Suspense } from 'react';
+
+import dynamic from 'next/dynamic';
+
+import { Loader } from 'lucide-react';
+
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { PDFViewerProps } from '~/components/(dashboard)/pdf-viewer/pdf-viewer';
+
+export type LoadablePDFCard = PDFViewerProps & {
+  className?: string;
+  pdfClassName?: string;
+};
+
+const PDFCard = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+      <Loader className="h-12 w-12 animate-spin text-slate-500" />
+
+      <p className="mt-4 text-slate-500">Loading document...</p>
+    </div>
+  ),
+});
+
+export const LoadablePDFCard = ({ className, pdfClassName, ...props }: LoadablePDFCard) => {
+  return (
+    <Card className={className} gradient {...props}>
+      <CardContent className="p-2">
+        <PDFCard className={pdfClassName} {...props} />
+      </CardContent>
+    </Card>
+  );
+};

apps/web/src/app/(dashboard)/documents/[id]/page.tsx

@@ -0,0 +1,94 @@
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { LoadablePDFCard } from './loadable-pdf-card';
+
+export type DocumentPageProps = {
+  params: {
+    id: string;
+  };
+};
+
+export default async function DocumentPage({ params }: DocumentPageProps) {
+  const { id } = params;
+
+  const documentId = Number(id);
+
+  if (!documentId || Number.isNaN(documentId)) {
+    redirect('/documents');
+  }
+
+  const session = await getRequiredServerComponentSession();
+
+  const document = await getDocumentById({
+    id: documentId,
+    userId: session.id,
+  }).catch(() => null);
+
+  if (!document) {
+    redirect('/documents');
+  }
+
+  return (
+    <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+      <Link href="/documents" className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Dashboard
+      </Link>
+
+      <h1
+        className="mt-4 max-w-xs truncate text-2xl font-semibold md:text-3xl"
+        title={document.title}
+      >
+        Document.pdf
+      </h1>
+
+      <div className="mt-8 grid w-full grid-cols-12 gap-x-8">
+        <LoadablePDFCard
+          className="col-span-7 rounded-xl before:rounded-xl"
+          document={document.document}
+        />
+
+        <div className="relative col-span-5">
+          <div className="sticky top-20 flex max-h-screen min-h-[calc(100vh-6rem)] flex-col rounded-xl border bg-[hsl(var(--widget))] px-4 py-6">
+            <h3 className="text-2xl font-semibold">Add Signers</h3>
+
+            <p className="mt-2 text-sm text-black/30">Add the people who will sign the document.</p>
+
+            <hr className="mb-8 mt-4" />
+
+            <div className="flex-1"></div>
+
+            <div className="">
+              <p className="text-sm text-black/30">Add Signers (1/3)</p>
+
+              <div className="relative mt-4 h-[2px] rounded-md bg-slate-300">
+                <div className="bg-primary absolute inset-y-0 left-0 w-1/3" />
+              </div>
+
+              <div className="mt-4 flex gap-x-4">
+                <Button
+                  className="flex-1 bg-black/5 hover:bg-black/10"
+                  size="lg"
+                  variant="secondary"
+                >
+                  Go Back
+                </Button>
+
+                <Button className="flex-1" size="lg">
+                  Continue
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import Link from 'next/link';
+
+import { Loader } from 'lucide-react';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { Document } from '@documenso/prisma/client';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+
+import { DocumentStatus } from '~/components/formatter/document-status';
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+export type DocumentsDataTableProps = {
+  results: FindResultSet<Document>;
+};
+
+export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
+  const [isPending, startTransition] = useTransition();
+
+  const updateSearchParams = useUpdateSearchParams();
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    startTransition(() => {
+      updateSearchParams({
+        page,
+        perPage,
+      });
+    });
+  };
+
+  return (
+    <div className="relative">
+      <DataTable
+        columns={[
+          {
+            header: 'ID',
+            accessorKey: 'id',
+          },
+          {
+            header: 'Title',
+            cell: ({ row }) => (
+              <Link href={`/documents/${row.original.id}`} className="font-medium hover:underline">
+                {row.original.title}
+              </Link>
+            ),
+          },
+          {
+            header: 'Status',
+            accessorKey: 'status',
+            cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
+          },
+          {
+            header: 'Created',
+            accessorKey: 'created',
+            cell: ({ row }) => <LocaleDate date={row.getValue('created')} />,
+          },
+        ]}
+        data={results.data}
+        perPage={results.perPage}
+        currentPage={results.currentPage}
+        totalPages={results.totalPages}
+        onPaginationChange={onPaginationChange}
+      >
+        {(table) => <DataTablePagination table={table} />}
+      </DataTable>
+
+      {isPending && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/documents/page.tsx

@@ -0,0 +1,136 @@
+import Link from 'next/link';
+
+import { CheckCircle, Clock, Plus } from 'lucide-react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
+import { getStats } from '@documenso/lib/server-only/document/get-stats';
+import { isDocumentStatus } from '@documenso/lib/types/is-document-status';
+import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { DocumentDropzone } from '~/components/(dashboard)/document-dropzone/document-dropzone';
+import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
+import {
+  PeriodSelectorValue,
+  isPeriodSelectorValue,
+} from '~/components/(dashboard)/period-selector/types';
+import { DocumentStatus } from '~/components/formatter/document-status';
+
+import { DocumentsDataTable } from './data-table';
+
+export type DocumentsPageProps = {
+  searchParams?: {
+    status?: InternalDocumentStatus | 'ALL';
+    period?: PeriodSelectorValue;
+    page?: string;
+    perPage?: string;
+  };
+};
+
+export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
+  const session = await getRequiredServerComponentSession();
+
+  const stats = await getStats({
+    userId: session.id,
+  });
+
+  const status = isDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
+  const period = isPeriodSelectorValue(searchParams.period) ? searchParams.period : '';
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 20;
+
+  const results = await findDocuments({
+    userId: session.id,
+    status: status === 'ALL' ? undefined : status,
+    orderBy: {
+      column: 'created',
+      direction: 'desc',
+    },
+    page,
+    perPage,
+  });
+
+  const isNoResults = status === 'ALL' && period === '' && results.data.length === 0;
+
+  const getTabHref = (value: typeof status) => {
+    const params = new URLSearchParams(searchParams);
+
+    params.set('status', value);
+
+    if (params.has('page')) {
+      params.delete('page');
+    }
+
+    if (value === 'ALL') {
+      params.delete('status');
+    }
+
+    return `/documents?${params.toString()}`;
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">All Documents</h1>
+
+      <div className="mt-8 flex flex-wrap gap-x-4 gap-y-6">
+        <Tabs defaultValue={status}>
+          <TabsList>
+            <TabsTrigger className="min-w-[60px]" value="ALL" asChild>
+              <Link href={getTabHref('ALL')}>All</Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.DRAFT} asChild>
+              <Link href={getTabHref(InternalDocumentStatus.DRAFT)}>
+                <DocumentStatus status={InternalDocumentStatus.DRAFT} />
+
+                <span className="ml-1 hidden opacity-50 md:inline-block">
+                  {Math.min(stats.DRAFT, 99)}
+                </span>
+              </Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.PENDING} asChild>
+              <Link href={getTabHref(InternalDocumentStatus.PENDING)}>
+                <DocumentStatus status={InternalDocumentStatus.PENDING} />
+
+                <span className="ml-1 hidden opacity-50 md:inline-block">
+                  {Math.min(stats.PENDING, 99)}
+                </span>
+              </Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.COMPLETED} asChild>
+              <Link href={getTabHref(InternalDocumentStatus.COMPLETED)}>
+                <DocumentStatus status={InternalDocumentStatus.COMPLETED} />
+
+                <span className="ml-1 hidden opacity-50 md:inline-block">
+                  {Math.min(stats.COMPLETED, 99)}
+                </span>
+              </Link>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+
+        <div className="flex flex-1 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+          <PeriodSelector />
+
+          <Button>
+            <Plus className="-ml-1 mr-2 h-5 w-5" />
+            Add Document
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        {/* If we're viewing all documents for all time and there's nuffin we should should an add document component instead */}
+        {isNoResults ? (
+          <DocumentDropzone className="min-h-[60vh] md:min-h-[40vh]" />
+        ) : (
+          <DocumentsDataTable results={results} />
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { redirect } from 'next/navigation';
+
+import { getServerSession } from 'next-auth';
+
+import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
+import {
+  getRequiredServerComponentSession,
+  getServerComponentSession,
+} from '@documenso/lib/next-auth/get-server-session';
+
+import { Header } from '~/components/(dashboard)/layout/header';
+import { NextAuthProvider } from '~/providers/next-auth';
+
+export type AuthenticatedDashboardLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default async function AuthenticatedDashboardLayout({
+  children,
+}: AuthenticatedDashboardLayoutProps) {
+  const session = await getServerSession(NEXT_AUTH_OPTIONS);
+
+  if (!session) {
+    redirect('/signin');
+  }
+
+  const user = await getRequiredServerComponentSession();
+
+  return (
+    <NextAuthProvider session={session}>
+      <Header user={user} />
+
+      <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
+    </NextAuthProvider>
+  );
+}

apps/web/src/app/(dashboard)/settings/billing/page.tsx

@@ -0,0 +1,29 @@
+import { redirect } from 'next/navigation';
+
+import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+
+import { PasswordForm } from '~/components/forms/password';
+
+export default async function BillingSettingsPage() {
+  const user = await getRequiredServerComponentSession();
+
+  // Redirect if subscriptions are not enabled.
+  if (!IS_SUBSCRIPTIONS_ENABLED) {
+    redirect('/settings/profile');
+  }
+
+  return (
+    <div>
+      <h3 className="text-lg font-medium">Billing</h3>
+
+      <p className="mt-2 text-sm text-slate-500">
+        Here you can update and manage your subscription.
+      </p>
+
+      <hr className="my-4" />
+
+      <PasswordForm user={user} className="max-w-xl" />
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/settings/layout.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { DesktopNav } from '~/components/(dashboard)/settings/layout/desktop-nav';
+import { MobileNav } from '~/components/(dashboard)/settings/layout/mobile-nav';
+
+export type DashboardSettingsLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function DashboardSettingsLayout({ children }: DashboardSettingsLayoutProps) {
+  return (
+    <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <h1 className="text-4xl font-semibold">Settings</h1>
+
+      <div className="mt-4 grid grid-cols-12 gap-x-8 md:mt-8">
+        <DesktopNav className="hidden md:col-span-3 md:flex" />
+        <MobileNav className="col-span-12 mb-8 md:hidden" />
+
+        <div className="col-span-12 md:col-span-9">{children}</div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/settings/page.tsx

@@ -0,0 +1,8 @@
+import { redirect } from 'next/navigation';
+
+export default function SettingsPage() {
+  redirect('/settings/profile');
+
+  // Page is intentionally empty because it will be redirected to /settings/profile
+  return <div />;
+}

apps/web/src/app/(dashboard)/settings/password/page.tsx

@@ -0,0 +1,19 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+
+import { PasswordForm } from '~/components/forms/password';
+
+export default async function PasswordSettingsPage() {
+  const user = await getRequiredServerComponentSession();
+
+  return (
+    <div>
+      <h3 className="text-lg font-medium">Password</h3>
+
+      <p className="mt-2 text-sm text-slate-500">Here you can update your password.</p>
+
+      <hr className="my-4" />
+
+      <PasswordForm user={user} className="max-w-xl" />
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/settings/profile/page.tsx

@@ -0,0 +1,19 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+
+import { ProfileForm } from '~/components/forms/profile';
+
+export default async function ProfileSettingsPage() {
+  const user = await getRequiredServerComponentSession();
+
+  return (
+    <div>
+      <h3 className="text-lg font-medium">Profile</h3>
+
+      <p className="mt-2 text-sm text-slate-500">Here you can edit your personal details.</p>
+
+      <hr className="my-4" />
+
+      <ProfileForm user={user} className="max-w-xl" />
+    </div>
+  );
+}

apps/web/src/app/(unauthenticated)/signin/page.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+import connections from '~/assets/card-sharing-figure.png';
+import { SignInForm } from '~/components/forms/signin';
+
+export default function SignInPage() {
+  return (
+    <main className="bg-sand-100 relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">
+      <div className="relative flex max-w-4xl items-center gap-x-24">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
+          <Image src={backgroundPattern} alt="background pattern" />
+        </div>
+
+        <div className="max-w-md">
+          <h1 className="text-4xl font-semibold">Sign in to your account</h1>
+
+          <p className="mt-2 text-sm text-slate-500">Welcome back, we are lucky to have you.</p>
+
+          <SignInForm className="mt-4" />
+
+          <p className="mt-6 text-center text-sm text-slate-500">
+            Don't have an account?{' '}
+            <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
+              Sign up
+            </Link>
+          </p>
+        </div>
+
+        <div className="hidden flex-1 lg:block">
+          <Image src={connections} alt="documenso connections" />
+        </div>
+      </div>
+    </main>
+  );
+}

apps/web/src/app/(unauthenticated)/signup/page.tsx

@@ -0,0 +1,40 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+import connections from '~/assets/connections.png';
+import { SignUpForm } from '~/components/forms/signup';
+
+export default function SignUpPage() {
+  return (
+    <main className="bg-sand-100 relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-24">
+      <div className="relative flex max-w-4xl items-center gap-x-24">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
+          <Image src={backgroundPattern} alt="background pattern" />
+        </div>
+
+        <div className="max-w-md">
+          <h1 className="text-4xl font-semibold">Create a shiny, new Documenso Account ✨</h1>
+
+          <p className="mt-2 text-sm text-slate-500">
+            Create your account and start using state-of-the-art document signing. Open and
+            beautiful signing is within your grasp.
+          </p>
+
+          <SignUpForm className="mt-4" />
+
+          <p className="mt-6 text-center text-sm text-slate-500">
+            Already have an account?{' '}
+            <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
+              Sign in instead
+            </Link>
+          </p>
+        </div>
+
+        <div className="hidden flex-1 lg:block">
+          <Image src={connections} alt="documenso connections" />
+        </div>
+      </div>
+    </main>
+  );
+}

apps/web/src/app/globals.css

@@ -0,0 +1 @@
+@import '@documenso/ui/styles/theme.css';

apps/web/src/app/layout.tsx

@@ -0,0 +1,54 @@
+import { Inter } from 'next/font/google';
+
+import { TrpcProvider } from '@documenso/trpc/react';
+import { Toaster } from '@documenso/ui/primitives/toaster';
+
+import { PlausibleProvider } from '~/providers/plausible';
+
+import './globals.css';
+
+const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
+
+export const metadata = {
+  title: 'Documenso - The Open Source DocuSign Alternative',
+  description:
+    'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+  keywords:
+    'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
+  authors: { name: 'Documenso, Inc.' },
+  robots: 'index, follow',
+  openGraph: {
+    title: 'Documenso - The Open Source DocuSign Alternative',
+    description:
+      'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+    type: 'website',
+    images: [`${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`],
+  },
+  twitter: {
+    site: '@documenso',
+    card: 'summary_large_image',
+    images: [`${process.env.NEXT_PUBLIC_SITE_URL}/opengraph-image.jpg`],
+    description:
+      'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+  },
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={fontInter.variable} suppressHydrationWarning>
+      <head>
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+      </head>
+
+      <body>
+        <PlausibleProvider>
+          <TrpcProvider>{children}</TrpcProvider>
+        </PlausibleProvider>
+        <Toaster />
+      </body>
+    </html>
+  );
+}

apps/web/src/app/page.tsx

@@ -0,0 +1,3 @@
+export default function DashboardPage() {
+  return <div>hello world</div>;
+}