Skip to content

Commit 25a8f02

Browse files
kyubumjangkyubumjang
committed
feat(introduce): 메인페이지 P&S 소개 템플릿 구현 및 적용
1 parent 5a0d547 commit 25a8f02

File tree

4 files changed

+220
-29
lines changed

4 files changed

+220
-29
lines changed

‎public/assets/images/main.png

1.84 MB
Loading

‎src/pages/index.tsx

+14-29
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,23 @@
1+
import styled from '@emotion/styled';
12
import type { NextPage } from 'next';
23

3-
import { Button } from '@/components/Button/Button.styles';
4-
import Text from '@/components/Text/Text';
4+
import Introduce from 'templates/main/Introduce/Introduce';
55

66
const Home: NextPage = () => {
77
return (
8-
<div
9-
style={{
10-
display: 'flex',
11-
flexDirection: 'column',
12-
width: '100%',
13-
justifyContent: 'center',
14-
alignItems: 'center',
15-
gap: '4px',
16-
padding: '8px',
17-
}}
18-
>
19-
<Text tag='h1'>콜렛의 모든 것 P&S에서 쉽고 빠르게</Text>
20-
<Text tag='h2'>콜렛의 모든 것 P&S에서 쉽고 빠르게</Text>
21-
<Text tag='h3'>콜렛의 모든 것 P&S에서 쉽고 빠르게</Text>
22-
<Text tag='h4'>콜렛의 모든 것 P&S에서 쉽고 빠르게</Text>
23-
<Text tag='h5'>콜렛의 모든 것 P&S에서 쉽고 빠르게</Text>
24-
<Text tag='h6'>콜렛의 모든 것 P&S에서 쉽고 빠르게</Text>
25-
<Text tag='p'>콜렛의 모든 것 P&S에서 쉽고 빠르게</Text>
26-
<Text tag='span'>콜렛의 모든 것 P&S에서 쉽고 빠르게</Text>
27-
<Text
28-
fontSize='10px'
29-
fontWeight='bold'
30-
color='grey'
31-
>
32-
콜렛의 모든 것 P&S에서 쉽고 빠르게
33-
</Text>
34-
</div>
8+
<Container>
9+
<Introduce />
10+
</Container>
3511
);
3612
};
3713

3814
export default Home;
15+
16+
const Container = styled('div')({
17+
display: 'flex',
18+
flexDirection: 'column',
19+
width: '100%',
20+
justifyContent: 'center',
21+
alignItems: 'center',
22+
gap: '4px',
23+
});

‎src/templates/main/Introduce/Introduce.styles.tsx

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { keyframes } from '@emotion/react';
2+
import styled from '@emotion/styled';
3+
4+
export const IntroduceContainer = styled('section')({
5+
display: 'flex',
6+
flexDirection: 'column',
7+
position: 'relative',
8+
width: '100%',
9+
overflow: 'hidden',
10+
});
11+
12+
export const SloganContainer = styled('div')({
13+
display: 'flex',
14+
position: 'relative',
15+
flexDirection: 'column',
16+
});
17+
18+
export const ImgBgWrapper = styled('div')({
19+
width: 'auto',
20+
height: '100vh',
21+
zIndex: -1,
22+
});
23+
24+
export const ImgGradientWrapper = styled('div')({
25+
position: 'absolute',
26+
top: '0px',
27+
left: 0,
28+
width: '100%',
29+
height: '500px',
30+
background:
31+
'linear-gradient(180deg, white 0%, white 50px, rgba(255, 255, 255, 0) 100%)',
32+
zIndex: -1,
33+
});
34+
35+
export const SloganContentContainer = styled('div')({
36+
display: 'flex',
37+
flexDirection: 'column',
38+
position: 'absolute',
39+
top: '0px',
40+
left: '0px',
41+
width: '100%',
42+
height: '100%',
43+
alignItems: 'center',
44+
justifyContent: 'space-between',
45+
animation: '0.5s ease-in-out',
46+
});
47+
48+
export const SloganInnerContainer = styled('div')`
49+
display: flex;
50+
flex-direction: column;
51+
margin-top: 140px;
52+
justify-content: flex-start;
53+
align-items: center;
54+
`;
55+
56+
export const SloganBtnContainer = styled('button')`
57+
display: flex;
58+
flex-direction: row;
59+
margin-top: 50px;
60+
gap: 4px;
61+
`;
62+
63+
export const LinkContentWrapper = styled('div')`
64+
display: flex;
65+
width: 100%;
66+
align-items: center;
67+
justify-content: center;
68+
line-height: 26px;
69+
text-align: center;
70+
vertical-align: middle;
71+
font-weight: 600;
72+
color: ${(props) => props.theme.color.white};
73+
background-image: none;
74+
background-color: ${(props) => props.theme.color.greyOpacity800};
75+
padding: 11px 22px;
76+
border: 0 solid transparent;
77+
border-radius: 8px;
78+
transition: background 0.2s ease, color 0.1s ease;
79+
white-space: nowrap;
80+
z-index: 1;
81+
gap: 8px;
82+
&:hover {
83+
background-color: ${(props) => props.theme.color.grey700};
84+
}
85+
`;
86+
87+
export const ArrowDownBtn = styled('button')`
88+
background: none;
89+
border: 0px;
90+
padding: 0px;
91+
outline: none;
92+
cursor: pointer;
93+
margin-bottom: 30px;
94+
`;
95+
96+
const bounce = keyframes`
97+
from, 20%, 53%, 80%, to {
98+
transform: translate3d(0,0,0);
99+
}
100+
101+
40%, 43% {
102+
transform: translate3d(0, -30px, 0);
103+
}
104+
105+
70% {
106+
transform: translate3d(0, -15px, 0);
107+
}
108+
109+
90% {
110+
transform: translate3d(0,-4px,0);
111+
}
112+
`;
113+
114+
export const BtnWrapper = styled('div')(
115+
{
116+
width: '50px',
117+
height: '50px',
118+
animation: `${bounce} 2s ease infinite`,
119+
},
120+
({ theme }) => {
121+
return {
122+
color: theme.color.grey500,
123+
};
124+
},
125+
);
126+
127+
export const DescriptionContainer = styled('div')(
128+
{
129+
display: 'flex',
130+
alignItems: 'center',
131+
justifyContent: 'flex-start',
132+
textAlign: 'center',
133+
padding: '200px 0',
134+
},
135+
({ theme }) => {
136+
return {
137+
backgroundColor: theme.color.grey50,
138+
};
139+
},
140+
);

‎src/templates/main/Introduce/Introduce.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import Image from 'next/image';
2+
import Link from 'next/link';
3+
import { AiFillTool, AiFillShopping } from 'react-icons/ai';
4+
import { SlArrowDown } from 'react-icons/sl';
5+
6+
import Text from '@/components/Text/Text';
7+
8+
import mainBg from '../../../../public/assets/images/main.png';
9+
import * as S from './Introduce.styles';
10+
11+
const Introduce = () => {
12+
return (
13+
<S.IntroduceContainer>
14+
<S.SloganContainer>
15+
<S.ImgBgWrapper>
16+
<Image
17+
src={mainBg.src}
18+
alt='mainBg'
19+
objectFit='cover'
20+
layout='fill'
21+
/>
22+
</S.ImgBgWrapper>
23+
<S.ImgGradientWrapper />
24+
<S.SloganContentContainer>
25+
<S.SloganInnerContainer>
26+
<Text tag='h1'>콜렛 제작</Text>
27+
<Text tag='h1'>P&S에서 쉽고 빠르게</Text>
28+
29+
<S.SloganBtnContainer>
30+
<Link href='/prepare'>
31+
<S.LinkContentWrapper>
32+
<AiFillShopping />
33+
주문하기
34+
</S.LinkContentWrapper>
35+
</Link>
36+
<Link href='/prepare'>
37+
<S.LinkContentWrapper>
38+
<AiFillTool />
39+
대한테크
40+
</S.LinkContentWrapper>
41+
</Link>
42+
</S.SloganBtnContainer>
43+
</S.SloganInnerContainer>
44+
<S.ArrowDownBtn>
45+
<S.BtnWrapper>
46+
<SlArrowDown size='40px' />
47+
</S.BtnWrapper>
48+
</S.ArrowDownBtn>
49+
</S.SloganContentContainer>
50+
</S.SloganContainer>
51+
<S.DescriptionContainer>
52+
<Text
53+
fontSize='32px'
54+
fontWeight={700}
55+
color='#191f28'
56+
>
57+
콜렛 주문 제작 서비스를 자세히 확인하고 원하는 치수로 쉽고 빠르게
58+
주문하세요. 이제껏 경험 못했던 쉽고 편리한 콜렛 주문 서비스, Part and
59+
Solution에서 주문해서 빠르게 받아보세요.
60+
</Text>
61+
</S.DescriptionContainer>
62+
</S.IntroduceContainer>
63+
);
64+
};
65+
66+
export default Introduce;

0 commit comments

Comments
 (0)