[docs] design shuffle (#2951)

This PR incorporates design tweaks from #2922 without the home page or
content changes.

These are:
- Replacing all `hello@tldraw.com` with `sales@tldraw.com`
- Fix mailto links.
- Showing the first item in a section on direct routes to the section
- Splitting the article page for human-written content from article page
for generated content
- Splitting the layout for the landing page from the rest of the site
(temporarily identical to the regular content)
- Removing headings from left sidebar
- Restoring headings in right sidebar for human-written pages with > 1
heading link
- Styling block quote
- Adjusting section link appearance / layout in header / menu
- Changing the order of search results to preference docs over examples
- Updating copy on events
- Removing copy on user interface menus
- Adding hero as prop to all articles
- Updated icon
- Fixing a few broken links
- Replaces the sandpack code blocks with hljs code blocks, except in
examples.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

apps/docs/components/mdx-components/code.tsx

@@ -5,12 +5,7 @@ import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
 
 export const Code = (props: any) => {
-	if (!props.className) {
-		return <code {...props} />
-	}
-
-	const language = props.className.replace('language-', '')
-	return <CodeBlock code={{ [`App.${language}`]: props.children.trim() }} />
+	return <code {...props} />
 }
 
 export function CodeBlock({ code }: { code: SandpackFiles }) {

apps/docs/components/mdx-components/generic.tsx

@@ -150,7 +150,7 @@ export const Footnotes = (props: any) => {
 /* -------------------- API docs -------------------- */
 
 export const ApiHeading = (props: any) => {
-	return <div {...props} />
+	return <div className="article__api-heading uppercase_title" {...props} />
 }
 
 export const Embed = (props: any) => {
@@ -161,3 +161,14 @@ export const Embed = (props: any) => {
 		</div>
 	)
 }
+
+/* -------------------- Callouts -------------------- */
+
+export const Callout = ({ icon, children }: any) => {
+	return (
+		<div className="article__callout">
+			<span>{icon}</span>
+			<p>{children}</p>
+		</div>
+	)
+}

apps/docs/components/mdx-components/index.ts

@@ -4,6 +4,7 @@ import {
 	A,
 	ApiHeading,
 	Blockquote,
+	Callout,
 	Divider,
 	Embed,
 	Heading1,
@@ -56,6 +57,7 @@ export const components = {
 	Image,
 	Small: Small,
 	Video,
+	Callout,
 	...customComponents,
 	...apiComponents,
 }