Skip to content

Commit cb068de

Browse files
belltalionbelltalion
committed
fix home page
1 parent 2051d92 commit cb068de

File tree

8 files changed

+231
-204
lines changed

8 files changed

+231
-204
lines changed

‎apps/landing/public/icons/link.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎apps/landing/public/top-banner.webp‎

645 KB
Loading

‎apps/landing/script.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { glob, readFile, writeFile } from 'node:fs/promises'
1+
import { readFile, writeFile } from 'node:fs/promises'
2+
3+
import { glob } from 'glob'
24

35
const files = await glob('src/**/*.mdx')
46

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

Lines changed: 89 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,107 @@
1-
import { Flex, Text, VStack } from '@devup-ui/react'
1+
import { Box, Flex, Text, VStack } from '@devup-ui/react'
22

33
import { DevupUICard } from './DevupUICard'
44
import { OtherCard } from './OtherCard'
55

66
export function Bench() {
77
return (
8-
<VStack alignItems="center" py="60px" w="100%">
9-
<VStack gap="30px" maxW="1440px" px="40px" w="100%">
10-
<VStack gap="16px" w="805px">
8+
<VStack
9+
alignItems="center"
10+
overflow="hidden"
11+
py={['40px', null, '50px', null, '60px']}
12+
w="100%"
13+
>
14+
<VStack
15+
gap="30px"
16+
maxW="1440px"
17+
px={[null, null, null, null, '40px']}
18+
w="100%"
19+
>
20+
<VStack
21+
gap="16px"
22+
mx={[4, null, '40px', null, 0]}
23+
textAlign={['center', null, 'left']}
24+
wordBreak="keep-all"
25+
>
1126
<Text color="$title" typography="h4">
1227
Comparison Bechmarks
1328
</Text>
1429
<Text color="$text" typography="textL">
1530
Next.js Build Time and Build Size (github action - ubuntu-latest)
1631
</Text>
1732
</VStack>
18-
<Flex
19-
alignItems="end"
20-
flexWrap="wrap"
21-
gap="20px"
22-
justifyContent="center"
23-
>
33+
34+
<Flex display={[null, null, null, null, 'none']}>
2435
<DevupUICard />
25-
{[
26-
{
27-
title: 'tailwindcss',
28-
version: '4.1.13',
29-
buildTime: '20.22s',
30-
buildSize: '57,415kB',
31-
url: 'https://tailwindcss.com',
32-
},
33-
{
34-
title: 'styleX',
35-
version: '0.15.4',
36-
buildTime: '38.97s',
37-
buildSize: '76,257kB',
38-
url: 'https://stylexjs.com',
39-
},
40-
{
41-
title: 'vanilla-extract',
42-
version: '1.17.4',
43-
buildTime: '20.09s',
44-
buildSize: '59,366kB',
45-
url: 'https://vanilla-extract.style',
46-
},
47-
{
48-
title: 'kuma-ui',
49-
version: '1.5.9',
50-
buildTime: '21.61s',
51-
buildSize: '67,422kB',
52-
url: 'https://kuma-ui.com',
53-
},
54-
{
55-
title: 'panda-css',
56-
version: '1.3.1',
57-
buildTime: '22.01s',
58-
buildSize: '62,431kB',
59-
url: 'https://panda-css.com',
60-
},
61-
{
62-
title: 'chakra-ui',
63-
version: '3.27.0',
64-
buildTime: '29.99s',
65-
buildSize: '210,122kB',
66-
url: 'https://chakra-ui.com',
67-
},
68-
{
69-
title: 'mui',
70-
version: '7.3.2',
71-
buildTime: '22.21s',
72-
buildSize: '94,231kB',
73-
url: 'https://mui.com',
74-
},
75-
].map((item) => (
76-
<OtherCard key={item.title} {...item} />
77-
))}
7836
</Flex>
37+
<Box
38+
overflow={['auto', null, null, null, 'visible']}
39+
scrollbarWidth="none"
40+
>
41+
<Flex
42+
flexWrap={[null, null, null, null, 'wrap']}
43+
gap={[3, null, 5]}
44+
justifyContent={[null, null, null, null, 'center']}
45+
px={[4, null, '40px', null, 0]}
46+
>
47+
<Flex display={['none', null, null, null, 'flex']}>
48+
<DevupUICard />
49+
</Flex>
50+
{[
51+
{
52+
title: 'Chakra UI',
53+
version: '3.24.2',
54+
buildTime: '29.3s',
55+
buildSize: '186.2MB',
56+
url: 'https://chakra-ui.com',
57+
},
58+
{
59+
title: 'Mui',
60+
version: '7.3.1',
61+
buildTime: '21.6s',
62+
buildSize: '84.3MB',
63+
url: 'https://mui.com',
64+
},
65+
{
66+
title: 'Kuma UI',
67+
version: '1.5.9',
68+
buildTime: '20.6s',
69+
buildSize: '60.3MB',
70+
url: 'https://kuma-ui.com',
71+
},
72+
{
73+
title: 'Tailwindcss',
74+
version: '4.1.13',
75+
buildTime: '20.2s',
76+
buildSize: '54.7MB',
77+
url: 'https://tailwindcss.com',
78+
},
79+
{
80+
title: 'panda CSS',
81+
version: '1.3.1',
82+
buildTime: '22.0s',
83+
buildSize: '59.5MB',
84+
url: 'https://panda-css.com',
85+
},
86+
{
87+
title: 'styleX',
88+
version: '0.15.4',
89+
buildTime: '38.9s',
90+
buildSize: '72.7MB',
91+
url: 'https://stylexjs.com',
92+
},
93+
{
94+
title: 'vanilla extract',
95+
version: '1.17.4',
96+
buildTime: '20.1s',
97+
buildSize: '56.6MB',
98+
url: 'https://vanilla-extract.style',
99+
},
100+
].map((item) => (
101+
<OtherCard key={item.title} {...item} />
102+
))}
103+
</Flex>
104+
</Box>
79105
</VStack>
80106
</VStack>
81107
)

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,26 @@ import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
22

33
export function DevupUICard() {
44
return (
5-
<VStack
5+
<Flex
66
bg="$containerBackground"
77
border="1px solid $border"
88
borderRadius="20px"
99
boxShadow="0 0 8px 0 var(--shadow, rgba(135, 135, 135, 0.25))"
10+
flexDir={['row', null, null, null, 'column']}
1011
gap="60px"
11-
justifyContent="center"
12+
justifyContent={['space-between', null, null, null, 'center']}
13+
mx={[4, null, '40px', null, 0]}
1214
overflow="hidden"
13-
p="30px"
15+
p={['24px', null, '30px']}
1416
pos="relative"
15-
w="400px"
17+
w={['100%', null, null, null, '400px']}
1618
>
1719
<Image
1820
aspectRatio="1"
1921
bottom="-30px"
22+
left="-50px"
2023
opacity="0.2"
2124
pos="absolute"
22-
right="200px"
2325
src="/icons/devup-ui-card.svg"
2426
w="260px"
2527
/>
@@ -28,7 +30,7 @@ export function DevupUICard() {
2830
Devup-ui
2931
</Text>
3032
<Text color="$text" typography="textL">
31-
1.0.18
33+
1.0.15
3234
</Text>
3335
</VStack>
3436
<VStack alignItems="flex-end" gap="20px">
@@ -51,7 +53,7 @@ export function DevupUICard() {
5153
color="transparent"
5254
typography="h4"
5355
>
54-
18.35s
56+
16.8s
5557
</Text>
5658
</Flex>
5759
</VStack>
@@ -74,11 +76,11 @@ export function DevupUICard() {
7476
color="transparent"
7577
typography="h4"
7678
>
77-
57.4MB
79+
51.2MB
7880
</Text>
7981
</Flex>
8082
</VStack>
8183
</VStack>
82-
</VStack>
84+
</Flex>
8385
)
8486
}

0 commit comments

Comments
 (0)