github/semaphore
1
1
Fork 0
mirror of https://github.com/semaphore-protocol/semaphore.git synced 2026-01-10 07:08:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

chore(website): add eslint config for tsx files

Browse Source 
Former-commit-id: 3450acd707
This commit is contained in:
cedoor
2023-11-10 12:48:01 +00:00
parent 985ab89f23
commit d937bf6b63
16 changed files with 188 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/website/package.json
View File

@@ -1,12 +1,11 @@
{
"name": "semaphore-website",
"version": "0.2.0",
"version": "2.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
"start": "next start"
},
"dependencies": {
"@chakra-ui/next-js": "^2.1.5",

62
apps/website/src/app/build/page.tsx
View File

@@ -57,18 +57,18 @@ export default function Build() {
]
return (
<VStack justify="center">
<VStack mt={"90px"}>
<Text textAlign={"center"} fontSize={{ base: "40px", md: "72px" }}>
<VStack mt="90px">
<Text textAlign="center" fontSize={{ base: "40px", md: "72px" }}>
Let’s build something new
</Text>
<Text textAlign={"center"} fontSize={{ base: "16px", md: "20px" }} color={"alabaster.400"} mt={"14px"}>
<Text textAlign="center" fontSize={{ base: "16px", md: "20px" }} color="alabaster.400" mt="14px">
Jumpstart your app development process with these building tools.
</Text>
<VStack mt={"64px"}>
<Flex gap={"33px"} wrap={"wrap"} justifyContent={"center"}>
{toolCardsInfo.map((toolCardInfo, i) => (
<VStack mt="64px">
<Flex gap="33px" wrap="wrap" justifyContent="center">
{toolCardsInfo.map((toolCardInfo) => (
<ToolsCard
key={i}
key={toolCardInfo.title}
title={toolCardInfo.title}
subtitle={toolCardInfo.subtitle}
icon={toolCardInfo.icon}
@@ -79,47 +79,47 @@ export default function Build() {
</VStack>
</VStack>
<Flex
justifyContent={"space-between"}
mt={"128px"}
direction={"row"}
backgroundColor={"darkBlue"}
p={"0"}
w={"100vw"}
maxW={"1440px"}
h={"auto"}
justifyContent="space-between"
mt="128px"
direction="row"
backgroundColor="darkBlue"
p="0"
w="100vw"
maxW="1440px"
h="auto"
wrap={{ base: "wrap", xl: "nowrap" }}
>
<Flex
justify={"center"}
alignItems={"center"}
justify="center"
alignItems="center"
mt={{ base: "120px", xl: "125px" }}
ml={{ base: "32px", xl: "80px" }}
mr={{ base: "32px", xl: "188px" }}
mb={{ base: "120px", xl: "109px" }}
w={{ base: "auto", xl: "445px" }}
>
<VStack alignItems={"left"}>
<Text fontSize={{ base: "30px", md: "44px" }} fontWeight={"500"}>
<VStack alignItems="left">
<Text fontSize={{ base: "30px", md: "44px" }} fontWeight="500">
Contribute to Semaphore
</Text>
<Text fontSize={{ base: "16px", md: "18px" }} color={"alabaster.300"} mt={"16px"}>
<Text fontSize={{ base: "16px", md: "18px" }} color="alabaster.300" mt="16px">
Semaphore is open source with dozens of community contributors. You can propose improvements
to the protocol or take good first issues to get started.
</Text>
<VStack mt={"40px"} alignItems={"left"}>
{linksInfo.map((linkInfo, i) => (
<VStack mt="40px" alignItems="left">
{linksInfo.map((linkInfo) => (
<Link
display={"flex"}
alignItems={"center"}
gap={"10px"}
justifyItems={"center"}
display="flex"
alignItems="center"
gap="10px"
justifyItems="center"
href={linkInfo.href}
isExternal
key={i}
key={linkInfo.title}
>
<Text
borderBottomWidth={"1px"}
borderBottomColor={"white"}
borderBottomWidth="1px"
borderBottomColor="white"
_hover={{ borderBottomColor: "transparent" }}
fontSize="18px"
fontWeight="normal"
@@ -132,7 +132,7 @@ export default function Build() {
</VStack>
</VStack>
</Flex>
<Box position={"relative"} w={{ base: "full", xl: "727px" }} h={"630"}>
<Box position="relative" w={{ base: "full", xl: "727px" }} h="630">
<Image
src="https://semaphore.cedoor.dev/flower-shadow.jpg"
alt="Flower Shadow"
@@ -144,7 +144,7 @@ export default function Build() {
/>
</Box>
</Flex>
<VStack my={"128"}>
<VStack my="128">
<ActionCard
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."

4
apps/website/src/app/layout.tsx
View File

@@ -26,8 +26,8 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning={true}>
<body suppressHydrationWarning={true}>
<html lang="en" suppressHydrationWarning>
<body suppressHydrationWarning>
<Providers>
<Navbar />
<Container maxW="1440px" px={{ base: "5", md: "10" }}>

84
apps/website/src/app/learn/page.tsx
View File

@@ -92,17 +92,17 @@ const nullifier = identity.getNullifier()
const commitment = identity.generateCommitment()`,
itemList: [
{
icon: <IconEyelash w={"24px"} h={"24px"} color={"ceruleanBlue"} />,
icon: <IconEyelash w="24px" h="24px" color="ceruleanBlue" />,
heading: "Private values",
body: "Trapdoor and nullifier values are the private values of the Semaphore identity. To avoid fraud, the owner must keep both values secret."
},
{
icon: <IconEye w={"24px"} h={"24px"} color={"ceruleanBlue"} />,
heading: "Private values",
body: "Trapdoor and nullifier values are the private values of the Semaphore identity. To avoid fraud, the owner must keep both values secret."
icon: <IconEye w="24px" h="24px" color="ceruleanBlue" />,
heading: "Public values",
body: "Semaphore uses the Poseidon hash function to create the identity commitment from the identity private values. Identity commitments can be made public, similarly to Ethereum addresses."
},
{
icon: <IconUser w={"24px"} h={"24px"} color={"ceruleanBlue"} />,
icon: <IconUser w="24px" h="24px" color="ceruleanBlue" />,
heading: "Generate identities",
body: "Semaphore identities can be generated deterministically or randomly. Deterministic identities can be generated from the hash of a secret message."
}
@@ -121,17 +121,17 @@ const group = new Group()
group.addMember(commitment)`,
itemList: [
{
icon: <IconTree w={"24px"} h={"24px"} color={"ceruleanBlue"} />,
icon: <IconTree w="24px" h="24px" color="ceruleanBlue" />,
heading: "Merkle trees",
body: "Each leaf contains an identity commitment for a user. The identity commitment proves that the user is a group member without revealing the private identity of the user."
},
{
icon: <IconGroup w={"24px"} h={"24px"} color={"ceruleanBlue"} />,
icon: <IconGroup w="24px" h="24px" color="ceruleanBlue" />,
heading: "Types of groups",
body: "Groups can be created and managed in a decentralized fashion with Semaphore contracts or off-chain with our JavaScript libraries."
},
{
icon: <IconManageUsers w={"24px"} h={"24px"} color={"ceruleanBlue"} />,
icon: <IconManageUsers w="24px" h="24px" color="ceruleanBlue" />,
heading: "Group management",
body: "Users can join and leave groups by themselves, or an admin can add and remove them. Admins can be centralized authorities, Ethereum accounts, multi-sig wallets or smart contracts."
}
@@ -158,17 +158,17 @@ const verificationKey = JSON.parse(fs.readFileSync("./semaphore.json", "utf-8"))
await verifyProof(verificationKey, fullProof)`,
itemList: [
{
icon: <IconBadge w={"24px"} h={"24px"} color={"ceruleanBlue"} />,
icon: <IconBadge w="24px" h="24px" color="ceruleanBlue" />,
heading: "Membership",
body: "Only users who are part of a group can generate a valid proof for that group."
},
{
icon: <IconFlag w={"24px"} h={"24px"} color={"ceruleanBlue"} />,
icon: <IconFlag w="24px" h="24px" color="ceruleanBlue" />,
heading: "Signals",
body: "Group users can anonymously broadcast signals such as votes or endorsements without revealing their original identity."
},
{
icon: <IconCheck w={"24px"} h={"24px"} color={"ceruleanBlue"} />,
icon: <IconCheck w="24px" h="24px" color="ceruleanBlue" />,
heading: "Verifiers",
body: "Semaphore proofs can be verified with our contracts or off-chain with our JavaScript libraries."
}
@@ -182,14 +182,14 @@ await verifyProof(verificationKey, fullProof)`,
<Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
Semaphore: Anonymous interactions
</Text>
<Text fontSize={{ base: "16px", md: "20px" }} mt={"24px"} lineHeight={"32px"}>
<Text fontSize={{ base: "16px", md: "20px" }} mt="24px" lineHeight="32px">
Using zero knowledge, Semaphore allows users to prove their membership of a group and send signals
such as votes or endorsements without revealing their original identity. The goal is to make
Semaphore a standard for anonymous signaling and group membership proving.
</Text>
</VStack>
<VStack mt={"40px"}>
<Flex wrap={{ base: "wrap", lg: "nowrap" }} justify={"center"} alignItems={"center"} gap={"32px"}>
<VStack mt="40px">
<Flex wrap={{ base: "wrap", lg: "nowrap" }} justify="center" alignItems="center" gap="32px">
<VStack>
<Text fontSize={{ base: "24px", md: "30px" }} fontWeight={{ base: "400", md: "500" }}>
Principles
@@ -213,15 +213,15 @@ await verifyProof(verificationKey, fullProof)`,
<Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
Zero Knowledge: new cryptography
</Text>
<Text fontSize={{ base: "16px", md: "20px" }} mt={"24px"} lineHeight={"32px"}>
<Text fontSize={{ base: "16px", md: "20px" }} mt="24px" lineHeight="32px">
Zero-knowledge is a new field in cryptography that allows developers to build apps that allow users
to share information with each other without revealing their identities or the contents of the
information being shared.
</Text>
<Link href="https://pse.dev/resources" isExternal>
<Text
borderBottomWidth={"1px"}
borderBottomColor={"white"}
borderBottomWidth="1px"
borderBottomColor="white"
_hover={{ borderBottomColor: "transparent" }}
fontSize={{ base: "16px", md: "20px" }}
fontWeight="normal"
@@ -230,7 +230,7 @@ await verifyProof(verificationKey, fullProof)`,
</Text>
</Link>
</VStack>
<VStack mt={"40px"}>
<VStack mt="40px">
<VStack>
<Text fontSize={{ base: "24px", md: "30px" }} fontWeight={{ base: "400", md: "500" }}>
Characteristics
@@ -247,7 +247,7 @@ await verifyProof(verificationKey, fullProof)`,
<Box
display={{ base: "none", md: "block" }}
zIndex="-1"
left={"50%"}
left="50%"
transform="translateX(-50%)"
w="100vw"
h="100%"
@@ -268,7 +268,7 @@ await verifyProof(verificationKey, fullProof)`,
<Box
display={{ base: "block", lg: "none" }}
zIndex="-1"
left={"50%"}
left="50%"
transform="translateX(-50%)"
w="100vw"
h="100%"
@@ -289,20 +289,20 @@ await verifyProof(verificationKey, fullProof)`,
<Tabs
position="relative"
variant="unstyled"
align={"center"}
align="center"
mt={{ base: "100px", md: "170px" }}
mb={{ base: "50px", md: "112px" }}
>
<TabList gap={"40px"}>
<Tab px={0} fontSize={"24px"}>
<TabList gap="40px">
<Tab px={0} fontSize="24px">
About Semaphore
</Tab>
<Tab px={0} fontSize={"24px"}>
<Tab px={0} fontSize="24px">
About Zero Knowledge
</Tab>
</TabList>
<TabIndicator mt="-1.5px" height="2px" bg="white" borderRadius="1px" />
<TabPanels mt={"80px"}>
<TabPanels mt="80px">
<TabPanel>{renderTabBlockSemaphore()}</TabPanel>
<TabPanel>{renderTabBlockZeroKnowledge()}</TabPanel>
</TabPanels>
@@ -311,7 +311,7 @@ await verifyProof(verificationKey, fullProof)`,
<VStack p={{ base: "128px 20px", md: "128px 80px" }}>
{sectionBlockTexts.map((sectionBlockText, i) => (
<VStack key={i}>
<VStack key={sectionBlockText.title}>
<SectionBlock
title={sectionBlockText.title}
description={sectionBlockText.description}
@@ -320,7 +320,7 @@ await verifyProof(verificationKey, fullProof)`,
codeText={sectionBlockText.codeText}
itemList={sectionBlockText.itemList}
/>
{i !== sectionBlockTexts.length - 1 && <Divider my={"68px"} borderColor={"alabaster.600"} />}
{i !== sectionBlockTexts.length - 1 && <Divider my="68px" borderColor="alabaster.600" />}
</VStack>
))}
</VStack>
@@ -334,7 +334,7 @@ await verifyProof(verificationKey, fullProof)`,
w="100vw"
h="100%"
pos="absolute"
></Box>
/>
<VStack display={{ base: "none", xl: "block" }} p="100px 40px" w="full" spacing="20">
<Carousel
@@ -358,18 +358,18 @@ await verifyProof(verificationKey, fullProof)`,
<Text
display={{ base: "flex", xl: "none" }}
flex="1"
alignSelf={"start"}
alignSelf="start"
fontSize={{ base: "40px", md: "44px" }}
fontWeight={"500"}
mt={"100px"}
fontWeight="500"
mt="100px"
>
Videos
</Text>
<Flex display={{ base: "flex", xl: "none" }} w={"100%"} overflowX={"auto"}>
{videos.map((video, i) => (
<VStack key={i}>
<Flex display={{ base: "flex", xl: "none" }} w="100%" overflowX="auto">
{videos.map((video) => (
<VStack key={video.url}>
<Box px="3">
<VideoCard key={i} title={video.title} embeddedVideoUrl={video.embeddedUrl} />
<VideoCard title={video.title} embeddedVideoUrl={video.embeddedUrl} />
</Box>
</VStack>
))}
@@ -377,17 +377,17 @@ await verifyProof(verificationKey, fullProof)`,
<Text
display={{ base: "flex", xl: "none" }}
flex="1"
alignSelf={"start"}
alignSelf="start"
fontSize="44px"
fontWeight={"500"}
mt={"96px"}
fontWeight="500"
mt="96px"
>
Articles
</Text>
<Flex display={{ base: "flex", xl: "none" }} w={"100%"} overflowX={"auto"} mb={"66px"}>
{articles.map((article, i) => (
<VStack key={i}>
<ArticleCard key={i} title={article.title} minRead={article.minRead} url={article.url} />
<Flex display={{ base: "flex", xl: "none" }} w="100%" overflowX="auto" mb="66px">
{articles.map((article) => (
<VStack key={article.url}>
<ArticleCard title={article.title} minRead={article.minRead} url={article.url} />
</VStack>
))}
</Flex>

32
apps/website/src/components/ActionCard.tsx
View File

@@ -9,9 +9,9 @@ export type ActionCardProps = {
export default function ActionCard({ title, description, buttonText }: ActionCardProps) {
return (
<Card
bg={"darkBlue"}
textColor={"white"}
borderRadius={"24px"}
bg="darkBlue"
textColor="white"
borderRadius="24px"
width={{ base: "full", xl: "1110px" }}
height={{ base: "full", xl: "244px" }}
direction={{ base: "column", xl: "row" }}
@@ -19,38 +19,38 @@ export default function ActionCard({ title, description, buttonText }: ActionCar
>
<CardBody padding={0}>
<Flex
justifyContent={"space-between"}
alignItems={"center"}
justifyContent="space-between"
alignItems="center"
direction={{ base: "column", md: "row" }}
gap={{ base: "2rem", md: "0" }}
>
<Stack width={{ base: "full", md: "522px" }}>
<Heading
fontSize={{ base: "30px", md: "40px" }}
lineHeight={"44px"}
fontWeight={"normal"}
textColor={"white"}
lineHeight="44px"
fontWeight="normal"
textColor="white"
>
{title}
</Heading>
<Text
mt={"1rem"}
mt="1rem"
fontSize={{ base: "16px", md: "20px" }}
lineHeight={{ base: "25px", md: "32px" }}
fontWeight={"normal"}
textColor={"alabaster.400"}
fontWeight="normal"
textColor="alabaster.400"
>
{description}
</Text>
</Stack>
<Stack width={{ base: "full", md: "auto" }}>
<Button
bg={"semaphore"}
w={"fit-content"}
lineHeight={"24px"}
bg="semaphore"
w="fit-content"
lineHeight="24px"
fontSize={{ base: "14px", md: "18px", lg: "20px" }}
textColor={"white"}
padding={"1.5rem 2rem"}
textColor="white"
padding="1.5rem 2rem"
_hover={{ opacity: "85%" }}
>
{buttonText}

14
apps/website/src/components/ArticleCard.tsx
View File

@@ -10,21 +10,21 @@ export default function ArticleCard({ title, minRead, url }: ArticleCardProps) {
return (
<Link href={url} isExternal>
<Card
bg={"transparent"}
borderRadius={"10px"}
color={"white"}
padding={"24px 20px"}
bg="transparent"
borderRadius="10px"
color="white"
padding="24px 20px"
width={{ base: "full", sm: "297.5px" }}
height={"210px"}
height="210px"
_hover={{ bgColor: "darkBlueBg" }}
>
<CardBody padding={0}>
<Heading fontSize={"20px"} lineHeight={"28px"}>
<Heading fontSize="20px" lineHeight="28px">
{title}
</Heading>
</CardBody>
<CardFooter padding={0}>
<Text fontSize={"14px"} lineHeight={"22.4px"}>
<Text fontSize="14px" lineHeight="22.4px">
{`${minRead} min read`}
</Text>
</CardFooter>

21
apps/website/src/components/Carousel.tsx
View File

@@ -78,10 +78,10 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
spacing="0"
>
{type === "projects" &&
projects.map((project, i) => (
projects.map((project) => (
<Link
minW={`${100 / size!}%`}
key={project.name + i}
key={project.name}
href={project.links.github}
isExternal
visibility={!size ? "hidden" : "visible"}
@@ -97,31 +97,26 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
))}
{type === "articles" &&
articles.map((article, i) => (
articles.map((article) => (
<Box
visibility={!size ? "hidden" : "visible"}
px="3"
minW={`${100 / size!}%`}
key={article.title + i}
key={article.title + article.url}
>
<ArticleCard
key={i}
title={article.title}
minRead={article.minRead}
url={article.url}
/>
<ArticleCard title={article.title} minRead={article.minRead} url={article.url} />
</Box>
))}
{type === "videos" &&
videos.map((video, i) => (
videos.map((video) => (
<Box
visibility={!size ? "hidden" : "visible"}
px="3"
minW={`${100 / size!}%`}
key={video.title + i}
key={video.title + video.url}
>
<VideoCard key={i} title={video.title} embeddedVideoUrl={video.embeddedUrl} />
<VideoCard title={video.title} embeddedVideoUrl={video.embeddedUrl} />
</Box>
))}
</HStack>

32
apps/website/src/components/CodeBlock.tsx
View File

@@ -24,28 +24,28 @@ export default function CodekBlock({ text }: CodekBlockProps) {
}
return (
<Flex
overflow={"auto"}
gap={"200px"}
justify={"space-around"}
overflow="auto"
gap="200px"
justify="space-around"
w={{ base: "300px", md: "602px" }}
position={"relative"}
borderRadius={"8px"}
backgroundColor={"darkBlue"}
position="relative"
borderRadius="8px"
backgroundColor="darkBlue"
>
<CodeBlock {...copyBlockProps} />
<Button
textColor={"alabaster.300"}
textColor="alabaster.300"
fontSize={{ base: "16px", md: "18px" }}
fontWeight={"400"}
borderColor={"alabaster.800"}
backgroundColor={"darkBlue"}
padding={"5px 8px"}
border={"1px"}
borderRadius={"4px"}
fontWeight="400"
borderColor="alabaster.800"
backgroundColor="darkBlue"
padding="5px 8px"
border="1px"
borderRadius="4px"
onClick={onCopy}
position={"absolute"}
right={"24px"}
top={"24px"}
position="absolute"
right="24px"
top="24px"
>
{hasCopied ? "copied!" : "copy"}
</Button>

5
apps/website/src/components/Footer.tsx
View File

@@ -42,7 +42,10 @@ export default function Footer() {
<IconArrowUpRight width="10px" mb={1} />
</HStack>
</Link>
<Link href="" isExternal>
<Link
href="https://www.notion.so/pse-team/Semaphore-Identity-Kit-ebbfe6ac0a824fb0a65e8783caf9b330"
isExternal
>
<HStack spacing="3">
<Heading fontSize="18px" fontWeight="normal">
Design Kit

8
apps/website/src/components/InfoCard.tsx
View File

@@ -24,12 +24,12 @@ export default function InfoCard({ texts }: InfoCardProps) {
>
<CardBody padding="0">
<VStack align="left" spacing="10" maxH="500" overflowY="auto">
{texts.map((text, i) => (
<VStack key={i} align="left">
<Heading textAlign={"left"} fontSize={{ base: "20px", md: "24px" }}>
{texts.map((text) => (
<VStack key={text.title} align="left">
<Heading textAlign="left" fontSize={{ base: "20px", md: "24px" }}>
{text.title}
</Heading>
<Text textAlign={"left"} fontSize={{ base: "14px", md: "16px" }}>
<Text textAlign="left" fontSize={{ base: "14px", md: "16px" }}>
{text.body}
</Text>
</VStack>

2
apps/website/src/components/Navbar.tsx
View File

@@ -57,7 +57,7 @@ export default function Navbar() {
<Drawer isOpen={isOpen} placement="right" onClose={onClose}>
<DrawerOverlay />
<DrawerContent bgColor="darkBlueBg">
<DrawerCloseButton mt={"25px"} mr={"21px"} />
<DrawerCloseButton mt="25px" mr="21px" />
<DrawerBody>
<VStack spacing="8" mt="20">

24
apps/website/src/components/ProjectCard.tsx
View File

@@ -9,28 +9,28 @@ export type ProjectCardProps = {
export default function ProjectCard({ categories, title, description }: ProjectCardProps) {
return (
<Card
bg={"darkBlue"}
borderRadius={"18px"}
color={"white"}
border={"1px"}
borderColor={"alabaster.950"}
padding={"55px 34px 55px 34px"}
bg="darkBlue"
borderRadius="18px"
color="white"
border="1px"
borderColor="alabaster.950"
padding="55px 34px 55px 34px"
width="full"
height={"284.86px"}
height="284.86px"
_hover={{ borderColor: "ceruleanBlue" }}
>
<HStack gap={"8px"} mb={"2rem"}>
{categories.map((category, i) => (
<Tag variant="outline" key={i}>
<HStack gap="8px" mb="2rem">
{categories.map((category) => (
<Tag variant="outline" key={category}>
{category}
</Tag>
))}
</HStack>
<CardBody padding={0}>
<Heading fontSize={"24px"} lineHeight={"33px"}>
<Heading fontSize="24px" lineHeight="33px">
{title}
</Heading>
<Text mt={"1rem"} gap={"10px"} fontSize={"14px"} lineHeight={"22.4px"}>
<Text mt="1rem" gap="10px" fontSize="14px" lineHeight="22.4px">
{description}
</Text>
</CardBody>

5
apps/website/src/components/ProjectsList.tsx
View File

@@ -83,8 +83,8 @@ export default function ProjectsList(props: any) {
</VStack>
<Grid templateColumns={{ base: "1fr", lg: "repeat(2, 1fr)", "2xl": "repeat(3, 1fr)" }} gap={6}>
{projects[index].map((project, i) => (
<GridItem key={project.name + i}>
{projects[index].map((project) => (
<GridItem key={project.name}>
<Link href={project.links.website || project.links.github} target="_blank">
<ProjectCard
title={project.name}
@@ -110,6 +110,7 @@ export default function ProjectsList(props: any) {
<HStack spacing="5">
{projects.map((_, i) => (
<Text
// eslint-disable-next-line react/no-array-index-key
key={i}
onClick={() => setIndex(i)}
cursor="pointer"

35
apps/website/src/components/SectionBlock.tsx
View File

@@ -22,25 +22,18 @@ export type SectionBlockProps = {
export default function SectionBlock({ title, description, linkText, linkUrl, codeText, itemList }: SectionBlockProps) {
return (
<VStack>
<Flex justify={{ base: "start", xl: "space-around" }} wrap={{ base: "wrap", xl: "nowrap" }} gap={"52px"}>
<VStack w={{ base: "auto", lg: "602px" }} alignItems={{ base: "start", xl: "center" }} gap={"32px"}>
<Flex justify={{ base: "start", xl: "space-around" }} wrap={{ base: "wrap", xl: "nowrap" }} gap="52px">
<VStack w={{ base: "auto", lg: "602px" }} alignItems={{ base: "start", xl: "center" }} gap="32px">
<Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
{title}
</Text>
<Text fontSize={{ base: "16px", md: "18px" }} textColor={"alabaster.400"}>
<Text fontSize={{ base: "16px", md: "18px" }} textColor="alabaster.400">
{description}
</Text>
<Link
display={"flex"}
alignItems={"center"}
gap={"10px"}
justifyItems={"center"}
href={linkUrl}
isExternal
>
<Link display="flex" alignItems="center" gap="10px" justifyItems="center" href={linkUrl} isExternal>
<Text
borderBottomWidth={"1px"}
borderBottomColor={"white"}
borderBottomWidth="1px"
borderBottomColor="white"
_hover={{ borderBottomColor: "transparent" }}
fontSize="18px"
fontWeight="400"
@@ -53,18 +46,12 @@ export default function SectionBlock({ title, description, linkText, linkUrl, co
<CodekBlock text={codeText} />
</Flex>
<Flex
mt={"80px"}
gap={"40px"}
justify={"start"}
alignItems={"center"}
wrap={{ base: "wrap", xl: "nowrap" }}
>
{itemList.map((item, i) => (
<VStack key={i} alignItems={"start"}>
<Flex mt="80px" gap="40px" justify="start" alignItems="center" wrap={{ base: "wrap", xl: "nowrap" }}>
{itemList.map((item) => (
<VStack key={item.heading} alignItems="start">
<VStack>{item.icon}</VStack>
<Text fontSize={"24px"}>{item.heading}</Text>
<Text fontSize={"16px"} color={"alabaster.400"}>
<Text fontSize="24px">{item.heading}</Text>
<Text fontSize="16px" color="alabaster.400">
{item.body}
</Text>
</VStack>

45
apps/website/src/components/ToolsCard.tsx
View File

@@ -24,52 +24,47 @@ export type ToolsCardProps = {
export default function ToolsCard({ icon, title, subtitle, details }: ToolsCardProps) {
return (
<Card
bg={"darkBlue"}
borderRadius={"16px"}
color={"white"}
border={"1px"}
borderColor={"alabaster.950"}
padding={"32px"}
bg="darkBlue"
borderRadius="16px"
color="white"
border="1px"
borderColor="alabaster.950"
padding="32px"
width={{ base: "full", lg: "348px" }}
height={{ base: "auto", lg: "501px" }}
>
<HStack mb={"2rem"}>{icon}</HStack>
<HStack mb="2rem">{icon}</HStack>
<CardBody padding={0}>
<VStack divider={<StackDivider borderColor={"alabaster.950"} />} spacing={"24px"} align="stretch">
<VStack divider={<StackDivider borderColor="alabaster.950" />} spacing="24px" align="stretch">
<Box>
<Heading fontSize={"40px"} fontWeight={"normal"}>
<Heading fontSize="40px" fontWeight="normal">
{title}
</Heading>
<Button
mt={"24px"}
w={"full"}
mt="24px"
w="full"
bg="semaphore"
color={"white"}
fontSize={"18px"}
fontWeight={"medium"}
color="white"
fontSize="18px"
fontWeight="medium"
_hover={{ bg: "semaphore", opacity: "85%" }}
>
Select tool
</Button>
</Box>
<Box>
<Text fontSize={"12px"} textTransform={"uppercase"} fontWeight={"semibold"}>
<Text fontSize="12px" textTransform="uppercase" fontWeight="semibold">
{subtitle}
</Text>
<List spacing={"14px"} mb={"2rem"} mt={"24px"}>
{details.map((elem, i) => (
<ListItem key={i}>
<List spacing="14px" mb="2rem" mt="24px">
{details.map((elem) => (
<ListItem key={elem}>
<Flex>
<HStack alignItems={"start"} mt={"8px"}>
<HStack alignItems="start" mt="8px">
<IconChevronRight height={2} width={2} color="ceruleanBlue" />
</HStack>
<Text
display={"inline-block"}
ml={"8px"}
fontSize={"14px"}
lineHeight={"22.4px"}
>
<Text display="inline-block" ml="8px" fontSize="14px" lineHeight="22.4px">
{elem}
</Text>
</Flex>

18
apps/website/src/components/VideoCard.tsx
View File

@@ -9,20 +9,20 @@ export default function VideoCard({ embeddedVideoUrl, title }: VideoCardProps) {
return (
<Link href={embeddedVideoUrl}>
<Card
bg={"transparent"}
borderRadius={"10px"}
color={"white"}
width={"297px"}
height={"320px"}
bg="transparent"
borderRadius="10px"
color="white"
width="297px"
height="320px"
_hover={{ bgColor: "darkBlueBg" }}
>
<HStack borderRadius={"10px 10px 0px 0px"}>
<AspectRatio width={"297px"} height={"215px"} borderRadius={"10px"} overflow={"hidden"}>
<HStack borderRadius="10px 10px 0px 0px">
<AspectRatio width="297px" height="215px" borderRadius="10px" overflow="hidden">
<iframe title={title} src={embeddedVideoUrl} allowFullScreen />
</AspectRatio>
</HStack>
<CardBody padding={"0px 20px 20px 20px"}>
<Heading fontSize={{ base: "18px", md: "20px" }} lineHeight={"28px"} fontWeight={"normal"}>
<CardBody padding="0px 20px 20px 20px">
<Heading fontSize={{ base: "18px", md: "20px" }} lineHeight="28px" fontWeight="normal">
{title}
</Heading>
</CardBody>