Merge branch 'main' of https://app.gitpasha.com/mohammedsaid18/dashboard

src/components/CampaignTracker.tsx

@@ -81,15 +81,15 @@ const CampaignTracker = ({ handleMenuClick }: { handleMenuClick: () => void }) =
       {/* Status Cards */}
       <div className="grid grid-cols-3 gap-4 mb-4">
         <div className="px-2 rounded-lg p-1 border">
-          <div className=" text-gray-700 mb-1 ">Indexed:</div>
+          <div className=" text-gray-700  ">Indexed:</div>
           <div className="text-sm font-bold text-gray-900">77%</div>
         </div>
         <div className="px-2 rounded-lg p-1 border">
-          <div className="text- text-gray-700 mb-1 ">Interlinked:</div>
+          <div className="text- text-gray-700 ">Interlinked:</div>
           <div className="text-sm font-bold text-gray-900">5%</div>
         </div>
         <div className="px-2 rounded-lg p-1 border">
-          <div className="text- text-gray-700 mb-1 ">Publishing:</div>
+          <div className="text- text-gray-700  ">Publishing:</div>
           <div className="text-sm font-bold text-gray-900">Locked</div>
         </div>
       </div>
@@ -104,7 +104,7 @@ const CampaignTracker = ({ handleMenuClick }: { handleMenuClick: () => void }) =
               {/* Section Title and Progress */}
               <div className="flex items-center justify-between mb-1">
                 <h3 className="text-sm font-semibold text-gray-900">
-                  {section.title}: {section.current} <span className="text-gray-400">/{section.total}</span>
+                  {section.title}: {section.current}<span className="text-gray-400">/{section.total}</span>
                 </h3>
                 <div className="flex gap-2">
                   {section.icons.map((icon, iconIndex) => (

src/components/DashboardGrid.tsx

@@ -460,9 +460,9 @@ export default function DashboardGrid() {
 
                 <div className="flex flex-col px-2 sm:px-4">
 
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-1">
-                        <span className="text-xl sm:text-2xl  font-bold">{value}</span>
+                        <span className="text-xl sm:text-3xl  font-semibold">{value}</span>
-                        {extra && <span className="text-lg text-gray-400  ">{extra}</span>}
+                        {extra && <span className="text-lg text-gray-400 font-medium ">{extra}</span>}
                         {tooltipText && <div className="relative w-[10%]"
 
                             onMouseEnter={() => {
@@ -619,7 +619,7 @@ export default function DashboardGrid() {
                                                 hoveredIndex={hoverState.cardId === card.title ? hoverState.ringIndex : null}
                                                 onHover={(index) => handleRingHover(card.title, index)}
                                             />
-                                            <div className={`mt-1 font-bold text-lg text-center ${card.faded ? "text-gray-400" : "text-gray-900"}`}>
+                                            <div className={`mt-1 font-semibold text-lg text-center ${card.faded ? "text-gray-400" : "text-gray-900"}`}>
                                                 {card.title}
                                             </div>
                                             {/* Tags */}
@@ -677,7 +677,7 @@ export default function DashboardGrid() {
                                             >
                                                 <ArrowLeft className="w-5 h-5 text-gray-600" />
                                             </button>
-                                            <h1 className="text-xl font-bold text-gray-900">{card.title}</h1>
+                                            <h1 className="text-xl font-semibold text-gray-900">{card.title}</h1>
                                         </div>
                                         {/* <button
                                             onClick={() => handleMenuClick(card.title)}

src/components/flip-card.tsx

@@ -158,7 +158,7 @@ console.log(CARDS)
             >
               <div className="p-5 flex flex-col items-center h-full justify-center">
                 {card.badge && (
-                   <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">
+                   <div className="absolute top-8 right-[-100px] w-[320px] bg-[#0CAA75] 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"

src/components/shared/HeaderPage.tsx

@@ -3,23 +3,41 @@ import UrlDropdown from "./UrlDropdown"
 
 const HeaderPage = ({ title }: { title: string }) => {
     return (
-        <div className="flex space-x-4 my-0 md:my-4 lg:flex-row flex-col items-baseline">
+        <div className="flex flex-col lg:flex-row items-baseline gap-4 my-0 md:my-4">
-            <h1 className="text-xl font-bold text-gray-800 mb:mb-0 mb-4">{title}</h1>
+            <div className="flex items-baseline gap-4 flex-wrap">
+                <h1 className="text-xl font-bold text-gray-800 leading-tight">{title}</h1>
 
-            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
+                {/* First SVG dot */}
-            <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
+                <svg 
-            </svg>
+                    xmlns="http://www.w3.org/2000/svg" 
+                    width="4" 
+                    height="4" 
+                    viewBox="0 0 4 4" 
+                    fill="none"
+                    className="flex-shrink-0 -translate-y-1"
+                >
+                    <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
+                </svg>
 
-            <UrlDropdown />
+                <UrlDropdown />
 
-            <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none">
+                {/* Second SVG dot */}
-                <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
+                <svg 
-            </svg>
+                    xmlns="http://www.w3.org/2000/svg" 
+                    width="4" 
+                    height="4" 
+                    viewBox="0 0 4 4" 
+                    fill="none"
+                    className="flex-shrink-0 -translate-y-1"
+                >
+                    <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
+                </svg>
 
-            <div className="flex gap-1">
+                <div className="flex gap-1 flex-wrap">
-                <MetricCard value="12" label="DR" valueChange="+1" size="sm" />
+                    <MetricCard value="12" label="DR" valueChange="+1" size="sm" />
-                <MetricCard value="14" label="DA" valueChange="+3" size="sm" />
+                    <MetricCard value="14" label="DA" valueChange="+3" size="sm" />
-                <MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
+                    <MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
+                </div>
             </div>
         </div>
     )

src/components/shared/MetricCard.tsx

@@ -46,11 +46,11 @@ const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChan
 
             <div className="flex-1">
                 <div className={`${size === 'sm' ? 'text-sm border-2 border-gray-200 px-1 rounded-lg' : 'text-xl'} font-bold text-gray-800 flex items-center space-x-2 p-[3px] justify-between `}>
-                    <span className="text-sm text-gray-400">{!tooltipText && label}</span>
+                    <span className="text-sm font-semibold text-[#787B91]">{!tooltipText && label}</span>
 
-                    <span className="text-[#787B91] bg-gray-200 px-1 py-0 rounded-md">{value}</span>
+                    <span className="text-[#787B91] font-semibold bg-gray-200 px-1 py-0 rounded-md">{value}</span>
                     {valueChange && (
-                        <div className="flex items-center text-md font-semibold text-green-500">
+                        <div className="flex items-center text-md font-medium text-[#029056]">
                             {Icon && (
                                 <ArrowUp size={14} className="inline-block mr-1" />
                             )}

src/pages/Portfolio.tsx

@@ -144,7 +144,7 @@ function Portfolio() {
                     {/* Tables */}
                     {categories.map((cat, idx) => (
                         <div key={idx} className='mb-8 last:mb-0'>
-                            <div className={`px-4 py-3 rounded-lg font-bold text-sm ${cat.color} mb-3`}>
+                            <div className={`px-4 py-1 rounded-lg font-bold text-sm m-2 ${cat.color} mb-3`}>
                                 <div className='flex items-center gap-3'>
                                     <div className='flex items-center gap-2'>
                                         {/* <span className='text-lg'>{cat.name === 'Social' ? '💬' : cat.name === 'Citation' ? '📊' : '🌐'}</span> */}
@@ -154,7 +154,7 @@ function Portfolio() {
                                     <span className='text-md font-bold bg-white p-1 px-2  rounded-full'>{cat.rows.length}</span>
                                 </div>
                             </div>
-                            <div className='bg-white rounded-xl border overflow-x-auto shadow-sm'>
+                            <div className='bg-white  border-l-0 border-r-0 border last:border-b-0 overflow-x-auto shadow-sm'>
                                 <table className='w-full min-w-[800px]'>
                                     <tbody>
                                         {cat.rows.map((row, rIdx) => (
@@ -166,7 +166,7 @@ function Portfolio() {
                                                     </div>
                                                 </td>
 
-                                                <td className='w-full text-[#4285F4] hover:text-[#1e40af] font-medium' title={row.title}>
+                                                <td className='w-full text-[#4C60E5] hover:text-[#1e40af] font-normal leading-5 text-md' title={row.title}>
                                                     <div className='truncate max-w-[250px] sm:max-w-[400px] whitespace-pre-wrap underline py-1 cursor-pointer text-sm'>{row.title}</div>
                                                 </td>
                                                 <td className='py-3 px-2 sm:px-4 text-center w-16 sm:w-20 font-semibold text-gray-700 text-sm'>{row.DR}</td>