FEAT: added the total lang analyssi card

src/Components/FollowerAnalysis/FollowerProgress.tsx

@@ -36,7 +36,7 @@ const FollowerProgress: React.FC<FollowerAnalysis> = ({
             tooltip="Followers"
             color={"green"}
           >
-            <span className="text-md text-gray-700 font-large ">{followerCount}</span>
+            <span className="text-md text-pink-700 font-large font-bold font-mono">{followerCount}</span>
           </ProgressCircle>
           {increaseOrDecrease === "no_change" ? (
             <BadgeDelta

src/Components/FollowerAnalysis/FollowingProgress.tsx

@@ -33,7 +33,7 @@ const FollowingProgress: React.FC<FollowingAnalysis> = ({
           tooltip="Following"
           color={"purple"}
 
-        > <span className="text-md text-gray-700 font-large ">{followingCount}</span></ProgressCircle>
+        > <span className="text-md text-red-700 font-large  font-extrabold font-mono">{followingCount}</span></ProgressCircle>
         {increaseOrDecrease === "no_change" ? (
           <BadgeDelta deltaType="unchanged" isIncreasePositive={true}
           size="sm" color={"green"}>No Change</BadgeDelta>

src/Components/LanguageAnalysis/TotalLangProgress.tsx

@@ -1,21 +1,42 @@
-import React from "react";
-import { Card, BarList,ProgressBar } from "@tremor/react";
-import { TotalLangAnalysis } from "@/Interface/api.interface";
+import React , {useState} from "react";
+import {
+  Card,
+  Flex,
+  ProgressCircle,
+  BadgeDelta,
+} from "@tremor/react";
+import { RoughNotation } from "react-rough-notation";
+import {TotalLangAnalysis} from "@/Interface/api.interface";
 
 const TotalLangProgress: React.FC<TotalLangAnalysis> = ({
-  TotalCodePushedSinceJoingingGit,
+TotalCodePushedSinceJoingingGit
 }) => {
+  const [show, setShow] = useState(true);
+  return (
+    <div className="relative group items-start justify-center mt-5 ml-16">
+    <div className="langGradientBack w-full absolute -inset-0.5 bg-gradient-to-r from-blue-600 to-red-600  blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
+    <Card className="totalLangCard " style={{ backgroundColor: "black" }}>
+    <div className="mb-3">
+      {show && ( 
+          <RoughNotation type="underline" show={show} color="red" strokeWidth={5}>
+            <h2 className="totalLangrAnalysisCardTitle font-mono mb-5">Lines of code pushed</h2>
+          </RoughNotation>
+        )}
+        </div>
 
-  const bars = [
-    { name: "Total Count", value: TotalCodePushedSinceJoingingGit },
-  ];
+        <ProgressCircle
+          className="totalLangProgressCircle"
+          value={TotalCodePushedSinceJoingingGit}
+          radius={80}
+          strokeWidth={12}
+          tooltip="Lines of code pushed since joining git"
+          color={"orange"}
+          size="xl"
 
-  return (
-    <div className="relative group items-start justify-center ml-6 mt-6">
-        <div className="totalLangCountGradient  absolute -inset-0.5 bg-gradient-to-r from-red-600 to-blue-600  blur opacity-2 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
-      <Card className="totalLangCount">
-        <ProgressBar value={TotalCodePushedSinceJoingingGit} color="orange" showAnimation={true} label="Lines of Code Pushed" />
-      </Card>
+        > <span className="text-md text-orange-700 font-large font-extrabold font-mono">{TotalCodePushedSinceJoingingGit}</span></ProgressCircle>
+
+
+    </Card>
     </div>
   );
 };

src/Components/Repository/RepoProgress.tsx

@@ -36,7 +36,7 @@ const RepoProgress: React.FC<RepoCountAnalysis> = ({
             tooltip="Followers"
             color={"pink"}
           >
-            <span className="text-md text-gray-700 font-large ">{RepoCount}</span>
+            <span className="text-md text-blue-700 font-large font-extrabold font-mono">{RepoCount}</span>
           </ProgressCircle>
           {increaseOrDecrease === "no_change" ? (
             <BadgeDelta

src/Styles/Dashboard/langCount.css

@@ -1,4 +1,27 @@
 .langGradientBack{
     border-radius: 30px;
-    width:610px
-}
+    width: 330px;
+}
+.totalLangCard{
+    height: 250px;
+   width: 320px;
+    border-radius: 50px; 
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 20px; 
+    border-color: #3B3486;
+
+}
+ .totalLangProgressCircle {
+   color: #864AF9;
+    margin-top: 5px; 
+    margin-right: 5%;
+  }
+
+  .totalLangrAnalysisCardTitle {
+    font-size: 15px;
+    font-weight: bolder;
+    margin-top: 0;
+    color: white;
+  }

src/app/Dashboard/page.tsx

@@ -220,7 +220,7 @@ const VersionDashboard: React.FC = () => {
 
             </div>
 
-            <TotalLangProgress TotalCodePushedSinceJoingingGit={totalCount.TotalCodePushedSinceJoingingGit}/>
+
 
           </Grid>
         </div>
@@ -230,6 +230,7 @@ const VersionDashboard: React.FC = () => {
         <div>
         <PullRequestProgress OpenCount={issueCount.OpenCount} ClosedCount={issueCount.ClosedCount}/>
         <TopicProgress topicCounts={topicCount}/>
+        <TotalLangProgress TotalCodePushedSinceJoingingGit={totalCount.TotalCodePushedSinceJoingingGit}/>
         </div>