Refactor code and add card images

package.json

@@ -9,7 +9,7 @@
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "postinstall": "prisma generate",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
     "ts": "tsc --noEmit",
     "typecheck": "tsc --pretty --noEmit",
     "format:fix": "prettier --write \"**/*.{ts,tsx,json,scss,css}\"",
@@ -33,6 +33,7 @@
     "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -42,6 +43,7 @@
     "prettier": "^3.3.3",
     "prisma": "^5.17.0",
     "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5"
   }
 }

src/components/Appbar/Appbar.tsx

@@ -1,15 +1,13 @@
-'use client'
+"use client"
 
-import Link from 'next/link'
-
-import { FaGoogle } from 'react-icons/fa6'
-import { FaWallet } from 'react-icons/fa'
-import { Button } from '../ui/button'
-import Logo from '../icons/Logo'
-import { Menu } from 'lucide-react'
-import { useEffect, useState } from 'react'
-import { useSession } from 'next-auth/react'
-import LoginWithGoogleButton from '../ui/login-with-google'
+import Link from "next/link"
+import { FaWallet } from "react-icons/fa";
+import { Button } from "../ui/button";
+import Logo from "../icons/Logo";
+import { Menu } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import LoginWithGoogleButton from "../ui/login-with-google";
 
 const Appbar = () => {
   const [isUSer, setIsUser] = useState(false)
@@ -20,7 +18,7 @@ const Appbar = () => {
   }, [])
   return (
     <header className="py-4 border-b md:border-none fixed top-0 left-0 right-0 z-10 bg-white md:bg-white/0">
-      <div className="container mx-auto px-4 ">
+      <div className="container mx-auto px-4">
         <div className="flex justify-between items-center md:border md:p-2.5 rounded-xl max-w-2xl lg:max-w-4xl mx-auto md:bg-white/90 md:backdrop:blur-sm">
           <div>
             <div className="border h-10 w-10 rounded-lg inline-flex justify-center items-center">