replace pb image

app/(home)/page.tsx

@@ -26,10 +26,14 @@ export default async function Home() {
     <>
       <div className="square-background mt-20 flex shrink-0 items-center justify-center md:mt-0 md:h-[70vh]">
         <div className="container grid grid-cols-1 md:grid-cols-2">
-          <div className="h-[150px] w-[150px] rounded-[2rem] bg-white md:h-[300px] md:w-[300px]">
-            <Image height={300} width={300} src="/images/pb.png" alt="" />
-          </div>
-
+          <div className="rounded-[2rem] bg-white overflow-hidden h-[150px] w-[150px] md:h-[300px] md:w-[300px]"
+            style={{
+              backgroundImage: "url('/images/pb.jpg')",
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              border: "4px solid rgba(255, 255, 255, 0.2)",
+            }}
+          />
           <div className="mt-10 w-full md:mt-0">
             <p className="text-gradient text-4xl font-extrabold">Hi there,</p>
             <p className="text-xl">

app/components/IconButton.tsx

@@ -15,7 +15,7 @@ export default function IconButton({
       className={"grid items-start justify-center gap-8 " + className}
     >
       <div className="group relative">
-        <div className="animate-tilt absolute -inset-[0.1px] rounded-lg bg-gradient-to-r from-pink-600 to-purple-600 opacity-75 blur transition duration-100 group-hover:opacity-100 group-hover:duration-200"></div>
+        <div className="animate-tilt absolute -inset-[0.1px] rounded-lg bg-gradient-to-r from-pink-900 to-purple-900 opacity-75 blur transition duration-100 group-hover:opacity-100 group-hover:duration-200"></div>
         <div className="relative rounded-lg bg-black p-3 leading-3 text-white">
           {children}
         </div>