fix(web): landing page heading structure

apps/web/src/app/components/page.tsx

@@ -86,9 +86,9 @@ export default async function ComponentsPage() {
                     <div className="absolute inset-0 bg-[radial-gradient(#27272A_.0313rem,transparent_.0313rem),_radial-gradient(#27272A_.0313rem,transparent_.0313rem)] bg-transparent opacity-80 [background-position:0_0,.625rem_.625rem] [background-size:1.25rem_1.25rem]" />
                     <Illustration />
                   </div>
-                  <h3 className="relative z-[3] mt-4 font-medium text-slate-12 capitalize leading-7 -tracking-wide">
+                  <h2 className="relative z-[3] mt-4 font-medium text-slate-12 capitalize leading-7 -tracking-wide">
                     {category.name}
-                  </h3>
+                  </h2>
                   <span className="relative z-[3] text-slate-11 text-xs">
                     {category.components.length} component
                     {category.components.length > 1 && 's'}

apps/web/src/components/sections/integration.tsx

@@ -15,6 +15,7 @@ const IntegrationSection = () => {
       <div className="space-y-12 md:space-y-16">
         <div className="max-w-full text-center space-y-4">
           <Heading
+            as="h2"
             size="8"
             weight="medium"
             className="text-white/80 text-balance"

apps/web/src/components/sections/patterns.tsx

@@ -106,7 +106,7 @@ const ContentComponent = ({ component }: { component: string }) => {
   switch (component) {
     case 'Heading':
       return (
-        <Heading size="8" weight="medium" className="text-white/80">
+        <Heading as="h2" size="8" weight="medium" className="text-white/80">
           Ready-to-use Components
         </Heading>
       );

apps/web/src/components/sections/playground/index.tsx

@@ -31,6 +31,7 @@ const PlaygroundSection = () => {
       <div className="space-y-8 w-full">
         <div className="max-w-full text-center md:max-w-[40rem] md:mx-auto space-y-4">
           <Heading
+            as="h2"
             size="8"
             weight="medium"
             className="text-white/80 md:w-96 inline-block max-md:max-w-lg max-md:mx-auto"

apps/web/src/components/sections/primitives.tsx

@@ -6,7 +6,7 @@ const PrimitivesSection = () => {
   return (
     <section className="relative md:my-40 md:py-20 space-y-16 max-md:px-6">
       <div className="flex flex-col gap-4">
-        <Heading size="8" weight="medium" className="text-white/80">
+        <Heading as="h2" size="8" weight="medium" className="text-white/80">
           Battle-tested Primitives
         </Heading>
         <Text size="5" className="opacity-70">

apps/web/src/components/sections/tools/index.tsx

@@ -9,7 +9,7 @@ const ToolsSection = () => {
     <section className="relative text-center space-y-16 sm:space-y-24 max-md:mt-44 max-md:mb-24 my-56 max-md:px-4">
       <div className="space-y-8">
         <div className="max-w-full text-center space-y-6">
-          <Heading size="8" weight="medium" className="text-white/80">
+          <Heading as="h2" size="8" weight="medium" className="text-white/80">
             Built-in deliverability tools
           </Heading>
           <div className="sm:px-20 md:max-w-2xl md:mx-auto">

apps/web/src/components/sections/tools/interactive-demo.tsx

@@ -73,6 +73,7 @@ export const InteractiveDemo = () => {
 
             <div className="relative flex flex-col gap-1.5">
               <Heading
+                as="h3"
                 size="5"
                 weight="medium"
                 className="text-white/80 group-data-[active='true']:text-white group-hover:text-white transition-colors"

apps/web/src/components/template.tsx

@@ -63,7 +63,7 @@ export function Template({
         width="450"
       />
       <div className="p-4">
-        <Heading size="2" weight="medium">
+        <Heading as="h2" size="2" weight="medium">
           {name}
         </Heading>
         <div className="mt-2 flex flex-row gap-2">