fix: reduce blog header height (#114)

Remove the empty hero area that currently makes it look like there's
nothing on the page when you first arrive. IMO the page looks
empty/unfinished and since the actual content is below the "fold" I
think we're maybe missing some clicks/views because of it.

<img width="1582" alt="Screenshot 2025-01-30 at 12 57 44"
src="https://github.com/user-attachments/assets/227fc3cf-eaf3-4ddc-98c1-0cc996977683"
/>
<img width="1581" alt="Screenshot 2025-01-30 at 12 58 49"
src="https://github.com/user-attachments/assets/f7da6222-9f4d-45f9-abe6-e8a930b5aa82"
/>

pages/blog.vue

@@ -5,18 +5,18 @@ const medium = useSocialNetwork('medium')
 
 <template>
   <TransitionProvider>
-    <Section class="bg-brand-4">
-      <Hero
-        class="min-h-150"
-        eyebrow="Blazing Hot News"
-        title="Storacha Blog"
-        description="The latest and greatest from the Storacha team."
-        :actions="[
-          { text: 'Follow on Medium', href: medium?.href },
-        ]"
-      />
-    </Section>
     <Section class="bg-white" padding>
+      <div class="py-4 flex md:flex-row flex-col mt-20">
+        <div class="flex-none mb-4 md:mb-0">
+          <Heading type="h4" class="uppercase color-brand-3">
+            Blazing Hot News
+          </Heading>
+          <p class="max-w-50ch text-pretty prose p1 color-brand-3">The latest and greatest from the Storacha team.</p>
+        </div>
+        <div class="flex-auto md:text-right">
+          <Btn text="Follow on Medium" :href="medium?.href" />
+        </div>
+      </div>
       <div class="blog-cell grid gap-4 lg:cols-3 md:cols-2">
         <BlogCard
           v-for="item in blog?.items"