Refactor code: Update submission link format and enhance styling for submission cards in BountyDetails and Profile pages

Author: A91y

src/app/(pages)/bounty/[id]/page.tsx

@@ -116,7 +116,7 @@ const BountyDetails = () => {
       submissions.forEach((item: any) => {
         if (item.githubId == user.githubId) {
           setSubmissionLink(
-            `https://octasol.io/${user.login}/submissions/${item.id}`
+            `https://octasol.io/profile/${user.login}/submission/${item.id}`
           );
           setSubmitted(true);
           console.log(item);
@@ -265,20 +265,21 @@ const BountyDetails = () => {
               </div>
 
               {submissionLink && (
-                <div className="w-full h-min flex flex-col items-start py-5 px-4 md:px-8 gap-4 bg-[#0f0f0f] rounded-xl my-4">
-                  <div
-                    onClick={() => {
-                      handleConnect(submissionLink);
-                    }}
-                    className="flex justify-center items-center gap-8 cursor-pointer"
-                  >
-                    <Copy />
-                    <span className="text-sm md:text-base">
-                      Copy Submission Link
-                    </span>
-                  </div>
-                </div>
-              )}
+  <div className="w-full h-min flex flex-col items-start py-5 px-4 md:px-8 gap-4 bg-[#0f0f0f] rounded-xl my-4">
+    <div
+      onClick={() => {
+        handleConnect(submissionLink);
+      }}
+      className="flex justify-center items-center gap-8 cursor-pointer group"
+    >
+      <Copy className="text-white group-hover:text-green-500 transition-colors duration-200" />
+      <span className="text-sm md:text-base text-white group-hover:text-green-500 transition-colors duration-200">
+        Copy Submission Link
+      </span>
+    </div>
+  </div>
+)}
+
               {/* <div className="rotate-0 md:rotate-180 h-[1px] md:h-[85vh] w-full md:w-px block">
                 <div className="w-full h-full bg-gradient-to-r md:bg-gradient-to-b from-transparent via-[#46bf96] to-transparent"></div>
               </div> */}

src/app/(pages)/profile/[username]/page.tsx

@@ -354,16 +354,21 @@ export default function BentoGridDemo() {
                 {userSubmissions.map((submission, index) => (
                   <Card
                     key={index}
-                    className="relative group  rounded-2xl shadow-sm p-8 transition-all duration-500 ease-in-out transform hover:-translate-y-1  cursor-pointer bg-black shadow-[#43aa8a]"
+                    className="relative group  rounded-2xl shadow-sm p-5  md:p-8 transition-all duration-500 ease-in-out transform hover:-translate-y-1  cursor-pointer bg-black shadow-[#43aa8a]"
                     onClick={() => {
                       router.push(
                         `/profile/${user.login}/submission/${submission.id}`
                       );
                     }}
                   >
-                    {submission?.bounty?.sponsor?.image && (
+                    
+
+                    <div className="mt-4 w-full flex flex-col md:flex-row justify-between items-center gap-5">
+                      <div className=" flex flex-col gap-2 w-full md:w-9/12">
+                      <div className="flex items-center justify-between w-full gap-2">
+                      {submission?.bounty?.sponsor?.image && (
                       <div
-                        className={`absolute -top-8 left-6  rounded-xl p-3 shadow-lg group-hover:scale-110 transition-transform duration-300`}
+                        className={`rounded-xl p-3 shadow-lg group-hover:scale-110 transition-transform duration-300`}
                       >
                         <Image
                           src={submission.bounty.sponsor.image}
@@ -373,38 +378,31 @@ export default function BentoGridDemo() {
                         ></Image>
                       </div>
                     )}
-
-                    <div className="mt-4 w-full flex justify-between items-center">
-                      <div className=" flex flex-col gap-2 w-9/12">
-                        <h2 className="text-xl font-bold">
+                        <h2 className="text-base md:text-xl font-bold w-full">
                           {submission.bounty.bountyname}
                         </h2>
                         <div>
-                          <p className="font-semibold text-sm">
-                            {submission?.bounty?.sponsor?.name}
-                          </p>
-                          <p className="text-xs text-muted-foreground">
-                            Sponsor
-                          </p>
+                      </div>
                         </div>
+                         
                       </div>
-                      <div className="flex flex-col items-end gap-2">
+                      <div className="flex flex-row md:flex-col justify-between w-full items-center md:items-end gap-2 px-4">
                         <div className="flex items-center ">
                           <DollarSign className="h-4 w-4 text-green-500" />
                           <span className="font-bold">
                             {submission.bounty.price}
                           </span>
                         </div>
-                        <div className="flex items-center gap-2">
-                          <ShieldCheck className="h-4 w-4 text-green-500" />
-                          <span className="font-bold">
+                        {/* <div className="flex items-center gap-2"> */}
+                          {/* <ShieldCheck className="h-4 w-4 text-green-500" /> */}
+                          {/* <span className="font-bold">
                             {submission.status === 0
                               ? "In Review"
                               : submission.status === 1
                               ? "Approved"
                               : "Rejected"}
-                          </span>
-                        </div>
+                          </span> */}
+                        {/* </div> */}
                         <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                           <Calendar className="h-4 w-4" />
                           <span>