Add about

pages/about.tsx

@@ -1,13 +1,42 @@
 import dynamic from 'next/dynamic';
 import { NextPageWithLayout } from 'types';
+import avatar from 'public/images/img/avatar.svg';
+import Image from 'next/image';
+import classNames from 'classnames';
 
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
 
 const About: NextPageWithLayout = () => {
   return (
     <>
-      <main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
-        <div className="w-full max-w-3xl px-10 text-2xl lg:px-0"></div>
+      <main className="h-[calc(100vh-142px)] flex flex-col">
+        <div
+          className={classNames(
+            'flex items-center max-w-3xl',
+            'px-10 py-4 mx-auto lg:px-0 lg:py-10'
+          )}
+        >
+          <div className="w-16 h-16 lg:w-[72px] lg:h-[72px]">
+            <Image
+              src={avatar}
+              alt="Avatar"
+              priority
+              width={72}
+              height={72}
+              className="rounded-full"
+            />
+          </div>
+
+          <div className="pl-4 text-xl lg:text-2xl lg:pl-10">
+            <h1 className="font-semibold font-Barlow">
+              Arthur / Defectink / xfy
+            </h1>
+            <div className="h-[1px] rounded-lg bg-gray-400"></div>
+            <div className="text-base lg:text-lg">
+              Long may the sun shine ☀️
+            </div>
+          </div>
+        </div>
       </main>
     </>
   );

pages/p/setting-up-docsearch-for-nextjs.mdx

@@ -40,7 +40,7 @@ Although it's still can plug it to DocSearch v3. But now it's deprecated.
 
 They introduct the [Algolia Crawler web interface](https://crawler.algolia.com/admin/users/login) to manage the crawler.
 
-But i can login with my Algolia account.
+But i can't login with my Algolia account.
 
 <Image src={image1} alt="Can't login to Algolia Crawler" />