Update docs homepage hero image (#3222)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/docs-homepage-hero.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Updated the hero image on the docs homepage with a new dashboard graphic for light and dark mode.

.changeset/docs-toc-width.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Updated the table of contents rail on docs pages to a fixed `13rem` width.

docs/content/index.mdx

@@ -6,9 +6,12 @@ hide-pagination: true
 ---
 
 import Card from '@components/DocsCard.astro'
+import { Image } from 'astro:assets'
+import coverLight from '../images/cover-docs.png'
+import coverDark from '../images/cover-docs-dark.png'
 
-<img src="/img/tabler.png" alt="Tabler" class="mb-4 hide-theme-dark border-0" width="816" height="620" />
+<Image src={coverLight} alt="Tabler" class="mb-4 hide-theme-dark border-0" width={710} densities={[1, 2]} loading="eager" />
-<img src="/img/tabler-dark.png" alt="Tabler" class="mb-4 hide-theme-light border-0" width="816" height="620" />
+<Image src={coverDark} alt="Tabler" class="mb-4 hide-theme-light border-0" width={710} densities={[1, 2]} loading="eager" />
 
 This is the documentation for Tabler and the tools around it: the UI kit, its plugins, Tabler Icons, Illustrations and the email templates. Pick a section below to get started.
 

docs/layouts/DocsLayout.astro

@@ -494,7 +494,7 @@ const relatedPages = await Promise.all(
 						</footer>
 					</div>
 					<!-- BEGIN DOCS TOC -->
-					<div class="col-2 d-none d-xxl-block">
+					<div class="col-docs-toc d-none d-xxl-block">
 						<div class="py-5 sticky-top docs-toc-sticky">
 							<DocsToc toc={toc} editUrl={`${site.githubUrl}/edit/dev/${editFilePath}`} sourceUrl={sourcePath ? `${site.githubUrl}/blob/dev/${sourcePath}` : undefined} />
 						</div>

docs/scss/docs.scss

@@ -695,6 +695,12 @@ html {
   scroll-padding-top: var(--docs-header-height);
 }
 
+// Table of contents rail: a fixed width, so the content column takes the rest.
+.col-docs-toc {
+  flex: 0 0 auto;
+  width: 13rem;
+}
+
 // The table of contents sticks too, so it has to clear the header (#2421).
 // A long list must not run past the viewport either: the rail is capped at the
 // space below the header and scrolls on its own (#2965).