Add post card margin

* Add about page
* Add github icon on footer

components/Footer.tsx

@@ -1,14 +1,25 @@
 import { FC } from 'react';
+import { FiGithub } from 'react-icons/fi';
 
 const nowDay = new Date().getFullYear();
 
 const Footer: FC = () => {
   return (
     <>
-      <footer className="max-w-6xl px-10 mx-auto lg:px-0">
+      <footer className="max-w-6xl px-10 mx-auto xl:px-0">
         <div className="h-[2px] bg-slate-500"></div>
-        <div className="py-4">
-          &copy; 2022-{nowDay} Powered by Next.js 💙 xfy
+
+        <div className="flex items-center justify-between py-4">
+          <div>&copy; 2022-{nowDay} Powered by Next.js 💙 xfy</div>
+          <div>
+            <a
+              href="https://github.com/DefectingCat"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <FiGithub />
+            </a>
+          </div>
         </div>
       </footer>
     </>

components/NavBar.tsx

@@ -17,6 +17,11 @@ const txtMenu = [
     name: 'Blog',
     path: '/blog',
   },
+  {
+    id: 2,
+    name: 'About',
+    path: '/about',
+  },
 ];
 
 const HeadBar: FC = () => {
@@ -27,7 +32,7 @@ const HeadBar: FC = () => {
       <header
         className={cn(
           'flex justify-between mx-auto',
-          'max-w-6xl p-6 lg:px-0 h-[84px]',
+          'max-w-6xl p-6 xl:px-0 h-[84px]',
           'items-center relative'
         )}
       >

components/PostCard.tsx

@@ -18,7 +18,8 @@ const PostCard: FC<Props> = ({ post }) => {
               'hover:bg-sky-100 hover:bg-opacity-50',
               // 'hover:bg-rua-gray-100 hover:bg-opacity-10',
               'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
-              'flex items-center justify-between'
+              'flex items-center justify-between',
+              'mb-4'
             )}
           >
             <div>