fix: semantic tags

Author: abernier

src/app/[...slug]/page.tsx

@@ -37,14 +37,14 @@ export default async function Page({ params }: Props) {
 
   return (
     <>
-      <div className={cn('mb-6 mt-8 border-b', 'border-outline-variant/50')}>
+      <header className={cn('mb-6 mt-8 border-b', 'border-outline-variant/50')}>
         <h1 className="mb-2 text-5xl font-bold tracking-tighter">{doc.title}</h1>
         {!!doc?.description?.length && (
           <p className={cn('my-2 text-base leading-5', 'text-on-surface-variant/50')}>
             {doc.description}
           </p>
         )}
-      </div>
+      </header>
       {doc ? <>{doc.content}</> : 'empty doc'}
     </>
   )

src/components/mdx/Intro/Intro.tsx

@@ -1,6 +1,14 @@
 import cn from '@/lib/cn'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import { ComponentProps } from 'react'
 
-export function Intro({ className, ...props }: ComponentProps<'div'>) {
-  return <div {...props} className={cn(className, 'my-6 text-xl leading-relaxed')} />
+export function Intro({ children, className, ...props }: ComponentProps<'div'>) {
+  return (
+    <section {...props} className={cn(className, 'my-6 text-xl leading-relaxed')}>
+      <VisuallyHidden>
+        <h2>Summary</h2>
+      </VisuallyHidden>
+      {children}
+    </section>
+  )
 }