Black Friday! Up to 90% OFF
<AvatarGroup data-type='AvatarGroup'> <Avatar data-type='Avatar' name='Ryan Florence' size='sm' src='https://bit.ly/ryan-florence'></Avatar> <Avatar data-type='Avatar' name='Segun Adebayo' size='sm' src='https://bit.ly/sage-adebayo'></Avatar> <Avatar data-type='Avatar' name='Kent Dodds' size='sm' src='https://bit.ly/kent-c-dodds'></Avatar> <Avatar data-type='Avatar' name='Prosper Otemuyiwa' size='sm' src='https://bit.ly/prosper-baba'></Avatar> <Avatar data-type='Avatar' name='Christian Nwamba' size='sm' src='https://bit.ly/code-beast'></Avatar> </AvatarGroup>
<Grid data-type='Grid' templateColumns={{base:'repeat(1,1fr)',lg:'repeat(2,1fr)'}} gap={6}> <GridItem data-type='GridItem'> <TableContainer data-type='TableContainer'> <Table data-type='Table' size='md'> <Thead data-type='Thead'> <Tr data-type='Tr'> <Th data-type='Th'>Page</Th> <Th data-type='Th'>Bounce Rate</Th> <Th data-type='Th'>Duration</Th> <Th data-type='Th'>Conversion Rate</Th> </Tr> </Thead> <Tbody data-type='Tbody'> <Tr data-type='Tr'> <Td data-type='Td'>/loopple</Td> <Td data-type='Td'>45%</Td> <Td data-type='Td'>00:00:30</Td> <Td data-type='Td'>1.23%</Td> </Tr> <Tr data-type='Tr'> <Td data-type='Td'>/loopple/react</Td> <Td data-type='Td'>21%</Td> <Td data-type='Td'>00:04:24</Td> <Td data-type='Td'>2.14%</Td> </Tr> <Tr data-type='Tr'> <Td data-type='Td'>/loopple/chakra-ui</Td> <Td data-type='Td'>38%</Td> <Td data-type='Td'>00:03:58</Td> <Td data-type='Td'>1.85%</Td> </Tr> </Tbody> <Tfoot data-type='Tfoot'> <Tr data-type='Tr'> <Td data-type='Td'>/loopple/bootstrap</Td> <Td data-type='Td'>55%</Td> <Td data-type='Td'>00:01:40</Td> <Td data-type='Td'>1.08%</Td> </Tr> </Tfoot> </Table> </TableContainer> </GridItem> <GridItem data-type='GridItem'> <TableContainer data-type='TableContainer'> <Table data-type='Table' size='md'> <Thead data-type='Thead'> <Tr data-type='Tr'> <Th data-type='Th'>Language</Th> <Th data-type='Th'>Users</Th> <Th data-type='Th'>Users(%)</Th> </Tr> </Thead> <Tbody data-type='Tbody'> <Tr data-type='Tr'> <Td data-type='Td'>en-us</Td> <Td data-type='Td'>458</Td> <Td data-type='Td'>52.52%</Td> </Tr> <Tr data-type='Tr'> <Td data-type='Td'>en-gb</Td> <Td data-type='Td'>112</Td> <Td data-type='Td'>12.84%</Td> </Tr> <Tr data-type='Tr'> <Td data-type='Td'>fr-fr</Td> <Td data-type='Td'>33</Td> <Td data-type='Td'>3.78%</Td> </Tr> <Tr data-type='Tr'> <Td data-type='Td'>de-de</Td> <Td data-type='Td'>22</Td> <Td data-type='Td'>2.52%</Td> </Tr> </Tbody> </Table> </TableContainer> </GridItem> </Grid>
<Card data-type='Card'> <CardHeader data-type='CardHeader'> <Heading data-type='Heading' size='sm' mb='4'> Loopple Dashboard</Heading> <AvatarGroup data-type='AvatarGroup'> <Avatar data-type='Avatar' name='Ryan Florence' size='sm' src='https://bit.ly/ryan-florence'></Avatar> <Avatar data-type='Avatar' name='Segun Adebayo' size='sm' src='https://bit.ly/sage-adebayo'></Avatar> <Avatar data-type='Avatar' name='Kent Dodds' size='sm' src='https://bit.ly/kent-c-dodds'></Avatar> <Avatar data-type='Avatar' name='Prosper Otemuyiwa' size='sm' src='https://bit.ly/prosper-baba'></Avatar> <Avatar data-type='Avatar' name='Christian Nwamba' size='sm' src='https://bit.ly/code-beast'></Avatar> </AvatarGroup> </CardHeader> <CardBody data-type='CardBody'> <Text data-type='Text'>View a summary of all your customers over the last month.</Text> </CardBody> <CardFooter data-type='CardFooter'> <Button data-type='Button'>View project</Button> </CardFooter> </Card>
<Grid data-type='Grid' templateColumns='repeat(12,1fr)' gap={6}> <GridItem data-type='GridItem' colSpan={{base:12,lg:4}}> <Card data-type='Card' overflow='hidden' variant='outline' > <Image data-type='Image' objectFit='cover' maxW='100%' src='https://images.unsplash.com/photo-1620325867502-221cfb5faa5f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvamVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=2000&q=60' alt='Work' /> <Stack data-type='Stack'> <CardBody data-type='CardBody'> <Heading data-type='Heading' size='md'>Slack</Heading> <Text data-type='Text' py='2'> This project is about integrating a new chat system to slack platform. </Text> <Stack data-type='Stack' direction='row' mt='3'> <Badge data-type='Badge' colorScheme='green'>IOS App</Badge> <Badge data-type='Badge' colorScheme='red'>Desktop App</Badge> </Stack> </CardBody> <CardFooter data-type='CardFooter'> <Button data-type='Button' variant='solid' size='sm'> Attach File </Button> </CardFooter> </Stack> </Card> </GridItem> <GridItem data-type='GridItem' colSpan={{base:12,lg:8}}> <Card data-type='Card' overflow='hidden' variant='outline' > <Stack data-type='Stack'> <CardBody data-type='CardBody'> <Heading data-type='Heading' size='md' mb='4'>Activites</Heading> <Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'> <Box data-type='Box'> <Text data-type='Text' fontSize='md'>Vanessa Tucker added 2 new files in Loopple</Text> <Text data-type='Text' fontSize='xs'>Today 7:51 PM</Text> </Box> </Flex> <Divider data-type='Divider' my='3'></Divider> <Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'> <Box data-type='Box'> <Text data-type='Text' fontSize='md'>Charles Hall pushed 2 commits into Chakra UI Builder</Text> <Text data-type='Text' fontSize='xs' mb='2'>Today 8:15 PM</Text> <Box data-type='Box' border='1px' borderColor='gray.200' p='2'> <Text data-type='Text' fontSize='xs'>Hi guys, I have a problem when I try to push into the main branch. Do you have any time today to take a look?</Text> </Box> </Box> </Flex> <Divider data-type='Divider' my='3'></Divider> <Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'> <Box data-type='Box'> <Text data-type='Text' fontSize='md'>Marko finished tasks</Text> <Text data-type='Text' fontSize='xs'>Today 8:54 PM</Text> </Box> </Flex> <Divider data-type='Divider' my='3'></Divider> <Flex data-type='Flex' flex='1' gap='4' alignItems='center' flexWrap='wrap'> <Box data-type='Box'> <Text data-type='Text' fontSize='md'>Leonard completed the list for today's meeting</Text> <Text data-type='Text' fontSize='xs' mb='2'>Today 9:14 PM</Text> <UnorderedList data-type='UnorderedList'> <ListItem data-type='ListItem'>Add tasks into Jira</ListItem> <ListItem data-type='ListItem'>Discuss about new content on our blog</ListItem> </UnorderedList> </Box> </Flex> </CardBody> <CardFooter data-type='CardFooter'> <Button data-type='Button' variant='solid' size='sm'> See more </Button> </CardFooter> </Stack> </Card> </GridItem> </Grid>
<Card data-type='Card' direction={{base:'column',sm:'row'}} overflow='hidden' variant='outline' > <Image data-type='Image' objectFit='cover' maxW={{base:'100%',sm:'200px'}} src='https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60' alt='Caffe Latte' /> <Stack data-type='Stack'> <CardBody data-type='CardBody'> <Heading data-type='Heading' size='md'>The perfect latte</Heading> <Text data-type='Text' py='2'> Caffè latte is a coffee beverage of Italian origin made with espresso and steamed milk. </Text> </CardBody> <CardFooter data-type='CardFooter'> <Button data-type='Button' variant='solid' colorScheme='blue'> Buy Latte </Button> </CardFooter> </Stack> </Card>
<Card data-type='Card' overflow="hidden" variant="outline"> <Image data-type='Image' alt="Caffe Latte" src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib" objectFit="cover" maxW='100%'> </Image> <Stack data-type='Stack'> <CardBody data-type='CardBody'> <Heading data-type='Heading' size="md"> The perfect latte </Heading> <Text data-type='Text' py="2"> Caffè latte is a coffee beverage of Italian origin made with espresso and steamed milk. </Text> </CardBody> <CardFooter data-type='CardFooter'> <Button data-type='Button' type="button" variant="solid" colorScheme="blue"> Buy Latte </Button> </CardFooter> </Stack> </Card>
<Button data-type='Button' colorScheme='blue'>Button</Button>
<Alert data-type='Alert' status="info"> <AlertIcon data-type='AlertIcon'> </AlertIcon> <AlertTitle data-type='AlertTitle' > Alert title </AlertTitle> <AlertDescription data-type='AlertDescription'>Alert descrsiption</AlertDescription> </Alert>
<Avatar data-type='Avatar'><Avatar/ data-type='Avatar/'>
<TableContainer data-type='TableContainer'> <Table data-type='Table' variant='striped' colorScheme='teal'> <Thead data-type='Thead'> <Tr data-type='Tr'> <Th data-type='Th'>To convert</Th> <Th data-type='Th'>into</Th> <Th data-type='Th' isNumeric>multiply by</Th> </Tr> </Thead> <Tbody data-type='Tbody'> <Tr data-type='Tr'> <Td data-type='Td'>inches</Td> <Td data-type='Td'>millimetres (mm)</Td> <Td data-type='Td' isNumeric>25.4</Td> </Tr> <Tr data-type='Tr'> <Td data-type='Td'>feet</Td> <Td data-type='Td'>centimetres (cm)</Td> <Td data-type='Td' isNumeric>30.48</Td> </Tr> <Tr data-type='Tr'> <Td data-type='Td'>yards</Td> <Td data-type='Td'>metres (m)</Td> <Td data-type='Td' isNumeric>0.91444</Td> </Tr> </Tbody> <Tfoot data-type='Tfoot'> <Tr data-type='Tr'> <Th data-type='Th'>To convert</Th> <Th data-type='Th'>into</Th> <Th data-type='Th' isNumeric>multiply by</Th> </Tr> </Tfoot> </Table> </TableContainer>