diff --git a/public/special-thanks/sikmi.png b/public/special-thanks/sikmi.png
new file mode 100644
index 00000000..2e277bf2
Binary files /dev/null and b/public/special-thanks/sikmi.png differ
diff --git a/src/components/organisms/Footer/FooterGophers.tsx b/src/components/organisms/Footer/FooterGophers.tsx
new file mode 100644
index 00000000..6bfba6c2
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ {isTabletOrOver && (
+ <>
+
+
+
+
+
+ >
+ )}
+
+ )
+}
diff --git a/src/components/organisms/Footer/index.tsx b/src/components/organisms/Footer/index.tsx
index c583c007..c19f3c98 100644
--- a/src/components/organisms/Footer/index.tsx
+++ b/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
}}
>
+
= {
+ component: SpecialThanksSection
+}
+export default meta
+
+export const Default: ComponentStoryObj = {
+ parameters: {
+ backgrounds: {
+ default: 'secondary'
+ }
+ }
+}
diff --git a/src/components/organisms/SpecialThanksSection/index.tsx b/src/components/organisms/SpecialThanksSection/index.tsx
new file mode 100644
index 00000000..29912062
--- /dev/null
+++ b/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 (
+
+
+ Special Thanks
+
+
+
+ reBako.io powered by
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/organisms/SponsorsSection/index.tsx b/src/components/organisms/SponsorsSection/index.tsx
index dd3811b4..284fe42f 100644
--- a/src/components/organisms/SponsorsSection/index.tsx
+++ b/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 }}
>
Sponsors
-
+
-
-
-
-
-
-
- {isTabletOrOver && (
- <>
-
-
-
-
-
- >
- )}
-
)
}
diff --git a/src/components/pages/PageTop/index.tsx b/src/components/pages/PageTop/index.tsx
index 9e756b77..c773905c 100644
--- a/src/components/pages/PageTop/index.tsx
+++ b/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 = () => {
+
)
}