feat: Add a section for special thanks on top page (#200)

Author: taigakiyokawa

public/special-thanks/sikmi.png

@@ -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/FooterGophers.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/Footer/index.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/SpecialThanksSection.stories.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/SpecialThanksSection/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/organisms/SponsorsSection/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>
   )
 }