Add some URLs

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

@@ -12,6 +12,7 @@ export default function Build() {
             icon: <IconCli width={8} height={8} color="ceruleanBlue" />,
             title: "CLI",
             subtitle: "INTEGRATE TO YOUR PROJECT",
+            url: "https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli#readme",
             details: [
                 "Streamline setting up a new Semaphore project",
                 "Interact with group, members & proofs data easily",
@@ -22,6 +23,7 @@ export default function Build() {
             icon: <IconBook width={8} height={8} color="ceruleanBlue" />,
             title: "Boilerplate",
             subtitle: "START FROM TEMPLATE",
+            url: "https://github.com/semaphore-protocol/boilerplate",
             details: [
                 "Begin your projects with a ready-to-use example template",
                 "Create identity, join group, send anonmous feedback",
@@ -32,6 +34,7 @@ export default function Build() {
             icon: <IconBox width={8} height={8} color="ceruleanBlue" />,
             title: "Packages",
             subtitle: "LEVERAGE DEVELOPED LIBRARIES",
+            url: "https://github.com/semaphore-protocol/semaphore/tree/main/packages",
             details: [
                 "Curated libraries to enhance your development process",
                 "Preconfigured deployments with Hardhat plugin",
@@ -72,6 +75,7 @@ export default function Build() {
                                 subtitle={toolCardInfo.subtitle}
                                 icon={toolCardInfo.icon}
                                 details={toolCardInfo.details}
+                                url={toolCardInfo.url}
                             />
                         ))}
                     </Flex>
@@ -147,6 +151,7 @@ export default function Build() {
                     title="Project ideas to explore with Semaphore"
                     description="The team has created this list of project ideas to build with Semaphore, but there are many more to be discovered."
                     buttonText="Get inspired"
+                    buttonUrl="https://github.com/orgs/semaphore-protocol/discussions/463"
                 />
             </VStack>
         </VStack>

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

@@ -48,6 +48,7 @@ export default function Projects() {
                     title="Show what you have built"
                     description="We are missing your project! Add your project to this page and show your awesomeness to the world."
                     buttonText="Submit your project"
+                    buttonUrl="https://github.com/semaphore-protocol/semaphore/issues/new?assignees=&labels=documentation++%F0%9F%93%96&projects=&template=----project.md&title="
                 />
             </VStack>
         </VStack>

apps/website/src/components/ActionCard.tsx

@@ -1,12 +1,13 @@
-import { Heading, Text, Card, CardBody, Stack, Button, Flex } from "@chakra-ui/react"
+import { Heading, Text, Card, CardBody, Stack, Flex, Link } from "@chakra-ui/react"
 
 export type ActionCardProps = {
     title: string
     description: string
     buttonText: string
+    buttonUrl: string
 }
 
-export default function ActionCard({ title, description, buttonText }: ActionCardProps) {
+export default function ActionCard({ title, description, buttonText, buttonUrl }: ActionCardProps) {
     return (
         <Card
             bg="darkBlue"
@@ -43,17 +44,20 @@ export default function ActionCard({ title, description, buttonText }: ActionCar
                         </Text>
                     </Stack>
                     <Stack width={{ base: "full", md: "auto" }}>
-                        <Button
+                        <Link
+                            href={buttonUrl}
+                            isExternal
+                            variant="buttonlink"
                             bg="semaphore"
                             w="fit-content"
                             lineHeight="24px"
                             fontSize={{ base: "14px", md: "18px", lg: "20px" }}
                             textColor="white"
-                            padding="1.5rem 2rem"
+                            padding="14px 16px"
                             _hover={{ opacity: "85%" }}
                         >
                             {buttonText}
-                        </Button>
+                        </Link>
                     </Stack>
                 </Flex>
             </CardBody>

apps/website/src/components/ToolsCard.tsx

@@ -9,7 +9,7 @@ import {
     VStack,
     StackDivider,
     Box,
-    Button,
+    Link,
     Flex
 } from "@chakra-ui/react"
 import IconChevronRight from "@/icons/IconChevronRight"
@@ -19,9 +19,10 @@ export type ToolsCardProps = {
     title: string
     subtitle: string
     details: string[]
+    url: string
 }
 
-export default function ToolsCard({ icon, title, subtitle, details }: ToolsCardProps) {
+export default function ToolsCard({ icon, title, subtitle, details, url }: ToolsCardProps) {
     return (
         <Card
             bg="darkBlue"
@@ -40,17 +41,23 @@ export default function ToolsCard({ icon, title, subtitle, details }: ToolsCardP
                         <Heading fontSize="40px" fontWeight="normal">
                             {title}
                         </Heading>
-                        <Button
+                        <Link
+                            display="flex"
+                            alignItems="center"
+                            justifyContent="center"
+                            href={url}
+                            isExternal
+                            variant="buttonlink"
+                            py="10px"
                             mt="24px"
                             w="full"
                             bg="semaphore"
                             color="white"
                             fontSize="18px"
-                            fontWeight="medium"
                             _hover={{ bg: "semaphore", opacity: "85%" }}
                         >
                             Select tool
-                        </Button>
+                        </Link>
                     </Box>
                     <Box>
                         <Text fontSize="12px" textTransform="uppercase" fontWeight="semibold">

apps/website/src/data/videos.json

@@ -20,8 +20,8 @@
         "eventName": "Taipei Ethereum Meetup",
         "date": "May 21, 2019",
         "speakers": ["Barry Whitehat"],
-        "url": "https://youtu.be/TtsDNneTDDY",
-        "thumbnail": "https://img.youtube.com/vi/TtsDNneTDDY/0.jpg"
+        "url": "https://youtu.be/maDHYyj30kg",
+        "thumbnail": "https://img.youtube.com/vi/maDHYyj30kg/0.jpg"
     },
     {
         "title": "Semaphore Roadmap for Ethereum",

apps/website/src/styles/components/Link.ts

@@ -14,6 +14,10 @@ const Link = {
             pb: "5px",
             pt: "6px",
             _hover: { borderBottomColor: "ceruleanBlue" }
+        }),
+        buttonlink: (): SystemStyleObject => ({
+            borderRadius: "100px",
+            fontWeight: "500"
         })
     }
 }