1. disapper black border in card 2.

src/components/DashboardGrid.tsx

@@ -412,11 +412,12 @@ export default function DashboardGrid() {
                                 <div className="p-5 flex flex-col items-center h-full">
                                     {card.badge && (
                                         <div className="absolute top-0 right-0 overflow-hidden w-32 h-32 pointer-events-none">
-                                            <div className="absolute top-5 right-[-35px] w-40 bg-green-600 text-white text-center py-2 px-2 shadow-lg transform rotate-45">
+                                            <div className="absolute top-6 right-[-100px] w-[320px] bg-[#0CAA75] text-white font-semibold py-4 flex items-center justify-center gap-3 rotate-45 shadow-lg">
                                                 <div className="flex items-center justify-center gap-1 text-xs font-bold whitespace-nowrap">
-                                                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                                                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                                                    <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <path d="M6.20122 0.94856L9.60703 1.3343C11.8086 1.58456 12.9094 1.70875 13.0543 2.33535C13.1991 2.96195 12.2508 3.50763 10.3588 4.59994L10.18 4.70343C9.4979 5.09764 9.15638 5.29427 9.06888 5.6358L9.06417 5.65367C8.98326 5.99802 9.18836 6.35365 9.59857 7.06304C10.3371 8.34164 10.7069 8.98046 10.4434 9.42077L10.4293 9.44241C10.1527 9.87331 9.43957 9.7924 8.0095 9.63058L4.60462 9.2439C2.40307 8.99552 1.30323 8.87039 1.15834 8.24379C1.01345 7.61719 1.96088 7.07057 3.85289 5.97826L4.03165 5.87477C4.71376 5.48244 5.05434 5.28486 5.14372 4.94334L5.14842 4.92547C5.22839 4.58206 5.02329 4.22643 4.61403 3.5161C3.87547 2.2375 3.50573 1.59868 3.76916 1.15837L3.78327 1.13673C4.058 0.705826 4.77303 0.786737 6.20122 0.94856Z" stroke="white" strokeWidth="1.625" />
                                                     </svg>
+
                                                     <span>{card.badge}</span>
                                                 </div>
                                             </div>

src/components/MultiRingCircularProgress.tsx

@@ -36,11 +36,16 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover,
   };
 
   return (
-    <div 
-      className="flex items-center justify-center hover:scale-115 transition-all duration-300 cursor-pointer"
+    <div
+      className="flex items-center justify-center hover:scale-115 transition-all duration-300 cursor-pointer outline-none focus:outline-none focus:ring-0 focus:border-none"
       onMouseLeave={() => onHover(null)}
+      onClick={() => {
+        console.log("hoveredIndex ");
+      }}
+      style={{ outline: "none", border: "none" }}
+      tabIndex={-1}
     >
-      <PieChart width={400} height={400}>
+      <PieChart width={400} height={400} className="focus-visible:outline-none focus-visible:ring-0 focus-visible:border-none" >
         {ringData.map((ring, index) => (
           <Pie
             key={index}
@@ -59,6 +64,7 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover,
             onMouseEnter={() => onHover(index)}
             onMouseLeave={() => onHover(null)}
             fill={getHoverColor(ring, index)}
+            // pointerEvents={'none'}
           >
             <Cell
               fill={getHoverColor(ring, index)}

src/components/Strategy/ProgressMetrics.tsx

@@ -1,14 +1,11 @@
 import MetricCard from "../shared/MetricCard"
-import Progress from "../../assets/icons/InProgress.png"
-import No from "../../assets/icons/no.png"
-import { CircleCheck } from 'lucide-react'
+
 import { Stepper } from "../shared/Stepper"
-import Preplextiy from "../../assets/icons/perplexity-dark-logo.svg"
+import Preplextiy from "../../assets/icons/perplextiy.svg"
 import ChatGPT from "../../assets/icons/gpt.svg"
-import Gemini from "../../assets/icons/gemini.svg"
-import Gemini1 from "../../assets/icons/gemini1.png"
-import Gemini2 from "../../assets/icons/gemini-border.png"
+import Gemini from "../../assets/icons/gemini2.svg"
 import Google from "../../assets/icons/google-original-logo.svg"
+import Map from "../../assets/icons/maps.svg"
 
 
 function ProgressMetrics() {
@@ -62,11 +59,13 @@ function ProgressMetrics() {
                     <div className="flex items-center gap-3 w-[100%]">
                         <div className="flex items-center gap-3 flex-wrap">
                             <MetricCard
-                                img={ChatGPT} tooltipText="ChatGPT" valueChange="+1" size="sm" />
+                                img={Google} tooltipText="Google" valueChange="+1" size="sm" disabled />
 
                             <MetricCard
-                                img={Preplextiy}
-                                tooltipText="Preplextiy" valueChange="+1" size="sm" />
+                                img={Map} tooltipText="Map" valueChange="+1" size="sm" disabled value="Map" />
+
+                            {/* <MetricCard
+                                img={Gemini} tooltipText="ChatGPT" valueChange="+1" size="sm" extraStyle="border-2 border-solid border-gray-300 rounded-lg " /> */}
 
                             <MetricCard
                                 img={ChatGPT} tooltipText="ChatGPT" valueChange="+1" size="sm" />
@@ -74,6 +73,10 @@ function ProgressMetrics() {
                             <MetricCard
                                 img={Gemini} tooltipText="Gemini" valueChange="+1" size="sm" extraStyle="border-2 border-solid border-gray-300 rounded-lg " />
 
+                            <MetricCard
+                                img={Preplextiy}
+                                tooltipText="Preplextiy" valueChange="+1" size="sm" />
+
 
                         </div>
                     </div>
@@ -104,7 +107,7 @@ function ProgressMetrics() {
                                 <span className="text-lg text-green-600 font-medium">+10</span>
                             </div>
                             <div className="flex items-center justify-start gap-1 mb-1">
-                            <img src={Google} className="w-5 h-5 mr-2" alt="" />
+                                <img src={Google} className="w-5 h-5 mr-2" alt="" />
                                 <span className="text-lg font-bold text-gray-900">5</span>
                                 <span className="text-lg text-green-600 font-medium">+3</span>
                             </div>

src/components/flip-card.tsx

@@ -158,11 +158,11 @@ console.log(CARDS)
             >
               <div className="p-5 flex flex-col items-center h-full justify-center">
                 {card.badge && (
-                   <div className="absolute top-6 right-[-80px] w-[260px] bg-green-600 text-white font-semibold py-3 flex items-center justify-center gap-2 rotate-45 shadow-lg">
-                   {/* Inline SVG Icon */}
+                   <div className="absolute top-8 right-[-100px] w-[320px] bg-green-600 text-white font-semibold py-4 flex items-center justify-center gap-3 rotate-45 shadow-lg">
+                   {/* Unlock Icon (SVG) */}
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
-                     className="w-5 h-5"
+                     className="w-6 h-6"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
@@ -171,10 +171,11 @@ console.log(CARDS)
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
-                       d="M13 16h-1v-4h-1m1 4h1m-1 0v-4m0 4h1m-1 0H9m4 0h1m-2-4V8a4 4 0 1 1 8 0v4h-2m-4 0h2m-4 0H9m6 0v4m0-4H9m6 0h2"
+                       d="M12 11V7a4 4 0 0 1 8 0v4m-8 0h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h2z"
                      />
                    </svg>
-                   <span className="text-base tracking-wide">Content Unlocked</span>
+           
+                   <span className="text-lg tracking-wide">Content Unlocked</span>
                  </div>
                 )}
                 <div className="w-32 h-32 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white font-bold text-2xl">

src/components/shared/MetricCard.tsx

@@ -3,16 +3,16 @@ import { useState } from "react";
 
 
 // Reusable Metric Card Component
-const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChange, size, extraStyle }: { icon?: any, img?: any, value?: any, label?: any, tooltipText?: any, valueChange?: any, size?: any, extraStyle?: any }) => {
+const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChange, size, extraStyle, disabled }: { icon?: any, img?: any, value?: any, label?: any, tooltipText?: any, valueChange?: any, size?: any, extraStyle?: any, disabled?: any }) => {
     const [isHovered, setIsHovered] = useState(false);
-
+console.log(Img);
     if (Img) {
         return (
             <div className="relative cursor-pointer"
                 onMouseEnter={() => setIsHovered(true)}
                 onMouseLeave={() => setIsHovered(false)}>
-                <div className={`${extraStyle}`}>
-                    <img src={Img} alt="Img" className="w-8 2xl:w-10 h-8 2xl:h-10" />
+                <div className={`${extraStyle} ${disabled ? "opacity-30" : ""}`}>
+                    <img src={Img} alt="Img" className={` ${disabled ? "w-6 2xl:w-6 h-6 2xl:h-6" : "w-6 2xl:w-8 h-6 2xl:h-8"}${value === 'Map' ? ' scale-125' : ""} ` } />
                 </div>
                 <div className="">
                     {tooltipText && (