[website] Allow deep linking to sponsors

It makes it possible to deep link content for requests like
"just checking on the progress of the placement. Could you give me an update on that?"

docs/src/components/home/Sponsors.tsx

@@ -11,6 +11,7 @@ export default function Sponsors() {
   return (
     <Container sx={{ py: { xs: 4, md: 8 } }}>
       <SectionHeadline
+        id="sponsors"
         overline="Sponsors"
         title={
           <Typography variant="h2" sx={{ my: 1 }}>

docs/src/components/typography/SectionHeadline.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
-export default function SectionHeadline({
-  overline,
-  title,
-  description,
-}: {
+interface SectionHeadlineProps {
+  description?: React.ReactNode;
+  id?: string;
   overline: React.ReactNode;
   title: React.ReactNode;
-  description?: React.ReactNode;
-}) {
+}
+
+export default function SectionHeadline(props: SectionHeadlineProps) {
+  const { description, id, overline, title } = props;
   const globalTheme = useTheme();
   const mode = globalTheme.palette.mode;
   const overlineColor = mode === 'dark' ? 'primary.300' : 'primary.600';
@@ -25,6 +25,7 @@ export default function SectionHeadline({
         fontWeight="bold"
         variant="body2"
         sx={{ mb: 1 }}
+        id={id}
       >
         {overline}
       </Typography>