feat: add website cta (#1007)

![hover](https://github.com/documenso/documenso/assets/25515812/9132ef8c-f956-4370-8e20-cc01bc196664)

![notover](https://github.com/documenso/documenso/assets/25515812/a12e72f0-84eb-43bd-bb95-828fef8e8819)

apps/marketing/contentlayer.config.ts

@@ -12,6 +12,7 @@ export const BlogPost = defineDocumentType(() => ({
     authorName: { type: 'string', required: true },
     authorImage: { type: 'string', required: false },
     authorRole: { type: 'string', required: true },
+    cta: { type: 'boolean', required: false, default: true },
   },
   computedFields: {
     href: { type: 'string', resolve: (post) => `/${post._raw.flattenedPath}` },

apps/marketing/src/app/(marketing)/blog/[post]/page.tsx

@@ -7,6 +7,8 @@ import { ChevronLeft } from 'lucide-react';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
+import { CallToAction } from '~/components/(marketing)/call-to-action';
+
 export const dynamic = 'force-dynamic';
 
 export const generateMetadata = ({ params }: { params: { post: string } }) => {
@@ -42,6 +44,7 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
   const MDXContent = useMDXComponent(post.body.code);
 
   return (
+    <div>
       <article className="prose dark:prose-invert mx-auto py-8">
         <div className="mb-6 text-center">
           <time dateTime={post.date} className="text-muted-foreground mb-1 text-xs">
@@ -90,5 +93,8 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
           Back to all posts
         </Link>
       </article>
+
+      {post.cta && <CallToAction className="mt-8" utmSource={`blog__${params.post}`} />}
+    </div>
   );
 }

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -7,6 +7,7 @@ import { getUserMonthlyGrowth } from '@documenso/lib/server-only/user/get-user-m
 import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
 import { MetricCard } from '~/app/(marketing)/open/metric-card';
 import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
+import { CallToAction } from '~/components/(marketing)/call-to-action';
 
 import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
@@ -141,6 +142,7 @@ export default async function OpenPage() {
   const MONTHLY_USERS = await getUserMonthlyGrowth();
 
   return (
+    <div>
       <div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
         <div className="flex flex-col items-center justify-center">
           <h1 className="text-3xl font-bold lg:text-5xl">Open Startup</h1>
@@ -244,11 +246,14 @@ export default async function OpenPage() {
             <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
+              We're still working on getting all our metrics together. We'll update this page as
-            as we have more to share.
+              soon as we have more to share.
             </p>
           </div>
         </div>
       </div>
+
+      <CallToAction className="mt-12" utmSource="open-page" />
+    </div>
   );
 }

apps/marketing/src/components/(marketing)/call-to-action.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+type CallToActionProps = {
+  className?: string;
+  utmSource?: string;
+};
+
+export const CallToAction = ({ className, utmSource = 'generic-cta' }: CallToActionProps) => {
+  return (
+    <Card spotlight className={className}>
+      <CardContent className="flex flex-col items-center justify-center p-12">
+        <h2 className="text-center text-2xl font-bold">Join the Open Signing Movement</h2>
+
+        <p className="text-muted-foreground mt-4 max-w-[55ch] text-center leading-normal">
+          Create your account and start using state-of-the-art document signing. Open and beautiful
+          signing is within your grasp.
+        </p>
+
+        <Button className="mt-8 rounded-full no-underline" size="lg" asChild>
+          <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=${utmSource}`} target="_blank">
+            Get started
+          </Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};