Skip to content

Base landing #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
owjs3901 merged 2 commits into from
Jan 20, 2025
Merged

Base landing #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
abca519
Base landing
owjs3901 Jan 20, 2025
63d3205
Fix bgImage
owjs3901 Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions apps/landing/src/app/(detail)/docs/LeftMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export function LeftMenu() {
return (
<VStack gap="6px" h="1008px" p="20px 16px" w="220px">
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
개요
</Text>
</Flex>
Expand All @@ -16,89 +16,89 @@ export function LeftMenu() {
p="6px 10px"
>
<Box bg="$primary" boxSize="8px" />
<Text flex="1 0 0" typography="buttonS">
<Text flex="1" typography="buttonS">
설치
</Text>
</Flex>
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
개념
</Text>
<Image boxSize="16px" src="/menu-arrow.svg" />
</Flex>
<Flex gap="8px">
<Box borderColor="$border" w="10px" />
<VStack flex="1 0 0" gap="6px">
<VStack flex="1" gap="6px">
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
유틸리티 퍼스트
</Text>
</Flex>
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
하이브리드 접근 방식
</Text>
</Flex>
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
헤드리스 컴포넌트
</Text>
</Flex>
</VStack>
</Flex>
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
구성 요소
</Text>
<Image boxSize="16px" src="/menu-arrow.svg" />
</Flex>
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
API
</Text>
<Image boxSize="16px" src="/menu-arrow.svg" />
</Flex>
<Flex gap="8px">
<Box borderColor="$border" w="10px" />
<VStack flex="1 0 0" gap="6px">
<VStack flex="1" gap="6px">
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
스타일이 지정됨
</Text>
</Flex>
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
CSS
</Text>
</Flex>
</VStack>
</Flex>
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
테마
</Text>
<Image boxSize="16px" src="/menu-arrow.svg" />
</Flex>
<Flex gap="8px">
<Box borderColor="$border" w="10px" />
<VStack flex="1 0 0" gap="6px">
<VStack flex="1" gap="6px">
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
테마 사용자 정의
</Text>
</Flex>
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
테마 토큰
</Text>
</Flex>
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
중단점
</Text>
</Flex>
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
<Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
<Text flex="1" opacity="0.8" typography="buttonSmid">
구성 요소 테마
</Text>
</Flex>
Expand Down
21 changes: 8 additions & 13 deletions apps/landing/src/app/(detail)/docs/RightIndex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,55 +5,50 @@ export function RightIndex() {
<VStack gap="16px" p="20px 16px" w="200px">
<VStack>
<Flex alignItems="center" gap="10px" p="6px 0px">
<Text color="$text" flex="1 0 0" typography="captionBold">
<Text color="$text" flex="1" typography="captionBold">
Contents
</Text>
</Flex>
<Flex alignItems="center" gap="10px" p="4px 10px">
<Box bg="$primary" borderRadius="100%" boxSize="6px" />
<Text
color="$primary"
flex="1 0 0"
flex="1"
opacity="0.8"
typography="captionBold"
>
Installation
</Text>
</Flex>
<Flex alignItems="center" gap="10px" p="4px 10px 30px">
<Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
<Text color="$text" flex="1" opacity="0.6" typography="caption">
General Guides
</Text>
</Flex>
<Flex alignItems="center" gap="10px" p="4px 10px 30px">
<Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
<Text color="$text" flex="1" opacity="0.6" typography="caption">
Framework Guides
</Text>
</Flex>
<Flex alignItems="center" gap="10px" p="4px 10px">
<Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
<Text color="$text" flex="1" opacity="0.6" typography="caption">
Next Steps
</Text>
</Flex>
<Flex alignItems="center" gap="10px" p="4px 10px">
<Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
<Text color="$text" flex="1" opacity="0.6" typography="caption">
Playground
</Text>
</Flex>
<Flex alignItems="center" gap="10px" p="4px 10px">
<Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
<Text color="$text" flex="1" opacity="0.6" typography="caption">
Acknowledgement
</Text>
</Flex>
</VStack>
<Box bg="undefined" h="1px" />
<Flex gap="4px">
<Text
color="$caption"
flex="1 0 0"
textAlign="right"
typography="small"
>
<Text color="$caption" flex="1" textAlign="right" typography="small">
Edit this page
</Text>
<Image
Expand Down
40 changes: 20 additions & 20 deletions apps/landing/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { CodeBoard } from '../components/CodeBoard'
import { Container } from '../components/Container'
import { Discord } from '../components/Discord'
import { Header } from '../components/Header'
import { IMAGE_PREFIX } from '../constants'
import { URL_PREFIX } from '../constants'

export default function HomePage() {
return (
Expand All @@ -14,7 +14,7 @@ export default function HomePage() {
<Box mt="150px">
<VStack alignItems="center" gap="50px" maxW="800px" mx="auto">
<VStack alignItems="center" gap="24px">
<Image h="50px" src={IMAGE_PREFIX + '/icon.svg'} w="52px" />
<Image h="50px" src={URL_PREFIX + '/icon.svg'} w="52px" />
<Text color="$title" textAlign="center" typography="h1">
Lorem ipsum dolor sit amet,
<br />
Expand All @@ -31,7 +31,7 @@ export default function HomePage() {
className={css`
text-decoration: none;
`}
href="/docs/overview"
href={URL_PREFIX + '/docs/overview'}
>
<Flex
alignItems="center"
Expand All @@ -45,7 +45,7 @@ export default function HomePage() {
<Text color="$base" typography="buttonL">
Get started
</Text>
<Image boxSize="24px" src={IMAGE_PREFIX + '/arrow.svg'} />
<Image boxSize="24px" src={URL_PREFIX + '/arrow.svg'} />
</Flex>
</Flex>
</Link>
Expand All @@ -69,37 +69,37 @@ export default function HomePage() {
<Flex
bg="$cardBg"
borderRadius="20px"
flex="1 0 0"
flex="1"
gap="10px"
p="24px"
>
<Flex px="8px">
<Image boxSize="32px" src={IMAGE_PREFIX + '/idea.svg'} />
<Image boxSize="32px" src={URL_PREFIX + '/idea.svg'} />
</Flex>
<VStack flex="1 0 0" gap="10px">
<VStack flex="1" gap="10px">
<Text color="$title" typography="h6">
Feature title
</Text>
<Text flex="1 0 0" typography="body" w="484px">
<Text flex="1" typography="body" w="484px">
Lorem ipsum dolor sit amet.
</Text>
</VStack>
</Flex>
<Flex
bg="$cardBg"
borderRadius="20px"
flex="1 0 0"
flex="1"
gap="10px"
p="30px 24px"
>
<Flex px="8px">
<Image boxSize="32px" src={IMAGE_PREFIX + '/trophy.svg'} />
<Image boxSize="32px" src={URL_PREFIX + '/trophy.svg'} />
</Flex>
<VStack flex="1 0 0" gap="10px">
<VStack flex="1" gap="10px">
<Text color="$title" typography="h6">
Feature title
</Text>
<Text flex="1 0 0" typography="body" w="484px">
<Text flex="1" typography="body" w="484px">
Lorem ipsum dolor sit amet. Etiam sit amet feugiat turpis.
Proin nec ante a sem vestibulum sodales non ut ex.
</Text>
Expand All @@ -110,18 +110,18 @@ export default function HomePage() {
<Flex
bg="$cardBg"
borderRadius="20px"
flex="1 0 0"
flex="1"
gap="10px"
p="30px 24px"
>
<Flex px="8px">
<Image boxSize="32px" src={IMAGE_PREFIX + '/heart.svg'} />
<Image boxSize="32px" src={URL_PREFIX + '/heart.svg'} />
</Flex>
<VStack flex="1 0 0" gap="10px">
<VStack flex="1" gap="10px">
<Text color="$title" typography="h6">
Feature title
</Text>
<Text flex="1 0 0" typography="body" w="484px">
<Text flex="1" typography="body" w="484px">
Lorem ipsum dolor sit amet. Etiam sit amet feugiat turpis.
Proin nec ante a sem vestibulum.
</Text>
Expand All @@ -130,18 +130,18 @@ export default function HomePage() {
<Flex
bg="$cardBg"
borderRadius="20px"
flex="1 0 0"
flex="1"
gap="10px"
p="30px 24px"
>
<Flex px="8px">
<Image boxSize="32px" src={IMAGE_PREFIX + '/notice.svg'} />
<Image boxSize="32px" src={URL_PREFIX + '/notice.svg'} />
</Flex>
<VStack flex="1 0 0" gap="10px">
<VStack flex="1" gap="10px">
<Text color="$title" typography="h6">
Feature title
</Text>
<Text flex="1 0 0" typography="body" w="484px">
<Text flex="1" typography="body" w="484px">
Lorem ipsum dolor sit amet. Etiam sit amet feugiat turpis.
</Text>
</VStack>
Expand Down
6 changes: 3 additions & 3 deletions apps/landing/src/components/CodeBoard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,15 @@ export function CodeBoard() {
<Flex
alignItems="center"
borderRadius="1000px"
flex="1 0 0"
flex="1"
p="12px 34px"
>
<Text typography="buttonM">code menu</Text>
</Flex>
<Flex
alignItems="center"
borderRadius="1000px"
flex="1 0 0"
flex="1"
p="12px 34px"
>
<Text opacity="0.6" typography="buttonM">
Expand All @@ -80,7 +80,7 @@ export function CodeBoard() {
<Flex
alignItems="center"
borderRadius="1000px"
flex="1 0 0"
flex="1"
p="12px 34px"
>
<Text opacity="0.6" typography="buttonM">
Expand Down
6 changes: 3 additions & 3 deletions apps/landing/src/components/Discord.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Center, css, Flex, Image, Text, VStack } from '@devup-ui/react'
import Link from 'next/link'

import { IMAGE_PREFIX } from '../constants'
import { URL_PREFIX } from '../constants'

export function Discord() {
return (
<Center
bgColor="$joinBg"
bgImage="url(/discord-bg.svg)"
bgImage={`url(${URL_PREFIX}/discord-bg.svg)`}
borderRadius="40px 40px 0px 40px"
h="380px"
>
Expand Down Expand Up @@ -39,7 +39,7 @@ export function Discord() {
<Text color="#FFF" typography="buttonLbold">
Join our Discord
</Text>
<Image boxSize="24px" src={IMAGE_PREFIX + '/outlink.svg'} />
<Image boxSize="24px" src={URL_PREFIX + '/outlink.svg'} />
</Flex>
</Flex>
</Link>
Expand Down
Loading
Loading