Improve version page

data/honkai3rd/versions.yaml

@@ -1,7 +1,7 @@
 - previousVersion: '5.8'
   version: '5.9'
-  name: '-'
+  name: 'Banquet of Helix'
-  krName: '-'
+  krName: '나선의 연회'
   duration:
     - 2022-08-11
     - 2022-09-22
@@ -10,6 +10,10 @@
   newWeapons:
     - vill-v-pri-weapon
     - vill-v-weapon
+  newStigmataSets:
+    - carlo-collodi
+  newFoundryStigmataSets:
+    - dickens
   description: ''
   superstring:
     - - label: qua
@@ -18,9 +22,9 @@
         boss: ofg
   ma:
     - - label: sss
-        boss: kosma
+        boss: qksm
       - label: sss
-        boss: jizo-sss
+        boss: jz-sss
       - label: ss
         boss: hpt
   supplyEvents: []
@@ -37,10 +41,14 @@
   newWeapons:
     - griseo-pri-weapon
     - griseo-weapon
+  newStigmataSets:
+    - cezanne
+  newFoundryStigmataSets:
+    - gustav-klimt
   description: ''
   superstring:
     - - label: physical
-        boss: jizo
+        boss: jz
       - label: paralyze
         boss: jk
     - - label: type
@@ -62,7 +70,7 @@
     - - label: type
         boss: wolf
       - label: type
-        boss: hdl
+        boss: hmd
   ma:
     - - label: sss
         boss: hod
@@ -75,7 +83,7 @@
       - label: ss
         boss: hpt
       - label: ss
-        boss: hdl
+        boss: hmd
     - - label: sss
         boss: ofg
       - label: ss
@@ -85,7 +93,7 @@
     - - label: sss
         boss: hod
       - label: ss
-        boss: kasumi
+        boss: ksm
       - label: ss
         boss: ana
     - - label: sss
@@ -701,9 +709,74 @@
     - lost-conviction-damnation
     - lost-conviction
     - echo-of-paradise
+  newStigmataSets:
+    - zeno
+    - handel
+  newFoundryStigmataSets:
+    - handel
   description: ''
-  superstring: []
+  superstring:
-  ma: []
+    - - label: lightning (paralyze)
+        boss: husk
+      - label: ice
+        boss: hm
+    - - label: paralyze
+        boss: jk
+      - label: img
+        boss: ofg
+    - - label: type
+        boss: ksm
+      - label: lightning (hit count)
+        boss: husk2
+    - - label: ignite
+        boss: aka
+      - label: physical
+        boss: jz
+    - - label: lightning
+        boss: wolf
+      - label: type
+        boss: hd
+    - - label: ignite
+        boss: aka
+      - label: blood thirsty
+        boss: adr
+  ma:
+    - - label: sss
+        boss: husk-sss
+      - label: ss
+        boss: ksm
+      - label: ss
+        boss: ana
+    - - label: sss
+        boss: jz-sss
+      - label: ss
+        boss: hpt
+      - label: ss
+        boss: bns
+    - - label: sss
+        boss: qt-sss
+      - label: ss
+        boss: dd
+      - label: ss
+        boss: kl
+    - - label: sss
+        boss: husk-sss
+      - label: ss
+        boss: aka
+      - label: ss
+        boss: qc
+    - - label: sss
+        boss: qt-sss
+      - label: ss
+        boss: dd
+      - label: ss
+        boss: dj
+    - - label: sss
+        boss: jz-sss
+      - label: ss
+        boss: hm
+      - label: ss
+        boss: hd
   supplyEvents:
     - name: Key of Reason Focused Supply B
       duration:
@@ -1417,9 +1490,73 @@
     - purana-phantasma
     - gilded-librae
     - cerulean-flare
+  newStigmataSets:
+    - bastet
+  newFoundryStigmataSets:
+    - jin-shengtan
   description: ''
-  superstring: []
+  superstring:
-  ma: []
+    - - label: ice
+        boss: hm
+      - label: ice
+        boss: hd
+    - - label: qua
+        boss: qc
+      - label: img
+        boss: hod
+    - - label: ignite
+        boss: pvt
+      - label: ice
+        boss: mpe
+    - - label: lightning
+        boss: wolf
+      - label: fire
+        boss: tank2
+    - - label: type
+        boss: sk
+      - label: ice
+        boss: bns
+    - - label: ignite
+        boss: aka
+      - label: type
+        boss: hos
+  ma:
+    - - label: sss
+        boss: ofg
+      - label: ss
+        boss: hm
+      - label: ss
+        boss: qt
+    - - label: sss
+        boss: tank2
+      - label: ss
+        boss: ksm
+      - label: ss
+        boss: ana
+    - - label: sss
+        boss: wolf-sss
+      - label: ss
+        boss: bns
+      - label: ss
+        boss: hmd
+    - - label: sss
+        boss: ofg
+      - label: ss
+        boss: dd
+      - label: ss
+        boss: hpt
+    - - label: sss
+        boss: tank2
+      - label: ss
+        boss: kl
+      - label: ss
+        boss: aka
+    - - label: sss
+        boss: wolf-sss
+      - label: ss
+        boss: ask
+      - label: ss
+        boss: dj
   supplyEvents:
     - name: Nue of the Shadow Focused Supply B
       duration:
@@ -2392,9 +2529,74 @@
     - midnight-eclipse
     - astral-divide-pisces
     - astral-rend-white-dwarf
+  newStigmataSets:
+    - bianka-theatre
+    - ragna
+  newFoundryStigmataSets:
+    - fuhua-margrave
   description: ''
-  superstring: []
+  superstring:
-  ma: []
+    - - label: img
+        boss: hod
+      - label: ignite
+        boss: aka
+    - - label: img
+        boss: hod
+      - label: blood thirsty
+        boss: homu
+    - - label: physical
+        boss: ova
+      - label: type
+        boss: wolf
+    - - label: shield
+        boss: rw
+      - label: ice
+        boss: mpe
+    - - label: ignite
+        boss: aka
+      - label: lightning (hit count)
+        boss: husk2
+    - - label: qua
+        boss: qc
+      - label: ranged
+        boss: ask2
+  ma:
+    - - label: sss
+        boss: wolf-sss
+      - label: ss
+        boss: hm
+      - label: ss
+        boss: bns
+    - - label: sss
+        boss: hod
+      - label: ss
+        boss: ksm
+      - label: ss
+        boss: bke
+    - - label: sss
+        boss: pvt-sss
+      - label: ss
+        boss: ofg
+      - label: ss
+        boss: ksm
+    - - label: sss
+        boss: hod
+      - label: ss
+        boss: dd
+      - label: ss
+        boss: kl
+    - - label: sss
+        boss: wolf-sss
+      - label: ss
+        boss: sk
+      - label: ss
+        boss: dj
+    - - label: sss
+        boss: pvt-sss
+      - label: ss
+        boss: hpt
+      - label: ss
+        boss: hov
   supplyEvents:
     - name: Skaldi Ondurgud Supply B
       duration:
@@ -3872,9 +4074,71 @@
   newWeapons:
     - falcon-flare-0019
     - falcon-flare-final
+  newStigmataSets:
+    - allan-poe
   description: ''
-  superstring: []
+  superstring:
-  ma: []
+    - - label: ice
+        boss: mpe
+      - label: qua
+        boss: qc
+    - - label: physical
+        boss: jz
+      - label: ice
+        boss: bns
+    - - label: type
+        boss: hos
+      - label: ranged
+        boss: ask2
+    - - label: ranged
+        boss: tank2
+      - label: lightning
+        boss: wolf
+    - - label: lightning
+        boss: bke
+      - label: type
+        boss: sk
+    - - label: type
+        boss: ksm
+      - label: ignite
+        boss: pvt
+  ma:
+    - - label: sss
+        boss: husk-sss
+      - label: ss
+        boss: ana
+      - label: ss
+        boss: bke
+    - - label: sss
+        boss: jz-sss
+      - label: ss
+        boss: hm
+      - label: ss
+        boss: ana
+    - - label: sss
+        boss: hod
+      - label: ss
+        boss: dd
+      - label: ss
+        boss: bns
+    - - label: sss
+        boss: jz-sss
+      - label: ss
+        boss: pvt
+      - label: ss
+        boss: hmd
+    - - label: sss
+        boss: husk-sss
+      - label: ss
+        boss: ana
+      - label: ss
+        boss: kl
+    - - label: sss
+        boss: hod
+      - label: ss
+        boss: qc
+      - label: ss
+        boss: bke
   supplyEvents:
     - name: Eos Gloria Focused Supply B
       duration:
@@ -4671,8 +4935,75 @@
   newWeapons:
     - hekate-s-sombre
     - miracle-kissy-pillow
+  newStigmataSets:
+    - paganini
+  newFoundryStigmataSets:
+    - caravaggio
+    - wilde
   description: |
     https://honkaiimpact3.mihoyo.com/global/en-us/news/17390
+  superstring:
+    - - label: physical
+        boss: ask2
+      - label: fire
+        boss: ana
+    - - label: shield
+        boss: rw
+      - label: ranged
+        boss: tank2
+    - - label: lightning
+        boss: wolf
+      - label: ice
+        boss: hm
+    - - label: ignite
+        boss: pvt
+      - label: type
+        boss: dj
+    - - label: ice
+        boss: mpe
+      - label: type
+        boss: sk
+    - - label: fire
+        boss: hmd
+      - label: img
+        boss: hod
+  ma:
+    - - label: sss
+        boss: husk-sss
+      - label: ss
+        boss: pvt
+      - label: ss
+        boss: hov
+    - - label: sss
+        boss: jz-sss
+      - label: ss
+        boss: ana
+      - label: ss
+        boss: hpt
+    - - label: sss
+        boss: wolf-sss
+      - label: ss
+        boss: dd
+      - label: ss
+        boss: hm
+    - - label: sss
+        boss: husk-sss
+      - label: ss
+        boss: qt
+      - label: ss
+        boss: ksm
+    - - label: sss
+        boss: jz-sss
+      - label: ss
+        boss: hod
+      - label: ss
+        boss: dj
+    - - label: sss
+        boss: wolf-sss
+      - label: ss
+        boss: hmd
+      - label: ss
+        boss: bns
   supplyEvents:
     - name: Keys of the Void Focused Supply B
       duration:

public/locales/en-US/common.json

@@ -96,6 +96,7 @@
     "current": "Current Version",
     "new-battlesuits": "New Battlesuits",
     "new-weapons": "New Weapons",
+    "new-stigmata-sets": "New Stigmata Sets",
     "supply-events": "Supply Events",
     "supply-events-disclaimer": "DISCLAIMER: The schedule is based on Global - Americas Server. It may not be accurate since we update this manually. Please check the actual in-game information again before pulling supplies."
   },

public/locales/ko-KR/common.json

@@ -86,6 +86,7 @@
     "current": "현재 버전",
     "new-battlesuits": "신규 발키리",
     "new-weapons": "신규 무기",
+    "new-stigmata-sets": "신규 성흔 세트",
     "supply-events": "보급 이벤트",
     "supply-events-disclaimer": "주의: 보급 일정은 글로벌 아메리카 서버 기준으로 작성되어 있습니다. 수작업으로 갱신하기에 정확하지 않은 부분이 있을 수도 있습니다. 보급 가차를 돌리기 전에 게임 내 정보를 꼭 다시 한번 확인해주세요."
   },

src/components/molecules/StigmataSetCard.tsx

@@ -7,9 +7,58 @@ import SquareImageBox from '../atoms/SquareImageBox'
 
 interface StigmataSetCardProps {
   stigmataSet: Pick<StigmataSet, 'id' | 'name' | 'rarity'>
+  size?: 'sm' | 'default'
 }
 
-const StigmataSetCard = ({ stigmataSet }: StigmataSetCardProps) => {
+const StigmataSetCard = ({
+  stigmataSet,
+  size = 'default',
+}: StigmataSetCardProps) => {
+  if (size === 'sm') {
+    return (
+      <Card
+        sx={{
+          width: 'fit-content',
+          p: 1,
+          m: 1,
+        }}
+      >
+        <PageLink href={`/honkai3rd/stigmata/${stigmataSet.id}-set`}>
+          <Flex>
+            <SquareImageBox
+              size={30}
+              alt={`${stigmataSet.name} Top`}
+              src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-top.png`}
+              mr={1}
+            />
+            <SquareImageBox
+              size={30}
+              alt={`${stigmataSet.name} Mid`}
+              src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-mid.png`}
+              mr={1}
+            />
+            <SquareImageBox
+              size={30}
+              alt={`${stigmataSet.name} Bottom`}
+              src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-bot.png`}
+              mr={1}
+            />
+            <Box
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                width: '100%',
+                whiteSpace: 'nowrap',
+                textAlign: 'center',
+              }}
+            >
+              <Text sx={{ lineHeight: '30px' }}>{stigmataSet.name}</Text>
+            </Box>
+          </Flex>
+        </PageLink>
+      </Card>
+    )
+  }
   return (
     <Card
       sx={{

src/components/organisms/BossTable.tsx

@@ -30,11 +30,11 @@ const BossTable = ({ versionData, today }: BossTableProps) => {
         </Box>
         {versionData.superstring.map(([first, second], index) => {
           const firstDuration = [
-            addDays(versionStartDate, index * 7),
+            addDays(versionStartDate, index * 7 + 0),
-            addDays(versionStartDate, index * 7 + 2),
+            addDays(versionStartDate, index * 7 + 3),
           ]
           const secondDuration = [
-            addDays(versionStartDate, index * 7 + 3),
+            addDays(versionStartDate, index * 7 + 4),
             addDays(versionStartDate, index * 7 + 6),
           ]
 
@@ -79,8 +79,8 @@ const BossTable = ({ versionData, today }: BossTableProps) => {
         </Box>
         {versionData.ma.map(([first, second, third], index) => {
           const durations = [
-            addDays(versionStartDate, index * 7 + 3),
+            addDays(versionStartDate, index * 7 + 4),
-            addDays(versionStartDate, (index + 1) * 7 + 2),
+            addDays(versionStartDate, (index + 1) * 7 + 3),
           ]
           const active =
             today != null && today >= durations[0] && today <= durations[1]

src/components/organisms/GanttChart.tsx

@@ -58,9 +58,7 @@ const GanttChart = ({
   }, [items])
 
   return (
-    <Box
+    <Box sx={{ width: weeksToRender * widthOfWeek + 70 }}>
-      sx={{ width: weeksToRender * widthOfWeek + 70, marginLeft: widthOfDay }}
-    >
       <WeekLabelRow
         firstDateToRender={firstDateToRender}
         weeksToRender={weeksToRender}
@@ -79,7 +77,7 @@ const GanttChart = ({
               totalRow={totalRow}
             />
           )
-        }, daysToRender)}
+        }, daysToRender + 1)}
 
         {times((index) => {
           return (
@@ -87,23 +85,23 @@ const GanttChart = ({
               key={`weekdate-${index}`}
               sx={{
                 position: 'absolute',
-                left: (index - 1) * widthOfDay,
+                left: index * widthOfDay,
                 width: widthOfDay,
                 textAlign: 'center',
                 color:
-                  index - (1 % 7) === 3
+                  (index - 1) % 7 === 2
                     ? 'red'
-                    : index - (1 % 7) === 2
+                    : (index - 1) % 7 === 1
                     ? 'blue'
                     : 'default',
               }}
             >
-              {format(addDays(firstDateToRender, index - 1), 'EEEEE')}
+              {format(addDays(firstDateToRender, index), 'EEEEE')}
             </Box>
           )
-        }, daysToRender + 2)}
+        }, daysToRender + 1)}
 
-        {todayDate != null && (
+        {todayDate != null && todayDate <= endDate && (
           <TodayBox
             totalRow={totalRow}
             todayDate={todayDate}
@@ -116,11 +114,15 @@ const GanttChart = ({
             boxSizing: 'border-box',
             position: 'absolute',
             width: 1,
-            height: totalRow * (itemHeight + 10) + itemHeight,
+            top: 24,
-            backgroundColor: 'red.3',
+            height: totalRow * (itemHeight + 10) + itemHeight - 24,
+            backgroundColor: 'red.9',
+            opacity: 0.8,
             zIndex: 20,
             left:
-              differenceInCalendarDays(endDate, firstDateToRender) * widthOfDay,
+              differenceInCalendarDays(endDate, firstDateToRender) *
+                widthOfDay +
+              widthOfDay / 2,
             pointerEvents: 'none',
           }}
         />
@@ -134,6 +136,7 @@ const GanttChart = ({
             left:
               differenceInCalendarDays(endDate, firstDateToRender) *
                 widthOfDay +
+              widthOfDay / 2 +
               -140,
             width: 300,
             pointerEvents: 'none',
@@ -148,7 +151,7 @@ const GanttChart = ({
               new Date(item.duration[0]),
               firstDateToRender
             ) *
-              widthOfDay -
+              widthOfDay +
             widthOfDay / 2
           const length =
             differenceInCalendarDays(
@@ -266,7 +269,8 @@ const TodayBox = ({
           zIndex: 21,
           top: 170,
           left:
-            differenceInCalendarDays(new Date(todayDate), firstDateToRender) *
+            (differenceInCalendarDays(new Date(todayDate), firstDateToRender) +
+              1) *
               widthOfDay -
             160,
           width: 300,
@@ -288,7 +292,7 @@ const TodayBox = ({
           opacity: 0.3,
           zIndex: 20,
           left:
-            differenceInCalendarDays(todayDate, firstDateToRender) *
+            (differenceInCalendarDays(todayDate, firstDateToRender) + 1) *
               widthOfDay -
             20,
           pointerEvents: 'none',

src/lib/honkai3rd/versions.ts

@@ -6,6 +6,7 @@ export interface VersionData {
   duration: [string, string]
   newBattlesuits: string[]
   newWeapons: string[]
+  newStigmataSets: string[]
   description: string
   supplyEvents: SupplyEventData[]
   superstring: [

src/pages/honkai3rd/enemies.tsx

@@ -19,11 +19,11 @@ const NumberArray = times((index) => {
 }, 1000)
 
 const BossSearchPage = ({}: BossSearchPageProps) => {
-  return NumberArray.map((number) => number + '.png').map((item) => {
+  return NumberArray.map((item) => {
     return (
       <img
         key={item}
-        src={`https://upload-os-bbs.mihoyo.com/game_record/honkai3rd/global/SpriteOutput/OpenWorld/QuestBossIcon/BOSS_${item}`}
+        src={`https://upload-os-bbs.mihoyo.com/game_record/honkai3rd/global/SpriteOutput/OpenWorld/QuestBossIcon/DG_${item}_M01.png`}
       />
     )
   })

src/pages/honkai3rd/versions/[versionId].tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Box, Heading, Link, Flex, Text, Paragraph } from '@theme-ui/components'
+import { Box, Heading, Flex, Text, Paragraph } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import GanttChart from '../../../components/organisms/GanttChart'
@@ -9,7 +9,6 @@ import {
 } from '../../../server/data/honkai3rd/versions'
 import { format as formatDate } from 'date-fns'
 import { getBattlesuitById } from '../../../server/data/honkai3rd/battlesuits'
-import NextLink from 'next/link'
 import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import { getWeaponById } from '../../../server/data/honkai3rd/weapons'
 import ScrollContainer from 'react-indiana-drag-scroll'
@@ -25,17 +24,24 @@ import { assetsBucketBaseUrl } from '../../../lib/consts'
 import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 import { useEffect, useState } from 'react'
 import BossTable from '../../../components/organisms/BossTable'
+import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
+import WeaponCard from '../../../components/molecules/WeaponCard'
+import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
+import { getStigmataSetBySetId } from '../../../server/data/honkai3rd/stigmata'
+import { StigmataSet } from '../../../lib/honkai3rd/stigmata'
 
 interface VersionShowPageProps {
   versionData: VersionData
   battlesuits: BattlesuitData[]
   weapons: WeaponData[]
+  stigmataSets: StigmataSet[]
 }
 
 const VersionShowPage = ({
   versionData,
   battlesuits,
   weapons,
+  stigmataSets,
 }: VersionShowPageProps) => {
   const { t } = useTranslation()
   const [today, setToday] = useState<Date | null>(null)
@@ -102,26 +108,14 @@ const VersionShowPage = ({
             <Heading as='h3' mb={2}>
               {t('versions.new-battlesuits')}
             </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
               {battlesuits.map((battlesuit) => {
                 return (
-                  <NextLink
+                  <BattlesuitCard
                     key={battlesuit.id}
-                    href={`/honkai3rd/battlesuits/${battlesuit.id}`}
+                    battlesuit={battlesuit}
-                    passHref
+                    size='sm'
-                  >
-                    <Link>
-                      <Flex sx={{ alignItems: 'center' }} mb={2}>
-                        <SquareImageBox
-                          size={40}
-                          src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
-                          alt={`${battlesuit.name}`}
-                          mr={2}
                   />
-                        <Text>{battlesuit.name}</Text>
-                      </Flex>
-                    </Link>
-                  </NextLink>
                 )
               })}
             </Box>
@@ -129,26 +123,23 @@ const VersionShowPage = ({
             <Heading as='h3' mb={2}>
               {t('versions.new-weapons')}
             </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
               {weapons.map((weapon) => {
+                return <WeaponCard key={weapon.id} weapon={weapon} size='sm' />
+              })}
+            </Box>
+
+            <Heading as='h3' mb={2}>
+              {t('versions.new-stigmata-sets')}
+            </Heading>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
+              {stigmataSets.map((stigmataSet) => {
                 return (
-                  <NextLink
+                  <StigmataSetCard
-                    key={weapon.id}
+                    key={stigmataSet.id}
-                    href={`/honkai3rd/weapons/${weapon.id}`}
+                    stigmataSet={stigmataSet}
-                    passHref
+                    size='sm'
-                  >
-                    <Link>
-                      <Flex sx={{ alignItems: 'center' }} mb={2}>
-                        <SquareImageBox
-                          size={40}
-                          src={`${assetsBucketBaseUrl}/honkai3rd/weapons/${weapon.id}.png`}
-                          alt={`${weapon.name}`}
-                          mr={2}
                   />
-                        <Text>{weapon.name}</Text>
-                      </Flex>
-                    </Link>
-                  </NextLink>
                 )
               })}
             </Box>
@@ -225,12 +216,16 @@ export async function getStaticProps({
   const weapons = versionData.newWeapons.map((weaponId) => {
     return getWeaponById(weaponId, locale)
   })
+  const stigmataSets = versionData.newStigmataSets.map((stigmataSetId) => {
+    return getStigmataSetBySetId(stigmataSetId, locale)
+  })
 
   return {
     props: {
       versionData,
       battlesuits,
       weapons,
+      stigmataSets,
       ...(await getI18NProps(locale)),
     },
   }

src/pages/honkai3rd/versions/index.tsx

@@ -27,12 +27,16 @@ import WeaponCard from '../../../components/molecules/WeaponCard'
 import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
 import { useEffect, useState } from 'react'
 import BossTable from '../../../components/organisms/BossTable'
+import { getStigmataSetBySetId } from '../../../server/data/honkai3rd/stigmata'
+import { StigmataSet } from '../../../lib/honkai3rd/stigmata'
+import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
 
 interface VersionIndexPageProps {
   versionDataList: VersionData[]
   currentVersionData: VersionData
   currentVersionNewBattlesuits: BattlesuitData[]
   currentVersionNewWeapons: WeaponData[]
+  currentVersionNewStigmataSets: StigmataSet[]
 }
 
 const VersionIndexPage = ({
@@ -40,6 +44,7 @@ const VersionIndexPage = ({
   currentVersionNewBattlesuits,
   versionDataList,
   currentVersionNewWeapons,
+  currentVersionNewStigmataSets,
 }: VersionIndexPageProps) => {
   const { t } = useTranslation()
   const [today, setToday] = useState<Date | null>(null)
@@ -98,7 +103,7 @@ const VersionIndexPage = ({
             <Heading as='h3' mb={2}>
               {t('versions.new-battlesuits')}
             </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
               {currentVersionNewBattlesuits.map((battlesuit) => {
                 return (
                   <BattlesuitCard
@@ -113,11 +118,26 @@ const VersionIndexPage = ({
             <Heading as='h3' mb={2}>
               {t('versions.new-weapons')}
             </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
               {currentVersionNewWeapons.map((weapon) => {
                 return <WeaponCard key={weapon.id} weapon={weapon} size='sm' />
               })}
             </Box>
+
+            <Heading as='h3' mb={2}>
+              {t('versions.new-stigmata-sets')}
+            </Heading>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
+              {currentVersionNewStigmataSets.map((stigmataSet) => {
+                return (
+                  <StigmataSetCard
+                    key={stigmataSet.id}
+                    stigmataSet={stigmataSet}
+                    size='sm'
+                  />
+                )
+              })}
+            </Box>
           </Box>
 
           <Heading as='h3' mb={2}>
@@ -222,11 +242,18 @@ export async function getStaticProps({ locale }: NextPageContext) {
     }
   )
 
+  const currentVersionNewStigmataSets = currentVersionData.newStigmataSets.map(
+    (stigmataSetId) => {
+      return getStigmataSetBySetId(stigmataSetId, locale)
+    }
+  )
+
   return {
     props: {
       currentVersionData,
       currentVersionNewBattlesuits,
       currentVersionNewWeapons,
+      currentVersionNewStigmataSets,
       versionDataList: listVersionData(locale),
       ...(await getI18NProps(locale)),
     },