Skip to content

Commit 7e22929

Browse files
constmoonconstmoon
committed
임시 메인페이지 레이아웃 생성
1 parent 59eb1e8 commit 7e22929

File tree

17 files changed

+207
-162
lines changed

17 files changed

+207
-162
lines changed

‎frontend/assets/styles/global.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,8 @@ body {
2626
color: #fff;
2727
background-color: #100F0F;
2828
}
29+
30+
a {
31+
color: inherit;
32+
text-decoration: none;
33+
}

‎frontend/assets/styles/theme.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ const Theme = {
1717
grey_66: '#666666',
1818
grey_33: '#333333'
1919
},
20-
gradient_violet:
21-
'linear-gradient(96.32deg, #7B61FF 0%, #A863FF 99.41%)'
20+
gradient_violet: `linear-gradient(96.32deg, #7B61FF 0%, #C5C5F2 100%)`
2221
}
2322

2423
export default Theme

‎frontend/assets/styles/typo.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ const Heading1 = styled.h1`
99
const Heading2 = styled.h2`
1010
font-size: 1.9rem;
1111
line-height: 1.3;
12+
${(props) => {
13+
if (props.useGradient) {
14+
return `background: ${props.theme.gradient_violet};
15+
-webkit-background-clip: text;
16+
-webkit-text-fill-color: transparent;`
17+
}
18+
}}
1219
`
1320

1421
const Heading3 = styled.h3`

‎frontend/components/core/NavBar.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,16 @@ import PyconLogoWhite from '../../public/images/pyconkr_2022_logo_white.png'
1111
const Container = styled.nav`
1212
display: flex;
1313
justify-content: space-between;
14+
position: fixed;
15+
top: 0;
16+
left: 0;
17+
right: 0;
18+
z-index: 10;
19+
background: ${(props) =>
20+
`linear-gradient(to bottom, ${props.theme.colors.black_10}, transparent)`};
1421
${media.mobile(`
1522
display: none;
1623
`)}
17-
${(props) => {
18-
if (props.isTransparent) {
19-
return `background: transparent;`
20-
}
21-
return `background-image: ${props.theme.gradient};`
22-
}}
2324
`
2425

2526
const HomeLink = styled.a`

‎frontend/components/layout/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Container = styled.div`
1818
`)}
1919
`
2020
const Body = styled.div`
21-
margin: 3.5rem 0 6rem;
21+
padding: 6rem 0;
2222
${media.mobile(`
2323
margin: 0;
2424
padding: 6rem 1.25rem 5rem;

‎frontend/components/service/Home/Main.tsx‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,31 @@ import { useTranslation } from 'react-i18next'
33
import { Paragraph } from '../../../assets/styles/typo'
44
import styled, { useTheme } from 'styled-components'
55
import { media } from '../../../assets/styles/mixin'
6+
import MainSlogan from './MainSlogan'
7+
import MainTalkList from './MainTalkList'
8+
import MainContact from './MainContact'
69

710
const Container = styled.div`
11+
& + & {
12+
margin: 7rem 0;
13+
${media.mobile(`
14+
margin: 3rem 0;
15+
`)}
16+
}
17+
`
18+
19+
const MainTheme = styled.div`
20+
height: 100vh;
21+
`
22+
23+
const ThemeContainer = styled.div`
824
text-align: center;
925
position: absolute;
1026
left: 0;
1127
right: 0;
1228
top: 50%;
1329
transform: translateY(-50%);
1430
color: ${(props) => props.theme.colors.white};
15-
${media.mobile(`
16-
transform: translateY(-55%);
17-
`)}
1831
`
1932

2033
const Title = styled.div`
@@ -95,23 +108,34 @@ const MainBackground = () => {
95108

96109
return (
97110
<>
111+
<MainTheme>
112+
<ThemeContainer>
113+
<div>
114+
<FirstTitle color={theme.colors.violet0}>
115+
{t(`label:pycon`)}
116+
</FirstTitle>
117+
</div>
118+
<div>
119+
<SecondTitle color={theme.colors.violet1}>
120+
{t(`label:korea`)}
121+
</SecondTitle>
122+
</div>
123+
<div>
124+
<ThirdTitle color={theme.colors.yellow0}>
125+
{t(`label:thisYear`)}
126+
</ThirdTitle>
127+
</div>
128+
<MainText>{t(`label:pyconkrDate`)}</MainText>
129+
</ThemeContainer>
130+
</MainTheme>
131+
<Container>
132+
<MainSlogan />
133+
</Container>
134+
<Container>
135+
<MainTalkList />
136+
</Container>
98137
<Container>
99-
<div>
100-
<FirstTitle color={theme.colors.violet0}>
101-
{t(`label:pycon`)}
102-
</FirstTitle>
103-
</div>
104-
<div>
105-
<SecondTitle color={theme.colors.violet1}>
106-
{t(`label:korea`)}
107-
</SecondTitle>
108-
</div>
109-
<div>
110-
<ThirdTitle color={theme.colors.yellow0}>
111-
{t(`label:thisYear`)}
112-
</ThirdTitle>
113-
</div>
114-
<MainText>{t(`label:pyconkrDate`)}</MainText>
138+
<MainContact />
115139
</Container>
116140
</>
117141
)

‎frontend/components/service/Home/MainContact.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react'
2+
import { useTranslation } from 'react-i18next'
3+
import { Heading2, Paragraph } from '../../../assets/styles/typo'
4+
import styled from 'styled-components'
5+
6+
const Content = styled(Paragraph)`
7+
margin-top: 1rem;
8+
white-space: pre-line;
9+
`
10+
const ContactList = styled.ul`
11+
margin-top: 0.5rem;
12+
margin-left: 1rem;
13+
`
14+
const ContactListItem = styled.li`
15+
list-style: disc;
16+
`
17+
const ContactListLabel = styled.span`
18+
font-weight: bold;
19+
display: inline-block;
20+
margin-right: 0.25rem;
21+
`
22+
23+
const MainSlogan = () => {
24+
const { t } = useTranslation()
25+
26+
return (
27+
<div>
28+
<Heading2 useGradient={true}>
29+
{t('label:contactAndOfficial')}
30+
</Heading2>
31+
<Content>
32+
<div>{t('label:contactInfo')}</div>
33+
<ContactList>
34+
<ContactListItem>
35+
<ContactListLabel>{t('label:email')}</ContactListLabel>
36+
<a href={`mailto:${t('label:contact.email')}`}>
37+
{t('label:contact.email')}
38+
</a>
39+
</ContactListItem>
40+
<ContactListItem>
41+
<ContactListLabel>
42+
{t('label:sponsor')}
43+
</ContactListLabel>
44+
<a href={`mailto:${t('label:contact.sponsor')}`}>
45+
{t('label:contact.sponsor')}
46+
</a>
47+
</ContactListItem>
48+
</ContactList>
49+
</Content>
50+
</div>
51+
)
52+
}
53+
54+
export default MainSlogan

‎frontend/components/service/Home/MainSlogan.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react'
2+
import { useTranslation } from 'react-i18next'
3+
import { Heading2, Paragraph } from '../../../assets/styles/typo'
4+
import styled from 'styled-components'
5+
6+
const Content = styled(Paragraph)`
7+
margin-top: 1rem;
8+
white-space: pre-line;
9+
`
10+
11+
const MainSlogan = () => {
12+
const { t } = useTranslation()
13+
14+
return (
15+
<div>
16+
<Heading2 useGradient={true}>
17+
{t('label:about.slogan.title')}
18+
</Heading2>
19+
<Content>{t('label:about.slogan.desc')}</Content>
20+
</div>
21+
)
22+
}
23+
24+
export default MainSlogan

‎frontend/components/service/Home/MainTalkList.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
import { useTranslation } from 'react-i18next'
3+
import { Heading2, Paragraph } from '../../../assets/styles/typo'
4+
import styled from 'styled-components'
5+
6+
const Content = styled(Paragraph)`
7+
margin-top: 1rem;
8+
white-space: pre-line;
9+
`
10+
11+
const MainTalkList = () => {
12+
const { t } = useTranslation()
13+
14+
return (
15+
<div>
16+
<Heading2 useGradient={true}>{t('label:talk')}</Heading2>
17+
<Content>발표목록</Content>
18+
</div>
19+
)
20+
}
21+
22+
export default MainTalkList

‎frontend/components/service/Home/MainVenue.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
import { useTranslation } from 'react-i18next'
3+
import { Heading2, Paragraph } from '../../../assets/styles/typo'
4+
import styled from 'styled-components'
5+
6+
const Content = styled(Paragraph)`
7+
margin-top: 1rem;
8+
white-space: pre-line;
9+
`
10+
11+
const MainVenue = () => {
12+
const { t } = useTranslation()
13+
14+
return <div>오프라인 행사 장소 안내</div>
15+
}
16+
17+
export default MainVenue

0 commit comments

Comments
 (0)