Add layouts

2023-07-14 22:08:47 +09:00
parent 0c0830d68d
commit 06ff200ed3
19 changed files with 1113 additions and 766 deletions
@@ -6,6 +6,8 @@
    "battlesuits": "Battlesuits",
    "weapons": "Weapons",
    "stigmata": "Stigmata",
+    "stigmata-set": "Stigmata (Set)",
+    "stigmata-single": "Stigmata (Single)",
    "elfs": "ELFs",
    "elysian-realm": "Elysian Realm",
    "wip": "WIP",
@@ -44,8 +46,15 @@
  },
  "stigmata-list": {
    "description": "Stigmata list of Honkai 3rd",
-    "stigmata": "Stigmata",
-    "set-list": "Set List"
+    "stigmata-single": "Stigmata (Single)",
+    "set-list": "Set List",
+    "show-set-list": "Show Stigmata Set List"
+  },
+  "stigmata-set-list": {
+    "description": "Stigmata Set list of Honkai 3rd",
+    "stigmata-set": "Stigmata (Set)",
+    "set-list": "Set List",
+    "show-signle-list": "Show Single Stigmata List"
  },
  "stigmata-show": {
    "stigmata": "Stigmata",
@@ -7,6 +7,8 @@
    "versions": "업데이트",
    "weapons": "무기",
    "stigmata": "성흔",
+    "stigmata-set": "성흔 (세트)",
+    "stigmata-single": "성흔 (단일)",
    "elfs": "인형",
    "wip": "작업중",
    "media": "미디어",
@@ -34,8 +36,15 @@
  },
  "stigmata-list": {
    "description": "붕괴 3rd 성흔 목록",
-    "stigmata": "성흔",
-    "set-list": "세트 일람"
+    "stigmata-single": "성흔 (단일)",
+    "set-list": "세트 일람",
+    "show-set-list": "단일 성흔 목록"
+  },
+  "stigmata-set-list": {
+    "description": "붕괴 3rd 성흔 세트 목록",
+    "stigmata-set": "성흔 (세트)",
+    "set-list": "세트 일람",
+    "show-signle-list": "단일 성흔 목록"
  },
  "stigmata-show": {
    "stigmata": "성흔",
@@ -1,16 +1,7 @@
 /** @jsxImportSource theme-ui */
 import { mdiClose, mdiMenuSwap } from '@mdi/js'
 import Icon from '@mdi/react'
-import {
-  NavLink,
-  Heading,
-  Text,
-  Box,
-  Flex,
-  IconButton,
-  Switch,
-  Label,
-} from '@theme-ui/components'
+import { NavLink, Heading, Text, Box, Flex, IconButton, Switch, Label } from '@theme-ui/components'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import { useColorMode } from 'theme-ui'
@@ -30,7 +21,7 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
  return (
    <Box
      sx={{
-        p: 2,
+        p: 2
      }}
    >
      <Flex
@@ -40,38 +31,32 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
          top: 0,
          height: 50,
          ml: -2,
-          mt: -2,
+          mt: -2
        }}
      >
        <IconButton sx={{ width: 50, height: 50 }} onClick={close}>
          <Icon path={mdiClose} size={1} />
        </IconButton>
      </Flex>
-      <NextLink href='/' passHref>
+      <NextLink href="/" passHref>
        <NavLink mb={2}>Abyss Lab</NavLink>
      </NextLink>
      <Heading mb={3}>
-        <NextLink href='/honkai3rd' passHref>
+        <NextLink href="/honkai3rd" passHref>
          <NavLink>{t('common.honkai-3rd')}</NavLink>
        </NextLink>
      </Heading>

      <Box sx={{ mb: 3 }}>
-        <NavItem target='versions' />
-        <NavItem target='battlesuits' />
-        <NavItem target='weapons' />
-        <NavItem target='stigmata' />
-        <NavItem target='elfs' />
-        <NavItem target='elysian-realm' />
-        <NavItem target='media' />
+        <NavItem target="battlesuits" />
+        <NavItem target="weapons" />
+        <NavItem target="stigmata" />
+        <NavItem target="elfs" />
+        <NavItem target="elysian-realm" />
+        <NavItem target="media" />
      </Box>

-      <NextLink
-        href={{ pathname, query }}
-        locale={locale === 'en-US' ? 'ko-KR' : 'en-US'}
-        as={asPath}
-        passHref
-      >
+      <NextLink href={{ pathname, query }} locale={locale === 'en-US' ? 'ko-KR' : 'en-US'} as={asPath} passHref>
        <NavLink
          sx={{
            overflow: 'hidden',
@@ -80,11 +65,11 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
            display: 'flex',
            alignItems: 'center',
            px: 2,
-            mb: 2,
+            mb: 2
          }}
        >
          <Text>{locale === 'en-US' ? '🇺🇸 English(US)' : '🇰🇷 한국어'}</Text>
-          <Icon path={mdiMenuSwap} size='20px' />
+          <Icon path={mdiMenuSwap} size="20px" />
        </NavLink>
      </NextLink>
      <Box>
@@ -93,23 +78,23 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'left',
-            mb: 2,
+            mb: 2
          }}
        >
          <Box>
            <Switch
              checked={colorMode === 'dark'}
-              onChange={(event) => {
+              onChange={event => {
                setColorMode(event.target.checked ? 'dark' : 'default')
              }}
              sx={{
                width: 50,
                'input ~ &': {
-                  backgroundColor: 'muted',
+                  backgroundColor: 'muted'
                },
                'input:checked ~ &': {
-                  backgroundColor: 'primary',
-                },
+                  backgroundColor: 'primary'
+                }
              }}
            />
          </Box>
@@ -122,28 +107,22 @@ const Honkai3rdNavigator = ({ close }: Honkai3rdNavigatorProps) => {

 export default Honkai3rdNavigator

+type NavItemTarget = 'battlesuits' | 'stigmata' | 'weapons' | 'elfs' | 'elysian-realm' | 'media'
 interface NavItemProps {
-  target:
-    | 'versions'
-    | 'battlesuits'
-    | 'stigmata'
-    | 'weapons'
-    | 'elfs'
-    | 'elysian-realm'
-    | 'media'
+  target: NavItemTarget
 }

 const NavItem = ({ target }: NavItemProps) => {
  const { t } = useTranslation()
  return (
-    <NextLink href={`/honkai3rd/${target}`} passHref>
+    <NextLink href={getHref(target)} passHref>
      <NavLink
        sx={{
          fontFamily: 'monospace',
          display: 'flex',
          alignItems: 'center',
          overflow: 'hidden',
-          p: 1,
+          p: 1
        }}
      >
        <SquareImageBox size={30} mr={1} src={getIconByTarget(target)} />
@@ -151,7 +130,7 @@ const NavItem = ({ target }: NavItemProps) => {
          sx={{
            overflow: 'hidden',
            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
+            whiteSpace: 'nowrap'
          }}
        >
          {t(`common.${target}`)}
@@ -171,3 +150,17 @@ function getIconByTarget(target: string) {
      return `${assetsBucketBaseUrl}/honkai3rd/nav-icons/${target}.png`
  }
 }
+
+function getHref(target: NavItemTarget) {
+  switch (target) {
+    case 'battlesuits':
+    case 'weapons':
+    case 'elfs':
+      return `/honkai3rd/v2/${target}`
+    case 'stigmata':
+      return '/honkai3rd/v2/stigmata-sets'
+    case 'elysian-realm':
+      return '/honkai3rd/v2/er'
+  }
+  return `/honkai3rd/${target}`
+}
@@ -11,12 +11,7 @@ const BattlesuitCatalogItemCard = ({ battlesuit, label = false }: BattlesuitCata
  return (
    <Box
      sx={{
-        mb: 2,
-        transform: 'scale(1)',
-        transition: 'transform 200ms ease-in-out',
-        '&:hover': {
-          transform: 'scale(1.05)'
-        }
+        mb: 2
      }}
    >
      <BattlesuitAvatarIcon battlesuit={battlesuit} />
@@ -11,12 +11,12 @@ const starSize = 16

 const StigmaIcon = ({ icon: fileName, rarity }: StigmaIconProps) => {
  return (
-    <Box sx={{ width: 112 }}>
+    <Box sx={{ width: 96 }}>
      <Box
        sx={{
          borderRadius: 4,
-          width: (128 / 8) * 7,
-          height: (112 / 8) * 7,
+          width: (128 / 8) * 6,
+          height: (112 / 8) * 6,
          background: ` no-repeat 100% 100% /100% url(${assetsBucketBaseUrl}/raw/stigmataicons/${fileName}.png), ${getBackgroundByRarity(
            rarity
          )}`
@@ -68,7 +68,7 @@ export function replaceNewLine(value: string) {
  if (value == null) {
    return ''
  }
-  return value.replace(/\\n/g, '\n')
+  return value.replace(/\\n/g, '\n').trim()
 }

 function convertToPercentage(value: number) {
@@ -22,125 +22,143 @@ import StarIcon from '../../../../components/v2/StarIcon'
 import ChibiIcon from '../../../../components/v2/ChibiIcon'
 import WeaponTypeIcon from '../../../../components/v2/WeaponTypeIcon'
 import { sortBattlesuitSkill } from '../../../../lib/v2/data/utils'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import { getI18NProps } from '../../../../server/i18n'
+import Head from '../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'

 interface BattlesuitShowPageProps {
  battlesuit: Battlesuit
 }

 const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
+  const { t } = useTranslation()
  return (
-    <Box>
-      <Heading as="h1">{battlesuit.fullName}</Heading>
+    <Honkai3rdLayout>
+      <Head
+        title={`${battlesuit.fullName} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={`${t('common.honkai-3rd')} ${t('battlesuit-show.battlesuit')} / ${battlesuit.fullName} / ${
+          battlesuit.attributeType
+        } / ${battlesuit.tags
+          .map(tag => {
+            return getTagTypeLabel(tag)
+          })
+          .join(', ')}`}
+        canonicalHref={`/honkai3rd/battlesuits/${battlesuit.id}`}
+      />
+      <Box p={2}>
+        <Heading as="h1">{battlesuit.fullName}</Heading>

-      <AvatarFigureImage battlesuitId={battlesuit.id} sx={{ height: 400 }} />
+        <AvatarFigureImage battlesuitId={battlesuit.id} sx={{ height: 400 }} />

-      <Box mb={3}>
-        <BattlesuitAvatarIcon battlesuit={battlesuit} />
-      </Box>
+        <Box mb={3}>
+          <BattlesuitAvatarIcon battlesuit={battlesuit} />
+        </Box>

-      <Card mb={3}>
-        <Flex sx={{ borderBottom: 'default', p: 1 }}>
-          <Flex sx={{ alignItems: 'center' }}>
-            <Box mr={2}>
-              <StarIcon star={battlesuit.initialStar} />
-            </Box>
+        <Card mb={3}>
+          <Flex sx={{ borderBottom: 'default', p: 1 }}>
+            <Flex sx={{ alignItems: 'center' }}>
+              <Box mr={2}>
+                <StarIcon star={battlesuit.initialStar} />
+              </Box>

-            <ChibiIcon id={battlesuit.character} />
+              <ChibiIcon id={battlesuit.character} />

-            <Box ml={1} mr={2}>
-              {getCharacterTypeLabel(battlesuit.character)}
-            </Box>
+              <Box ml={1} mr={2}>
+                {getCharacterTypeLabel(battlesuit.character)}
+              </Box>

-            <AttributeIcon attributeType={battlesuit.attributeType} size={30} />
-            <Box ml={1} mr={2}>
-              {getAttributeLabel(battlesuit.attributeType)}
-            </Box>
+              <AttributeIcon attributeType={battlesuit.attributeType} size={30} />
+              <Box ml={1} mr={2}>
+                {getAttributeLabel(battlesuit.attributeType)}
+              </Box>

-            <WeaponTypeIcon type={battlesuit.weapon} />
-            <Box ml={1}>{getWeaponTypeLabel(battlesuit.weapon)}</Box>
+              <WeaponTypeIcon type={battlesuit.weapon} />
+              <Box ml={1}>{getWeaponTypeLabel(battlesuit.weapon)}</Box>
+            </Flex>
          </Flex>
-        </Flex>
-        <Flex sx={{ p: 1 }}>
-          {battlesuit.tags.map(tag => {
-            return (
-              <Flex key={tag} sx={{ mr: 2, alignItems: 'center' }}>
-                <TagIcon type={tag} />
-                <Box ml={1}>{getTagTypeLabel(tag)}</Box>
-              </Flex>
-            )
-          })}
-        </Flex>
-      </Card>
-
-      <Heading as="h2">Skills</Heading>
-      {battlesuit.skills.sort(sortBattlesuitSkill).map(skill => {
-        return (
-          <Card key={skill.id} mb={3}>
-            <Box sx={{ borderBottom: 'default', p: 1 }}>
-              <Flex sx={{ alignItems: 'center' }}>
-                <AvatarSkillIcon icon={skill.icon} />
-                <Heading as="h3" sx={{ ml: 1, mb: 0 }}>
-                  <FormattedText>{skill.name}</FormattedText>
-                </Heading>
-                {skill.tags.length > 0 && (
-                  <Flex sx={{ ml: 1 }}>
-                    {skill.tags.map((tag, index) => {
-                      return <SkillTagItem key={index} tag={tag} />
-                    })}
-                  </Flex>
-                )}
-              </Flex>
-
-              <Box>{getSkillTypeLabel(skill.skillType)}</Box>
-            </Box>
-            <Box sx={{ whiteSpace: 'pre-wrap', borderBottom: 'default', p: 1 }}>
-              <FormattedText>{formatSkillInfo(skill)}</FormattedText>
-            </Box>
-
-            {skill.subSkills.map(subSkill => {
+          <Flex sx={{ p: 1 }}>
+            {battlesuit.tags.map(tag => {
              return (
-                <Fragment key={subSkill.id}>
-                  <Box sx={{ borderBottom: 'default', p: 1 }}>
-                    <Flex sx={{ alignItems: 'center' }}>
-                      <AvatarSubSkillIcon icon={subSkill.icon} />
-                      <Heading as="h4" sx={{ ml: 1, mb: 0 }}>
-                        <FormattedText>{subSkill.name}</FormattedText>
-                      </Heading>
-
-                      {subSkill.unlockStar.localeCompare(battlesuit.initialStar) > 0 && (
-                        <Box ml={2}>
-                          <StarIcon star={subSkill.unlockStar} />
-                        </Box>
-                      )}
-
-                      {subSkill.tags.length > 0 && (
-                        <Flex sx={{ ml: 2 }}>
-                          {subSkill.tags.map((tag, index) => {
-                            return <SkillTagItem key={index} tag={tag} />
-                          })}
-                        </Flex>
-                      )}
-                    </Flex>
-                  </Box>
-
-                  <Box
-                    sx={{
-                      whiteSpace: 'pre-wrap',
-                      borderBottom: 'default',
-                      '&:last-child': { borderBottom: 'none' },
-                      p: 1
-                    }}
-                  >
-                    <FormattedText>{formatSubSkillInfo(subSkill)}</FormattedText>
-                  </Box>
-                </Fragment>
+                <Flex key={tag} sx={{ mr: 2, alignItems: 'center' }}>
+                  <TagIcon type={tag} />
+                  <Box ml={1}>{getTagTypeLabel(tag)}</Box>
+                </Flex>
              )
            })}
-          </Card>
-        )
-      })}
-      {/* <pre>{JSON.stringify(battlesuit, null, 2)}</pre> */}
-    </Box>
+          </Flex>
+        </Card>
+
+        <Heading as="h2">Skills</Heading>
+        {battlesuit.skills.sort(sortBattlesuitSkill).map(skill => {
+          return (
+            <Card key={skill.id} mb={3}>
+              <Box sx={{ borderBottom: 'default', p: 1 }}>
+                <Flex sx={{ alignItems: 'center' }}>
+                  <AvatarSkillIcon icon={skill.icon} />
+                  <Heading as="h3" sx={{ ml: 1, mb: 0 }}>
+                    <FormattedText>{skill.name}</FormattedText>
+                  </Heading>
+                  {skill.tags.length > 0 && (
+                    <Flex sx={{ ml: 1 }}>
+                      {skill.tags.map((tag, index) => {
+                        return <SkillTagItem key={index} tag={tag} />
+                      })}
+                    </Flex>
+                  )}
+                </Flex>
+
+                <Box>{getSkillTypeLabel(skill.skillType)}</Box>
+              </Box>
+              <Box sx={{ whiteSpace: 'pre-wrap', borderBottom: 'default', p: 1 }}>
+                <FormattedText>{formatSkillInfo(skill)}</FormattedText>
+              </Box>
+
+              {skill.subSkills.map(subSkill => {
+                return (
+                  <Fragment key={subSkill.id}>
+                    <Box sx={{ borderBottom: 'default', p: 1 }}>
+                      <Flex sx={{ alignItems: 'center' }}>
+                        <AvatarSubSkillIcon icon={subSkill.icon} />
+                        <Heading as="h4" sx={{ ml: 1, mb: 0 }}>
+                          <FormattedText>{subSkill.name}</FormattedText>
+                        </Heading>
+
+                        {subSkill.unlockStar.localeCompare(battlesuit.initialStar) > 0 && (
+                          <Box ml={2}>
+                            <StarIcon star={subSkill.unlockStar} />
+                          </Box>
+                        )}
+
+                        {subSkill.tags.length > 0 && (
+                          <Flex sx={{ ml: 2 }}>
+                            {subSkill.tags.map((tag, index) => {
+                              return <SkillTagItem key={index} tag={tag} />
+                            })}
+                          </Flex>
+                        )}
+                      </Flex>
+                    </Box>
+
+                    <Box
+                      sx={{
+                        whiteSpace: 'pre-wrap',
+                        borderBottom: 'default',
+                        '&:last-child': { borderBottom: 'none' },
+                        p: 1
+                      }}
+                    >
+                      <FormattedText>{formatSubSkillInfo(subSkill)}</FormattedText>
+                    </Box>
+                  </Fragment>
+                )
+              })}
+            </Card>
+          )
+        })}
+        {/* <pre>{JSON.stringify(battlesuit, null, 2)}</pre> */}
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -150,7 +168,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
  const battlesuit = loadBattlesuitData(params.battlesuitId)

  return {
-    props: { battlesuit }
+    props: { battlesuit, ...(await getI18NProps(locale)) }
  }
 }

@@ -5,27 +5,49 @@ import { Flex, Link } from 'theme-ui'
 import { loadBattlesuitCatalog } from '../../../../lib/v2/server/loadData'
 import { BattlesuitCatalogItem } from '../../../../lib/v2/data/types'
 import BattlesuitCatalogItemCard from '../../../../components/v2/BattlesuitCatalogItemCard'
+import Head from '../../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import { useTranslation } from 'next-i18next'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
+import { getI18NProps } from '../../../../server/i18n'

 interface BattlesuitListPageProps {
  battlesuitCatalog: BattlesuitCatalogItem[]
 }

 const BattlesuitListPage = ({ battlesuitCatalog }: BattlesuitListPageProps) => {
+  const { t } = useTranslation()
  return (
-    <Box>
-      <h1>Battlesuits</h1>
-      <Flex sx={{ flexWrap: 'wrap' }}>
-        {battlesuitCatalog.map(battlesuit => {
-          return (
-            <Box key={battlesuit.id}>
-              <Link href={`/v2-pre/battlesuits/${battlesuit.id}`}>
-                <BattlesuitCatalogItemCard battlesuit={battlesuit} />
-              </Link>
-            </Box>
-          )
-        })}
-      </Flex>
-    </Box>
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('common.battlesuits')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={t('battlesuits-list.description')}
+        canonicalHref={`/honkai3rd/battlesuits`}
+      />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/battlesuits',
+              label: t('common.battlesuits')
+            }
+          ]}
+        />
+        <h1>{t('battlesuits-list.heading')}</h1>
+        <Flex sx={{ flexWrap: 'wrap' }}>
+          {battlesuitCatalog.map(battlesuit => {
+            return (
+              <Box key={battlesuit.id}>
+                <Link href={`/honkai3rd/v2/battlesuits/${battlesuit.id}`}>
+                  <BattlesuitCatalogItemCard battlesuit={battlesuit} />
+                </Link>
+              </Box>
+            )
+          })}
+        </Flex>
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -35,6 +57,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
  const battlesuitCatalog = loadBattlesuitCatalog()

  return {
-    props: { battlesuitCatalog }
+    props: { battlesuitCatalog, ...(await getI18NProps(locale)) }
  }
 }
@@ -1,10 +1,16 @@
 import { NextPageContext } from 'next'
-import { Box, Card, Flex, Heading, Image } from 'theme-ui'
+import { Box, Card, Flex, Heading, Image, Link } from 'theme-ui'
 import AvatarFigureImage from '../../../../../components/v2/AvatarFigureImage'
 import { loadBattlesuitData, loadErBattlesuit, loadErBattlesuitCatalog } from '../../../../../lib/v2/server/loadData'
 import { Battlesuit, ErBattlesuit, ErSignet } from '../../../../../lib/v2/data/types'
 import { Fragment, useMemo } from 'react'
 import { assetsBucketBaseUrl } from '../../../../../lib/consts'
+import BattlesuitCatalogItemCard from '../../../../../components/v2/BattlesuitCatalogItemCard'
+import Honkai3rdLayout from '../../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import Breadcrumb from '../../../../../components/organisms/Breadcrumb'
+import { getI18NProps } from '../../../../../server/i18n'

 interface BattlesuitShowPageProps {
  battlesuit: Battlesuit
@@ -12,6 +18,8 @@ interface BattlesuitShowPageProps {
 }

 const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProps) => {
+  const { t } = useTranslation()
+
  const signetSets = useMemo(() => {
    const signetSetMap = erBattlesuit.signets
      .slice()
@@ -36,57 +44,89 @@ const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProp
  }, [erBattlesuit.signets])

  return (
-    <Box>
-      <Heading as="h1">{battlesuit.fullName}</Heading>
+    <Honkai3rdLayout>
+      <Head
+        title={`${battlesuit.fullName} (${t('common.elysian-realm')}) - ${t('common.honkai-3rd')} - ${t(
+          'common.abyss-lab'
+        )}`}
+        description={`${t('common.honkai-3rd')} ${t('common.elysian-realm')} ${t('battlesuit-show.battlesuit')}`}
+        canonicalHref={`/honkai3rd/v2/er/battlesuits/${battlesuit.id}`}
+      />

-      <AvatarFigureImage battlesuitId={battlesuit.id} sx={{ height: 400 }} />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/er',
+              label: t('common.elysian-realm')
+            },
+            {
+              href: `/honkai3rd/v2/er/battlesuits/${battlesuit.id}`,
+              label: battlesuit.fullName
+            }
+          ]}
+        />

-      <Heading as="h2">ER Adjustments</Heading>
+        <Heading as="h1">{battlesuit.fullName}</Heading>

-      <Card mb={3}>
-        {erBattlesuit.abilities.map(ability => {
+        <AvatarFigureImage battlesuitId={battlesuit.id} sx={{ height: 400 }} />
+
+        <Box>
+          <Link href={`/battlesuits/${battlesuit.id}`}>
+            <BattlesuitCatalogItemCard battlesuit={battlesuit} />
+          </Link>
+        </Box>
+
+        <Heading as="h2">ER Adjustments</Heading>
+
+        <Card mb={3}>
+          {erBattlesuit.abilities.map(ability => {
+            return (
+              <Fragment key={ability.id}>
+                <Box sx={{ p: 1, borderBottom: 'default' }}>
+                  <Heading as="h3" m={0}>
+                    {ability.name}
+                  </Heading>
+                </Box>
+                <Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
+                  {ability.desc}
+                </Box>
+              </Fragment>
+            )
+          })}
+        </Card>
+
+        <Heading as="h2">Exclusive Signets</Heading>
+
+        {signetSets.map((set, index) => {
          return (
-            <Fragment key={ability.id}>
-              <Box sx={{ p: 1, borderBottom: 'default' }}>
-                <Heading as="h3" m={0}>
-                  {ability.name}
-                </Heading>
-              </Box>
-              <Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>{ability.desc}</Box>
-            </Fragment>
+            <Card key={index} mb={2}>
+              {set.map(signet => {
+                return (
+                  <Fragment key={signet.id}>
+                    <Flex sx={{ p: 1, borderBottom: 'default', alignItems: 'center' }}>
+                      <Image
+                        src={`${assetsBucketBaseUrl}/raw/supportbufficon/Elysia.png`}
+                        width={30}
+                        sx={{ flexShrink: 0 }}
+                        alt={'Elysia'}
+                      />
+                      <Heading as="h3" m={0}>
+                        {signet.name}
+                      </Heading>
+                    </Flex>
+                    <Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
+                      {signet.desc}
+                    </Box>
+                  </Fragment>
+                )
+              })}
+            </Card>
          )
        })}
-      </Card>
-
-      <Heading as="h2">Exclusive Signets</Heading>
-
-      {signetSets.map((set, index) => {
-        return (
-          <Card key={index} mb={2}>
-            {set.map(signet => {
-              return (
-                <Fragment key={signet.id}>
-                  <Flex sx={{ p: 1, borderBottom: 'default', alignItems: 'center' }}>
-                    <Image
-                      src={`${assetsBucketBaseUrl}/raw/supportbufficon/Elysia.png`}
-                      width={30}
-                      sx={{ flexShrink: 0 }}
-                      alt={'Elysia'}
-                    />
-                    <Heading as="h3" m={0}>
-                      {signet.name}
-                    </Heading>
-                  </Flex>
-                  <Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
-                    {signet.desc}
-                  </Box>
-                </Fragment>
-              )
-            })}
-          </Card>
-        )
-      })}
-    </Box>
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -97,7 +137,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
  const erBattlesuit = loadErBattlesuit(params.battlesuitId)

  return {
-    props: { battlesuit, erBattlesuit }
+    props: { battlesuit, erBattlesuit, ...(await getI18NProps(locale)) }
  }
 }

@@ -15,6 +15,11 @@ import SquareImage from '../../../../components/v2/SquareImage'
 import { signetGroups } from '../../../../lib/v2/data/er'
 import BattlesuitSmallIcon from '../../../../components/v2/BattlesuitSmallIcon'
 import MaterialIcon from '../../../../components/v2/MaterialIcon'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../components/atoms/Head'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
+import { useTranslation } from 'next-i18next'
+import { getI18NProps } from '../../../../server/i18n'

 interface ErPageProps {
  erBattlesuitCatalog: ErBattlesuitCatalogItem[]
@@ -24,6 +29,8 @@ interface ErPageProps {
 }

 const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }: ErPageProps) => {
+  const { t } = useTranslation()
+
  const battlesuitCatalogMap = useMemo(() => {
    return battlesuitCatalog.reduce((map, item) => {
      map.set(item.id, item)
@@ -32,77 +39,97 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
  }, [battlesuitCatalog])

  return (
-    <Box>
-      <h1>Elysian Realm</h1>
-      <Heading as="h2">Signets</Heading>
-      <Flex sx={{ flexWrap: 'wrap' }}>
-        {signetGroups.map(signetGroup => {
-          return (
-            <Link href={`/v2-pre/er/signets/${signetGroup.id}`} key={signetGroup.id}>
-              <Card p={1} m={1}>
-                <Flex sx={{ alignItems: 'center' }}>
-                  <SquareImage
-                    src={`${assetsBucketBaseUrl}/raw/supportbufficon/${signetGroup.icon}.png`}
-                    originalSize={120}
-                    size={40}
-                  />
-                  <Box p={1}>{signetGroup.name}</Box>
-                </Flex>
-              </Card>
-            </Link>
-          )
-        })}
-      </Flex>
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('common.elysian-realm')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={t('common.elysian-realm')}
+        canonicalHref={`/honkai3rd/elysian-realm`}
+      />

-      <Heading as="h2">Battlesuits</Heading>
-      <Flex sx={{ flexWrap: 'wrap' }}>
-        {erBattlesuitCatalog.map(erBattlesuit => {
-          const battlesuit = battlesuitCatalogMap.get(erBattlesuit.battlesuit)!
-          return (
-            <Box key={battlesuit.id}>
-              <Link href={`/v2-pre/er/battlesuits/${battlesuit.id}`}>
-                <BattlesuitCatalogItemCard battlesuit={battlesuit} />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/er',
+              label: t('common.elysian-realm')
+            }
+          ]}
+        />
+        <Heading as="h1">Elysian Realm</Heading>
+
+        <Heading as="h2">Signets</Heading>
+        <Flex sx={{ flexWrap: 'wrap', mb: 3 }}>
+          {signetGroups.map(signetGroup => {
+            return (
+              <Link href={`/honkai3rd/v2/er/signets/${signetGroup.id}`} key={signetGroup.id}>
+                <Card p={1} m={1}>
+                  <Flex sx={{ alignItems: 'center' }}>
+                    <SquareImage
+                      src={`${assetsBucketBaseUrl}/raw/supportbufficon/${signetGroup.icon}.png`}
+                      originalSize={120}
+                      size={40}
+                    />
+                    <Box p={1}>{signetGroup.name}</Box>
+                  </Flex>
+                </Card>
              </Link>
-            </Box>
-          )
-        })}
-      </Flex>
+            )
+          })}
+        </Flex>

-      <Heading as="h2">Supports</Heading>
+        <Heading as="h2">Battlesuits</Heading>
+        <Flex sx={{ flexWrap: 'wrap', mb: 3 }}>
+          {erBattlesuitCatalog.map(erBattlesuit => {
+            const battlesuit = battlesuitCatalogMap.get(erBattlesuit.battlesuit)!
+            return (
+              <Box key={battlesuit.id}>
+                <Link href={`/honkai3rd/v2/er/battlesuits/${battlesuit.id}`}>
+                  <BattlesuitCatalogItemCard battlesuit={battlesuit} />
+                </Link>
+              </Box>
+            )
+          })}
+        </Flex>

-      <Flex sx={{ flexWrap: 'wrap' }}>
-        {erSupports.map(support => {
-          const battlesuit = battlesuitCatalogMap.get(support)!
-          return (
-            <Box key={support}>
-              <Link href={`/v2-pre/er/supports#${support}`}>
-                <Box sx={{ p: 1, m: 1, width: 110 }}>
-                  <BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
-                  <Box sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                    {battlesuit.fullName}
+        <Heading as="h2">Supports</Heading>
+
+        <Flex sx={{ flexWrap: 'wrap' }}>
+          {erSupports.map(support => {
+            const battlesuit = battlesuitCatalogMap.get(support)!
+            return (
+              <Box key={support}>
+                <Link href={`/honkai3rd/v2/er/supports#${support}`}>
+                  <Box sx={{ p: 1, m: 1, width: 110 }}>
+                    <BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
+                    <Box
+                      sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                    >
+                      {battlesuit.fullName}
+                    </Box>
                  </Box>
-                </Box>
-                {/* <BattlesuitCatalogItemCard battlesuit={battlesuit} /> */}
-              </Link>
-            </Box>
-          )
-        })}
-      </Flex>
+                  {/* <BattlesuitCatalogItemCard battlesuit={battlesuit} /> */}
+                </Link>
+              </Box>
+            )
+          })}
+        </Flex>

-      <Heading as="h2">Sigils</Heading>
+        <Heading as="h2">Sigils</Heading>

-      <Flex sx={{ flexWrap: 'wrap' }}>
-        {erSigils.map(sigil => {
-          return (
-            <Card key={sigil.id} p={1} m={1}>
-              <Link href={`/v2-pre/er/sigils#${sigil.id}`}>
-                <MaterialIcon materialId={sigil.id} />
-              </Link>
-            </Card>
-          )
-        })}
-      </Flex>
-    </Box>
+        <Flex sx={{ flexWrap: 'wrap' }}>
+          {erSigils.map(sigil => {
+            return (
+              <Card key={sigil.id} p={1} m={1}>
+                <Link href={`/honkai3rd/v2/er/sigils#${sigil.id}`}>
+                  <MaterialIcon materialId={sigil.id} />
+                </Link>
+              </Card>
+            )
+          })}
+        </Flex>
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -123,6 +150,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
  })

  return {
-    props: { erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
+    props: { erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils, ...(await getI18NProps(locale)) }
  }
 }
@@ -1,44 +1,75 @@
 import { NextPageContext } from 'next'
+import { useTranslation } from 'next-i18next'
 import { Box, Card, Flex, Heading } from 'theme-ui'
+import Head from '../../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
 import MaterialIcon from '../../../../components/v2/MaterialIcon'
 import { ErSigil } from '../../../../lib/v2/data/types'
 import { loadErSigils } from '../../../../lib/v2/server/loadData'
+import { getI18NProps } from '../../../../server/i18n'

 interface SigilsPageProps {
  erSigils: ErSigil[]
 }

 const SigilsPage = ({ erSigils }: SigilsPageProps) => {
-  return (
-    <Box>
-      <Heading as="h1">ER Sigils</Heading>
+  const { t } = useTranslation()

-      <Card mb={3}>
-        {erSigils.map(sigil => {
-          return (
-            <Flex
-              key={sigil.id}
-              sx={{
-                borderBottom: 'default',
-                '&:last-child': {
-                  borderBottom: 'none'
-                }
-              }}
-            >
-              <Box sx={{ p: 1, flexShrink: 0, borderRight: 'default' }}>
-                <MaterialIcon materialId={sigil.id} />
-              </Box>
-              <Box sx={{ flexGrow: 1 }}>
-                <Heading as="h3" sx={{ m: 0, p: 1, borderBottom: 'default' }} id={sigil.id}>
-                  {sigil.name}
-                </Heading>
-                <Box p={1}>{sigil.desc}</Box>
-              </Box>
-            </Flex>
-          )
-        })}
-      </Card>
-    </Box>
+  return (
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('elysian-realm.remembrance-sigil')} (${t('common.elysian-realm')}) - ${t(
+          'common.honkai-3rd'
+        )} - ${t('common.abyss-lab')}`}
+        description={`${t('common.elysian-realm')} ${t('elysian-realm.supports')}`}
+        canonicalHref={`/honkai3rd/v2/er/sigils`}
+      />
+
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/er',
+              label: t('common.elysian-realm')
+            },
+            {
+              href: '/honkai3rd/v2/er/sigils',
+              label: t('elysian-realm.remembrance-sigil')
+            }
+          ]}
+        />
+
+        <Heading as="h1">ER Sigils</Heading>
+
+        <Card mb={3}>
+          {erSigils.map(sigil => {
+            return (
+              <Flex
+                key={sigil.id}
+                sx={{
+                  borderBottom: 'default',
+                  '&:last-child': {
+                    borderBottom: 'none'
+                  }
+                }}
+              >
+                <Box sx={{ p: 1, flexShrink: 0, borderRight: 'default' }}>
+                  <MaterialIcon materialId={sigil.id} />
+                </Box>
+                <Box sx={{ flexGrow: 1 }}>
+                  <Heading as="h3" sx={{ m: 0, p: 1, borderBottom: 'default' }} id={sigil.id}>
+                    {sigil.name}
+                  </Heading>
+                  <Box p={1}>{sigil.desc}</Box>
+                </Box>
+              </Flex>
+            )
+          })}
+        </Card>
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -48,6 +79,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
  const erSigils = loadErSigils()

  return {
-    props: { erSigils }
+    props: { erSigils, ...(await getI18NProps(locale)) }
  }
 }
@@ -7,6 +7,11 @@ import { assetsBucketBaseUrl } from '../../../../../lib/consts'
 import { signetGroups } from '../../../../../lib/v2/data/er'
 import SquareImage from '../../../../../components/v2/SquareImage'
 import { getErSignetTypeLabel } from '../../../../../lib/v2/data/text'
+import Honkai3rdLayout from '../../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import Breadcrumb from '../../../../../components/organisms/Breadcrumb'
+import { getI18NProps } from '../../../../../server/i18n'

 interface BattlesuitShowPageProps {
  group: ErSignetGroup
@@ -14,6 +19,8 @@ interface BattlesuitShowPageProps {
 }

 const BattlesuitShowPage = ({ signets, group }: BattlesuitShowPageProps) => {
+  const { t } = useTranslation()
+
  const signetSets = useMemo(() => {
    const signetSetMap = signets.reduce<Map<string, ErSignet[]>>((map, signet) => {
      const [id1, _id2] = signet.id.split('-')
@@ -28,41 +35,65 @@ const BattlesuitShowPage = ({ signets, group }: BattlesuitShowPageProps) => {

    return [...signetSetMap.values()]
  }, [signets])
-  return (
-    <Box>
-      <Heading as="h1">{group.name}</Heading>

-      {signetSets.map((set, index) => {
-        return (
-          <Card key={index} mb={2}>
-            {set.map(signet => {
-              return (
-                <Fragment key={signet.id}>
-                  <Flex sx={{ p: 1, borderBottom: 'default', alignItems: 'center' }}>
-                    <SquareImage
-                      src={`${assetsBucketBaseUrl}/raw/supportbufficon/${group.icon}.png`}
-                      size={30}
-                      originalSize={120}
-                    />
-                    <Heading as="h3" my={0} ml={1}>
-                      {signet.name}
-                    </Heading>
-                    <Box sx={{ ml: 12, color: 'textMuted' }}>{getErSignetTypeLabel(signet.quality)}</Box>
-                  </Flex>
-                  <Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
-                    {signet.desc}
-                  </Box>
-                </Fragment>
-              )
-            })}
-          </Card>
-        )
-      })}
-      {/*
+  return (
+    <Honkai3rdLayout>
+      <Head
+        title={`${group.name} ${t('elysian-realm.signets')} (${t('common.elysian-realm')}) - ${t(
+          'common.honkai-3rd'
+        )} - ${t('common.abyss-lab')}`}
+        description={`${t('common.honkai-3rd')} ${group.name} ${t('elysian-realm.signets')}`}
+        canonicalHref={`/honkai3rd/elysian-realm/signets/${group.id}`}
+      />
+
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/er',
+              label: t('common.elysian-realm')
+            },
+            {
+              href: `/honkai3rd/v2/er/signets/${group.id}`,
+              label: group.name
+            }
+          ]}
+        />
+        <Heading as="h1">{group.name}</Heading>
+
+        {signetSets.map((set, index) => {
+          return (
+            <Card key={index} mb={2}>
+              {set.map(signet => {
+                return (
+                  <Fragment key={signet.id}>
+                    <Flex sx={{ p: 1, borderBottom: 'default', alignItems: 'center' }}>
+                      <SquareImage
+                        src={`${assetsBucketBaseUrl}/raw/supportbufficon/${group.icon}.png`}
+                        size={30}
+                        originalSize={120}
+                      />
+                      <Heading as="h3" my={0} ml={1}>
+                        {signet.name}
+                      </Heading>
+                      <Box sx={{ ml: 12, color: 'textMuted' }}>{getErSignetTypeLabel(signet.quality)}</Box>
+                    </Flex>
+                    <Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
+                      {signet.desc}
+                    </Box>
+                  </Fragment>
+                )
+              })}
+            </Card>
+          )
+        })}
+        {/*
      <pre>
        <code>{JSON.stringify(signets, null, 2)}</code>
      </pre> */}
-    </Box>
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -73,7 +104,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
  const group = signetGroups.find(group => group.id === params.groupId)

  return {
-    props: { signets, group }
+    props: { signets, group, ...(await getI18NProps(locale)) }
  }
 }

@@ -1,9 +1,14 @@
 import { NextPageContext } from 'next'
+import { useTranslation } from 'next-i18next'
 import { useMemo } from 'react'
 import { Box, Card, Flex, Heading } from 'theme-ui'
+import Head from '../../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'
 import BattlesuitSmallIcon from '../../../../components/v2/BattlesuitSmallIcon'
 import { BattlesuitCatalogItem, ErSupportBattlesuit } from '../../../../lib/v2/data/types'
 import { loadBattlesuitCatalog, loadErSupports } from '../../../../lib/v2/server/loadData'
+import { getI18NProps } from '../../../../server/i18n'

 interface SupportsPageProps {
  battlesuitCatalog: BattlesuitCatalogItem[]
@@ -15,6 +20,8 @@ const SupportsPage = ({

  erSupports
 }: SupportsPageProps) => {
+  const { t } = useTranslation()
+
  const battlesuitCatalogMap = useMemo(() => {
    return battlesuitCatalog.reduce((map, item) => {
      map.set(item.id, item)
@@ -22,32 +29,55 @@ const SupportsPage = ({
    }, new Map<string, BattlesuitCatalogItem>())
  }, [battlesuitCatalog])
  return (
-    <Box>
-      <Heading as="h1">ER Supports</Heading>
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('elysian-realm.supports')} (${t('common.elysian-realm')}) - ${t('common.honkai-3rd')} - ${t(
+          'common.abyss-lab'
+        )}`}
+        description={`${t('common.elysian-realm')} ${t('elysian-realm.supports')}`}
+        canonicalHref={`/honkai3rd/elysian-realm/support-battlesuits`}
+      />

-      <Card mb={3}>
-        {erSupports.map(support => {
-          const battlesuit = battlesuitCatalogMap.get(support.battlesuit)!
-          return (
-            <Flex key={support.battlesuit} sx={{ borderBottom: 'default' }}>
-              <Box sx={{ flexShrink: 0, p: 1, borderRight: 'default' }}>
-                <BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
-              </Box>
-              <Box>
-                <Flex sx={{ p: 1, borderBottom: 'default', flexGrow: 1 }}>
-                  <Heading as="h3" sx={{ m: 0 }} id={support.battlesuit}>
-                    {support.name}
-                  </Heading>
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: '/honkai3rd/v2/er',
+              label: t('common.elysian-realm')
+            },
+            {
+              href: '/honkai3rd/v2/er/supports',
+              label: t('elysian-realm.supports')
+            }
+          ]}
+        />
+        <Heading as="h1">ER Supports</Heading>

-                  <Box sx={{ ml: 1, color: 'textMuted' }}>(CD {support.cd}s)</Box>
-                </Flex>
-                <Box p={1}>{support.desc}</Box>
-              </Box>
-            </Flex>
-          )
-        })}
-      </Card>
-    </Box>
+        <Card mb={3}>
+          {erSupports.map(support => {
+            const battlesuit = battlesuitCatalogMap.get(support.battlesuit)!
+            return (
+              <Flex key={support.battlesuit} sx={{ borderBottom: 'default' }}>
+                <Box sx={{ flexShrink: 0, p: 1, borderRight: 'default' }}>
+                  <BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
+                </Box>
+                <Box>
+                  <Flex sx={{ p: 1, borderBottom: 'default', flexGrow: 1 }}>
+                    <Heading as="h3" sx={{ m: 0 }} id={support.battlesuit}>
+                      {support.name}
+                    </Heading>
+
+                    <Box sx={{ ml: 1, color: 'textMuted' }}>(CD {support.cd}s)</Box>
+                  </Flex>
+                  <Box p={1}>{support.desc}</Box>
+                </Box>
+              </Flex>
+            )
+          })}
+        </Card>
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -58,6 +88,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
  const erSupports = loadErSupports()

  return {
-    props: { battlesuitCatalog, erSupports }
+    props: { battlesuitCatalog, erSupports, ...(await getI18NProps(locale)) }
  }
 }
@@ -7,6 +7,11 @@ import { RootStigma, StigmataSet } from '../../../../lib/v2/data/types'
 import { Fragment } from 'react'
 import StigmaIcon from '../../../../components/v2/StigmaIcon'
 import StigmaFigureImage from '../../../../components/v2/StigmaFigureImage'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import { getI18NProps } from '../../../../server/i18n'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'

 interface StigmataSetShowPage {
  stigmataSet: StigmataSet
@@ -14,137 +19,167 @@ interface StigmataSetShowPage {
 }

 const StigmataSetShowPage = ({ stigmataSet, stigmata }: StigmataSetShowPage) => {
+  const { t } = useTranslation()
+  const rarity = stigmata[0].stigmata[0].maxRarity
  return (
-    <Box>
-      <Heading as="h1">{stigmataSet.name}</Heading>
-      <Card mb={3}>
-        {stigmata.map(rootStigma => {
-          const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
-          return (
-            <>
-              <Flex sx={{ borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
-                <Box sx={{ flexShrink: 0, borderRight: 'default', p: 1 }}>
-                  <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.rarity} />
-                </Box>
-                <Box sx={{ flexGrow: 1 }}>
-                  <Flex sx={{ borderBottom: 'default', alignItems: 'center', p: 1 }}>
-                    <Heading
-                      as="h3"
-                      sx={{
-                        my: 1
-                      }}
-                    >
-                      <Link href={`/v2-pre/stigmata/${rootStigma.id}`}>{stigma.name}</Link>
-                    </Heading>
-                  </Flex>
+    <Honkai3rdLayout>
+      <Head
+        title={`${stigmataSet.name} ${t('stigmata-show.stigmata-set')} - ${t('common.honkai-3rd')} - ${t(
+          'common.abyss-lab'
+        )}`}
+        description={`${t('common.honkai-3rd')} ${t('stigmata-show.stigmata-set')} / ${'⭐'.repeat(rarity)} / ${
+          stigmataSet.name
+        }`}
+        canonicalHref={`/honkai3rd/v2/stigmata-sets/${stigmataSet.id}-set`}
+      />

-                  <Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
-                    <Box>
-                      HP : {Math.floor(stigma.hpBase + stigma.hpAdd * (stigma.maxLv - 1))} / ATK :{' '}
-                      {Math.floor(stigma.attackBase + stigma.attackAdd * (stigma.maxLv - 1))} / DEF :{' '}
-                      {Math.floor(stigma.defenceBase + stigma.defenceAdd * (stigma.maxLv - 1))} / CRT :{' '}
-                      {Math.floor(stigma.criticalBase + stigma.criticalAdd * (stigma.maxLv - 1))} (at Max Lv{' '}
-                      {stigma.maxLv})
-                    </Box>
-                  </Flex>
-                  {stigma.skills.map(skill => {
-                    return (
-                      <Fragment key={skill.id}>
-                        <Box sx={{ borderBottom: 'default', p: 1 }}>
-                          <Heading
-                            as="h3"
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            {
+              href: {
+                pathname: `/honkai3rd/v2/stigmata-sets`
+              },
+              label: t('common.stigmata-set')
+            },
+            {
+              href: `/honkai3rd/v2/stigmata-sets/${stigmataSet.id}-set`,
+              label: stigmataSet.name
+            }
+          ]}
+        />
+
+        <Heading as="h1">{stigmataSet.name}</Heading>
+        <Card mb={3}>
+          {stigmata.map(rootStigma => {
+            const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
+            return (
+              <>
+                <Flex sx={{ borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
+                  <Box sx={{ flexShrink: 0, borderRight: 'default', p: 1 }}>
+                    <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.rarity} />
+                  </Box>
+                  <Box sx={{ flexGrow: 1 }}>
+                    <Flex sx={{ borderBottom: 'default', alignItems: 'center', p: 1 }}>
+                      <Heading
+                        as="h3"
+                        sx={{
+                          my: 1
+                        }}
+                      >
+                        <Link href={`/honkai3rd/v2/stigmata/${rootStigma.id}`}>{stigma.name}</Link>
+                      </Heading>
+                    </Flex>
+
+                    <Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
+                      <Box>
+                        HP : {Math.floor(stigma.hpBase + stigma.hpAdd * (stigma.maxLv - 1))} / ATK :{' '}
+                        {Math.floor(stigma.attackBase + stigma.attackAdd * (stigma.maxLv - 1))} / DEF :{' '}
+                        {Math.floor(stigma.defenceBase + stigma.defenceAdd * (stigma.maxLv - 1))} / CRT :{' '}
+                        {Math.floor(stigma.criticalBase + stigma.criticalAdd * (stigma.maxLv - 1))} (at Max Lv{' '}
+                        {stigma.maxLv})
+                      </Box>
+                    </Flex>
+                    {stigma.skills.map(skill => {
+                      return (
+                        <Fragment key={skill.id}>
+                          <Box sx={{ borderBottom: 'default', p: 1 }}>
+                            <Heading
+                              as="h3"
+                              sx={{
+                                mx: 0,
+                                my: 1
+                              }}
+                            >
+                              {skill.name}
+                            </Heading>
+                          </Box>
+                          <Box
                            sx={{
-                              mx: 0,
-                              my: 1
+                              p: 1,
+                              borderBottom: 'default',
+                              '&:last-child': {
+                                borderBottom: 'none'
+                              }
                            }}
                          >
-                            {skill.name}
-                          </Heading>
-                        </Box>
-                        <Box
-                          sx={{
-                            p: 1,
-                            borderBottom: 'default',
-                            '&:last-child': {
-                              borderBottom: 'none'
-                            }
-                          }}
-                        >
-                          <FormattedText>
-                            {formatSubSkillInfo({
-                              info: skill.info,
-                              maxLv: stigma.maxLv,
-                              paramBase1: skill.param1,
-                              paramBase2: skill.param2,
-                              paramBase3: skill.param3,
-                              paramAdd1: skill.param1Add,
-                              paramAdd2: skill.param2Add,
-                              paramAdd3: skill.param3Add
-                            })}
-                          </FormattedText>
-                        </Box>
-                      </Fragment>
-                    )
-                  })}
-                </Box>
-              </Flex>
-            </>
-          )
-        })}
-      </Card>
+                            <FormattedText>
+                              {formatSubSkillInfo({
+                                info: skill.info,
+                                maxLv: stigma.maxLv,
+                                paramBase1: skill.param1,
+                                paramBase2: skill.param2,
+                                paramBase3: skill.param3,
+                                paramAdd1: skill.param1Add,
+                                paramAdd2: skill.param2Add,
+                                paramAdd3: skill.param3Add
+                              })}
+                            </FormattedText>
+                          </Box>
+                        </Fragment>
+                      )
+                    })}
+                  </Box>
+                </Flex>
+              </>
+            )
+          })}
+        </Card>

-      <Card mb={3}>
-        {stigmataSet.skills.map((skill, index) => {
-          return (
-            <Fragment key={skill.id}>
-              <Box sx={{ borderBottom: 'default' }}>
-                <Heading
-                  as="h3"
+        <Card mb={3}>
+          {stigmataSet.skills.map((skill, index) => {
+            return (
+              <Fragment key={skill.id}>
+                <Box sx={{ borderBottom: 'default' }}>
+                  <Heading
+                    as="h3"
+                    sx={{
+                      p: 1,
+                      m: 1
+                    }}
+                  >
+                    {skill.name} <small>{index + 2}세트</small>
+                  </Heading>
+                </Box>
+                <Box
                  sx={{
                    p: 1,
-                    m: 1
+                    borderBottom: 'default',
+                    '&:last-child': {
+                      borderBottom: 'none'
+                    }
                  }}
                >
-                  {skill.name} <small>{index + 2}세트</small>
-                </Heading>
-              </Box>
-              <Box
-                sx={{
-                  p: 1,
-                  borderBottom: 'default',
-                  '&:last-child': {
-                    borderBottom: 'none'
-                  }
-                }}
-              >
-                <FormattedText>
-                  {formatSubSkillInfo({
-                    info: skill.info,
-                    maxLv: 1,
-                    paramBase1: skill.param1,
-                    paramBase2: skill.param2,
-                    paramBase3: skill.param3,
-                    paramAdd1: skill.param1Add,
-                    paramAdd2: skill.param2Add,
-                    paramAdd3: skill.param3Add
-                  })}
-                </FormattedText>
-              </Box>
-            </Fragment>
-          )
-        })}
-      </Card>
+                  <FormattedText>
+                    {formatSubSkillInfo({
+                      info: skill.info,
+                      maxLv: 1,
+                      paramBase1: skill.param1,
+                      paramBase2: skill.param2,
+                      paramBase3: skill.param3,
+                      paramAdd1: skill.param1Add,
+                      paramAdd2: skill.param2Add,
+                      paramAdd3: skill.param3Add
+                    })}
+                  </FormattedText>
+                </Box>
+              </Fragment>
+            )
+          })}
+        </Card>

-      <Heading>Images</Heading>
-      <Box mb={3}>
-        {stigmata.map(rootStigma => {
-          const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
-          return <StigmaFigureImage key={stigma.id} stigma={stigma} size={480} />
-        })}
+        <Heading>Images</Heading>
+        <Box mb={3}>
+          {stigmata.map(rootStigma => {
+            const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
+            return <StigmaFigureImage key={stigma.id} stigma={stigma} size={480} />
+          })}
+        </Box>
+
+        {/* <pre>{JSON.stringify(stigmataSet, null, 2)}</pre> */}
      </Box>
-
-      {/* <pre>{JSON.stringify(stigmataSet, null, 2)}</pre> */}
-    </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -159,7 +194,8 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
  return {
    props: {
      stigmataSet,
-      stigmata
+      stigmata,
+      ...(await getI18NProps(locale))
    }
  }
 }
@@ -1,69 +1,93 @@
 /** @jsxImportSource theme-ui */
-import { Box, Card } from '@theme-ui/components'
+import { Box, Card, Heading } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import { Flex, Link } from 'theme-ui'

 import { StigmataSetCatalogItem } from '../../../../lib/v2/data/types'
 import { loadStigmataSetCatalog } from '../../../../lib/v2/server/loadData'
 import StigmaIcon from '../../../../components/v2/StigmaIcon'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import { getI18NProps } from '../../../../server/i18n'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'

 interface StigmataSetListPageProps {
  stigmataSetCatalog: StigmataSetCatalogItem[]
 }

 const StigmataSetListPage = ({ stigmataSetCatalog }: StigmataSetListPageProps) => {
+  const { t } = useTranslation()
  return (
-    <Box>
-      <h1>Stigmata (Set)</h1>
-      <Flex sx={{ flexWrap: 'wrap' }}>
-        {stigmataSetCatalog
-          .sort((a, b) => {
-            const aId = getId(a.id)
-            const bId = getId(b.id)
-            return bId - aId
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('common.stigmata')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={t('stigmata-set-list.description')}
+        canonicalHref={`/honkai3rd/v2/stigmata`}
+      />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/v2/stigmata-sets', label: t('common.stigmata-set') }
+          ]}
+        />
+        <Heading as="h1">{t('stigmata-set-list.stigmata-set')}</Heading>

-            function getId(id: string): number {
-              if (id === '1290') {
-                return 129.5
+        <Box mb={3}>
+          <Link href="/honkai3rd/v2/stigmata">{t('stigmata-set-list.show-signle-list')}</Link>
+        </Box>
+
+        <Flex sx={{ flexWrap: 'wrap' }}>
+          {stigmataSetCatalog
+            .sort((a, b) => {
+              const aId = getId(a.id)
+              const bId = getId(b.id)
+              return bId - aId
+
+              function getId(id: string): number {
+                if (id === '1290') {
+                  return 129.5
+                }
+                if (id === '132') {
+                  return 0.2
+                }
+                if (id === '120') {
+                  return 0.1
+                }
+                return parseInt(id)
              }
-              if (id === '132') {
-                return 0.2
-              }
-              if (id === '120') {
-                return 0.1
-              }
-              return parseInt(id)
-            }
-          })
-          .map(stigmataSet => {
-            return (
-              <Box key={stigmataSet.id} m={2}>
-                <Link href={`/v2-pre/stigmata-sets/${stigmataSet.id}`}>
-                  <Card p={1}>
-                    <Flex sx={{ justifyContent: 'center' }}>
-                      {stigmataSet.stigmataList.map(stigma => {
-                        return <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.maxRarity} />
-                      })}
-                    </Flex>
-                    <Box
-                      sx={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        px: 1,
-                        textAlign: 'center'
-                      }}
-                    >
-                      {stigmataSet.name}
-                    </Box>
-                    {/* {stigma.id} */}
-                  </Card>
-                </Link>
-              </Box>
-            )
-          })}
-      </Flex>
-    </Box>
+            })
+            .map(stigmataSet => {
+              return (
+                <Box key={stigmataSet.id} m={1}>
+                  <Link href={`/honkai3rd/v2/stigmata-sets/${stigmataSet.id}`}>
+                    <Card p={1}>
+                      <Flex sx={{ justifyContent: 'center' }}>
+                        {stigmataSet.stigmataList.map(stigma => {
+                          return <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.maxRarity} />
+                        })}
+                      </Flex>
+                      <Box
+                        sx={{
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          px: 1,
+                          textAlign: 'center'
+                        }}
+                      >
+                        {stigmataSet.name}
+                      </Box>
+                      {/* {stigma.id} */}
+                    </Card>
+                  </Link>
+                </Box>
+              )
+            })}
+        </Flex>
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -73,6 +97,6 @@ export async function getStaticProps({ locale }: NextPageContext) {
  const stigmataSetCatalog = loadStigmataSetCatalog()

  return {
-    props: { stigmataSetCatalog }
+    props: { stigmataSetCatalog, ...(await getI18NProps(locale)) }
  }
 }
@@ -9,6 +9,11 @@ import { getStigmaTypeLabel } from '../../../../lib/v2/data/text'
 import StigmaTypeIcon from '../../../../components/v2/StigmaTypeIcon'
 import StigmaIcon from '../../../../components/v2/StigmaIcon'
 import StigmaFigureImage from '../../../../components/v2/StigmaFigureImage'
+import { getI18NProps } from '../../../../server/i18n'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'

 interface StigmaShowPageProps {
  rootStigma: RootStigma
@@ -16,109 +21,135 @@ interface StigmaShowPageProps {
 }

 const StigmaShowPage = ({ rootStigma, stigmataSetCatalogItem }: StigmaShowPageProps) => {
+  const { t } = useTranslation()
+
  const stigma = rootStigma.stigmata[rootStigma.stigmata.length - 1]
+
+  const atk = Math.floor(stigma.attackBase + stigma.attackAdd * (stigma.maxLv - 1))
+  const hp = Math.floor(stigma.hpBase + stigma.hpAdd * (stigma.maxLv - 1))
+  const def = Math.floor(stigma.defenceBase + stigma.defenceAdd * (stigma.maxLv - 1))
+  const crt = Math.floor(stigma.criticalBase + stigma.criticalAdd * (stigma.maxLv - 1))
+
  return (
-    <Box>
-      <Heading as="h1">{stigma.name}</Heading>
+    <Honkai3rdLayout>
+      <Head
+        title={`${stigma.name} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={`${t('common.honkai-3rd')} ${t('stigmata-show.stigmata')} /
+        ${'⭐'.repeat(stigma.rarity)} / ${t(
+          `stigmata-show.${stigma.type}`
+        )} / HP : ${hp} / ATK : ${atk} / DEF : ${def} / CRT : ${crt}`}
+        canonicalHref={`/honkai3rd/stigmata/${stigma.id}`}
+      />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/v2/stigmata', label: t('common.stigmata') },
+            {
+              href: `/honkai3rd/v2/stigmata/${stigma.id}`,
+              label: stigma.name
+            }
+          ]}
+        />

-      <Box sx={{ display: ['none', 'none', 'block'] }}>
-        <StigmaFigureImage stigma={stigma} size={720} />
-      </Box>
-      <Box sx={{ display: ['block', 'block', 'none'] }}>
-        <StigmaFigureImage stigma={stigma} size={480} />
-      </Box>
+        <Heading as="h1">{stigma.name}</Heading>

-      <Box mb={3}>
-        <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.rarity} />
-      </Box>
-
-      <Card mb={3}>
-        <Box sx={{ p: 1, borderBottom: 'default' }}>{replaceNewLine(stigma.description)}</Box>
-        <Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
-          <StigmaTypeIcon type={stigma.type} />
-          <Box ml={1}>{getStigmaTypeLabel(stigma.type)}</Box>
-        </Flex>
-        <Box sx={{ p: 1 }}>
-          HP : {Math.floor(stigma.hpBase + stigma.hpAdd * (stigma.maxLv - 1))} / ATK :{' '}
-          {Math.floor(stigma.attackBase + stigma.attackAdd * (stigma.maxLv - 1))} / DEF :{' '}
-          {Math.floor(stigma.defenceBase + stigma.defenceAdd * (stigma.maxLv - 1))} / CRT :{' '}
-          {Math.floor(stigma.criticalBase + stigma.criticalAdd * (stigma.maxLv - 1))} (at Max Lv {stigma.maxLv})
+        <Box sx={{ display: ['none', 'none', 'block'] }}>
+          <StigmaFigureImage stigma={stigma} size={720} />
+        </Box>
+        <Box sx={{ display: ['block', 'block', 'none'] }}>
+          <StigmaFigureImage stigma={stigma} size={480} />
        </Box>
-      </Card>

-      <Heading as="h2">Skills</Heading>
-      <Card mb={3}>
-        {stigma.skills.map(skill => {
-          return (
-            <Fragment key={skill.id}>
-              <Box sx={{ borderBottom: 'default' }}>
-                <Heading
-                  as="h3"
-                  sx={{
-                    p: 1,
-                    m: 1
-                  }}
-                >
-                  {skill.name}
-                </Heading>
-              </Box>
-              <Box
-                sx={{
-                  p: 1,
-                  borderBottom: 'default',
-                  '&:last-child': {
-                    borderBottom: 'none'
-                  }
-                }}
-              >
-                <FormattedText>
-                  {formatSubSkillInfo({
-                    info: skill.info,
-                    maxLv: stigma.maxLv,
-                    paramBase1: skill.param1,
-                    paramBase2: skill.param2,
-                    paramBase3: skill.param3,
-                    paramAdd1: skill.param1Add,
-                    paramAdd2: skill.param2Add,
-                    paramAdd3: skill.param3Add
-                  })}
-                </FormattedText>
-              </Box>
-            </Fragment>
-          )
-        })}
-      </Card>
+        <Box mb={3}>
+          <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.rarity} />
+        </Box>

-      {stigmataSetCatalogItem != null && (
-        <>
-          <Heading as="h2">Set</Heading>
-          <Flex key={stigmataSetCatalogItem.id}>
-            <Link href={`/v2-pre/stigmata-sets/${stigmataSetCatalogItem.id}`}>
-              <Card p={1}>
-                <Flex sx={{ justifyContent: 'center' }}>
-                  {stigmataSetCatalogItem.stigmataList.map(stigma => {
-                    return <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.maxRarity} />
-                  })}
-                </Flex>
+        <Card mb={3}>
+          <Box sx={{ p: 1, borderBottom: 'default' }}>{replaceNewLine(stigma.description)}</Box>
+          <Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
+            <StigmaTypeIcon type={stigma.type} />
+            <Box ml={1}>{getStigmaTypeLabel(stigma.type)}</Box>
+          </Flex>
+          <Box sx={{ p: 1 }}>
+            HP : {hp} / ATK : {atk} / DEF : {def} / CRT : {crt} (at Max Lv {stigma.maxLv})
+          </Box>
+        </Card>
+
+        <Heading as="h2">Skills</Heading>
+        <Card mb={3}>
+          {stigma.skills.map(skill => {
+            return (
+              <Fragment key={skill.id}>
+                <Box sx={{ borderBottom: 'default' }}>
+                  <Heading
+                    as="h3"
+                    sx={{
+                      p: 1,
+                      m: 1
+                    }}
+                  >
+                    {skill.name}
+                  </Heading>
+                </Box>
                <Box
                  sx={{
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                    px: 1,
-                    textAlign: 'center'
+                    p: 1,
+                    borderBottom: 'default',
+                    '&:last-child': {
+                      borderBottom: 'none'
+                    }
                  }}
                >
-                  {stigmataSetCatalogItem.name}
+                  <FormattedText>
+                    {formatSubSkillInfo({
+                      info: skill.info,
+                      maxLv: stigma.maxLv,
+                      paramBase1: skill.param1,
+                      paramBase2: skill.param2,
+                      paramBase3: skill.param3,
+                      paramAdd1: skill.param1Add,
+                      paramAdd2: skill.param2Add,
+                      paramAdd3: skill.param3Add
+                    })}
+                  </FormattedText>
                </Box>
-                {/* {stigma.id} */}
-              </Card>
-            </Link>
-          </Flex>
-        </>
-      )}
-      {/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
-    </Box>
+              </Fragment>
+            )
+          })}
+        </Card>
+
+        {stigmataSetCatalogItem != null && (
+          <>
+            <Heading as="h2">Set</Heading>
+            <Flex key={stigmataSetCatalogItem.id}>
+              <Link href={`/v2-pre/stigmata-sets/${stigmataSetCatalogItem.id}`}>
+                <Card p={1}>
+                  <Flex sx={{ justifyContent: 'center' }}>
+                    {stigmataSetCatalogItem.stigmataList.map(stigma => {
+                      return <StigmaIcon key={stigma.id} icon={stigma.icon} rarity={stigma.maxRarity} />
+                    })}
+                  </Flex>
+                  <Box
+                    sx={{
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      px: 1,
+                      textAlign: 'center'
+                    }}
+                  >
+                    {stigmataSetCatalogItem.name}
+                  </Box>
+                  {/* {stigma.id} */}
+                </Card>
+              </Link>
+            </Flex>
+          </>
+        )}
+        {/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -148,7 +179,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
  }

  return {
-    props: { rootStigma, stigmataSetCatalogItem }
+    props: { rootStigma, stigmataSetCatalogItem, ...(await getI18NProps(locale)) }
  }
 }

@@ -1,11 +1,13 @@
 /** @jsxImportSource theme-ui */
-import { Box, Card } from '@theme-ui/components'
+import { Box, Card, Heading } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import { Flex, Link } from 'theme-ui'

 import { StigmataCatalogItem } from '../../../../lib/v2/data/types'
 import { loadStigmataCatalog } from '../../../../lib/v2/server/loadData'
 import StigmaIcon from '../../../../components/v2/StigmaIcon'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import { getI18NProps } from '../../../../server/i18n'

 interface StigmataListPageProps {
  stigmataCatalog: StigmataCatalogItem[]
@@ -13,40 +15,43 @@ interface StigmataListPageProps {

 const StigmataListPage = ({ stigmataCatalog }: StigmataListPageProps) => {
  return (
-    <Box>
-      <h1>Stigmata (Single)</h1>
-      <Flex sx={{ flexWrap: 'wrap' }}>
-        {stigmataCatalog
-          .filter(filterStigmata)
-          .sort(sortStigmata)
-          .map(stigma => {
-            return (
-              <Box key={stigma.id} m={2}>
-                <Link href={`/v2-pre/stigmata/${stigma.id}`}>
-                  <Card p={1}>
-                    <Flex sx={{ justifyContent: 'center' }}>
-                      <StigmaIcon icon={stigma.icon} rarity={stigma.maxRarity} />
-                    </Flex>
-                    <Box
-                      sx={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        px: 1,
-                        width: 112,
-                        textAlign: 'center'
-                      }}
-                    >
-                      {stigma.name}
-                    </Box>
-                    {/* {stigma.id} */}
-                  </Card>
-                </Link>
-              </Box>
-            )
-          })}
-      </Flex>
-    </Box>
+    <Honkai3rdLayout>
+      <Box>
+        <Heading as="h1">Stigmata (Single)</Heading>
+
+        <Flex sx={{ flexWrap: 'wrap' }}>
+          {stigmataCatalog
+            .filter(filterStigmata)
+            .sort(sortStigmata)
+            .map(stigma => {
+              return (
+                <Box key={stigma.id} m={2}>
+                  <Link href={`/v2-pre/stigmata/${stigma.id}`}>
+                    <Card p={1}>
+                      <Flex sx={{ justifyContent: 'center' }}>
+                        <StigmaIcon icon={stigma.icon} rarity={stigma.maxRarity} />
+                      </Flex>
+                      <Box
+                        sx={{
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          px: 1,
+                          width: 112,
+                          textAlign: 'center'
+                        }}
+                      >
+                        {stigma.name}
+                      </Box>
+                      {/* {stigma.id} */}
+                    </Card>
+                  </Link>
+                </Box>
+              )
+            })}
+        </Flex>
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -56,7 +61,7 @@ export async function getStaticProps({ locale }: NextPageContext) {
  const stigmataCatalog = loadStigmataCatalog()

  return {
-    props: { stigmataCatalog }
+    props: { stigmataCatalog, ...(await getI18NProps(locale)) }
  }
 }

@@ -8,77 +8,104 @@ import { Fragment } from 'react'
 import { getWeaponTypeLabel } from '../../../../lib/v2/data/text'
 import WeaponTypeIcon from '../../../../components/v2/WeaponTypeIcon'
 import WeaponIcon from '../../../../components/v2/WeaponIcon'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import Head from '../../../../components/atoms/Head'
+import { useTranslation } from 'next-i18next'
+import { getI18NProps } from '../../../../server/i18n'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'

 interface WeaponShowPageProps {
  rootWeapon: RootWeaponData
 }

 const WeaponShowPage = ({ rootWeapon }: WeaponShowPageProps) => {
+  const { t } = useTranslation()
  const weapon = rootWeapon.weapons[rootWeapon.weapons.length - 1]
+
+  const weaponTypeLabel = getWeaponTypeLabel(weapon.type)
+  const atk = Math.floor(weapon.attackBase + weapon.attackAdd * (weapon.maxLv - 1))
+  const crt = Math.floor(weapon.criticalBase + weapon.criticalAdd * (weapon.maxLv - 1))
+
  return (
-    <Box>
-      <Heading as="h1">{weapon.name}</Heading>
+    <Honkai3rdLayout>
+      <Head
+        title={`${weapon.name} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={`${t('common.honkai-3rd')} ${t('weapons-show.weapon')} / ${'⭐'.repeat(
+          weapon.rarity
+        )} / ${weaponTypeLabel} / ATK : ${atk} / CRT : ${crt}`}
+        canonicalHref={`/honkai3rd/v2/weapons/${weapon.id}`}
+      />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/v2/weapons', label: t('common.weapons') },
+            { href: `/honkai3rd/v2/weapons/${weapon.id}`, label: weapon.name }
+          ]}
+        />

-      <Box mb={3}>
-        <WeaponIcon key={weapon.id} icon={weapon.icon} rarity={weapon.rarity} />
-      </Box>
+        <Heading as="h1">{weapon.name}</Heading>

-      <Card mb={3}>
-        <Box sx={{ p: 1, borderBottom: 'default' }}>{replaceNewLine(weapon.description)}</Box>
-        <Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
-          <WeaponTypeIcon type={weapon.type} />
-          <Box ml={1}>{getWeaponTypeLabel(weapon.type)}</Box>
-        </Flex>
-        <Box sx={{ p: 1 }}>
-          ATK : {Math.floor(weapon.attackBase + weapon.attackAdd * (weapon.maxLv - 1))} / CRT :{' '}
-          {Math.floor(weapon.criticalBase + weapon.criticalAdd * (weapon.maxLv - 1))} (at Max Lv {weapon.maxLv})
+        <Box mb={3}>
+          <WeaponIcon key={weapon.id} icon={weapon.icon} rarity={weapon.rarity} />
        </Box>
-      </Card>

-      <Heading as="h2">Skills</Heading>
-      <Card>
-        {weapon.skills.map(skill => {
-          return (
-            <Fragment key={skill.id}>
-              <Box sx={{ borderBottom: 'default' }}>
-                <Heading
-                  as="h3"
+        <Card mb={3}>
+          <Box sx={{ p: 1, borderBottom: 'default' }}>{replaceNewLine(weapon.description)}</Box>
+          <Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
+            <WeaponTypeIcon type={weapon.type} />
+            <Box ml={1}>{getWeaponTypeLabel(weapon.type)}</Box>
+          </Flex>
+          <Box sx={{ p: 1 }}>
+            ATK : {atk} / CRT : {crt} (at Max Lv {weapon.maxLv})
+          </Box>
+        </Card>
+
+        <Heading as="h2">Skills</Heading>
+        <Card>
+          {weapon.skills.map(skill => {
+            return (
+              <Fragment key={skill.id}>
+                <Box sx={{ borderBottom: 'default' }}>
+                  <Heading
+                    as="h3"
+                    sx={{
+                      p: 1,
+                      m: 1
+                    }}
+                  >
+                    {skill.name}
+                  </Heading>
+                </Box>
+                <Box
                  sx={{
                    p: 1,
-                    m: 1
+                    borderBottom: 'default',
+                    '&:last-child': {
+                      borderBottom: 'none'
+                    }
                  }}
                >
-                  {skill.name}
-                </Heading>
-              </Box>
-              <Box
-                sx={{
-                  p: 1,
-                  borderBottom: 'default',
-                  '&:last-child': {
-                    borderBottom: 'none'
-                  }
-                }}
-              >
-                <FormattedText>
-                  {formatSubSkillInfo({
-                    info: skill.info,
-                    maxLv: weapon.maxLv,
-                    paramBase1: skill.param1,
-                    paramBase2: skill.param2,
-                    paramBase3: skill.param3,
-                    paramAdd1: skill.param1Add,
-                    paramAdd2: skill.param2Add,
-                    paramAdd3: skill.param3Add
-                  })}
-                </FormattedText>
-              </Box>
-            </Fragment>
-          )
-        })}
-      </Card>
-      {/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
-    </Box>
+                  <FormattedText>
+                    {formatSubSkillInfo({
+                      info: skill.info,
+                      maxLv: weapon.maxLv,
+                      paramBase1: skill.param1,
+                      paramBase2: skill.param2,
+                      paramBase3: skill.param3,
+                      paramAdd1: skill.param1Add,
+                      paramAdd2: skill.param2Add,
+                      paramAdd3: skill.param3Add
+                    })}
+                  </FormattedText>
+                </Box>
+              </Fragment>
+            )
+          })}
+        </Card>
+        {/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -88,7 +115,7 @@ export async function getStaticProps({ locale, params }: NextPageContext & { par
  const rootWeapon = loadWeaponData(params.weaponId)

  return {
-    props: { rootWeapon }
+    props: { rootWeapon, ...(await getI18NProps(locale)) }
  }
 }

@@ -1,51 +1,70 @@
 /** @jsxImportSource theme-ui */
 import { Box, Card } from '@theme-ui/components'
 import { NextPageContext } from 'next'
-import { Flex, Link } from 'theme-ui'
+import { Flex, Heading, Link } from 'theme-ui'
 import { loadWeaponCatalog } from '../../../../lib/v2/server/loadData'
 import { WeaponCatalogItem } from '../../../../lib/v2/data/types'
 import WeaponIcon from '../../../../components/v2/WeaponIcon'
+import Head from '../../../../components/atoms/Head'
+import Honkai3rdLayout from '../../../../components/layouts/Honkai3rdLayout'
+import { useTranslation } from 'next-i18next'
+import { getI18NProps } from '../../../../server/i18n'
+import Breadcrumb from '../../../../components/organisms/Breadcrumb'

 interface WeaponListPageProps {
  weaponCatalog: WeaponCatalogItem[]
 }

 const WeaponListPage = ({ weaponCatalog }: WeaponListPageProps) => {
+  const { t } = useTranslation()
  return (
-    <Box>
-      <h1>Weapons</h1>
-      <Flex sx={{ flexWrap: 'wrap' }}>
-        {weaponCatalog
-          .filter(filterWeapons)
-          .sort(sortWeapons)
-          .map(weapon => {
-            return (
-              <Box key={weapon.id} m={2}>
-                <Link href={`/v2-pre/weapons/${weapon.id}`}>
-                  <Card p={1}>
-                    <Flex sx={{ justifyContent: 'center' }}>
-                      <WeaponIcon icon={weapon.icon} rarity={weapon.maxRarity} />
-                    </Flex>
-                    <Box
-                      sx={{
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        px: 1,
-                        width: 112,
-                        textAlign: 'center'
-                      }}
-                    >
-                      {weapon.name}
-                    </Box>
-                    {/* {weapon.id} */}
-                  </Card>
-                </Link>
-              </Box>
-            )
-          })}
-      </Flex>
-    </Box>
+    <Honkai3rdLayout>
+      <Head
+        title={`${t('common.weapons')} - ${t('common.honkai-3rd')} - ${t('common.abyss-lab')}`}
+        description={t('weapons-list.description')}
+        canonicalHref={`/honkai3rd/v2/weapons`}
+      />
+      <Box p={2}>
+        <Breadcrumb
+          items={[
+            { href: '/honkai3rd', label: t('common.honkai-3rd') },
+            { href: '/honkai3rd/v2/weapons', label: t('common.weapons') }
+          ]}
+        />
+        <Heading as="h1">{t('common.weapons')}</Heading>
+        <Flex sx={{ flexWrap: 'wrap' }}>
+          {weaponCatalog
+            .filter(filterWeapons)
+            .sort(sortWeapons)
+            .map(weapon => {
+              return (
+                <Box key={weapon.id} m={1}>
+                  <Link href={`/honkai3rd/v2/weapons/${weapon.id}`}>
+                    <Card p={1}>
+                      <Flex sx={{ justifyContent: 'center' }}>
+                        <WeaponIcon icon={weapon.icon} rarity={weapon.maxRarity} />
+                      </Flex>
+                      <Box
+                        sx={{
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          px: 1,
+                          width: 112,
+                          textAlign: 'center'
+                        }}
+                      >
+                        {weapon.name}
+                      </Box>
+                      {/* {weapon.id} */}
+                    </Card>
+                  </Link>
+                </Box>
+              )
+            })}
+        </Flex>
+      </Box>
+    </Honkai3rdLayout>
  )
 }

@@ -55,7 +74,7 @@ export async function getStaticProps({ locale }: NextPageContext) {
  const weaponCatalog = loadWeaponCatalog()

  return {
-    props: { weaponCatalog }
+    props: { weaponCatalog, ...(await getI18NProps(locale)) }
  }
 }