1. disapper black border in card 2.

2025-10-07 14:05:54 +03:00
--- a/src/App.css
+++ b/src/App.css
@@ -30,3 +30,13 @@
    }
  }
  
+
+  .recharts-surface {
+    cursor: pointer !important;
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    focus:outline-none !important;
+    focus:ring-0 !important;
+    focus:border-none !important;
+  }
--- a/src/assets/icons/InProgress.svg
+++ b/src/assets/icons/InProgress.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z" stroke="#4285F4" stroke-width="1.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.7158 7.99997C12.7158 9.47365 12.0526 10.7263 11.0211 11.6105L8 7.99997V3.28418C10.5789 3.28418 12.7158 5.42102 12.7158 7.99997Z" fill="#4285F4"/>
+<path d="M8.4375 3.74414C10.5747 3.96793 12.2783 5.81021 12.2783 8C12.2783 9.17422 11.8146 10.1946 11.0586 10.9746L8.4375 7.83984V3.74414Z" fill="#4285F4" stroke="#4285F4" stroke-width="0.875"/>
+</svg>
--- a/src/assets/icons/NA.svg
+++ b/src/assets/icons/NA.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 16.5C12.6421 16.5 16 13.1421 16 9C16 4.85786 12.6421 1.5 8.5 1.5C4.35786 1.5 1 4.85786 1 9C1 13.1421 4.35786 16.5 8.5 16.5Z" stroke="#999BAD" stroke-width="1.875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.1987 2.59314L4.80078 15.4069" stroke="#999BAD" stroke-width="1.875" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/icons/gemini.svg
+++ b/src/assets/icons/gemini.svg
--- a/src/assets/icons/gemini2.svg
+++ b/src/assets/icons/gemini2.svg
--- a/src/assets/icons/perplextiy-light.svg
+++ b/src/assets/icons/perplextiy-light.svg
--- a/src/assets/icons/perplextiy.svg
+++ b/src/assets/icons/perplextiy.svg
--- a/src/components/DashboardGrid.tsx
+++ b/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>
--- a/src/components/MultiRingCircularProgress.tsx
+++ b/src/components/MultiRingCircularProgress.tsx
@@ -37,10 +37,15 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover,

  return (
    <div
-      className="flex items-center justify-center hover:scale-115 transition-all duration-300 cursor-pointer"
+      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)}
--- a/src/components/Strategy/ProgressMetrics.tsx
+++ b/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>
--- a/src/components/flip-card.tsx
+++ b/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">
--- a/src/components/shared/MetricCard.tsx
+++ b/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 && (
--- a/src/pages/Portfolio.tsx
+++ b/src/pages/Portfolio.tsx
@@ -12,10 +12,9 @@ import { CircleCheck } from 'lucide-react';
 // import AppleMusic from "../assets/icons/apple-music.png"
 // import Substack from "../assets/icons/substack.png"
 // import Pin from "../assets/icons/pin.png"
-import Progress from "../assets/icons/InProgress.png"
-import No from "../assets/icons/no.png"
+import Progress from "../assets/icons/InProgress.svg"
+import No from "../assets/icons/NA.svg"
 import Share2 from "../assets/icons/Share2.png"
-import MetricCard from '../components/shared/MetricCard';

 const done = <div className='flex items-center gap-2 w-[100px]'> <CircleCheck className='w-6 h-6 text-[#fff] bg-green-500 rounded-full' /> <span className='text-green-500 font-bold text-md'>Done</span></div>