Skip to content

Commit 368bbd4

Browse files
cedoorcedoor
authored
docs(website): add roadmap to home page (#834)
* docs(website): add roadmap to home page re #833 * fix(website): add key property re #833 * docs(website): add vertical roadmap
1 parent da2fae6 commit 368bbd4

File tree

7 files changed

+208
-27
lines changed

7 files changed

+208
-27
lines changed

‎apps/website/src/app/layout.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,18 @@ export default function RootLayout({ children }: { children: React.ReactNode })
3232
<body suppressHydrationWarning>
3333
<Providers>
3434
<Banner>
35-
Semaphore V4
3635
<Link
3736
_hover={{
3837
textDecoration: "underline",
3938
textDecorationColor: "primary.600"
4039
}}
41-
href="https://ceremony.pse.dev/projects/Semaphore%20V4%20Ceremony"
40+
href="https://github.com/semaphore-protocol/semaphore/releases/tag/v4.0.0"
4241
ml="1"
4342
isExternal
4443
>
45-
<b>Trusted Setup</b>
44+
<b>Semaphore V4</b>
4645
</Link>{" "}
47-
ceremony is open for contributions until <b>July 10</b>.
46+
has been released 🚀
4847
</Banner>
4948
<Navbar />
5049
<Container maxW="1440px" px={{ base: "5", md: "10" }}>

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

Lines changed: 37 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { Box, Button, Card, CardBody, HStack, Heading, Image, Link, Stack, Text, VStack } from "@chakra-ui/react"
2-
import NextLink from "next/link"
32
import { Sora } from "next/font/google"
3+
import NextLink from "next/link"
44
import Carousel from "../components/Carousel"
55
import ProjectCard from "../components/ProjectCard"
66
import events from "../data/events.json"
77
import allProjects from "../data/projects.json"
88
import IconDiscord from "../icons/IconDiscord"
9+
import HRoadmap from "@/components/HRoadmap"
10+
import VRoadmap from "@/components/VRoadmap"
911

1012
const sora = Sora({
1113
subsets: ["latin"]
@@ -220,6 +222,35 @@ export default function Home() {
220222
</Card>
221223
</HStack>
222224

225+
<VStack mb="32" spacing="32">
226+
<VStack w="full" maxW="1110px">
227+
<Heading fontSize={{ base: "30px", md: "44px" }} pb="90px">
228+
2024 Roadmap
229+
</Heading>
230+
231+
<HStack display={{ base: "none", md: "flex" }} w="full" mt="60px">
232+
<HRoadmap />
233+
</HStack>
234+
235+
<VStack display={{ base: "flex", md: "none" }}>
236+
<VRoadmap />
237+
</VStack>
238+
</VStack>
239+
240+
<VStack maxW="650" align="center" spacing="8">
241+
<Heading fontSize={{ base: "30px", md: "44px" }}>Join the Semaphore community</Heading>
242+
<Text fontSize={{ base: "16px", md: "18px" }} textAlign="center">
243+
Ask questions, suggest ideas, stay up-to-date, and meet other people building privacy
244+
applications with Zero Knowledge.
245+
</Text>
246+
<Link href="https://semaphore.pse.dev/discord" isExternal>
247+
<Button leftIcon={<IconDiscord />} size="lg">
248+
Discord
249+
</Button>
250+
</Link>
251+
</VStack>
252+
</VStack>
253+
223254
<VStack justify="center" spacing="40" py="32" position="relative">
224255
<Box
225256
zIndex="-1"
@@ -239,27 +270,16 @@ export default function Home() {
239270
/>
240271
</Box>
241272

242-
<Stack direction={{ base: "column", md: "row" }} px={{ base: "0", md: "12" }} spacing="32">
243-
<VStack maxW="450" align="left" spacing="8">
244-
<Heading fontSize={{ base: "30px", md: "44px" }}>Join the Semaphore community</Heading>
245-
<Text fontSize={{ base: "16px", md: "18px" }}>
246-
Ask questions, suggest ideas, stay up-to-date, and meet other people building privacy
247-
applications with Zero Knowledge.
248-
</Text>
249-
<Link href="https://semaphore.pse.dev/discord" isExternal>
250-
<Button leftIcon={<IconDiscord />} size="lg">
251-
Discord
252-
</Button>
253-
</Link>
254-
</VStack>
273+
<Stack direction={{ base: "column", md: "row" }} px={{ base: "0", md: "12" }} w="full">
274+
<Box flex="1" />
255275

256276
<Card
257-
bg="inherit"
277+
flex="1"
278+
bg="darkBlue"
258279
color="white"
259-
backdropFilter="blur(4px)"
260280
borderRadius="18px"
261281
border="1px"
262-
borderColor="white"
282+
borderColor="text.900"
263283
padding="50px"
264284
>
265285
<CardBody padding="0">

‎apps/website/src/components/HRoadmap.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Box, Text } from "@chakra-ui/react"
2+
import roadmap from "../data/roadmap.json"
3+
import IconInnerCheck from "../icons/IconInnerCheck"
4+
5+
export default function HRoadmap() {
6+
return roadmap.map((milestone, i) => (
7+
<Box
8+
key={milestone.name}
9+
borderBottomWidth={i % 2 === 0 ? "5px" : "0px"}
10+
borderTopWidth={i % 2 !== 0 ? "5px" : "0px"}
11+
borderLeftWidth="1px"
12+
borderColor="#1E46F2"
13+
transform={i % 2 === 0 ? "translateY(-74px)" : ""}
14+
h="80px"
15+
w="full"
16+
pos="relative"
17+
>
18+
{milestone.done ? (
19+
<IconInnerCheck
20+
pos="absolute"
21+
top={i % 2 !== 0 ? "-14px" : "inherit"}
22+
bottom={i % 2 === 0 ? "-14px" : "inherit"}
23+
left="-12px"
24+
bg="#1E46F2"
25+
borderRadius="50px"
26+
p="7px"
27+
w="24px"
28+
h="24px"
29+
color="white"
30+
/>
31+
) : (
32+
<Box
33+
pos="absolute"
34+
top={i % 2 !== 0 ? "-14px" : "inherit"}
35+
bottom={i % 2 === 0 ? "-14px" : "inherit"}
36+
left="-12px"
37+
bg="darkBlueBg"
38+
borderWidth="5px"
39+
borderColor="#1E46F2"
40+
borderRadius="50px"
41+
w="24px"
42+
h="24px"
43+
/>
44+
)}
45+
<Text
46+
pos="absolute"
47+
bg="darkBlueBg"
48+
fontSize="14px"
49+
py="5px"
50+
top={i % 2 === 0 ? "-35px" : "inherit"}
51+
bottom={i % 2 !== 0 ? "-35px" : "inherit"}
52+
left="-1px"
53+
>
54+
{milestone.name}
55+
</Text>
56+
</Box>
57+
))
58+
}

‎apps/website/src/components/VRoadmap.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { Box, Text } from "@chakra-ui/react"
2+
import roadmap from "../data/roadmap.json"
3+
import IconInnerCheck from "../icons/IconInnerCheck"
4+
5+
export default function VRoadmap() {
6+
return roadmap.map((milestone, i) => (
7+
<Box
8+
key={milestone.name}
9+
ml="-74px"
10+
borderLeftWidth={i % 2 === 0 ? "5px" : "0px"}
11+
borderRightWidth={i % 2 !== 0 ? "5px" : "0px"}
12+
borderTopWidth="1px"
13+
borderColor="#1E46F2"
14+
transform={i % 2 === 0 ? "translateX(74px)" : ""}
15+
h="80px"
16+
w="80px"
17+
pos="relative"
18+
>
19+
{milestone.done ? (
20+
<IconInnerCheck
21+
pos="absolute"
22+
right={i % 2 !== 0 ? "-14px" : "inherit"}
23+
left={i % 2 === 0 ? "-14px" : "inherit"}
24+
top="-12px"
25+
bg="#1E46F2"
26+
borderRadius="50px"
27+
p="7px"
28+
w="24px"
29+
h="24px"
30+
color="white"
31+
/>
32+
) : (
33+
<Box
34+
pos="absolute"
35+
right={i % 2 !== 0 ? "-14px" : "inherit"}
36+
left={i % 2 === 0 ? "-14px" : "inherit"}
37+
top="-12px"
38+
bg="darkBlueBg"
39+
borderWidth="5px"
40+
borderColor="#1E46F2"
41+
borderRadius="50px"
42+
w="24px"
43+
h="24px"
44+
/>
45+
)}
46+
<Text
47+
pos="absolute"
48+
bg="darkBlueBg"
49+
fontSize="14px"
50+
w="140px"
51+
px="16px"
52+
textAlign={i % 2 === 0 ? "left" : "right"}
53+
left={i % 2 === 0 ? "70px" : "inherit"}
54+
right={i % 2 !== 0 ? "70px" : "inherit"}
55+
top="-5px"
56+
>
57+
{milestone.name}
58+
</Text>
59+
</Box>
60+
))
61+
}

‎apps/website/src/data/events.json‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
11
[
2-
{
3-
"name": "Trusted Setup ceremony",
4-
"date": "June 10 - July 10, 2024",
5-
"description": "The Semaphore team will perform the Phase 2 MPC Trusted Setup ceremony to secure V4 circuit variants from 1 to 32 tree depths.",
6-
"link": "https://docs.semaphore.pse.dev/trusted-setup"
7-
},
82
{
93
"name": "ETHRome",
104
"date": "Oct 4-6, 2024",

‎apps/website/src/data/roadmap.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
[
2+
{
3+
"name": "Launched New Website",
4+
"done": true
5+
},
6+
{
7+
"name": "V4 Audit",
8+
"done": true
9+
},
10+
{
11+
"name": "V4 Trusted Setup",
12+
"done": true
13+
},
14+
{
15+
"name": "V4 Stable Release",
16+
"done": true
17+
},
18+
{
19+
"name": "LeanIMT Paper",
20+
"done": false
21+
},
22+
{
23+
"name": "RLN extension",
24+
"done": false
25+
},
26+
{
27+
"name": "Support more Testnets/Mainnets",
28+
"done": false
29+
},
30+
{
31+
"name": "Documentation Revamp",
32+
"done": false
33+
}
34+
]

‎apps/website/src/icons/IconInnerCheck.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Icon, IconProps } from "@chakra-ui/react"
2+
import React from "react"
3+
4+
export default function IconInnerCheck(props: IconProps): JSX.Element {
5+
return (
6+
<Icon viewBox="0 0 9 7" {...props}>
7+
<path
8+
fillRule="evenodd"
9+
clipRule="evenodd"
10+
d="M7.84114 1.12297C8.23166 1.5135 8.23166 2.14666 7.84114 2.53718L3.84114 6.53718C3.45062 6.92771 2.81745 6.92771 2.42693 6.53718L0.426926 4.53718C0.0364021 4.14666 0.0364021 3.5135 0.426926 3.12297C0.817451 2.73245 1.45062 2.73245 1.84114 3.12297L3.13403 4.41586L6.42693 1.12297C6.81745 0.732447 7.45062 0.732447 7.84114 1.12297Z"
11+
fill="white"
12+
/>
13+
</Icon>
14+
)
15+
}

0 commit comments

Comments
 (0)