Rework the charts page into sections; add .page-section-title (#3101)

screenshots/pages/legend-large-list.astro

@@ -0,0 +1,22 @@
+---
+// Large legend on its own, no card and no chart: a `divided` LegendList of
+// `size="lg"` items — colored dot and name, a big value with a small unit
+// below — with a line between them. The last item shows the `off` state of a
+// hidden series.
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import Legend from '@ui/Legend.astro'
+import LegendList from '@ui/LegendList.astro'
+
+const items = [
+  { name: 'Requests', color: 'primary', value: '1,234', unit: 'req/s' },
+  { name: 'Bandwidth', color: 'azure', value: '86.2', unit: 'MB/s' },
+  { name: 'Storage', color: 'purple', value: '56', unit: 'GB' },
+  { name: 'Warnings', color: 'orange', value: '128', off: true },
+]
+---
+
+<ScreenshotLayout title="Large legend list" columns={3.2} zoom={1.3}>
+  <LegendList divided class="justify-content-center">
+    {items.map((item) => <Legend size="lg" color={item.color} text={item.name} value={item.value} unit={item.unit} off={item.off} />)}
+  </LegendList>
+</ScreenshotLayout>

screenshots/pages/legend-large-vertical.astro

@@ -0,0 +1,38 @@
+---
+// Large legend next to a donut: a traffic-sources card with the chart on the
+// left and a `vertical` list of `size="lg"` items on the right, each showing a
+// source and its share. `legend-donut` is the traffic donut from charts.json
+// with the ApexCharts legend left off, since the list replaces it.
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import Card from '@ui/Card.astro'
+import CardHeader from '@ui/CardHeader.astro'
+import CardBody from '@ui/CardBody.astro'
+import Legend from '@ui/Legend.astro'
+import LegendList from '@ui/LegendList.astro'
+import Chart from '@components/demo/Chart.astro'
+
+// Order and colors follow the `traffic-sources-donut` entry in charts.json.
+const sources = [
+  { name: 'Organic search', color: 'azure', value: 38 },
+  { name: 'Direct', color: 'primary', value: 27 },
+  { name: 'Social media', color: 'purple', value: 18 },
+  { name: 'Referral', color: 'orange', value: 12 },
+  { name: 'Email', color: 'green', value: 5 },
+]
+---
+
+<ScreenshotLayout title="Large vertical legend" columns={1.6} pageLibs={['apexcharts']}>
+  <Card>
+    <CardHeader title="Traffic sources" />
+    <CardBody>
+      <div class="d-flex align-items-center gap-4">
+        <div class="flex-fill">
+          <Chart chartId="legend-donut" height={14} label="Traffic sources" />
+        </div>
+        <LegendList vertical>
+          {sources.map((item) => <Legend size="lg" color={item.color} text={item.name} value={`${item.value}%`} />)}
+        </LegendList>
+      </div>
+    </CardBody>
+  </Card>
+</ScreenshotLayout>

screenshots/pages/legend-large.astro

@@ -0,0 +1,42 @@
+---
+// Large legend above a chart: a read-latency card where each percentile is a
+// `size="lg"` button item — colored dot and name on the first line, the latest
+// value with its unit below — in a `divided` list. The fake cursor rests on the
+// active item so the tinted hover background is part of the picture. Every
+// series stays on, because the chart draws all four. `legend-latency` is a four-series line chart in
+// charts.json with the ApexCharts legend left off, since the items replace it.
+import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
+import Card from '@ui/Card.astro'
+import CardHeader from '@ui/CardHeader.astro'
+import CardBody from '@ui/CardBody.astro'
+import Legend from '@ui/Legend.astro'
+import LegendList from '@ui/LegendList.astro'
+import Chart from '@components/demo/Chart.astro'
+
+// Series order and colors follow the `legend-latency` entry in charts.json.
+const series = [
+  { name: 'P99', color: 'primary', value: 124 },
+  { name: 'P95', color: 'azure', value: 76, active: true },
+  { name: 'P75', color: 'green', value: 32 },
+  { name: 'P50', color: 'yellow', value: 10 },
+]
+---
+
+<ScreenshotLayout title="Large legend" columns={2.4} pageLibs={['apexcharts']}>
+  <Card>
+    <CardHeader title="Read latency" />
+    <CardBody>
+      <LegendList divided class="mb-3">
+        {
+          series.map((item) => (
+            <Legend button size="lg" color={item.color} value={item.value} unit="ms" active={item.active} class="position-relative">
+              {item.name}
+              {item.active && <span class="cursor" />}
+            </Legend>
+          ))
+        }
+      </LegendList>
+      <Chart chartId="legend-latency" height={14} label="Read latency by percentile" />
+    </CardBody>
+  </Card>
+</ScreenshotLayout>