Skip to content

Commit 3e5c1a9

Browse files
maito1201maito1201
authored
Merge pull request #22 from GoCon/feat/top_description
feat(top page): add description section
2 parents 4a718b5 + ca7501a commit 3e5c1a9

File tree

14 files changed

+635
-14
lines changed

14 files changed

+635
-14
lines changed

‎.storybook/preview-head.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<link
2+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700;900&display=swap"
3+
rel="stylesheet"
4+
/>

‎.storybook/preview.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import { theme } from '../src/styles/theme'
2+
import { ThemeProvider } from '@mui/material/styles'
3+
14
export const parameters = {
25
actions: { argTypesRegex: "^on[A-Z].*" },
36
controls: {
@@ -6,4 +9,14 @@ export const parameters = {
69
date: /Date$/,
710
},
811
},
9-
}
12+
}
13+
14+
export const decorators = [
15+
(Story) => {
16+
return (
17+
<ThemeProvider theme={theme}>
18+
<Story />
19+
</ThemeProvider>
20+
)
21+
},
22+
]

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"next": "12.3.1",
2121
"react": "18.2.0",
2222
"react-dom": "18.2.0",
23-
"react-i18next": "11.18.6"
23+
"react-i18next": "11.18.6",
24+
"storybook-addon-material-ui5": "^1.0.0"
2425
},
2526
"devDependencies": {
2627
"@babel/core": "^7.19.3",

‎src/components/organisms/TopDescription/TopDescription.stories.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { ComponentMeta, ComponentStory } from '@storybook/react'
2+
import { TopDescription } from '.'
3+
4+
const meta: ComponentMeta<typeof TopDescription> = {
5+
component: TopDescription
6+
}
7+
export default meta
8+
9+
const Template: ComponentStory<typeof TopDescription> = () => <TopDescription />
10+
11+
export const Default = Template.bind({})

‎src/components/organisms/TopDescription/index.tsx

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import { Box, Typography } from '@mui/material'
2+
import { Colors } from 'src/styles/color'
3+
import { useSize } from 'src/modules/common/hooks'
4+
import { useTranslation } from 'react-i18next'
5+
6+
export const TopDescription = () => {
7+
const { t } = useTranslation()
8+
const { isTabletOrOver } = useSize()
9+
return (
10+
<Box
11+
sx={{
12+
width: '100%',
13+
backgroundColor: Colors.background.primary,
14+
p: isTabletOrOver ? '40px' : '24px 16px'
15+
}}
16+
>
17+
<Box maxWidth={'680px'} margin={'auto'}>
18+
<Box sx={{ textAlign: 'center' }}>
19+
<Typography
20+
variant="h2"
21+
sx={{
22+
color: Colors.text.white,
23+
fontWeight: 500,
24+
fontSize: isTabletOrOver ? '50px' : '24px',
25+
padding: isTabletOrOver ? '40px' : '8px'
26+
}}
27+
>
28+
What is Go Conference?
29+
</Typography>
30+
</Box>
31+
<Box sx={{ textAlign: 'center', mb: isTabletOrOver ? '40px' : '16px' }}>
32+
<Typography
33+
variant="body1"
34+
sx={{
35+
color: Colors.text.white,
36+
fontSize: isTabletOrOver ? '24px' : '16px'
37+
}}
38+
>
39+
{t('about')}
40+
</Typography>
41+
</Box>
42+
<Box mb={'40px'}>
43+
<Box
44+
sx={{
45+
display: 'flex',
46+
flexWrap: 'nowrap'
47+
}}
48+
>
49+
<Typography
50+
variant="body2"
51+
sx={{
52+
color: Colors.text.white,
53+
fontSize: isTabletOrOver ? '18px' : '14px',
54+
textAlign: 'right',
55+
minWidth: isTabletOrOver ? '120px' : '100px',
56+
marginLeft: isTabletOrOver ? '32px' : '0'
57+
}}
58+
>
59+
{t('session')}:
60+
</Typography>
61+
<Typography
62+
variant="body2"
63+
sx={{
64+
color: Colors.text.white,
65+
fontSize: isTabletOrOver ? '18px' : '14px',
66+
marginLeft: '12px'
67+
}}
68+
>
69+
{t('session_num')}
70+
</Typography>
71+
</Box>
72+
<Box
73+
sx={{
74+
display: 'flex',
75+
flexWrap: 'nowrap'
76+
}}
77+
>
78+
<Typography
79+
variant="body2"
80+
sx={{
81+
color: Colors.text.white,
82+
fontSize: isTabletOrOver ? '18px' : '14px',
83+
textAlign: 'right',
84+
minWidth: isTabletOrOver ? '120px' : '100px',
85+
marginLeft: isTabletOrOver ? '32px' : '0'
86+
}}
87+
>
88+
{t('target')}:
89+
</Typography>
90+
<Typography
91+
variant="body2"
92+
sx={{
93+
color: Colors.text.white,
94+
fontSize: isTabletOrOver ? '18px' : '14px',
95+
marginLeft: '12px'
96+
}}
97+
>
98+
{t('target_info')}
99+
</Typography>
100+
</Box>
101+
<Box
102+
sx={{
103+
display: 'flex',
104+
flexWrap: 'nowrap'
105+
}}
106+
>
107+
<Typography
108+
variant="body2"
109+
sx={{
110+
color: Colors.text.white,
111+
fontSize: isTabletOrOver ? '18px' : '14px',
112+
textAlign: 'right',
113+
minWidth: isTabletOrOver ? '120px' : '100px',
114+
marginLeft: isTabletOrOver ? '32px' : '0'
115+
}}
116+
>
117+
{t('host')}:
118+
</Typography>
119+
<Typography
120+
variant="body2"
121+
sx={{
122+
color: Colors.text.white,
123+
fontSize: isTabletOrOver ? '18px' : '14px',
124+
marginLeft: '12px'
125+
}}
126+
>
127+
{t('gophers_japan')}
128+
</Typography>
129+
</Box>
130+
</Box>
131+
</Box>
132+
</Box>
133+
)
134+
}

‎src/components/pages/PageTop/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { NextPage } from 'next'
33
import { Button } from 'src/components/atoms'
44
import { Layout } from 'src/components/commons'
55
import { useTranslation } from 'react-i18next'
6-
import { useRouter } from 'next/router'
6+
import { TopDescription } from 'src/components/organisms/TopDescription'
77

88
export const PageTop: NextPage = () => {
99
const { t } = useTranslation()
@@ -19,6 +19,7 @@ export const PageTop: NextPage = () => {
1919
<Box>
2020
<Button text={t('consider_a_sponsor')} />
2121
</Box>
22+
<TopDescription />
2223
</Layout>
2324
)
2425
}

‎src/i18n/en.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,12 @@
22
"change_language": "日本語",
33
"gopher_copyright": "Original Creator of 'Gopher' is Renée French.",
44
"apply_for_speaker": "Apply for speaker",
5-
"consider_a_sponsor": "Consider a sponsor"
5+
"consider_a_sponsor": "Consider a sponsor",
6+
"about": "Go Conference is a half-annual conference of programming lamguage Go. it's the 10th anniversary!",
7+
"session": "session",
8+
"session_num": "00 or more sessions(Open call for paper at 2022/00)",
9+
"target": "target",
10+
"target_info": "gopher, aspiring engineer, interested in Go",
11+
"host": "organizer",
12+
"gophers_japan": "Institute Gophers Japan"
613
}

‎src/i18n/ja.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,12 @@
22
"change_language": "English",
33
"gopher_copyright": "Gopherの原著作者はRenée Frenchさんです。",
44
"apply_for_speaker": "スピーカーに応募する",
5-
"consider_a_sponsor": "スポンサーを検討する"
5+
"consider_a_sponsor": "スポンサーを検討する",
6+
"about": "Go Conference is a half-annual conference of programming lamguage Go. 今年で10周年!",
7+
"session": "セッション",
8+
"session_num": "00セッション程度(2022年00月公募開始)",
9+
"target": "対象者",
10+
"target_info": "Goエンジニア、エンジニア志望の方、Goに興味のある方",
11+
"host": "主催",
12+
"gophers_japan": "一般社団法人Gophers Japan"
613
}

‎src/pages/_app.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import 'src/styles/globals.css'
22
import 'src/i18n/configs'
3+
import { theme } from 'src/styles/theme'
34
import type { AppProps } from 'next/app'
5+
import { ThemeProvider } from '@mui/material/styles'
46

57
function MyApp({ Component, pageProps }: AppProps) {
6-
return <Component {...pageProps} />
8+
return (
9+
<>
10+
<ThemeProvider theme={theme}>
11+
<Component {...pageProps} />
12+
</ThemeProvider>
13+
</>
14+
)
715
}
816

917
export default MyApp

‎src/pages/_document.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Html, Head, Main, NextScript } from 'next/document'
2+
3+
export default function Document() {
4+
return (
5+
<Html>
6+
<Head>
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;700;900&display=swap"
9+
rel="stylesheet"
10+
/>
11+
</Head>
12+
<body>
13+
<Main />
14+
<NextScript />
15+
</body>
16+
</Html>
17+
)
18+
}

‎src/styles/color.ts

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const Colors = {
1616
}
1717
},
1818
background: {
19+
primary: '#4D94E6', // Brand color
1920
gopher_blue: '#00ADD8',
2021
gradation_blue: 'linear-gradient(180deg, #4E96E9 19.27%, rgba(77, 148, 230, 0) 88.54%)',
2122
darken_1: 'rgba(0,0,0,0.125)'

‎src/styles/globals.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ body {
33
padding: 0;
44
margin: 0;
55
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
6-
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
6+
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif, Poppins;
77
}
88

99
a {

‎src/styles/theme.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { createTheme } from '@mui/material/styles'
2+
3+
export const theme = createTheme({
4+
typography: {
5+
allVariants: { fontFamily: 'Poppins' },
6+
h1: { fontSize: 50 },
7+
h2: { fontSize: 24 },
8+
caption: { fontSize: 14 }
9+
}
10+
})

0 commit comments

Comments
 (0)