Replaced old card with new one

Remade card to have a better feel

components/Card.js

@@ -0,0 +1,38 @@
+import { makeStyles } from '@material-ui/core'
+import React from 'react'
+import Link from 'next/link'
+
+const useStyles = makeStyles({
+    homeCard: {
+        width: '350px',
+        height: '150px',
+        background: '#1f1b24',
+        margin: '10px',
+        padding: '20px',
+        borderRadius: '15px',
+
+        '&:hover': {
+            background: '#2c2633',
+        }
+    },
+    title: {
+        marginTop: '3px',
+    },
+    desc: {}
+})
+
+function HomeCard({title, desc, link=''}) {
+
+    const classes = useStyles()
+
+    return (
+        <Link href={link}>
+            <div className={classes.homeCard}>
+                <h1 className={classes.title}>{title}</h1>
+                <p className={classes.desc}>{desc}</p>
+            </div>
+        </Link>
+    )
+}
+
+export default HomeCard

pages/controlpanel/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import CardContainer from '../../components/CardContainer'
+import Card from '../../components/Card'
 import Head from 'next/head'
 import { useSession } from 'next-auth/client'
 
@@ -19,7 +19,9 @@ function Index() {
                 </Head>
                 <div>
                     <h1>Control Panel</h1>
-                    <CardContainer link='/controlpanel/commands'>Commands</CardContainer>
+                    <Card title='Commands' desc='Control your commands and their settings.' link='/controlpanel/commands'/>
+                    <Card title='Commands' desc='Control your commands and their settings.' link='/controlpanel/commands'/>
+                    <Card title='Commands' desc='Control your commands and their settings.' link='/controlpanel/commands'/>
                 </div>
             </>
             }

pages/index.js

@@ -1,5 +1,6 @@
 import { Typography } from '@material-ui/core'
 import CardContainer from '../components/CardContainer'
+import Card from '../components/Card'
 import { useSession } from 'next-auth/client'
 
 export default function Home() {
@@ -16,11 +17,12 @@ export default function Home() {
   {session && <>
       <h1>Welcome {session.user.name}!</h1>
       <div className='grid'>
-        <CardContainer title='Commands' link='/controlpanel/commands'>Command controls</CardContainer>
+        <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
-        <CardContainer title='Commands' link='/controlpanel/commands'>Command controls</CardContainer>
+        <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
-        <CardContainer title='Commands' link='/controlpanel/commands'>Command controls</CardContainer>
+        <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
-        <CardContainer title='Commands' link='/controlpanel/commands'>Command controls</CardContainer>
+        <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
-        <CardContainer title='Commands' link='/controlpanel/commands'>Command controls</CardContainer>
+        <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
+        <Card title='commands' desc='lorem ipsum dolor sit amet' link='/controlpanel/commands'/>
       </div>
     </>
   }

styles/HomeCard.module.css

@@ -0,0 +1,10 @@
+.home-card {
+    width: 300px;
+    height: 150px;
+    background: #1f1b24;
+    border: 1px solid blue;
+}
+
+.title {}
+
+.desc {}

styles/globals.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@600&family=Poppins:wght@500&display=swap');
+
 * {
   color: #fff;
 }
@@ -6,7 +8,7 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family: 'Epilogue',-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   background: #121212;
 }
@@ -38,7 +40,8 @@ a {
 }
 
 .grid {
+  margin-top: 50px;
   display: grid;
-  grid-template-columns: repeat(auto-fill, 300px);
+  grid-template-columns: repeat(auto-fill, 350px);
   grid-gap: 10px;
 }