chore(website): make some ui adjustments

re #558


Former-commit-id: 55ca431de0

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

@@ -59,7 +59,7 @@ export default function Build() {
     ]
     return (
         <VStack justify="center">
-            <VStack mt="90px">
+            <VStack pt="170px" pb="128px">
                 <Heading fontSize={{ base: "40px", sm: "46px", md: "72px" }} textAlign="center">
                     Let’s build something new
                 </Heading>
@@ -81,9 +81,9 @@ export default function Build() {
                     </Flex>
                 </VStack>
             </VStack>
+
             <Flex
                 justifyContent="space-between"
-                mt="128px"
                 direction="row"
                 backgroundColor="darkBlue"
                 p="0"

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

@@ -244,10 +244,11 @@ await verifyProof(verificationKey, fullProof)`,
 
     return (
         <VStack w="full">
-            <VStack position="relative">
+            <VStack pt="170px" pb="112px" position="relative">
                 <Box
                     display={{ base: "none", md: "block" }}
                     zIndex="-1"
+                    top="0"
                     left="50%"
                     transform="translateX(-50%)"
                     w="100vw"
@@ -267,6 +268,7 @@ await verifyProof(verificationKey, fullProof)`,
                 <Box
                     display={{ base: "block", lg: "none" }}
                     zIndex="-1"
+                    top="0"
                     left="50%"
                     transform="translateX(-50%)"
                     w="100vw"
@@ -283,13 +285,7 @@ await verifyProof(verificationKey, fullProof)`,
                     />
                 </Box>
 
-                <Tabs
-                    maxWidth="100vw"
-                    variant="unstyled"
-                    align="center"
-                    mt={{ base: "100px", md: "170px" }}
-                    mb={{ base: "50px", md: "112px" }}
-                >
+                <Tabs maxWidth="100vw" variant="unstyled" align="center">
                     <Box overflow="auto" mx="3">
                         <TabList gap="40px" w="max-content" whiteSpace="nowrap">
                             <Tab px={0} fontSize="24px" _selected={{ borderBottom: "2px solid white" }}>

apps/website/src/app/page.tsx

@@ -1,4 +1,5 @@
 import { Box, Button, Card, CardBody, HStack, Heading, Image, Link, Stack, Text, VStack } from "@chakra-ui/react"
+import NextLink from "next/link"
 import { Sora } from "next/font/google"
 import Carousel from "../components/Carousel"
 import ProjectCard from "../components/ProjectCard"
@@ -12,10 +13,11 @@ const sora = Sora({
 
 export default function Home() {
     return (
-        <VStack>
-            <VStack h={{ base: "718", sm: "734", md: "724" }} justify="center" spacing="20" position="relative">
+        <>
+            <VStack pt="170px" pb={{ base: "128px", md: "170px" }} justify="center" spacing="20" position="relative">
                 <Box
                     zIndex="-1"
+                    top="0"
                     left="50%"
                     transform="translateX(-50%)"
                     w="100vw"
@@ -80,6 +82,20 @@ export default function Home() {
                             />
                         ))}
                     </VStack>
+
+                    <HStack justify="center" fontSize="12px">
+                        <Link
+                            as={NextLink}
+                            href="/projects"
+                            textTransform="uppercase"
+                            textDecoration="underline"
+                            _hover={{
+                                textDecoration: "underline"
+                            }}
+                        >
+                            View more
+                        </Link>
+                    </HStack>
                 </VStack>
             </VStack>
 
@@ -253,6 +269,6 @@ export default function Home() {
                     </Card>
                 </Stack>
             </VStack>
-        </VStack>
+        </>
     )
 }

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

@@ -4,17 +4,11 @@ import ProjectsList from "../../components/ProjectsList"
 
 export default function Projects() {
     return (
-        <VStack>
-            <VStack
-                h={{ base: "442", sm: "420", md: "393" }}
-                w="100%"
-                justify="end"
-                align="left"
-                spacing="40"
-                position="relative"
-            >
+        <>
+            <VStack pt="170px" pb="56px" w="100%" justify="end" align="left" spacing="40" position="relative">
                 <Box
                     zIndex="-1"
+                    top="0"
                     left="50%"
                     transform="translateX(-50%)"
                     w="100vw"
@@ -51,6 +45,6 @@ export default function Projects() {
                     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/Carousel.tsx

@@ -47,10 +47,8 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
 
     return (
         <VStack align="left" w="full" spacing="16" {...props}>
-            <HStack justify="space-between">
-                <Heading fontSize={{ base: "30px", md: "44px" }} textAlign={type === "projects" ? "center" : "left"}>
-                    {title}
-                </Heading>
+            <HStack justify={type === "projects" ? "center" : "space-between"}>
+                <Heading fontSize={{ base: "30px", md: "44px" }}>{title}</Heading>
 
                 {type !== "projects" && (
                     <HStack visibility={!size ? "hidden" : "visible"}>
@@ -128,7 +126,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
                 <HStack w="100%">
                     <Box flex="1" />
 
-                    <HStack flex="1" justify="center" visibility={!size ? "hidden" : "visible"}>
+                    <HStack flex="1" justify="center">
                         <IconButton
                             onClick={previousProject}
                             variant="link"

apps/website/src/components/ProjectsList.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Button, Grid, GridItem, HStack, IconButton, Text, VStack } from "@chakra-ui/react"
+import { Grid, GridItem, HStack, IconButton, Tag, TagLabel, TagLeftIcon, Text, VStack } from "@chakra-ui/react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import ProjectCard from "../components/ProjectCard"
 import allProjects from "../data/projects.json"
@@ -56,22 +56,30 @@ export default function ProjectsList(props: any) {
                 <Text fontSize="20">Projects created by</Text>
 
                 <HStack spacing="4" flexWrap="wrap">
-                    <Button
+                    <Tag
                         size="lg"
-                        leftIcon={<IconPSE />}
                         variant={onlyPSE === true ? "solid" : "outline"}
+                        colorScheme={onlyPSE === true ? "primary" : "white"}
                         onClick={() => setOnlyPSE(onlyPSE === true ? null : true)}
+                        cursor="pointer"
+                        px="18px"
+                        py="13px"
                     >
-                        PSE
-                    </Button>
-                    <Button
+                        <TagLeftIcon boxSize="18px" as={IconPSE} />
+                        <TagLabel>PSE</TagLabel>
+                    </Tag>
+                    <Tag
                         size="lg"
-                        leftIcon={<IconCommunity />}
                         variant={onlyPSE === false ? "solid" : "outline"}
+                        colorScheme={onlyPSE === false ? "primary" : "white"}
                         onClick={() => setOnlyPSE(onlyPSE === false ? null : false)}
+                        cursor="pointer"
+                        px="18px"
+                        py="13px"
                     >
-                        Community
-                    </Button>
+                        <TagLeftIcon boxSize="18px" as={IconCommunity} />
+                        <TagLabel>Community</TagLabel>
+                    </Tag>
                 </HStack>
             </VStack>
 
@@ -79,10 +87,11 @@ export default function ProjectsList(props: any) {
                 <Text fontSize="20">Category</Text>
                 <HStack spacing="3" flexWrap="wrap">
                     {getProjectCategories(sortedProjects).map((category) => (
-                        <Button
+                        <Tag
                             key={category}
-                            size="sm"
+                            size="md"
                             variant={selectedCategories.includes(category) ? "solid" : "outline"}
+                            colorScheme={selectedCategories.includes(category) ? "primary" : "white"}
                             onClick={() => {
                                 const newCategories = selectedCategories.includes(category)
                                     ? selectedCategories.filter((c) => c !== category)
@@ -90,9 +99,10 @@ export default function ProjectsList(props: any) {
 
                                 setSelectedCategories(newCategories)
                             }}
+                            cursor="pointer"
                         >
                             {category}
-                        </Button>
+                        </Tag>
                     ))}
                 </HStack>
             </VStack>

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

@@ -4,7 +4,8 @@ const Tag = {
     baseStyle: {
         container: {
             borderRadius: "100px",
-            padding: "5px 16px 5px 16px"
+            padding: "5px 16px 5px 16px",
+            borderWidth: "1px"
         }
     },
     defaultProps: {
@@ -22,7 +23,8 @@ const Tag = {
                 return {
                     container: {
                         bg,
-                        color
+                        color,
+                        borderColor: bg
                     }
                 }
             }
@@ -32,7 +34,8 @@ const Tag = {
             return {
                 container: {
                     bg,
-                    color: `darkBlue`
+                    color: `darkBlue`,
+                    borderColor: bg
                 }
             }
         },
@@ -42,7 +45,7 @@ const Tag = {
             return {
                 container: {
                     color: c,
-                    shadow: `inset 0 0 0px 1px ${c}`
+                    borderColor: c
                 }
             }
         }