feat(site): new home page, docs, and design system (#566)

Co-authored-by: Darius Cepulis <dcepulis@mux.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

site/src/utils/docs/__tests__/renderInlineMarkdown.test.ts

@@ -9,7 +9,7 @@ describe('renderInlineMarkdown', () => {
   it('unwraps a single paragraph', () => {
     const result = renderInlineMarkdown('Hello **world**.');
     expect(result).not.toMatch(/^<p/);
-    expect(result).toContain('<strong class="font-semibold">world</strong>');
+    expect(result).toContain('<strong class="font-bold">world</strong>');
   });
 
   it('preserves multiple paragraphs', () => {
@@ -29,12 +29,12 @@ describe('renderInlineMarkdown', () => {
 
   it('renders strong text', () => {
     const result = renderInlineMarkdown('**bold text**');
-    expect(result).toContain('<strong class="font-semibold">bold text</strong>');
+    expect(result).toContain('<strong class="font-bold">bold text</strong>');
   });
 
   it('renders emphasized text', () => {
     const result = renderInlineMarkdown('*italic text*');
-    expect(result).toContain('<em class="font-medium">italic text</em>');
+    expect(result).toContain('<em class="font-bold">italic text</em>');
   });
 
   it('renders links with correct classes', () => {

site/src/utils/docs/renderInlineMarkdown.ts

@@ -1,6 +1,6 @@
 import { Marked, type MarkedExtension, type Tokens } from 'marked';
-import { twMerge } from 'tailwind-merge';
 import { shared } from '@/components/typography/styles';
+import { twMerge } from '@/utils/twMerge';
 
 const classes = {
   p: 'mt-3 first:mt-0',

site/src/utils/twMerge.ts

@@ -0,0 +1,21 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+
+export const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': [
+        'text-h1',
+        'text-h15',
+        'text-h2',
+        'text-h3',
+        'text-h4',
+        'text-h5',
+        'text-p1',
+        'text-p2',
+        'text-p3',
+        'text-code',
+      ],
+      'font-family': ['font-display-compact', 'font-display'],
+    },
+  },
+});