fix: missing component Image and modify block css style

components/WebMention.js

@@ -1,6 +1,7 @@
 import BLOG from '@/blog.config'
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
+import Image from 'next/image'
 
 /**
  * 评论插件
@@ -142,8 +143,11 @@ const WebMentionBlock = ({ frontMatter }) => {
   const tweet = `${frontMatter.title} by @siygle ${url}`
 
   return (
-    <div className='post-footer'>
-      <div className='post-footer-intro'>
+    <div className='webmention-block'>
+      <h1 className='webmention-header'>
+        powered by WebMention
+      </h1>
+      <div className='webmention-block-intro'>
         This post is using{' '}
         <a target="_blank" rel='noreferrer' href="https://webmention.io">
           WebMention.io

styles/globals.css

@@ -225,12 +225,19 @@ nav {
 }
 
 /* Webmention style */
-.post-footer {
+.webmention-block {
   background: rgba(0, 116, 222, .2);
   padding: 1rem 2rem;
   border-radius: 5px;
 }
 
+.webmention-header {
+  font-style: italic;
+  font-weight: 700;
+  font-size: 16px;
+  margin-bottom: .5rem;
+}
+
 .webmention {
   margin-top: 1rem;
   padding-top: 1rem;