feat(website): add vertical roadmap

re #833
semaphore-protocol · Jul 25, 2024 · 9680fee · 9680fee
1 parent a71299e
commit 9680fee
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 55 deletions.
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
@@ -5,9 +5,9 @@ import Carousel from "../components/Carousel"
 import ProjectCard from "../components/ProjectCard"
 import events from "../data/events.json"
 import allProjects from "../data/projects.json"
-import roadmap from "../data/roadmap.json"
 import IconDiscord from "../icons/IconDiscord"
-import IconInnerCheck from "../icons/IconInnerCheck"
+import HRoadmap from "@/components/HRoadmap"
+import VRoadmap from "@/components/VRoadmap"
 
 const sora = Sora({
     subsets: ["latin"]
@@ -228,60 +228,13 @@ export default function Home() {
                         2024 Roadmap
                     </Heading>
 
-                    <HStack w="full" mt="60px">
-                        {roadmap.map((milestone, i) => (
-                            <Box
-                                key={milestone.name}
-                                borderBottomWidth={i % 2 === 0 ? "5px" : "0px"}
-                                borderTopWidth={i % 2 !== 0 ? "5px" : "0px"}
-                                borderLeftWidth="1px"
-                                borderColor="#1E46F2"
-                                transform={i % 2 === 0 ? "translateY(-74px)" : ""}
-                                h="80px"
-                                w="full"
-                                pos="relative"
-                            >
-                                {milestone.done ? (
-                                    <IconInnerCheck
-                                        pos="absolute"
-                                        top={i % 2 !== 0 ? "-14px" : "inherit"}
-                                        bottom={i % 2 === 0 ? "-14px" : "inherit"}
-                                        left="-12px"
-                                        bg="#1E46F2"
-                                        borderRadius="50px"
-                                        p="7px"
-                                        w="24px"
-                                        h="24px"
-                                        color="white"
-                                    />
-                                ) : (
-                                    <Box
-                                        pos="absolute"
-                                        top={i % 2 !== 0 ? "-14px" : "inherit"}
-                                        bottom={i % 2 === 0 ? "-14px" : "inherit"}
-                                        left="-12px"
-                                        bg="darkBlueBg"
-                                        borderWidth="5px"
-                                        borderColor="#1E46F2"
-                                        borderRadius="50px"
-                                        w="24px"
-                                        h="24px"
-                                    />
-                                )}
-                                <Text
-                                    pos="absolute"
-                                    bg="darkBlueBg"
-                                    fontSize="14px"
-                                    py="5px"
-                                    top={i % 2 === 0 ? "-35px" : "inherit"}
-                                    bottom={i % 2 !== 0 ? "-35px" : "inherit"}
-                                    left="-1px"
-                                >
-                                    {milestone.name}
-                                </Text>
-                            </Box>
-                        ))}
+                    <HStack display={{ base: "none", md: "flex" }} w="full" mt="60px">
+                        <HRoadmap />
                     </HStack>
+
+                    <VStack display={{ base: "flex", md: "none" }}>
+                        <VRoadmap />
+                    </VStack>
                 </VStack>
 
                 <VStack maxW="650" align="center" spacing="8">

diff --git a/apps/website/src/components/HRoadmap.tsx b/apps/website/src/components/HRoadmap.tsx
@@ -0,0 +1,58 @@
+import { Box, Text } from "@chakra-ui/react"
+import roadmap from "../data/roadmap.json"
+import IconInnerCheck from "../icons/IconInnerCheck"
+
+export default function HRoadmap() {
+    return roadmap.map((milestone, i) => (
+        <Box
+            key={milestone.name}
+            borderBottomWidth={i % 2 === 0 ? "5px" : "0px"}
+            borderTopWidth={i % 2 !== 0 ? "5px" : "0px"}
+            borderLeftWidth="1px"
+            borderColor="#1E46F2"
+            transform={i % 2 === 0 ? "translateY(-74px)" : ""}
+            h="80px"
+            w="full"
+            pos="relative"
+        >
+            {milestone.done ? (
+                <IconInnerCheck
+                    pos="absolute"
+                    top={i % 2 !== 0 ? "-14px" : "inherit"}
+                    bottom={i % 2 === 0 ? "-14px" : "inherit"}
+                    left="-12px"
+                    bg="#1E46F2"
+                    borderRadius="50px"
+                    p="7px"
+                    w="24px"
+                    h="24px"
+                    color="white"
+                />
+            ) : (
+                <Box
+                    pos="absolute"
+                    top={i % 2 !== 0 ? "-14px" : "inherit"}
+                    bottom={i % 2 === 0 ? "-14px" : "inherit"}
+                    left="-12px"
+                    bg="darkBlueBg"
+                    borderWidth="5px"
+                    borderColor="#1E46F2"
+                    borderRadius="50px"
+                    w="24px"
+                    h="24px"
+                />
+            )}
+            <Text
+                pos="absolute"
+                bg="darkBlueBg"
+                fontSize="14px"
+                py="5px"
+                top={i % 2 === 0 ? "-35px" : "inherit"}
+                bottom={i % 2 !== 0 ? "-35px" : "inherit"}
+                left="-1px"
+            >
+                {milestone.name}
+            </Text>
+        </Box>
+    ))
+}
diff --git a/apps/website/src/components/VRoadmap.tsx b/apps/website/src/components/VRoadmap.tsx
@@ -0,0 +1,61 @@
+import { Box, Text } from "@chakra-ui/react"
+import roadmap from "../data/roadmap.json"
+import IconInnerCheck from "../icons/IconInnerCheck"
+
+export default function VRoadmap() {
+    return roadmap.map((milestone, i) => (
+        <Box
+            key={milestone.name}
+            ml="-74px"
+            borderLeftWidth={i % 2 === 0 ? "5px" : "0px"}
+            borderRightWidth={i % 2 !== 0 ? "5px" : "0px"}
+            borderTopWidth="1px"
+            borderColor="#1E46F2"
+            transform={i % 2 === 0 ? "translateX(74px)" : ""}
+            h="80px"
+            w="80px"
+            pos="relative"
+        >
+            {milestone.done ? (
+                <IconInnerCheck
+                    pos="absolute"
+                    right={i % 2 !== 0 ? "-14px" : "inherit"}
+                    left={i % 2 === 0 ? "-14px" : "inherit"}
+                    top="-12px"
+                    bg="#1E46F2"
+                    borderRadius="50px"
+                    p="7px"
+                    w="24px"
+                    h="24px"
+                    color="white"
+                />
+            ) : (
+                <Box
+                    pos="absolute"
+                    right={i % 2 !== 0 ? "-14px" : "inherit"}
+                    left={i % 2 === 0 ? "-14px" : "inherit"}
+                    top="-12px"
+                    bg="darkBlueBg"
+                    borderWidth="5px"
+                    borderColor="#1E46F2"
+                    borderRadius="50px"
+                    w="24px"
+                    h="24px"
+                />
+            )}
+            <Text
+                pos="absolute"
+                bg="darkBlueBg"
+                fontSize="14px"
+                w="140px"
+                px="16px"
+                textAlign={i % 2 === 0 ? "left" : "right"}
+                left={i % 2 === 0 ? "70px" : "inherit"}
+                right={i % 2 !== 0 ? "70px" : "inherit"}
+                top="-5px"
+            >
+                {milestone.name}
+            </Text>
+        </Box>
+    ))
+}
diff --git a/apps/website/src/data/roadmap.json b/apps/website/src/data/roadmap.json
@@ -19,6 +19,10 @@
         "name": "LeanIMT Paper",
         "done": false
     },
+    {
+        "name": "RLN extension",
+        "done": false
+    },
     {
         "name": "Support more Testnets/Mainnets",
         "done": false