feat(about): about page added

Example About Page, filled with 3 Lorems. Tests will be added soon, still on progress

src/pages/about.tsx

@@ -0,0 +1,33 @@
+import { Meta } from '@/layouts/Meta';
+import { Main } from '@/templates/Main';
+
+const About = () => (
+  <Main
+    meta={
+      <Meta
+        title="about Juun"
+        description="description about this page, explain packages & techs used."
+      />
+    }
+  >
+    <p>
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis
+      delectus dolore inventore repellendus suscipit maiores veritatis
+      doloribus, architecto deleniti error ratione libero vero autem est
+      temporibus fugiat sunt ut eos.
+    </p>
+    <p>
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic dolores quos
+      voluptatibus tenetur cumque, unde porro quaerat veritatis similique
+      possimus cupiditate. Doloribus expedita iure qui delectus dolorem optio
+      magni repellendus?
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem dolor
+      nostrum fuga et. Aliquid, vitae totam. Ad eligendi voluptatem debitis
+      atque fuga! Molestiae, sequi eos natus ex necessitatibus corrupti ratione.
+    </p>
+  </Main>
+);
+
+export default About;

src/templates/Main.tsx

@@ -14,7 +14,7 @@ const Main = (props: IMainProps) => (
     {props.meta}
 
     <div className="mx-auto">
-      <header className="fixed left-0 top-0 z-10 flex w-full items-center justify-between border-b border-gray-300 bg-gradient-to-b from-zinc-200 p-8 backdrop-blur-xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit">
+      <header className="fixed left-0 top-0 z-10 flex w-full items-center justify-between border-b border-gray-300 bg-gradient-to-b from-zinc-200 p-4 backdrop-blur-xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:p-8">
         <div className="flex items-baseline gap-4">
           <h1 className="text-xl font-bold text-gray-900 lg:text-3xl">
             <Link href="/">{AppConfig.title}</Link>
@@ -48,7 +48,7 @@ const Main = (props: IMainProps) => (
           />
         </a>
       </header>
-      <main className="flex min-h-screen flex-col items-center justify-between p-24 pt-48">
+      <main className="flex min-h-screen flex-col items-center justify-between p-8 pt-32 lg:p-12 lg:pt-48">
         {props.children}
       </main>