refactor: create default layout for common pages

src/app/blog/page.tsx

@@ -1,7 +1,6 @@
 import { Metadata } from 'next'
 
-import Header from '@/components/blocks/header/header'
-import Footer from '@/components/blocks/footer/footer'
+import DefaultLayout from '@/components/layouts/DefaultLayout'
 import UnderConstruction from '@/components/blocks/error/under-construction'
 
 export const metadata: Metadata = {
@@ -10,12 +9,10 @@ export const metadata: Metadata = {
 
 export default function Blog() {
   return (
-    <div className="max-w-screen-lg w-full mx-auto px-6">
-      <Header />
+    <DefaultLayout>
       <main className="flex justify-center items-center h-[85vh]">
         <UnderConstruction />
       </main>
-      <Footer />
-    </div>
+    </DefaultLayout>
   )
 }

src/app/not-found.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from 'next'
 
-import Header from '@/components/blocks/header/header'
+import DefaultLayout from '@/components/layouts/DefaultLayout'
 import PageNotFound from '@/components/blocks/error/page-not-found'
 
 export const metadata: Metadata = {
@@ -9,11 +9,10 @@ export const metadata: Metadata = {
 
 export default function NotFound() {
   return (
-    <div className="max-w-screen-lg w-full mx-auto px-6">
-      <Header />
+    <DefaultLayout>
       <main className="flex justify-center items-center h-[85vh]">
         <PageNotFound />
       </main>
-    </div>
+    </DefaultLayout>
   )
 }

src/app/page.tsx

@@ -1,19 +1,16 @@
-import Header from '@/components/blocks/header/header'
-import Footer from '@/components/blocks/footer/footer'
+import DefaultLayout from '@/components/layouts/DefaultLayout'
+import IntroductionSection from '@/components/blocks/home/introduction-section'
 import AboutSection from '@/components/blocks/home/about-section'
 import ContactSection from '@/components/blocks/home/contact-section'
-import IntroductionSection from '@/components/blocks/home/introduction-section'
 
 export default function Home() {
   return (
-    <div className="max-w-screen-lg w-full mx-auto px-6">
-      <Header />
+    <DefaultLayout>
       <main className="flex flex-col gap-24 mb-24">
         <IntroductionSection />
         <AboutSection />
         <ContactSection />
       </main>
-      <Footer />
-    </div>
+    </DefaultLayout>
   )
 }

src/app/projects/page.tsx

@@ -1,7 +1,6 @@
 import { Metadata } from 'next'
 
-import Header from '@/components/blocks/header/header'
-import Footer from '@/components/blocks/footer/footer'
+import DefaultLayout from '@/components/layouts/DefaultLayout'
 import UnderConstruction from '@/components/blocks/error/under-construction'
 
 export const metadata: Metadata = {
@@ -10,12 +9,10 @@ export const metadata: Metadata = {
 
 export default function Projects() {
   return (
-    <div className="max-w-screen-lg w-full mx-auto px-6">
-      <Header />
+    <DefaultLayout>
       <main className="flex justify-center items-center h-[85vh]">
         <UnderConstruction />
       </main>
-      <Footer />
-    </div>
+    </DefaultLayout>
   )
 }

src/components/blocks/footer/footer.tsx

@@ -3,7 +3,7 @@ import Package from '../../../../package.json'
 
 export default function Footer() {
   return (
-    <footer className="flex flex-col gap-1 items-center mb-8">
+    <footer className="flex flex-col gap-1 items-center mb-8 text-xs md:text-base">
       <p className="font-semibold text-center">Site Version: {Package.version}</p>
       <p className="font-semibold text-center">
         Created with ❤️ by <Anchor href={Package.author.url}>{Package.author.nickname}</Anchor>

src/components/layouts/DefaultLayout.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react'
+
+import Header from '@/components/blocks/header/header'
+import Footer from '@/components/blocks/footer/footer'
+
+export interface Props {
+  children: ReactNode
+}
+
+export default function DefaultLayout({ children }: Props) {
+  return (
+    <div className="max-w-screen-lg w-full mx-auto px-6">
+      <Header />
+      {children}
+      <Footer />
+    </div>
+  )
+}