[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/FancyBox.tsx

@@ -1,44 +1,43 @@
 'use client'
 
-import { debounce } from '@/utils/debounce'
-import { useEffect, useRef, useState } from 'react'
+import { useRef } from 'react'
 
 export default function FancyBox() {
 	const rContainer = useRef<HTMLDivElement>(null)
-	const [items, setItems] = useState<number[]>([])
+	// const [items, setItems] = useState<number[]>([])
 
-	useEffect(() => {
-		const populate = debounce(() => {
-			const elm = rContainer.current
-			if (!elm) return
+	// useEffect(() => {
+	// 	const populate = debounce(() => {
+	// 		const elm = rContainer.current
+	// 		if (!elm) return
 
-			const width = elm.clientWidth
-			const height = elm.clientHeight
+	// 		const width = elm.clientWidth
+	// 		const height = elm.clientHeight
 
-			const SIZE = 32
+	// 		const SIZE = 32
 
-			const cols = Math.ceil(width / SIZE)
-			const rows = Math.ceil(height / SIZE)
+	// 		const cols = Math.ceil(width / SIZE)
+	// 		const rows = Math.ceil(height / SIZE)
 
-			const items = Array.from(Array(cols * rows)).map((_, i) => i)
+	// 		const items = Array.from(Array(cols * rows)).map((_, i) => i)
 
-			setItems(items)
-		}, 100)
+	// 		setItems(items)
+	// 	}, 100)
 
-		populate()
+	// 	populate()
 
-		window.addEventListener('resize', populate)
-		return () => {
-			window.removeEventListener('resize', populate)
-		}
-	}, [])
+	// 	window.addEventListener('resize', populate)
+	// 	return () => {
+	// 		window.removeEventListener('resize', populate)
+	// 	}
+	// }, [])
 
 	return (
 		<div className="footer__fancybox" ref={rContainer}>
-			{items.map((i) => {
+			{/* {items.map((i) => {
 				const c = 1 + (i % 7)
 				return <div key={i} className="footer__fancybox__item" data-c={c} />
-			})}
+			})} */}
 		</div>
 	)
 }