feat: render new about page [skip ci]

src/modules/page/PageHeader.tsx

@@ -143,6 +143,16 @@ function MainNavigation(): JSX.Element {
                             </MenuLink>
                           )}
                         </Menu.Item>
+                        <Menu.Item>
+                          {({ active }) => (
+                            <MenuLink
+                              href={{ pathname: '/about/implementation' }}
+                              highlighted={active}
+                            >
+                              About the implementation
+                            </MenuLink>
+                          )}
+                        </Menu.Item>
                         <Menu.Item>
                           {({ active }) => (
                             <MenuLink

src/pages/about/implementation.tsx

+import type { GetStaticPropsResult } from 'next'
+import { getLastUpdatedTimestamp } from '@/api/git'
+import AboutImplementationScreen from '@/screens/about/AboutImplementationScreen'
+
+export type PageProps = {
+  lastUpdatedAt: string
+}
+
+/**
+ * About implementation page.
+ */
+export default function AboutImplementationPage(props: PageProps): JSX.Element {
+  return <AboutImplementationScreen {...props} />
+}
+
+export async function getStaticProps(): Promise<
+  GetStaticPropsResult<PageProps>
+> {
+  const pageId = 'implementation'
+  const lastUpdatedAt = (await getLastUpdatedTimestamp(pageId)).toISOString()
+  return { props: { lastUpdatedAt } }
+}

src/screens/about/AboutImplementationScreen.tsx

+import type { PageProps } from '@/pages/about/index'
+import AboutLayout from '@/screens/about/AboutLayout'
+import Content, { metadata } from '@@/content/pages/implementation.mdx'
+
+type ContentMetadata = {
+  title: string
+}
+
+const meta = metadata as ContentMetadata
+
+/**
+ * About service screen.
+ */
+export default function AboutImplementationScreen({
+  lastUpdatedAt,
+}: PageProps): JSX.Element {
+  return (
+    <AboutLayout
+      breadcrumb={{ pathname: '/about/implementation', label: 'About' }}
+      title={meta.title}
+      lastUpdatedAt={lastUpdatedAt}
+    >
+      <Content />
+    </AboutLayout>
+  )
+}

src/screens/about/AboutLayout.tsx

@@ -17,6 +17,7 @@ import { useActiveLink } from '@/utils/useActiveLink'
 const links = [
   { label: 'About the project', pathname: '/about' },
   { label: 'About the service', pathname: '/about/service' },
+  { label: 'About the implementation', pathname: '/about/implementation' },
   { label: 'About the team', pathname: '/about/team' },
 ]