Skip to content

Commit bfc988a

Browse files
forestreamforestream
committed
Add github buttons in home
1 parent 724960e commit bfc988a

File tree

5 files changed

+196
-39
lines changed

5 files changed

+196
-39
lines changed

‎apps/landing/public/icons/solar_heart-bold.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎apps/landing/public/icons/solar_star-bold.svg‎

Lines changed: 9 additions & 0 deletions
Loading

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
'use client'
2+
3+
import { css, Flex, Image, Text } from '@devup-ui/react'
4+
import Link from 'next/link'
5+
6+
export default function SponsorButton() {
7+
return (
8+
<Link
9+
className={css({
10+
textDecoration: 'none',
11+
})}
12+
href="https://github.com/sponsors/dev-five-git"
13+
target="_blank"
14+
>
15+
<Flex
16+
_active={{
17+
bg: '$menuActive',
18+
}}
19+
_hover={{
20+
bg: '$menuHover',
21+
}}
22+
alignItems="center"
23+
bg="$containerBackground"
24+
border="1px solid $imageBorder"
25+
borderRadius="12px"
26+
gap="10px"
27+
pl="16px"
28+
pr="20px"
29+
py="10px"
30+
role="group"
31+
transition="all 0.1s ease-in-out"
32+
>
33+
<Image
34+
_groupHover={{
35+
transform: 'scale(1.1)',
36+
}}
37+
aspectRatio="1"
38+
boxSize="24px"
39+
src="/icons/solar_heart-bold.svg"
40+
transition="transform 0.2s ease-in-out"
41+
/>
42+
<Text color="$text" textAlign="center" typography="buttonLsemiB">
43+
Sponsor
44+
</Text>
45+
</Flex>
46+
</Link>
47+
)
48+
}

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Center, css, Flex, Image, Text } from '@devup-ui/react'
2+
import Link from 'next/link'
3+
4+
export default async function StarButton() {
5+
const res = await fetch('https://api.github.com/repos/dev-five-git/devup-ui')
6+
const data = await res.json()
7+
const starCount = data.stargazers_count
8+
9+
return (
10+
<Link
11+
className={css({
12+
textDecoration: 'none',
13+
})}
14+
href="https://github.com/dev-five-git/devup-ui"
15+
target="_blank"
16+
>
17+
<Flex
18+
_active={{
19+
bg: '$menuActive',
20+
}}
21+
_hover={{
22+
bg: '$menuHover',
23+
}}
24+
alignItems="center"
25+
bg="$containerBackground"
26+
border="1px solid $imageBorder"
27+
borderRadius="12px"
28+
cursor="pointer"
29+
h="100%"
30+
role="group"
31+
transition="all 0.1s ease-in-out"
32+
>
33+
<Flex
34+
alignItems="center"
35+
borderRadius="12px 0 0 12px"
36+
gap="10px"
37+
pl="16px"
38+
pr="20px"
39+
py="10px"
40+
>
41+
<Image
42+
_groupHover={{
43+
transform: 'scale(1.1)',
44+
}}
45+
aspectRatio="1"
46+
boxSize="24px"
47+
src="/icons/solar_star-bold.svg"
48+
transition="transform 0.2s ease-in-out"
49+
/>
50+
<Text color="$text" textAlign="center" typography="buttonLsemiB">
51+
Star
52+
</Text>
53+
</Flex>
54+
<Center
55+
bg="$starBg"
56+
borderLeft="1px solid $imageBorder"
57+
borderRadius="0 12px 12px 0"
58+
h="100%"
59+
px="16px"
60+
>
61+
<Text color="$primary" textAlign="center" typography="buttonLsemiB">
62+
{starCount}
63+
</Text>
64+
</Center>
65+
</Flex>
66+
</Link>
67+
)
68+
}

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

Lines changed: 62 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
1-
import { Box, css, Flex, Grid, Image, Text, VStack } from '@devup-ui/react'
1+
import {
2+
Box,
3+
Center,
4+
css,
5+
Flex,
6+
Grid,
7+
Image,
8+
Text,
9+
VStack,
10+
} from '@devup-ui/react'
211
import { Metadata } from 'next'
312
import Link from 'next/link'
413

514
import { CodeBoard } from '../components/CodeBoard'
615
import { Container } from '../components/Container'
716
import { Discord } from '../components/Discord'
817
import { FeatureCard } from './FeatureCard'
18+
import SponsorButton from './SponsorButton'
19+
import StarButton from './StarButton'
920

1021
export const metadata: Metadata = {
1122
alternates: {
@@ -83,45 +94,57 @@ export default function HomePage() {
8394
optimal performance.
8495
</Text>
8596
</VStack>
86-
<Link
87-
className={css({
88-
textDecoration: 'none',
89-
})}
90-
href="/docs/overview"
91-
>
92-
<Flex
93-
_active={{
94-
bg: '$negativeBase',
95-
}}
96-
_hover={{
97-
bg: '$title',
98-
}}
99-
alignItems="center"
100-
bg="$text"
101-
borderRadius="100px"
102-
gap="20px"
103-
p="16px 40px"
104-
role="group"
105-
>
106-
<Box
107-
_groupActive={{
108-
bg: '$third',
109-
}}
110-
_groupHover={{
111-
bg: '$primary',
112-
}}
113-
bg="$secondary"
114-
borderRadius="100%"
115-
boxSize="10px"
116-
/>
117-
<Flex alignItems="center" gap="10px">
118-
<Text color="$base" typography="buttonL">
119-
Get started
120-
</Text>
121-
<Image bg="$base" boxSize="24px" maskImage="url(/arrow.svg)" />
122-
</Flex>
97+
<VStack gap="30px">
98+
<Flex gap="20px">
99+
<StarButton />
100+
<SponsorButton />
123101
</Flex>
124-
</Link>
102+
<Center gap="16px">
103+
<Link
104+
className={css({
105+
textDecoration: 'none',
106+
})}
107+
href="/docs/overview"
108+
>
109+
<Flex
110+
_active={{
111+
bg: '$negativeBase',
112+
}}
113+
_hover={{
114+
bg: '$title',
115+
}}
116+
alignItems="center"
117+
bg="$text"
118+
borderRadius="100px"
119+
gap="20px"
120+
p="16px 40px"
121+
role="group"
122+
>
123+
<Box
124+
_groupActive={{
125+
bg: '$third',
126+
}}
127+
_groupHover={{
128+
bg: '$primary',
129+
}}
130+
bg="$secondary"
131+
borderRadius="100%"
132+
boxSize="10px"
133+
/>
134+
<Flex alignItems="center" gap="10px">
135+
<Text color="$base" typography="buttonL">
136+
Get started
137+
</Text>
138+
<Image
139+
bg="$base"
140+
boxSize="24px"
141+
maskImage="url(/arrow.svg)"
142+
/>
143+
</Flex>
144+
</Flex>
145+
</Link>
146+
</Center>
147+
</VStack>
125148
</VStack>
126149
<Box maxW="1224px" mx="auto" pb="100px" pt="80px" px={3}>
127150
<CodeBoard />

0 commit comments

Comments
 (0)