merge main into develop (#72)

* [fix] Fix date for closing application from Sat to Tue (#65) (#66)

* feat: community booth section (#67)

* feat: specified commercial transaction (#71)

* feat: specified commercial transaction

* fix typo

* fix: i18n locale

* fix: english explanation

---------

Co-authored-by: Taiga KIYOKAWA <[email protected]>

Author: maito1201

src/components/organisms/CommunityBoothSection/CommunityBoothSection.stories.tsx

@@ -0,0 +1,10 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+import { CommunityBoothSection } from '.'
+
+const meta: ComponentMeta<typeof CommunityBoothSection> = {
+  component: CommunityBoothSection
+}
+export default meta
+
+const Template: ComponentStory<typeof CommunityBoothSection> = args => <CommunityBoothSection {...args} />
+export const Default = Template.bind({})

src/components/organisms/CommunityBoothSection/index.tsx

@@ -0,0 +1,34 @@
+import type { FC } from 'react'
+import Link from 'next/link'
+import { Box, Typography } from '@mui/material'
+import { Button } from 'src/components/atoms'
+import { useTranslation } from 'react-i18next'
+import { Colors } from 'src/styles/color'
+
+export const CommunityBoothSection: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Box
+      bgcolor={Colors.background.primary}
+      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'}>
+        Community Booth
+      </Typography>
+      <Typography variant="body1" mb={{ md: 5, xs: 2 }}>
+        {t('community_booth_description')}
+      </Typography>
+      <Link href="https://drive.google.com/file/d/1QUr1BWF7Mu1vU40UieBcvkMf5B-tAf91/view?usp=share_link">
+        <a target="_blank">
+          <Button text={t('consider_a_community_booth')} />
+        </a>
+      </Link>
+    </Box>
+  )
+}

src/components/organisms/Footer/index.tsx

@@ -64,6 +64,14 @@ export const Footer = () => {
                   [email protected]
                 </Typography>
               </Link>
+              <Link
+                href="https://drive.google.com/file/d/1Xon1uyLT-810sxnkLMngmL67z68K3XJG/view?usp=share_link"
+                target="_blank"
+              >
+                <Typography variant="body2" sx={{ color: Colors.text.default }}>
+                  {t('act_on_specified_commercial_transactions')}
+                </Typography>
+              </Link>
             </Box>
           </Box>
           <Box

src/components/organisms/SponsorsSection/index.tsx

@@ -3,10 +3,29 @@ import Link from 'next/link'
 import { Box, Typography } from '@mui/material'
 import { Button } from 'src/components/atoms'
 import { useTranslation } from 'react-i18next'
-import { Colors } from 'src/styles/color'
+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'
 
 export const SponsorsSection: FC = () => {
   const { t } = useTranslation()
+  const { isTabletOrOver } = useSize()
+  const { reward } = useReward('confettiGopherPopper', 'confetti', {
+    angle: 135,
+    colors: confettiColors,
+    position: 'absolute',
+    startVelocity: 20
+  })
 
   return (
     <Box
@@ -32,11 +51,47 @@ export const SponsorsSection: FC = () => {
         <SponsorsCard planType="silver" logoImages={[]}/>
         <SponsorsCard planType="bronze" logoImages={[]}/>
       </Box> */}
-      <Link href="https://drive.google.com/file/d/1wwFeJk0rT0SydwDi2wx4wVVAD6psDUrL/view?usp=share_link">
-        <a target="_blank">
-          <Button text={t('consider_a_sponsor')} />
-        </a>
-      </Link>
+      <Box display="grid" gridTemplateColumns={isTabletOrOver ? '1fr 1fr 1fr' : '1fr'} gap={2}>
+        {isTabletOrOver && (
+          <Box display="flex" alignItems="flex-end" justifyContent="flex-end" gap={0.5}>
+            <Image src={GopherConductor} alt="gopher conductor" />
+            <Image src={GopherDrummer} alt="gopher drummer" />
+            <Image src={GopherTrumpeter} alt="gopher trumpeter" />
+            <Image src={GopherPomPom} alt="gopher pom pom" />
+          </Box>
+        )}
+        <Link href="https://drive.google.com/file/d/1wwFeJk0rT0SydwDi2wx4wVVAD6psDUrL/view?usp=share_link">
+          <a target="_blank">
+            <Button text={t('consider_a_sponsor')} />
+          </a>
+        </Link>
+        {isTabletOrOver && (
+          <Box display="flex" alignItems="flex-end" gap={0.5}>
+            <Image src={GopherFlowerBlue} alt="gopher flower blue" />
+            <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>
+      {!isTabletOrOver && (
+        <Box
+          sx={{
+            position: 'absolute',
+            zIndex: 0,
+            top: '56px',
+            right: 0,
+            display: 'flex',
+            alignItems: 'flex-end',
+            opacity: 0.7
+          }}
+        >
+          <Image src={GopherConductor} alt="gopher conductor" width="56px" objectFit="contain" />
+          <Image src={GopherDrummer} alt="gopher drummer" width="52px" objectFit="contain" />
+        </Box>
+      )}
     </Box>
   )
 }

src/components/organisms/index.ts

@@ -4,3 +4,4 @@ export * from './MainVisual'
 export * from './SpeakersSection'
 export * from './SponsorsSection'
 export * from './TopDescription'
+export * from './CommunityBoothSection'

src/components/pages/PageTop/index.tsx

@@ -1,7 +1,7 @@
 import type { NextPage } from 'next'
 import { Layout } from 'src/components/commons'
 import { useTranslation } from 'react-i18next'
-import { MainVisual, TopDescription, SpeakersSection, SponsorsSection } from 'src/components/organisms'
+import { MainVisual, TopDescription, SponsorsSection, CommunityBoothSection } from 'src/components/organisms'
 
 export const PageTop: NextPage = () => {
   const { t } = useTranslation()
@@ -10,8 +10,8 @@ export const PageTop: NextPage = () => {
     <Layout>
       <MainVisual />
       <TopDescription />
-      <SpeakersSection />
       <SponsorsSection />
+      <CommunityBoothSection />
     </Layout>
   )
 }

src/i18n/en.json

@@ -5,12 +5,15 @@
   "application_started": "Application started",
   "application_closed": "Application closed",
   "consider_a_sponsor": "Consider sponsoring",
+  "consider_a_community_booth": "Consider applying for a community booth",
+  "community_booth_description": "We are looking for Community Booth!",
   "about": "Go Conference is a conference for Go programming language users. It's the 10th anniversary!",
   "session": "session",
   "session_num": "30 or more sessions(Open call for paper at 2022/12)",
   "target": "target",
   "target_info": "gopher, aspiring engineer, interested in Go",
   "host": "organizer",
   "gophers_japan": "Institute Gophers Japan",
+  "act_on_specified_commercial_transactions": "Act on Specified Commercial Transactions",
   "sponsors_description": "We are looking for sponsors!"
 }

src/i18n/ja.json

@@ -5,12 +5,15 @@
   "application_started": "応募開始",
   "application_closed": "応募締切",
   "consider_a_sponsor": "スポンサーを検討する",
+  "consider_a_community_booth": "コミュニティブースを検討する",
+  "community_booth_description": "コミュニティブース募集中です!",
   "about": "Go Conference は<wbr/>プログラミング言語Goユーザーの<wbr/>ための<wbr/>カンファレンスです。<wbr/>今年で10周年!",
   "session": "セッション",
   "session_num": "30セッション程度(2022年12月公募開始)",
   "target": "対象者",
   "target_info": "Goエンジニア、エンジニア志望の方、Goに興味のある方",
   "host": "主催",
   "gophers_japan": "一般社団法人Gophers Japan",
+  "act_on_specified_commercial_transactions": "特定商取引法に基づく表記",
   "sponsors_description": "スポンサー募集中です!"
 }