refactor(website): extract layouts and use more server components (#9027)

Closes https://github.com/discordjs/discord.js/issues/8920
Closes https://github.com/discordjs/discord.js/issues/8997

apps/website/src/components/Section.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { Section as DJSSection, type SectionOptions } from '@discordjs/ui';
+import type { PropsWithChildren } from 'react';
+import { useMedia } from 'react-use';
+
+// This is wrapper around the Section component from @discordjs/ui,
+// it simply automatically sets the dense prop to true if the screen
+// width is less than 768px. This is done to separate client-side logic
+// from server-side rendering.
+export function Section(options: PropsWithChildren<SectionOptions>) {
+	const matches = useMedia('(max-width: 768px)', true);
+	const modifiedOptions = { ...options, dense: matches };
+
+	return <DJSSection {...modifiedOptions} />;
+}