Skip to content

Commit 73b556b

Browse files
owjs3901owjs3901
authored
Merge pull request #39 from dev-five-git/landing
Base landing
2 parents ca5f546 + 63d3205 commit 73b556b

File tree

8 files changed

+66
-71
lines changed

8 files changed

+66
-71
lines changed

‎apps/landing/src/app/(detail)/docs/LeftMenu.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export function LeftMenu() {
44
return (
55
<VStack gap="6px" h="1008px" p="20px 16px" w="220px">
66
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
7-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
7+
<Text flex="1" opacity="0.8" typography="buttonSmid">
88
개요
99
</Text>
1010
</Flex>
@@ -16,89 +16,89 @@ export function LeftMenu() {
1616
p="6px 10px"
1717
>
1818
<Box bg="$primary" boxSize="8px" />
19-
<Text flex="1 0 0" typography="buttonS">
19+
<Text flex="1" typography="buttonS">
2020
설치
2121
</Text>
2222
</Flex>
2323
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
24-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
24+
<Text flex="1" opacity="0.8" typography="buttonSmid">
2525
개념
2626
</Text>
2727
<Image boxSize="16px" src="/menu-arrow.svg" />
2828
</Flex>
2929
<Flex gap="8px">
3030
<Box borderColor="$border" w="10px" />
31-
<VStack flex="1 0 0" gap="6px">
31+
<VStack flex="1" gap="6px">
3232
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
33-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
33+
<Text flex="1" opacity="0.8" typography="buttonSmid">
3434
유틸리티 퍼스트
3535
</Text>
3636
</Flex>
3737
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
38-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
38+
<Text flex="1" opacity="0.8" typography="buttonSmid">
3939
하이브리드 접근 방식
4040
</Text>
4141
</Flex>
4242
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
43-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
43+
<Text flex="1" opacity="0.8" typography="buttonSmid">
4444
헤드리스 컴포넌트
4545
</Text>
4646
</Flex>
4747
</VStack>
4848
</Flex>
4949
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
50-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
50+
<Text flex="1" opacity="0.8" typography="buttonSmid">
5151
구성 요소
5252
</Text>
5353
<Image boxSize="16px" src="/menu-arrow.svg" />
5454
</Flex>
5555
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
56-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
56+
<Text flex="1" opacity="0.8" typography="buttonSmid">
5757
API
5858
</Text>
5959
<Image boxSize="16px" src="/menu-arrow.svg" />
6060
</Flex>
6161
<Flex gap="8px">
6262
<Box borderColor="$border" w="10px" />
63-
<VStack flex="1 0 0" gap="6px">
63+
<VStack flex="1" gap="6px">
6464
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
65-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
65+
<Text flex="1" opacity="0.8" typography="buttonSmid">
6666
스타일이 지정됨
6767
</Text>
6868
</Flex>
6969
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
70-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
70+
<Text flex="1" opacity="0.8" typography="buttonSmid">
7171
CSS
7272
</Text>
7373
</Flex>
7474
</VStack>
7575
</Flex>
7676
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
77-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
77+
<Text flex="1" opacity="0.8" typography="buttonSmid">
7878
테마
7979
</Text>
8080
<Image boxSize="16px" src="/menu-arrow.svg" />
8181
</Flex>
8282
<Flex gap="8px">
8383
<Box borderColor="$border" w="10px" />
84-
<VStack flex="1 0 0" gap="6px">
84+
<VStack flex="1" gap="6px">
8585
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
86-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
86+
<Text flex="1" opacity="0.8" typography="buttonSmid">
8787
테마 사용자 정의
8888
</Text>
8989
</Flex>
9090
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
91-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
91+
<Text flex="1" opacity="0.8" typography="buttonSmid">
9292
테마 토큰
9393
</Text>
9494
</Flex>
9595
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
96-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
96+
<Text flex="1" opacity="0.8" typography="buttonSmid">
9797
중단점
9898
</Text>
9999
</Flex>
100100
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
101-
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
101+
<Text flex="1" opacity="0.8" typography="buttonSmid">
102102
구성 요소 테마
103103
</Text>
104104
</Flex>

‎apps/landing/src/app/(detail)/docs/RightIndex.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,55 +5,50 @@ export function RightIndex() {
55
<VStack gap="16px" p="20px 16px" w="200px">
66
<VStack>
77
<Flex alignItems="center" gap="10px" p="6px 0px">
8-
<Text color="$text" flex="1 0 0" typography="captionBold">
8+
<Text color="$text" flex="1" typography="captionBold">
99
Contents
1010
</Text>
1111
</Flex>
1212
<Flex alignItems="center" gap="10px" p="4px 10px">
1313
<Box bg="$primary" borderRadius="100%" boxSize="6px" />
1414
<Text
1515
color="$primary"
16-
flex="1 0 0"
16+
flex="1"
1717
opacity="0.8"
1818
typography="captionBold"
1919
>
2020
Installation
2121
</Text>
2222
</Flex>
2323
<Flex alignItems="center" gap="10px" p="4px 10px 30px">
24-
<Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
24+
<Text color="$text" flex="1" opacity="0.6" typography="caption">
2525
General Guides
2626
</Text>
2727
</Flex>
2828
<Flex alignItems="center" gap="10px" p="4px 10px 30px">
29-
<Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
29+
<Text color="$text" flex="1" opacity="0.6" typography="caption">
3030
Framework Guides
3131
</Text>
3232
</Flex>
3333
<Flex alignItems="center" gap="10px" p="4px 10px">
34-
<Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
34+
<Text color="$text" flex="1" opacity="0.6" typography="caption">
3535
Next Steps
3636
</Text>
3737
</Flex>
3838
<Flex alignItems="center" gap="10px" p="4px 10px">
39-
<Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
39+
<Text color="$text" flex="1" opacity="0.6" typography="caption">
4040
Playground
4141
</Text>
4242
</Flex>
4343
<Flex alignItems="center" gap="10px" p="4px 10px">
44-
<Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
44+
<Text color="$text" flex="1" opacity="0.6" typography="caption">
4545
Acknowledgement
4646
</Text>
4747
</Flex>
4848
</VStack>
4949
<Box bg="undefined" h="1px" />
5050
<Flex gap="4px">
51-
<Text
52-
color="$caption"
53-
flex="1 0 0"
54-
textAlign="right"
55-
typography="small"
56-
>
51+
<Text color="$caption" flex="1" textAlign="right" typography="small">
5752
Edit this page
5853
</Text>
5954
<Image

‎apps/landing/src/app/page.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { CodeBoard } from '../components/CodeBoard'
55
import { Container } from '../components/Container'
66
import { Discord } from '../components/Discord'
77
import { Header } from '../components/Header'
8-
import { IMAGE_PREFIX } from '../constants'
8+
import { URL_PREFIX } from '../constants'
99

1010
export default function HomePage() {
1111
return (
@@ -14,7 +14,7 @@ export default function HomePage() {
1414
<Box mt="150px">
1515
<VStack alignItems="center" gap="50px" maxW="800px" mx="auto">
1616
<VStack alignItems="center" gap="24px">
17-
<Image h="50px" src={IMAGE_PREFIX + '/icon.svg'} w="52px" />
17+
<Image h="50px" src={URL_PREFIX + '/icon.svg'} w="52px" />
1818
<Text color="$title" textAlign="center" typography="h1">
1919
Lorem ipsum dolor sit amet,
2020
<br />
@@ -31,7 +31,7 @@ export default function HomePage() {
3131
className={css`
3232
text-decoration: none;
3333
`}
34-
href="/docs/overview"
34+
href={URL_PREFIX + '/docs/overview'}
3535
>
3636
<Flex
3737
alignItems="center"
@@ -45,7 +45,7 @@ export default function HomePage() {
4545
<Text color="$base" typography="buttonL">
4646
Get started
4747
</Text>
48-
<Image boxSize="24px" src={IMAGE_PREFIX + '/arrow.svg'} />
48+
<Image boxSize="24px" src={URL_PREFIX + '/arrow.svg'} />
4949
</Flex>
5050
</Flex>
5151
</Link>
@@ -69,37 +69,37 @@ export default function HomePage() {
6969
<Flex
7070
bg="$cardBg"
7171
borderRadius="20px"
72-
flex="1 0 0"
72+
flex="1"
7373
gap="10px"
7474
p="24px"
7575
>
7676
<Flex px="8px">
77-
<Image boxSize="32px" src={IMAGE_PREFIX + '/idea.svg'} />
77+
<Image boxSize="32px" src={URL_PREFIX + '/idea.svg'} />
7878
</Flex>
79-
<VStack flex="1 0 0" gap="10px">
79+
<VStack flex="1" gap="10px">
8080
<Text color="$title" typography="h6">
8181
Feature title
8282
</Text>
83-
<Text flex="1 0 0" typography="body" w="484px">
83+
<Text flex="1" typography="body" w="484px">
8484
Lorem ipsum dolor sit amet.
8585
</Text>
8686
</VStack>
8787
</Flex>
8888
<Flex
8989
bg="$cardBg"
9090
borderRadius="20px"
91-
flex="1 0 0"
91+
flex="1"
9292
gap="10px"
9393
p="30px 24px"
9494
>
9595
<Flex px="8px">
96-
<Image boxSize="32px" src={IMAGE_PREFIX + '/trophy.svg'} />
96+
<Image boxSize="32px" src={URL_PREFIX + '/trophy.svg'} />
9797
</Flex>
98-
<VStack flex="1 0 0" gap="10px">
98+
<VStack flex="1" gap="10px">
9999
<Text color="$title" typography="h6">
100100
Feature title
101101
</Text>
102-
<Text flex="1 0 0" typography="body" w="484px">
102+
<Text flex="1" typography="body" w="484px">
103103
Lorem ipsum dolor sit amet. Etiam sit amet feugiat turpis.
104104
Proin nec ante a sem vestibulum sodales non ut ex.
105105
</Text>
@@ -110,18 +110,18 @@ export default function HomePage() {
110110
<Flex
111111
bg="$cardBg"
112112
borderRadius="20px"
113-
flex="1 0 0"
113+
flex="1"
114114
gap="10px"
115115
p="30px 24px"
116116
>
117117
<Flex px="8px">
118-
<Image boxSize="32px" src={IMAGE_PREFIX + '/heart.svg'} />
118+
<Image boxSize="32px" src={URL_PREFIX + '/heart.svg'} />
119119
</Flex>
120-
<VStack flex="1 0 0" gap="10px">
120+
<VStack flex="1" gap="10px">
121121
<Text color="$title" typography="h6">
122122
Feature title
123123
</Text>
124-
<Text flex="1 0 0" typography="body" w="484px">
124+
<Text flex="1" typography="body" w="484px">
125125
Lorem ipsum dolor sit amet. Etiam sit amet feugiat turpis.
126126
Proin nec ante a sem vestibulum.
127127
</Text>
@@ -130,18 +130,18 @@ export default function HomePage() {
130130
<Flex
131131
bg="$cardBg"
132132
borderRadius="20px"
133-
flex="1 0 0"
133+
flex="1"
134134
gap="10px"
135135
p="30px 24px"
136136
>
137137
<Flex px="8px">
138-
<Image boxSize="32px" src={IMAGE_PREFIX + '/notice.svg'} />
138+
<Image boxSize="32px" src={URL_PREFIX + '/notice.svg'} />
139139
</Flex>
140-
<VStack flex="1 0 0" gap="10px">
140+
<VStack flex="1" gap="10px">
141141
<Text color="$title" typography="h6">
142142
Feature title
143143
</Text>
144-
<Text flex="1 0 0" typography="body" w="484px">
144+
<Text flex="1" typography="body" w="484px">
145145
Lorem ipsum dolor sit amet. Etiam sit amet feugiat turpis.
146146
</Text>
147147
</VStack>

‎apps/landing/src/components/CodeBoard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,15 +62,15 @@ export function CodeBoard() {
6262
<Flex
6363
alignItems="center"
6464
borderRadius="1000px"
65-
flex="1 0 0"
65+
flex="1"
6666
p="12px 34px"
6767
>
6868
<Text typography="buttonM">code menu</Text>
6969
</Flex>
7070
<Flex
7171
alignItems="center"
7272
borderRadius="1000px"
73-
flex="1 0 0"
73+
flex="1"
7474
p="12px 34px"
7575
>
7676
<Text opacity="0.6" typography="buttonM">
@@ -80,7 +80,7 @@ export function CodeBoard() {
8080
<Flex
8181
alignItems="center"
8282
borderRadius="1000px"
83-
flex="1 0 0"
83+
flex="1"
8484
p="12px 34px"
8585
>
8686
<Text opacity="0.6" typography="buttonM">

‎apps/landing/src/components/Discord.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Center, css, Flex, Image, Text, VStack } from '@devup-ui/react'
22
import Link from 'next/link'
33

4-
import { IMAGE_PREFIX } from '../constants'
4+
import { URL_PREFIX } from '../constants'
55

66
export function Discord() {
77
return (
88
<Center
99
bgColor="$joinBg"
10-
bgImage="url(/discord-bg.svg)"
10+
bgImage={`url(${URL_PREFIX}/discord-bg.svg)`}
1111
borderRadius="40px 40px 0px 40px"
1212
h="380px"
1313
>
@@ -39,7 +39,7 @@ export function Discord() {
3939
<Text color="#FFF" typography="buttonLbold">
4040
Join our Discord
4141
</Text>
42-
<Image boxSize="24px" src={IMAGE_PREFIX + '/outlink.svg'} />
42+
<Image boxSize="24px" src={URL_PREFIX + '/outlink.svg'} />
4343
</Flex>
4444
</Flex>
4545
</Link>

0 commit comments

Comments
 (0)