Update somefiles in the desgin

src/components/DashboardGrid.tsx

@@ -451,7 +451,7 @@ export default function DashboardGrid() {
     };
 
 
-    const CardHeader = ({ title, value, valueChange, icon, tooltipText }: { title: string, value: string, valueChange?: string, icon: string, tooltipText?: string }) => {
+    const CardHeader = ({ title, value, valueChange, icon, tooltipText, extra }: { title: string, value: string, valueChange?: string, icon: string, tooltipText?: string, extra?: string }) => {
 
         return (
             <div className="flex items-center gap-2 border-r-2 border-gray-200 pr-4 last:border-r-0 w-full lg:w-[32%] py-2 lg:py-0"
@@ -462,7 +462,7 @@ export default function DashboardGrid() {
 
                     <div className="flex items-center gap-2">
                         <span className="text-xl sm:text-2xl  font-bold">{value}</span>
-
+                        {extra && <span className="text-lg text-gray-400  ">{extra}</span>}
                         {tooltipText && <div className="relative w-[10%]"
 
                             onMouseEnter={() => {
@@ -509,7 +509,7 @@ export default function DashboardGrid() {
             <main className="pb-4 px-2 sm:px-4 border-collapse border-2 mb-6 rounded-lg">
                 <div className="flex flex-col lg:flex-row flex-wrap gap-4 justify-between items-stretch py-4 px-2 sm:px-4">
                     <CardHeader title="Active Keywords" value="5" icon={ActiveKeywords} />
-                    <CardHeader title="Total Backlinks" value="112/1012" icon={TotalBacklinks} />
+                    <CardHeader title="Total Backlinks" value="112" extra="/1012" icon={TotalBacklinks} />
                     <CardHeader title="Portfolio Performance" value="34%" icon={PortfolioPerformance} tooltipText="Portfolio Performance is the percentage of keywords that are performing well." />
 
                 </div>