Migrate about, updates, and roadmap pages to App Router

- Create separate pages for about, updates, and roadmap in App Router
- Use correct translation keys from common namespace (page.titles, page.descriptions)
- Remove unstable_setRequestLocale as it's not needed
- Each page has its own client component with segmented control navigation
- Fixes 404 errors for about-related pages

app/[locale]/about/AboutPageClient.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter, usePathname } from '~/i18n/navigation'
+import { AboutTabs } from '~/utils/enums'
+
+import AboutPage from '~/components/about/AboutPage'
+import UpdatesPage from '~/components/about/UpdatesPage'
+import RoadmapPage from '~/components/about/RoadmapPage'
+import SegmentedControl from '~/components/common/SegmentedControl'
+import Segment from '~/components/common/Segment'
+
+export default function AboutPageClient() {
+  const t = useTranslations('common')
+  const router = useRouter()
+  const pathname = usePathname()
+  
+  const [currentTab, setCurrentTab] = useState<AboutTabs>(AboutTabs.About)
+  
+  useEffect(() => {
+    const parts = pathname.split('/')
+    const lastPart = parts[parts.length - 1]
+    
+    switch (lastPart) {
+      case 'about':
+        setCurrentTab(AboutTabs.About)
+        break
+      case 'updates':
+        setCurrentTab(AboutTabs.Updates)
+        break
+      case 'roadmap':
+        setCurrentTab(AboutTabs.Roadmap)
+        break
+      default:
+        setCurrentTab(AboutTabs.About)
+    }
+  }, [pathname])
+  
+  function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
+    const value = event.target.value
+    router.push(`/${value}`)
+    
+    switch (value) {
+      case 'about':
+        setCurrentTab(AboutTabs.About)
+        break
+      case 'updates':
+        setCurrentTab(AboutTabs.Updates)
+        break
+      case 'roadmap':
+        setCurrentTab(AboutTabs.Roadmap)
+        break
+    }
+  }
+  
+  const currentSection = () => {
+    switch (currentTab) {
+      case AboutTabs.About:
+        return <AboutPage />
+      case AboutTabs.Updates:
+        return <UpdatesPage />
+      case AboutTabs.Roadmap:
+        return <RoadmapPage />
+    }
+  }
+  
+  return (
+    <section>
+      <SegmentedControl blended={true}>
+        <Segment
+          groupName="about"
+          name="about"
+          selected={currentTab == AboutTabs.About}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.about')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="updates"
+          selected={currentTab == AboutTabs.Updates}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.updates')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="roadmap"
+          selected={currentTab == AboutTabs.Roadmap}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.roadmap')}
+        </Segment>
+      </SegmentedControl>
+      {currentSection()}
+    </section>
+  )
+}

app/[locale]/about/page.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
+import AboutPageClient from './AboutPageClient'
+
+export async function generateMetadata({
+  params: { locale }
+}: {
+  params: { locale: string }
+}): Promise<Metadata> {
+  const t = await getTranslations({ locale, namespace: 'common' })
+  
+  return {
+    title: t('page.titles.about'),
+    description: t('page.descriptions.about')
+  }
+}
+
+export default async function AboutPage({
+  params: { locale }
+}: {
+  params: { locale: string }
+}) {
+  return (
+    <div id="About">
+      <AboutPageClient />
+    </div>
+  )
+}

app/[locale]/roadmap/RoadmapPageClient.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter } from '~/i18n/navigation'
+import { AboutTabs } from '~/utils/enums'
+
+import AboutPage from '~/components/about/AboutPage'
+import UpdatesPage from '~/components/about/UpdatesPage'
+import RoadmapPage from '~/components/about/RoadmapPage'
+import SegmentedControl from '~/components/common/SegmentedControl'
+import Segment from '~/components/common/Segment'
+
+export default function RoadmapPageClient() {
+  const t = useTranslations('common')
+  const router = useRouter()
+  const [currentTab] = useState<AboutTabs>(AboutTabs.Roadmap)
+  
+  function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
+    const value = event.target.value
+    router.push(`/${value}`)
+  }
+  
+  const currentSection = () => {
+    switch (currentTab) {
+      case AboutTabs.About:
+        return <AboutPage />
+      case AboutTabs.Updates:
+        return <UpdatesPage />
+      case AboutTabs.Roadmap:
+        return <RoadmapPage />
+    }
+  }
+  
+  return (
+    <section>
+      <SegmentedControl blended={true}>
+        <Segment
+          groupName="about"
+          name="about"
+          selected={currentTab == AboutTabs.About}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.about')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="updates"
+          selected={currentTab == AboutTabs.Updates}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.updates')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="roadmap"
+          selected={currentTab == AboutTabs.Roadmap}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.roadmap')}
+        </Segment>
+      </SegmentedControl>
+      {currentSection()}
+    </section>
+  )
+}

app/[locale]/roadmap/page.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
+import RoadmapPageClient from './RoadmapPageClient'
+
+export async function generateMetadata({
+  params: { locale }
+}: {
+  params: { locale: string }
+}): Promise<Metadata> {
+  const t = await getTranslations({ locale, namespace: 'common' })
+  
+  return {
+    title: t('page.titles.roadmap'),
+    description: t('page.descriptions.roadmap')
+  }
+}
+
+export default async function RoadmapPage({
+  params: { locale }
+}: {
+  params: { locale: string }
+}) {
+  return (
+    <div id="About">
+      <RoadmapPageClient />
+    </div>
+  )
+}

app/[locale]/updates/UpdatesPageClient.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter } from '~/i18n/navigation'
+import { AboutTabs } from '~/utils/enums'
+
+import AboutPage from '~/components/about/AboutPage'
+import UpdatesPage from '~/components/about/UpdatesPage'
+import RoadmapPage from '~/components/about/RoadmapPage'
+import SegmentedControl from '~/components/common/SegmentedControl'
+import Segment from '~/components/common/Segment'
+
+export default function UpdatesPageClient() {
+  const t = useTranslations('common')
+  const router = useRouter()
+  const [currentTab] = useState<AboutTabs>(AboutTabs.Updates)
+  
+  function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
+    const value = event.target.value
+    router.push(`/${value}`)
+  }
+  
+  const currentSection = () => {
+    switch (currentTab) {
+      case AboutTabs.About:
+        return <AboutPage />
+      case AboutTabs.Updates:
+        return <UpdatesPage />
+      case AboutTabs.Roadmap:
+        return <RoadmapPage />
+    }
+  }
+  
+  return (
+    <section>
+      <SegmentedControl blended={true}>
+        <Segment
+          groupName="about"
+          name="about"
+          selected={currentTab == AboutTabs.About}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.about')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="updates"
+          selected={currentTab == AboutTabs.Updates}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.updates')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="roadmap"
+          selected={currentTab == AboutTabs.Roadmap}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.roadmap')}
+        </Segment>
+      </SegmentedControl>
+      {currentSection()}
+    </section>
+  )
+}

app/[locale]/updates/page.tsx

@@ -0,0 +1,28 @@
+import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
+import UpdatesPageClient from './UpdatesPageClient'
+
+export async function generateMetadata({
+  params: { locale }
+}: {
+  params: { locale: string }
+}): Promise<Metadata> {
+  const t = await getTranslations({ locale, namespace: 'common' })
+  
+  return {
+    title: t('page.titles.updates'),
+    description: t('page.descriptions.updates')
+  }
+}
+
+export default async function UpdatesPage({
+  params: { locale }
+}: {
+  params: { locale: string }
+}) {
+  return (
+    <div id="About">
+      <UpdatesPageClient />
+    </div>
+  )
+}