made some design changes

components/Categories.jsx

@@ -1,23 +1,27 @@
-import React, { useState, useEffect } from 'react';
-import Link from 'next/link';
-
-import { getCategories } from '../services';
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import { getCategories } from "../services";
 
 const Categories = () => {
   const [categories, setCategories] = useState([]);
-
   useEffect(() => {
     getCategories().then((newCategories) => {
       setCategories(newCategories);
     });
   }, []);
 
   return (
-    <div className="bg-white shadow-lg rounded-lg p-8 pb-12 mb-8">
+    <div className="bg-whiteshadow-lg border-2  border-black rounded-lg p-8 pb-12 mb-8">
       <h3 className="text-xl mb-8 font-semibold border-b pb-4">Categories</h3>
       {categories.map((category, index) => (
         <Link key={index} href={`/blogs/category/${category.slug}`}>
-          <span className={`cursor-pointer block ${(index === categories.length - 1) ? 'border-b-0' : 'border-b'} pb-3 mb-3`}>{category.name}</span>
+          <span
+            className={`cursor-pointer block ${
+              index === categories.length - 1 ? "border-b-0" : "border-b"
+            } pb-3 mb-3`}
+          >
+            {category.name}
+          </span>
         </Link>
       ))}
     </div>

components/Header.jsx

@@ -10,19 +10,19 @@ const navLinks=[
 ]
 const Header = () => {
   return (
-    <div className="container mx-auto px-10 mb-8">
-      <div className="border-b w-full inline-block border-blue-400 py-8">
+    <div className="container mx-auto  mb-8">
+      <div className="border-b w-full inline-block  py-8   bg-blue-600 px-8 ">
         <div className="md:float-left block">
           <Link href="/">
-            <span className="cursor-pointer font-bold text-4xl text-white">
+            <span className="cursor-pointer text-4xl text-white  ">
               CodingMetropolis
             </span>
           </Link>
         </div>
         <div className="hidden md:float-left md:contents">
           {navLinks.map((link, index) => (
             <Link key={index} href={link.url}>
-              <span className="md:float-right mt-2 align-middle text-white ml-4 font-semibold cursor-pointer">
+              <span className="md:float-right mt-2 align-middle text-white  text-xl ml-4 cursor-pointer">
                 {link.name}
               </span>
             </Link>

components/PostCard.jsx

@@ -6,19 +6,9 @@ import Link from 'next/link';
 import { grpahCMSImageLoader } from '../util';
 
 const PostCard = ({ post }) => (
-  <div className="bg-white shadow-lg rounded-lg p-0 lg:p-8 pb-12 mb-8">
-    {/* <div className="relative shadow-md inline-block w-full h-60 lg:h-80 mb-6">
-      <Image
-        unoptimized
-        loader={grpahCMSImageLoader}
-        alt={post.title}
-        className="shadow-lg rounded-t-lg lg:rounded-lg"
-        layout="fill"
-        src={post.featuredImage.url}
-      />
-    </div> */}
+  <div className=" bg-white  shadow-xl rounded-md p-0 lg:pb-12 mb-8 border-4 border-black-300">
     <div className="relative overflow-hidden shadow-md pb-80 mb-6">
-      <img src={post.featuredImage.url} alt="" className="object-top absolute h-80 w-full object-cover  shadow-lg rounded-t-lg lg:rounded-lg" />
+      <img src={post.featuredImage.url} alt="" className="object-top absolute h-80 w-full object-cover   object-center shadow-lg rounded-t-lg lg:rounded-t-md rounded-b-none" />
     </div>
 
     <h1 className="transition duration-700 text-center mb-8 cursor-pointer hover:text-pink-600 text-3xl font-semibold">
@@ -32,7 +22,7 @@ const PostCard = ({ post }) => (
           alt={post.author.name}
           height="30px"
           width="30px"
-          className="align-middle rounded-full"
+          className="align-middle rounded-full object-contain object-center"
           src={post.author.photo.url}
         />
         <p className="inline align-middle text-gray-700 ml-2 font-medium text-lg">{post.author.name}</p>
@@ -49,7 +39,7 @@ const PostCard = ({ post }) => (
     </p>
     <div className="text-center">
       <Link href={`/blogs/${post.slug}`}>
-        <span className="transition duration-500 ease transform hover:-translate-y-1 inline-block bg-pink-600 text-lg font-medium rounded-full text-white px-8 py-3 cursor-pointer">Continue Reading</span>
+        <span className="transition duration-500 shadow-lg ease transform hover:-translate-y-1 inline-block bg-blue-500 text-lg font-medium rounded-md text-white px-8 py-3 cursor-pointer">Continue Reading</span>
       </Link>
     </div>
   </div>

components/PostWidget.jsx

@@ -22,7 +22,7 @@ const PostWidget = ({ categories, slug }) => {
   }, [slug]);
 
   return (
-    <div className="bg-white shadow-lg rounded-lg p-8 pb-12 mb-8">
+    <div className="  shadow-lg border-2  border-black  rounded-md p-8 pb-12 mb-8">
       <h3 className="text-xl mb-8 font-semibold border-b pb-4">{slug ? 'Related Posts' : 'Recent Posts'}</h3>
       {relatedPosts.map((post, index) => (
         <div key={index} className="flex items-center w-full mb-4">

pages/blogs/index.js

@@ -5,7 +5,6 @@ import { getPosts } from '../../services';
 export default function Home({ posts }) {
   return (
     <div className="container mx-auto px-10 mb-8">
-      {/* <FeaturedPosts /> */}
       <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
         <div className="lg:col-span-8 col-span-1">
           {posts.map((post, index) => (

styles/globals.scss

@@ -2,19 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Nunito:ital,wght@0,400;1,300&display=swap');
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: 'Montserrat', sans-serif;
+  font-family: 'Courgette', cursive !important;
+  font-family: 'Nunito', sans-serif !important;
   &:before{
     content:'';
     content: "";
     width: 100%;
     height: 100vh;
-    background-image: url("../public/bg.jpg");
+    // background-image: url("../public/bg.jpg");
     position: fixed;
     left: 0;
     top: 0;