feat: add community embed and article link

- Edit headline for SEO
- Fix typo for consistency

apps/marketing/content/design-system.mdx

@@ -0,0 +1,42 @@
+---
+title: Design System
+---
+
+# We're building a beautiful, open-source alternative to DocuSign
+
+> Read more about our design culture here:
+>
+> [https://documenso.com/blog/design-system](https://documenso.com/blog/design-system)
+
+At Documenso, we aim to be a design-driven company.
+
+We believe that design isn't just about how things look, but also how they work. We want to make sure that the product is easy to use and intuitive. We also want to ensure that the website, desktop and mobile apps are consistent and look and feel like they belong together.
+
+To achieve this, we've created Documenso's design system containing tokens, primitives, and components, screens, and brand assets.
+
+We're open-sourcing this design system so you can see how we build the product and think about design as a whole.
+
+## Check out the design system
+
+<iframe
+  src="https://documen.so/design-system-embed"
+  className="aspect-square w-full border-none"
+  frameBorder="0"
+/>
+
+## Remix and Share the community version on Figma
+
+<a href="documen.so/design" target="_blank">
+<figure>
+  <MdxNextImage
+    src="/blog/designsystem.png"
+    width="1260"
+    height="630"
+    alt="Documenso's Design System"
+  />
+
+  <figcaption className="text-center">
+   Documenso's Design System ✨
+  </figcaption>
+</figure>
+</a>

apps/marketing/src/components/(marketing)/footer.tsx

@@ -21,6 +21,7 @@ const FOOTER_LINKS = [
   { href: '/open', text: 'Open' },
   { href: 'https://shop.documenso.com', text: 'Shop', target: '_blank' },
   { href: 'https://status.documenso.com', text: 'Status', target: '_blank' },
+  { href: '/design-system', text: 'Design' },
   { href: 'mailto:support@documenso.com', text: 'Support' },
   { href: '/privacy', text: 'Privacy' },
 ];
@@ -43,7 +44,7 @@ export const Footer = ({ className, ...props }: FooterProps) => {
           </div>
         </div>
 
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2.5">
+        <div className="grid max-w-xs flex-1 grid-cols-2 gap-x-4 gap-y-2">
           {FOOTER_LINKS.map((link, index) => (
             <Link
               key={index}

packages/tailwind-config/index.cjs

@@ -4,7 +4,7 @@ const { fontFamily } = require('tailwindcss/defaultTheme');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ['class'],
-  content: ['src/**/*.{ts,tsx}'],
+  content: ['src/**/*.{ts,tsx}', 'content/**/*.{md,mdx}'],
   theme: {
     extend: {
       fontFamily: {