feat(website): add action card

semaphore-protocol · Oct 21, 2023 · 4f54c21 · 4f54c21
1 parent fca4d04
commit 4f54c21
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 5 deletions.
diff --git a/apps/website/src/components/ActionCard.tsx b/apps/website/src/components/ActionCard.tsx
@@ -0,0 +1,56 @@
+import { Heading, Text, Card, CardBody, Stack, Button, Flex } from "@chakra-ui/react"
+
+export type ActionCardProps = {
+    title: string
+    description: string
+    buttonText: string
+}
+
+export default function ActionCard({ title, description, buttonText }: ActionCardProps) {
+    return (
+        <Card
+            bg={"white"}
+            textColor={"darkBlue1"}
+            borderRadius={"24px"}
+            padding={{ base: "30px 50px", sm: "40px 60px", md: "50px 70px", lg: "60px 80px" }}
+            width={{ base: "full", xl: "1110px" }}
+            direction={{ base: "column", dm: "row" }}
+        >
+            <CardBody padding={0}>
+                <Flex
+                    justifyContent={"space-between"}
+                    alignItems={"center"}
+                    direction={{ base: "column", md: "row" }}
+                    gap={{ base: "2rem", md: "0" }}
+                >
+                    <Stack width={{ base: "full", md: "522px" }}>
+                        <Heading fontSize={"40px"} lineHeight={"44px"} fontWeight={"normal"} textColor={"darkBlueBg"}>
+                            {title}
+                        </Heading>
+                        <Text
+                            mt={"1rem"}
+                            fontSize={"20px"}
+                            lineHeight={"32px"}
+                            fontWeight={"normal"}
+                            textColor={"alabaster.400"}
+                        >
+                            {description}
+                        </Text>
+                    </Stack>
+                    <Stack>
+                        <Button
+                            bg={"semaphore"}
+                            lineHeight={"24px"}
+                            fontSize={"20px"}
+                            textColor={"white"}
+                            padding={"1.5rem 2rem"}
+                            _hover={{ opacity: "85%" }}
+                        >
+                            {buttonText}
+                        </Button>
+                    </Stack>
+                </Flex>
+            </CardBody>
+        </Card>
+    )
+}
diff --git a/apps/website/src/components/ProjectCard.tsx b/apps/website/src/components/ProjectCard.tsx
@@ -13,7 +13,7 @@ export default function ProjectCard({ tags, title, description }: ProjectCardPro
             borderRadius={"18px"}
             color={"white"}
             border={"1px"}
-            borderColor={"albaster"}
+            borderColor={"alabaster.950"}
             padding={"55px 34px 55px 34px"}
             width={{ base: "full", sm: "404px" }}
             height={"284.86px"}

diff --git a/apps/website/src/components/ToolsCard.tsx b/apps/website/src/components/ToolsCard.tsx
@@ -28,14 +28,14 @@ export default function ToolsCard({ icon, title, subtitle, details }: ToolsCardP
             borderRadius={"16px"}
             color={"white"}
             border={"1px"}
-            borderColor={"albaster"}
+            borderColor={"alabaster.950"}
             padding={"32px"}
             width={{ base: "full", sm: "348px" }}
             height={"501px"}
         >
             <HStack mb={"2rem"}>{icon}</HStack>
             <CardBody padding={0}>
-                <VStack divider={<StackDivider borderColor={"albaster"} />} spacing={"24px"} align="stretch">
+                <VStack divider={<StackDivider borderColor={"alabaster.950"} />} spacing={"24px"} align="stretch">
                     <Box>
                         <Heading fontSize={"40px"} fontWeight={"normal"}>
                             {title}

diff --git a/apps/website/src/styles/colors.ts b/apps/website/src/styles/colors.ts
@@ -1,9 +1,12 @@
 const colors = {
-    albaster: "#26262B",
     darkBlue: "#0E101B",
-    darkBlue1: "#00020D",
+    darkBlueBg: "#00020D",
     ceruleanBlue: "#3555DF",
     semaphore: "linear-gradient(92.32deg, #4771EA -33.31%, #2735A6 112.52%)",
+    alabaster: {
+        400: "#92939E",
+        950: "#26262B"
+    },
     primary: {
         50: "#f0f4fe",
         100: "#dde6fc",