feat(website): add card components

apps/website/src/components/ArticleCard.tsx

@@ -0,0 +1,31 @@
+import { Heading, Text, Card, CardBody, CardFooter } from "@chakra-ui/react"
+
+export type ArticleCardProps = {
+    title: string
+    minRead: number
+}
+
+export default function ArticleCard({ title, minRead }: ArticleCardProps) {
+    return (
+        <Card
+            bg={"transparent"}
+            borderRadius={"10px"}
+            color={"white"}
+            padding={"24px 20px"}
+            width={{ base: "full", sm: "297.5px" }}
+            height={"210px"}
+            _hover={{ bgColor: "darkBlue1" }}
+        >
+            <CardBody padding={0}>
+                <Heading fontSize={"20px"} lineHeight={"28px"}>
+                    {title}
+                </Heading>
+            </CardBody>
+            <CardFooter padding={0}>
+                <Text fontSize={"14px"} lineHeight={"22.4px"}>
+                    {`${minRead} min read`}
+                </Text>
+            </CardFooter>
+        </Card>
+    )
+}

apps/website/src/components/ProjectCard.tsx

@@ -0,0 +1,37 @@
+import { Heading, Text, HStack, Tag, Card, CardBody } from "@chakra-ui/react"
+
+export type ProjectCardProps = {
+    tags: string[]
+    title: string
+    description: string
+}
+
+export default function ProjectCard({ tags, title, description }: ProjectCardProps) {
+    return (
+        <Card
+            bg={"darkBlue"}
+            borderRadius={"18px"}
+            color={"white"}
+            border={"1px"}
+            borderColor={"albaster"}
+            padding={"55px 34px 55px 34px"}
+            width={{ base: "full", sm: "404px" }}
+            height={"284.86px"}
+            _hover={{ borderColor: "ceruleanBlue" }}
+        >
+            <HStack gap={"8px"} mb={"2rem"}>
+                {tags.map((tag, i) => (
+                    <Tag key={i}>{tag}</Tag>
+                ))}
+            </HStack>
+            <CardBody padding={0}>
+                <Heading fontSize={"24px"} lineHeight={"33px"}>
+                    {title}
+                </Heading>
+                <Text mt={"1rem"} gap={"10px"} fontSize={"14px"} lineHeight={"22.4px"}>
+                    {description}
+                </Text>
+            </CardBody>
+        </Card>
+    )
+}

apps/website/src/components/ToolsCard.tsx

@@ -0,0 +1,84 @@
+import {
+    Heading,
+    Text,
+    HStack,
+    Card,
+    CardBody,
+    List,
+    ListItem,
+    VStack,
+    StackDivider,
+    Box,
+    Button,
+    Flex
+} from "@chakra-ui/react"
+import IconChevronRight from "@/icons/IconChevronRight"
+
+export type ToolsCardProps = {
+    icon: any
+    title: string
+    subtitle: string
+    details: string[]
+}
+
+export default function ToolsCard({ icon, title, subtitle, details }: ToolsCardProps) {
+    return (
+        <Card
+            bg={"darkBlue"}
+            borderRadius={"16px"}
+            color={"white"}
+            border={"1px"}
+            borderColor={"albaster"}
+            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">
+                    <Box>
+                        <Heading fontSize={"40px"} fontWeight={"normal"}>
+                            {title}
+                        </Heading>
+                        <Button
+                            mt={"24px"}
+                            w={"full"}
+                            bg="semaphore"
+                            color={"white"}
+                            fontSize={"18px"}
+                            fontWeight={"medium"}
+                            _hover={{ bg: "semaphore", opacity: "85%" }}
+                        >
+                            Select tool
+                        </Button>
+                    </Box>
+                    <Box>
+                        <Text fontSize={"12px"} textTransform={"uppercase"} fontWeight={"semibold"}>
+                            {subtitle}
+                        </Text>
+
+                        <List spacing={"14px"} mb={"2rem"} mt={"24px"}>
+                            {details.map((elem, i) => (
+                                <ListItem key={i}>
+                                    <Flex>
+                                        <HStack alignItems={"start"} mt={"8px"}>
+                                            <IconChevronRight height={2} width={2} color="ceruleanBlue" />
+                                        </HStack>
+                                        <Text
+                                            display={"inline-block"}
+                                            ml={"8px"}
+                                            fontSize={"14px"}
+                                            lineHeight={"22.4px"}
+                                        >
+                                            {elem}
+                                        </Text>
+                                    </Flex>
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Box>
+                </VStack>
+            </CardBody>
+        </Card>
+    )
+}

apps/website/src/components/VideoCard.tsx

@@ -0,0 +1,30 @@
+import { Heading, Card, CardBody, AspectRatio, HStack } from "@chakra-ui/react"
+
+export type VideoCardProps = {
+    videoUrl: string
+    title: string
+}
+
+export default function VideoCard({ videoUrl, title }: VideoCardProps) {
+    return (
+        <Card
+            bg={"transparent"}
+            borderRadius={"10px"}
+            color={"white"}
+            width={{ base: "full", sm: "297px" }}
+            height={"375px"}
+            _hover={{ bgColor: "darkBlue1" }}
+        >
+            <HStack borderRadius={"10px 10px 0px 0px"}>
+                <AspectRatio width={"297px"} height={"215px"} ratio={1} borderRadius={"10px"} overflow={"hidden"}>
+                    <iframe title={title} src={videoUrl} allowFullScreen />
+                </AspectRatio>
+            </HStack>
+            <CardBody padding={"0px 20px 20px 20px"}>
+                <Heading fontSize={"20px"} lineHeight={"28px"} fontWeight={"normal"}>
+                    {title}
+                </Heading>
+            </CardBody>
+        </Card>
+    )
+}

apps/website/src/styles/colors.ts

@@ -1,4 +1,9 @@
 const colors = {
+    albaster: "#26262B",
+    darkBlue: "#0E101B",
+    darkBlue1: "#00020D",
+    ceruleanBlue: "#3555DF",
+    semaphore: "linear-gradient(92.32deg, #4771EA -33.31%, #2735A6 112.52%)",
     primary: {
         50: "#f0f4fe",
         100: "#dde6fc",

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

@@ -1,72 +1,9 @@
-import { SystemStyleObject } from "@chakra-ui/react"
-import { StyleFunctionProps } from "@chakra-ui/theme-tools"
-
 const Button = {
     baseStyle: {
         _focus: {
             boxShadow: "none"
         },
-        borderRadius: "4px"
-    },
-    defaultProps: {
-        size: "lg"
-    },
-    variants: {
-        solid: (props: StyleFunctionProps): SystemStyleObject => {
-            const { colorScheme: c } = props
-
-            if (c === "primary") {
-                const bg = `${c}.500`
-                const color = "white"
-
-                return {
-                    bg,
-                    color,
-                    _hover: {
-                        bg: `${c}.600`,
-                        _disabled: {
-                            bg
-                        }
-                    },
-                    _active: { bg: `${c}.700` }
-                }
-            }
-
-            if (c === "gray") {
-                const bg = `whiteAlpha.200`
-
-                return {
-                    bg,
-                    _hover: {
-                        bg: `whiteAlpha.300`,
-                        _disabled: {
-                            bg
-                        }
-                    },
-                    _active: { bg: `whiteAlpha.400` }
-                }
-            }
-
-            const bg = `${c}.200`
-
-            return {
-                bg,
-                color: `gray.800`,
-                _hover: {
-                    bg: `${c}.300`,
-                    _disabled: {
-                        bg
-                    }
-                },
-                _active: { bg: `${c}.400` }
-            }
-        },
-        link: (): SystemStyleObject => ({
-            _hover: {
-                textDecoration: "none"
-            }
-        })
+        borderRadius: "100px"
     }
 }
-
 export default Button

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

@@ -0,0 +1,14 @@
+const Tag = {
+    baseStyle: {
+        container: {
+            bg: "transparent",
+            color: "white",
+            border: "1px",
+            borderRadius: "100px",
+            padding: "5px 16px 5px 16px",
+            fontSize: "12px"
+        }
+    }
+}
+
+export default Tag

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

@@ -1,9 +1,11 @@
 import Button from "./Button"
 import Link from "./Link"
 import Tooltip from "./Tooltip"
+import Tag from "./Tag"
 
 export default {
     Link,
     Button,
-    Tooltip
+    Tooltip,
+    Tag
 }