Stats - TemplatesKart

Library Stats

import * as React from 'react';
import { Container, Text, SimpleGrid, Box, chakra, Stack, HStack, Icon } from '@chakra-ui/react';
import { AiFillCheckCircle } from 'react-icons/ai';

interface StatData {
  label: string;
  score: string;
}

const statData: StatData[] = [
  {
    label: 'Weekly downloads',
    score: '3.2M'
  },
  {
    label: 'Stars on GitHub',
    score: '77k'
  },
  {
    label: 'Contributors',
    score: '2.4k'
  },
  {
    label: 'Followers on Twitter',
    score: '17k'
  }
];

const planList = [
  'Customer obsessed. We put our customers front & center.',
  'Transparency. Most of our work is public.',
  'Freedom. We work from anywhere in the world.',
  'Autonomy. We want to create a safe, high-trust team.',
  'Excellence. We are aiming high, and we know it.'
];

const BrandStats = () => {
  return (
    <Container maxW="5xl" p={{ base: 4, sm: 10 }}>
      <Stack direction={{ base: 'column', md: 'row' }} justifyContent="space-between">
        <Stack spacing={4}>
          <chakra.h1 fontSize="2xl" lineHeight={1.2} fontWeight="bold">
            Our ultimate goal
          </chakra.h1>
          <Text fontSize="md" color="gray.400" maxW="480px">
            We aim high trying to design the most effective and efficient tool for building UIs, for
            developers and designers. ChakraUI started back in 2019, to unify React. Since then,
            we've become a community of over 2M developers from every corner of the world.
          </Text>

          <Stack spacing={2}>
            <Text fontSize="md" color="gray.400">
              We plan on doing all that cultivating our values:
            </Text>
            {planList.map((data, index) => (
              <HStack key={index} alignItems="center" spacing={1} fontSize="md">
                <Icon as={AiFillCheckCircle} w={4} h={4} color="blue.400" />
                <Text fontSize="md">{data}</Text>
              </HStack>
            ))}
          </Stack>
        </Stack>
        <Stack>
          <SimpleGrid columns={2} spacing={5} pt={8} pl={{ base: 0, md: 10 }} margin="auto 0">
            {statData.map((data, index) => (
              <Stack
                key={index}
                pl={3}
                py={1}
                pr={1}
                borderLeft="2px solid"
                borderLeftColor="blue.400"
                justifyContent="space-between"
              >
                <Box fontSize="2xl" fontWeight="bold" color="blue.400">
                  {data.score}
                </Box>
                <Text fontSize="md">{data.label}</Text>
              </Stack>
            ))}
          </SimpleGrid>
        </Stack>
      </Stack>
    </Container>
  );
};

export default BrandStats;

Blog Stats

import * as React from 'react';
import { Container, Text, SimpleGrid, Box } from '@chakra-ui/react';

interface StatData {
  id: number;
  label: string;
  score: string;
}

const statData: StatData[] = [
  {
    id: 1,
    label: 'Total post reactions',
    score: '1,730'
  },
  {
    id: 2,
    label: 'Total post views',
    score: '31,573'
  },
  {
    id: 3,
    label: 'Listings created',
    score: '5'
  }
];

const BlogStats = () => {
  return (
    <Container maxW="7xl" p={{ base: 5, md: 10 }}>
      <SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} spacing={5} mt={12} mb={4}>
        {statData.map((data) => (
          <Box key={data.id} p={5} boxShadow="md" rounded="md" borderWidth={1}>
            <Text fontWeight="extrabold" fontSize="x-large">
              {data.score}
            </Text>
            <Text>{data.label}</Text>
          </Box>
        ))}
      </SimpleGrid>
    </Container>
  );
};

export default BlogStats;

Stats with icons

import React from 'react';
import {
  HStack,
  VStack,
  Text,
  useColorModeValue,
  Flex,
  Link,
  Icon,
  SimpleGrid,
  Container,
  Stack
} from '@chakra-ui/react';
// Here we have used framer-motion package for animations
import { motion } from 'framer-motion';
// Here we have used react-icons package for the icons
import { HiOutlineMail } from 'react-icons/hi';
import { BsArrowUpShort, BsArrowDownShort } from 'react-icons/bs';
import { AiOutlineLike, AiOutlineEye } from 'react-icons/ai';

interface StatData {
  id: number;
  label: string;
  score: number;
  icon: any;
  percentage: string;
}

const statData: StatData[] = [
  {
    id: 1,
    label: 'Total post reactions',
    score: 1730,
    icon: AiOutlineLike,
    percentage: '10%'
  },
  {
    id: 2,
    label: 'Total post views',
    score: 3245,
    icon: AiOutlineEye,
    percentage: '30%'
  },
  {
    id: 3,
    label: 'Total messages',
    score: 100,
    icon: HiOutlineMail,
    percentage: '30%'
  }
];

const StatsWithIcons = () => {
  return (
    <Container maxW="7xl" p={{ base: 5, md: 10 }}>
      <SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} spacing={5} mt={6} mb={4}>
        {statData.map((data, index) => (
          <Card key={index} data={data} />
        ))}
      </SimpleGrid>
    </Container>
  );
};

const Card = ({ data }: { data: StatData }) => {
  return (
    <motion.div whileHover={{ translateY: -5 }}>
      <Stack
        direction="column"
        rounded="md"
        boxShadow={useColorModeValue(
          '0 4px 6px rgba(160, 174, 192, 0.6)',
          '2px 4px 6px rgba(9, 17, 28, 0.9)'
        )}
        w="100%"
        textAlign="left"
        align="start"
        spacing={0}
        role="group"
        overflow="hidden"
      >
        <HStack py={6} px={5} spacing={4} bg={useColorModeValue('gray.100', 'gray.800')} w="100%">
          <Flex
            justifyContent="center"
            alignItems="center"
            rounded="lg"
            p={2}
            bg="green.400"
            position="relative"
            w={12}
            h={12}
            overflow="hidden"
            lineHeight={0}
            boxShadow="inset 0 0 1px 1px rgba(0, 0, 0, 0.015)"
          >
            <Icon as={data.icon} w={6} h={6} color="white" />
          </Flex>
          <VStack spacing={0} align="start" maxW="lg" h="100%">
            <Text as="h3" fontSize="md" noOfLines={2} color="gray.400">
              {data.label}
            </Text>
            <HStack spacing={2}>
              <Text as="h2" fontSize="lg" fontWeight="extrabold">
                {data.score}
              </Text>
              <Flex>
                {Number(data.score) > 100 ? (
                  <Icon as={BsArrowUpShort} w={6} h={6} color="green.400" />
                ) : (
                  <Icon as={BsArrowDownShort} w={6} h={6} color="red.400" />
                )}
                <Text as="h2" fontSize="md">
                  {data.percentage}
                </Text>
              </Flex>
            </HStack>
          </VStack>
        </HStack>

        <Flex
          visibility="hidden"
          opacity={0}
          height={0}
          alignItems="center"
          px={5}
          _groupHover={{ visibility: 'visible', opacity: 1, height: '40px' }}
          transition="opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, height 0.3s ease-in-out"
        >
          <Link fontSize="md">View All</Link>
        </Flex>
      </Stack>
    </motion.div>
  );
};

export default StatsWithIcons;

Brand Stats

import * as React from 'react';
import { Container, Text, SimpleGrid, Box, Center } from '@chakra-ui/react';

interface StatData {
  id: number;
  label: string;
  score: string;
}

const statData: StatData[] = [
  {
    id: 1,
    label: 'Clients',
    score: '550'
  },
  {
    id: 2,
    label: 'Projects',
    score: '421'
  },
  {
    id: 3,
    label: 'Hours of Support',
    score: '1,364'
  },
  {
    id: 4,
    label: 'Hard Workers',
    score: '38'
  }
];

const BrandStats = () => {
  return (
    <Container maxW="7xl" p={{ base: 5, md: 10 }}>
      <Center>
        <Box textAlign="center">
          <Text fontWeight="extrabold" fontSize="x-large" mb={2}>
            <Box as="span" display="inline-block" position="relative">
              Trusted by Developers
              <Box
                as="span"
                display="block"
                position="absolute"
                bg={'blue.600'}
                w={'100%'}
                h={'1px'}
              />
            </Box>
          </Text>
          <Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</Text>
        </Box>
      </Center>
      <SimpleGrid columns={{ base: 1, sm: 2, md: 4 }} spacing={{ base: 2, sm: 5 }} mt={12} mb={4}>
        {statData.map((data) => (
          <Box key={data.id} p={{ base: 2, sm: 5 }} textAlign="center">
            <Text fontWeight="extrabold" fontSize="xx-large">
              {data.score}
            </Text>
            <Text fontSize="sm">{data.label}</Text>
          </Box>
        ))}
      </SimpleGrid>
    </Container>
  );
};

export default BrandStats;

Split with image

import * as React from 'react';
import { Text, SimpleGrid, Box, Image, Flex, Stack } from '@chakra-ui/react';

interface StatData {
  id: number;
  label: string;
  score: string;
}

const statData: StatData[] = [
  {
    id: 1,
    label: 'Clients',
    score: '550'
  },
  {
    id: 2,
    label: 'Projects',
    score: '421'
  },
  {
    id: 3,
    label: 'Revenue',
    score: '$5M'
  }
];

const SplitWithImage = () => {
  return (
    <Stack minH="100vh" direction={{ base: 'column', md: 'row' }}>
      <Flex flex={1}>
        <Image alt="Cover image" objectFit="cover" src="https://bit.ly/2k1H1t6" />
      </Flex>
      <Flex p={8} flex={1} align="center" justifyContent="center">
        <Flex direction="column">
          <Text fontWeight="extrabold" fontSize="x-large" mb={2}>
            <Box as="span" display="inline-block" position="relative">
              Trusted by Our Clients
              <Box as="span" display="block" position="absolute" bg="blue.600" w="100%" h="1px" />
            </Box>
          </Text>
          <Text>
            Lorem ipsum dolor sit amet consecte adipiscing elit. Vestibulum eros ex, mollis eget
            urna eu, convallis interdum ligula. Aenean posuere quam quam, id ultrices nisi vehicula
            et.
          </Text>
          <SimpleGrid columns={{ base: 2, sm: 3, md: 3 }} spacing={1} mt={12} mb={4}>
            {statData.map((data) => (
              <Box key={data.id} p={{ base: 2, sm: 5 }} textAlign="center">
                <Text fontWeight="extrabold" fontSize="xx-large">
                  {data.score}
                </Text>
                <Text fontSize="sm">{data.label}</Text>
              </Box>
            ))}
          </SimpleGrid>
        </Flex>
      </Flex>
    </Stack>
  );
};

export default SplitWithImage;