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 ( + + gopher conductor + gopher drummer + gopher trumpeter + gopher pom pom + gopher flower blue + {isTabletOrOver && ( + <> + gopher flower pink + + + gopher party popper + + + )} + + ) +} 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 - + - - gopher conductor - gopher drummer - gopher trumpeter - gopher pom pom - gopher flower blue - {isTabletOrOver && ( - <> - gopher flower pink - - - gopher party popper - - - )} - ) } 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 = () => { + ) }