Merge develop into main

src/components/organisms/Footer/FooterGophers.tsx

@@ -0,0 +1,44 @@
+import { Box } from '@mui/material'
+import { FC } from 'react'
+import Image from 'next/image'
+import {
+  GopherConductor,
+  GopherDrummer,
+  GopherTrumpeter,
+  GopherPomPom,
+  GopherFlowerBlue,
+  GopherFlowerPink,
+  GopherPartyPopper
+} from 'src/images/gopher'
+import { useReward } from 'react-rewards'
+import { confettiColors } from 'src/styles/color'
+import { useSize } from 'src/modules/hooks'
+
+export const FooterGophers: FC = () => {
+  const { isTabletOrOver } = useSize()
+  const { reward } = useReward('confettiGopherPopper', 'confetti', {
+    angle: 135,
+    colors: confettiColors,
+    position: 'absolute',
+    startVelocity: 20
+  })
+
+  return (
+    <Box display="flex" alignItems="flex-end" justifyContent="center" gap={0.5} width="100%" padding="24px 16px">
+      <Image src={GopherConductor} alt="gopher conductor" style={{ minWidth: 0, objectFit: 'contain' }} />
+      <Image src={GopherDrummer} alt="gopher drummer" style={{ minWidth: 0, objectFit: 'contain' }} />
+      <Image src={GopherTrumpeter} alt="gopher trumpeter" style={{ minWidth: 0, objectFit: 'contain' }} />
+      <Image src={GopherPomPom} alt="gopher pom pom" style={{ minWidth: 0, objectFit: 'contain' }} />
+      <Image src={GopherFlowerBlue} alt="gopher flower blue" style={{ minWidth: 0, objectFit: 'contain' }} />
+      {isTabletOrOver && (
+        <>
+          <Image src={GopherFlowerPink} alt="gopher flower pink" />
+          <Box onClick={reward} sx={{ '&:hover': { cursor: 'pointer' } }}>
+            <span id="confettiGopherPopper" />
+            <Image src={GopherPartyPopper} alt="gopher party popper" />
+          </Box>
+        </>
+      )}
+    </Box>
+  )
+}

src/components/organisms/Footer/index.tsx

@@ -4,6 +4,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import { useSize } from 'src/modules/hooks'
 import { FooterBottom } from 'src/components/organisms/Footer/FooterBottom'
 import { IconTwitter } from 'src/components/atoms'
+import { FooterGophers } from './FooterGophers'
 
 export const footerHeight = 60
 
@@ -20,6 +21,7 @@ export const Footer = () => {
         p: 0
       }}
     >
+      <FooterGophers />
       <Box
         sx={{
           display: 'flex',

src/components/organisms/SpecialThanksSection/SpecialThanksSection.stories.tsx

@@ -0,0 +1,15 @@
+import type { ComponentMeta, ComponentStoryObj } from '@storybook/react'
+import { SpecialThanksSection } from '.'
+
+const meta: ComponentMeta<typeof SpecialThanksSection> = {
+  component: SpecialThanksSection
+}
+export default meta
+
+export const Default: ComponentStoryObj<typeof SpecialThanksSection> = {
+  parameters: {
+    backgrounds: {
+      default: 'secondary'
+    }
+  }
+}

src/components/organisms/SpecialThanksSection/index.tsx

@@ -0,0 +1,35 @@
+import type { FC } from 'react'
+import { Box, Typography } from '@mui/material'
+import { Colors } from 'src/styles/color'
+import Image from 'next/image'
+
+export const SpecialThanksSection: FC = () => {
+  return (
+    <Box
+      bgcolor={Colors.background.secondary}
+      display={'flex'}
+      flexDirection={'column'}
+      alignItems={'center'}
+      px={{ xs: 2 }}
+      py={{ md: 10, xs: 4 }}
+    >
+      <Typography variant="h2" textAlign={'center'}>
+        Special Thanks
+      </Typography>
+      <Box bgcolor={Colors.background.primary} maxWidth={'1024px'} width={'100%'} borderRadius={5} p={{ xs: 3, md: 5 }}>
+        <Typography variant="body1" align="center">
+          reBako.io powered by
+        </Typography>
+        <Box position="relative" sx={{ aspectRatio: '16/9', maxWidth: '384px', mx: 'auto' }}>
+          <Image
+            src={'special-thanks/sikmi.png'}
+            alt={'しくみ製作所'}
+            quality={100}
+            fill
+            style={{ objectFit: 'contain' }}
+          />
+        </Box>
+      </Box>
+    </Box>
+  )
+}

src/components/organisms/SponsorsSection/index.tsx

@@ -1,29 +1,10 @@
 import type { FC } from 'react'
 import { Box, Typography } from '@mui/material'
-import { Colors, confettiColors } from 'src/styles/color'
-import {
-  GopherConductor,
-  GopherDrummer,
-  GopherFlowerBlue,
-  GopherFlowerPink,
-  GopherPartyPopper,
-  GopherPomPom,
-  GopherTrumpeter
-} from 'src/images/gopher'
-import Image from 'next/image'
-import { useSize } from 'src/modules/hooks'
-import { useReward } from 'react-rewards'
+import { Colors } from 'src/styles/color'
 import { sponsors } from 'src/modules/sponsors'
 import { SponsorsCard } from 'src/components/molecules/SponsorsCard'
 
 export const SponsorsSection: FC = () => {
-  const { isTabletOrOver } = useSize()
-  const { reward } = useReward('confettiGopherPopper', 'confetti', {
-    angle: 135,
-    colors: confettiColors,
-    position: 'absolute',
-    startVelocity: 20
-  })
   const { platinum, gold, silver, bronze } = sponsors
 
   return (
@@ -32,35 +13,18 @@ export const SponsorsSection: FC = () => {
       display={'flex'}
       flexDirection={'column'}
       alignItems={'center'}
-      mb={{ md: 12.5, xs: 7.5 }}
       px={{ xs: 2 }}
       py={{ md: 10, xs: 4 }}
     >
       <Typography variant="h2" textAlign={'center'}>
         Sponsors
       </Typography>
-      <Box gap={3} mb={5} display={'flex'} flexDirection={'column'} width={'100%'} alignItems={'center'}>
+      <Box gap={3} display={'flex'} flexDirection={'column'} width={'100%'} alignItems={'center'}>
         <SponsorsCard planType="platinum" sponsors={platinum} />
         <SponsorsCard planType="gold" sponsors={gold} />
         <SponsorsCard planType="silver" sponsors={silver} />
         <SponsorsCard planType="bronze" sponsors={bronze} />
       </Box>
-      <Box display="flex" alignItems="flex-end" justifyContent="center" gap={0.5} width="100%">
-        <Image src={GopherConductor} alt="gopher conductor" style={{ minWidth: 0, objectFit: 'contain' }} />
-        <Image src={GopherDrummer} alt="gopher drummer" style={{ minWidth: 0, objectFit: 'contain' }} />
-        <Image src={GopherTrumpeter} alt="gopher trumpeter" style={{ minWidth: 0, objectFit: 'contain' }} />
-        <Image src={GopherPomPom} alt="gopher pom pom" style={{ minWidth: 0, objectFit: 'contain' }} />
-        <Image src={GopherFlowerBlue} alt="gopher flower blue" style={{ minWidth: 0, objectFit: 'contain' }} />
-        {isTabletOrOver && (
-          <>
-            <Image src={GopherFlowerPink} alt="gopher flower pink" />
-            <Box onClick={reward} sx={{ '&:hover': { cursor: 'pointer' } }}>
-              <span id="confettiGopherPopper" />
-              <Image src={GopherPartyPopper} alt="gopher party popper" />
-            </Box>
-          </>
-        )}
-      </Box>
     </Box>
   )
 }

src/components/pages/PageTop/index.tsx

@@ -2,6 +2,7 @@ import type { NextPage } from 'next'
 import { Layout } from 'src/components/commons'
 // import { useSessionize } from 'src/modules/sessionize/hooks'
 import { MainVisual, TopDescription, SponsorsSection } from 'src/components/organisms'
+import { SpecialThanksSection } from 'src/components/organisms/SpecialThanksSection'
 
 export const PageTop: NextPage = () => {
   // TODO(@maito1201): 取得したデータを基にセッションデータを表示する
@@ -13,6 +14,7 @@ export const PageTop: NextPage = () => {
       <MainVisual />
       <TopDescription />
       <SponsorsSection />
+      <SpecialThanksSection />
     </Layout>
   )
 }

src/modules/sponsors/index.ts

@@ -51,7 +51,7 @@ const silverSponsors: SponsorInfo[] = [
   { id: 10, name: '株式会社カウシェ', logo: 'sponsors/silver/10_kauche.jpg' },
   { id: 11, name: 'ウォンテッドリー株式会社', logo: 'sponsors/silver/11_wantedly.png' },
   { id: 12, name: '株式会社カミナシ', logo: 'sponsors/silver/12_kaminashi.png' },
-  // { id: 13, name: 'エムスリー株式会社', logo: 'sponsors/silver/13_m3.png' },
+  { id: 13, name: 'エムスリー株式会社', logo: 'sponsors/silver/13_m3.png' },
   { id: 14, name: '株式会社Voicy', logo: 'sponsors/silver/14_voicy.png' },
   { id: 15, name: '株式会社Kiva', logo: 'sponsors/silver/15_kiva_proteger.png' },
   { id: 16, name: '株式会社ナレッジワーク', logo: 'sponsors/silver/16_knowledge_work.png' },
@@ -74,14 +74,14 @@ const silverSponsors: SponsorInfo[] = [
   },
   { id: 26, name: '株式会社バニッシュ・スタンダード', logo: 'sponsors/silver/26_vanish_standard.png' },
   { id: 27, name: '株式会社アンドパッド', logo: 'sponsors/silver/27_andpad.png' },
-  // { id: 28, name: '株式会社ヤプリ', logo: 'sponsors/silver/28_yappli.png' },
+  { id: 28, name: '株式会社ヤプリ', logo: 'sponsors/silver/28_yappli.png' },
   { id: 29, name: '株式会社ハイヤールー', logo: 'sponsors/silver/29_hire_roo.webp' },
   { id: 30, name: '株式会社SODA', logo: 'sponsors/silver/30_soda.jpg' },
   { id: 31, name: '株式会社SocialDog', logo: 'sponsors/silver/31_social_dog.png' },
   { id: 32, name: 'コネヒト株式会社', logo: 'sponsors/silver/32_connehito.png' },
   { id: 33, name: '株式会社マネーフォワード', logo: 'sponsors/silver/33_money_forward.png' },
   { id: 34, name: '株式会社サイバーエージェント', logo: 'sponsors/silver/34_cyber_agent.png' },
-  // { id: 35, name: '株式会社メリカリ', logo: 'sponsors/silver/35_mercari.png' },
+  { id: 35, name: '株式会社メルカリ', logo: 'sponsors/silver/35_mercari.png' },
   { id: 36, name: '株式会社Newbees', logo: 'sponsors/silver/36_newbees.png' },
   { id: 37, name: 'ミイダス株式会社', logo: 'sponsors/silver/37_miidas.png' },
   { id: 38, name: '株式会社Gaudiy', logo: 'sponsors/silver/38_gaudiy.png' },
@@ -98,10 +98,10 @@ const bronzeSponsors: SponsorInfo[] = [
   { id: 42, name: '株式会社カオナビ', logo: 'sponsors/bronze/42_kaonavi.png' },
   { id: 43, name: '株式会社ディー・エヌ・エー', logo: 'sponsors/bronze/43_dena.png' },
   { id: 44, name: '株式会社モリサワ', logo: 'sponsors/bronze/44_morisawa.png' },
-  // { id: 45, name: '株式会社フクロウラボ', logo: 'sponsors/bronze/45_fukurou_labo.png' },
+  { id: 45, name: '株式会社フクロウラボ', logo: 'sponsors/bronze/45_fukurou_labo.jpg' },
   { id: 46, name: '合同会社ザウエル', logo: 'sponsors/bronze/46_zauel.png' },
   { id: 47, name: '株式会社Showcase Gig', logo: 'sponsors/bronze/47_showcase_gig.jpg' },
-  // { id: 48, name: 'STORES 株式会社', logo: 'sponsors/bronze/48_stores.png' },
+  { id: 48, name: 'STORES 株式会社', logo: 'sponsors/bronze/48_stores.png' },
   { id: 49, name: '株式会社トレタ', logo: 'sponsors/bronze/49_toreta.png' },
   { id: 50, name: '株式会社MIXI', logo: 'sponsors/bronze/50_mixi.png' },
   { id: 51, name: 'freee株式会社', logo: 'sponsors/bronze/51_freee.png' },