refactor: update heading levels and improve markup in various components

components/Card.vue

@@ -13,9 +13,9 @@ defineProps<CardProps>()
     <header v-if="title || icon || $slots.header">
       <slot name="header">
         <div class="card-header flex items-center justify-between">
-          <Heading v-if="title" type="h6" class="uppercase">
+          <span v-if="title" class="uppercase">
             {{ title }}
-          </Heading>
+          </span>
           <div v-if="icon" class="icon ml-a">
             {{ icon }}
           </div>

components/Ecosystem.vue

@@ -15,7 +15,7 @@ const discord = useSocialNetwork('discord')
     ]"
   />
   <Section class="ecosystem mt-12" full-width>
-    <Heading type="h4" class="text-center">
+    <Heading type="h3" class="text-center">
       THE STORACHA ECOSYSTEM
     </Heading>
     <EcosystemGrid class="mt-12" :limit="3" />

components/Footer.vue

@@ -16,7 +16,7 @@ const { getStarted, resources } = useActions('footerLinks')
           <div class="grid cols-1 gap-6 lg:cols-2">
             <div>
               <div class="header align-middle">
-                <Heading class="font-medium" type="h5">
+                <Heading class="font-medium" type="h4">
                   Resources
                 </Heading>
               </div>
@@ -30,7 +30,7 @@ const { getStarted, resources } = useActions('footerLinks')
             </div>
             <div>
               <div class="header">
-                <Heading class="font-medium" type="h5">
+                <Heading class="font-medium" type="h4">
                   Getting Started
                 </Heading>
               </div>

components/HeroHome.vue

@@ -1,27 +1,45 @@
 <script setup lang="ts">
-import type { SectionHeaderProps } from './SectionHeader.vue'
-import { useForwardProps } from 'radix-vue'
+interface HeroProps {
+  title: string
+  eyebrow?: string
+  description: string
+}
 
-interface HeroProps extends SectionHeaderProps {}
-const props = defineProps<HeroProps>()
-const forwardProps = useForwardProps(reactiveOmit(props, ['description']))
+defineProps<HeroProps>()
 </script>
 
 <template>
   <HeroBase class="home min-h-100vh">
     <template #left>
-      <SectionHeader v-bind="forwardProps" class="color-brand-3 !gap-10">
-        <Heading type="h4" class="uppercase !text-balance">
-          {{ description }}
+      <div class="section-header color-brand-3 !gap-10">
+        <span v-if="eyebrow" class="text-2xl uppercase">
+          {{ eyebrow }}
+        </span>
+        <Heading v-if="title" type="h1" class="max-w-22ch text-pretty font-medium">
+          {{ title }}
         </Heading>
-      </SectionHeader>
+        <p class="text-2xl uppercase !text-balance">
+          {{ description }}
+        </p>
+      </div>
     </template>
     <template #right>
       <div class="flex items-center justify-center md:hidden">
         <div class="aspect-ratio-square overflow-clip b-5 b-brand-3 rounded-[40px]">
-          <img class="h-full w-auto object-cover object-[63%_50%]" src="/img/hero/hero-fixed.webp" :alt="title" aria-hidden="true">
+          <img
+            class="h-full w-auto object-cover object-[63%_50%]"
+            src="/img/hero/hero-fixed.webp"
+            :alt="title"
+            aria-hidden="true"
+          >
         </div>
       </div>
     </template>
   </HeroBase>
 </template>
+
+<style lang="postcss" scoped>
+.section-header {
+  @apply flex flex-col gap-6;
+}
+</style>

components/KeyFeatures.vue

@@ -62,7 +62,7 @@ const cards = [{
         <Heading type="h3" class="font-medium">
           {{ card.title }}
         </Heading>
-        <Heading type="h5" class="mt-6 uppercase">
+        <Heading type="h4" class="mt-6 uppercase">
           {{ card.subTitle }}
         </Heading>
         <p class="mt-6 text-sm p1 sm:text-base">

components/PricingCard.vue

@@ -18,12 +18,12 @@ const { currency = '$' } = defineProps<PricingCardProps>()
 <template>
   <Card :title="tier" :icon="icon" inherit-color :ribbon="ribbon">
     <div class="pricing-inner flex flex-col gap-8">
-      <Heading type="h1" class="font-medium">
+      <Heading type="h2" class="font-medium">
         {{ currency }}{{ price }}/{{ unit }}
       </Heading>
       <ul class="flex flex-col gap-4">
         <li v-for="[feat, desc], i in features" :key="i">
-          <Heading type="h4">
+          <Heading type="h3">
             {{ feat }}
           </Heading>
           <p v-if="desc" class="text-sm font-sans">
@@ -32,7 +32,7 @@ const { currency = '$' } = defineProps<PricingCardProps>()
         </li>
       </ul>
       <div class="pricing-actions">
-        <Btn v-bind="action" v-if="action" />
+        <Btn v-if="action" v-bind="action" />
       </div>
     </div>
   </Card>

components/SectionHeader.vue

@@ -14,10 +14,10 @@ defineProps<SectionHeaderProps>()
 
 <template>
   <div class="section-header" :class="{ 'text-center': center }">
-    <Heading v-if="eyebrow" type="h4" class="uppercase">
+    <span v-if="eyebrow" class="text-2xl uppercase">
       {{ eyebrow }}
-    </Heading>
-    <Heading v-if="title" type="h1" class="max-w-22ch text-pretty font-medium" :class="{ 'mx-a max-w-35ch': center }">
+    </span>
+    <Heading v-if="title" type="h2" class="max-w-22ch text-pretty font-medium" :class="{ 'mx-a max-w-35ch': center }">
       {{ title }}
     </Heading>
     <p v-if="description" class="max-w-50ch text-pretty prose p1">