feat: community booth section (#67)

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/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,13 @@
 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,
+  SpeakersSection,
+  SponsorsSection,
+  CommunityBoothSection
+} from 'src/components/organisms'
 
 export const PageTop: NextPage = () => {
   const { t } = useTranslation()
@@ -12,6 +18,7 @@ export const PageTop: NextPage = () => {
       <TopDescription />
       <SpeakersSection />
       <SponsorsSection />
+      <CommunityBoothSection />
     </Layout>
   )
 }

src/i18n/en.json

@@ -5,6 +5,8 @@
   "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)",

src/i18n/ja.json

@@ -5,6 +5,8 @@
   "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月公募開始)",