Added stat cards and sequenced animations for home page

components/Card.js

@@ -1,15 +1,26 @@
 import React from 'react'
 import Link from 'next/link'
 import {Text, Flex, Button} from '@chakra-ui/react'
+import {motion} from 'framer-motion'
+
+const MotionFlex = motion(Flex)
+
+const item = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+        y: 0,
+        opacity: 1
+    }
+}
 
 function Card({title, desc, link}) {
     return (
         <Link href={link}>
-            <Flex direction='column' background='gray.900' width={300} height={150} p='5' borderRadius='15px'>
+            <MotionFlex direction='column' background='gray.900' width={300} height={150} p='5' borderRadius='15px' variants={item}>
                 <Text fontSize='2xl'>{title}</Text>
                 <Text fontSize='lg' style={{ marginBottom: '10px' }}>{desc}</Text>
                 <Button colorScheme='teal' variant='outline'>Learn More</Button>
-            </Flex>
+            </MotionFlex>
         </Link>
     )
 }

components/StatCard.js

@@ -0,0 +1,60 @@
+import {
+    Stat,
+    StatLabel,
+    StatNumber,
+    StatHelpText,
+    StatArrow,
+    StatGroup,
+} from "@chakra-ui/react"
+
+import React from 'react'
+import {motion} from 'framer-motion'
+
+const container = {
+    hidden: { opacity: 1, scale: 0 },
+    visible: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            delayChildren: 0.4,
+            staggerChildren: 0.3
+        }
+    }
+}
+
+const item = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+        y: 0,
+        opacity: 1
+    }
+}
+
+const MotionStatGroup = motion(StatGroup)
+const MotionStat = motion(Stat)
+
+function StatCard() {
+    return (
+        <MotionStatGroup display='flex' flexDirection='column' style={{ gap: '10px' }} variants={container}>
+            <MotionStat background='gray.900' width={300} height={150} p='5' borderRadius='15px' flexShrink={1} variants={item}>
+                <StatLabel>User Growth</StatLabel>
+                <StatNumber>77</StatNumber>
+                <StatHelpText>
+                    <StatArrow type="increase" />
+                    11.36%
+                </StatHelpText>
+            </MotionStat>
+
+            <MotionStat background='gray.900' width={300} height={150} p='5' borderRadius='15px' flexShrink={1} variants={item}>
+                <StatLabel>Activity</StatLabel>
+                <StatNumber>45 messages</StatNumber>
+                <StatHelpText>
+                    <StatArrow type="decrease" />
+                    9.05%
+                </StatHelpText>
+            </MotionStat>
+        </MotionStatGroup>
+    )
+}
+
+export default StatCard

pages/controlpanel/commands.js

@@ -15,7 +15,7 @@ import { useSession } from 'next-auth/client'
 import axios from 'axios'
 
 
-function Controller({initialState}) {
+function Controller({ initialState }) {
     const [online, setOnline] = React.useState(initialState)
 
     return (
@@ -35,10 +35,10 @@ function Commands() {
 
     const [categories, setCategories] = React.useState(
         [
-            {command: 'Help', online: true},
+            { command: 'Help', online: true },
-            {command: 'Help', online: true},
+            { command: 'Help', online: true },
-            {command: 'Help', online: true},
+            { command: 'Help', online: true },
-            {command: 'Help', online: true},
+            { command: 'Help', online: true },
         ]
     )
 
@@ -67,7 +67,7 @@ function Commands() {
                             {categories.map((category, idx) => (
                                 <>
                                     <Text fontSize='3xl'>{category.name}</Text>
-                                {category.commands.map((command, commandIdx)=> (
+                                    {category.commands.map((command, commandIdx) => (
                                         <Tr key={commandIdx}>
                                             <Td>{command.name}</Td>
                                             <Td>

pages/index.js

@@ -6,6 +6,7 @@ import { CTA } from '../components/CTA'
 import { Features } from '../components/Features/Features'
 import { Footer } from '../components/Footer/Footer'
 import { motion } from 'framer-motion'
+import StatCard from '../components/StatCard'
 
 export default function Home() {
 
@@ -21,13 +22,6 @@ export default function Home() {
     }
   }
 
-  const item = {
-    hidden: { y: 20, opacity: 0 },
-    visible: {
-      y: 0,
-      opacity: 1
-    }
-  }
 
   const [session, loading] = useSession()
 
@@ -44,12 +38,13 @@ export default function Home() {
       {session && <>
         <Text fontSize='4xl'>Welcome {session.user.name}!</Text>
         <motion.div className='grid' variants={container} initial="hidden" animate="visible" exit={{ opacity: 0 }}>
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
-          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands' variants={item} />
+          <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
+          <StatCard/>
         </motion.div>
       </>
       }