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

src/components/IntegratedStrategy.tsx

@@ -14,6 +14,7 @@ interface Category {
   name: string
   count: number
   color: string
+  highlight: string
   items: TaskItem[]
 }
 
@@ -33,7 +34,8 @@ const IntegratedStrategy = () => {
         {
           name: "Social",
           count: 4,
-          color: "bg-blue-100",
+          color: "bg-[rgba(0,30,226,0.11)]",
+          highlight: "bg-[#4C60E5]",
           items: [
             {
               id: "1",
@@ -68,7 +70,8 @@ const IntegratedStrategy = () => {
         {
           name: "Citation",
           count: 2,
-          color: "bg-blue-100",
+          color: "bg-[rgba(60,135,255,0.17)]",
+          highlight: "bg-[#4285F4]",
           items: [
             {
               id: "5",
@@ -89,7 +92,8 @@ const IntegratedStrategy = () => {
         {
           name: "Web 2.0",
           count: 3,
-          color: "bg-green-100",
+          color: "bg-[rgba(31,228,84,0.16)]",
+          highlight: "bg-[#34A853]",
           items: [
             {
               id: "7",
@@ -117,7 +121,8 @@ const IntegratedStrategy = () => {
         {
           name: "Multimedia",
           count: 1,
-          color: "bg-yellow-100",
+          color: "bg-[rgba(255,197,30,0.27)]",
+          highlight: "bg-[#FBBC05]",
           items: [
             {
               id: "10",
@@ -138,7 +143,8 @@ const IntegratedStrategy = () => {
         {
           name: "Social",
           count: 3,
-          color: "bg-blue-100",
+          color: "bg-[rgba(0,30,226,0.11)]",
+          highlight: "bg-[#4C60E5]",
           items: [
             {
               id: "11",
@@ -163,7 +169,8 @@ const IntegratedStrategy = () => {
         {
           name: "Citation",
           count: 5,
-          color: "bg-blue-100",
+          color: "bg-[rgba(60,135,255,0.17)]",
+          highlight: "bg-[#4285F4]",
           items: [
             {
               id: "14",
@@ -200,7 +207,8 @@ const IntegratedStrategy = () => {
         {
           name: "Web 2.0",
           count: 5,
-          color: "bg-green-100",
+          color: "bg-[rgba(31,228,84,0.16)]",
+          highlight: "bg-[#34A853]",
           items: [
             {
               id: "19",
@@ -232,7 +240,8 @@ const IntegratedStrategy = () => {
         {
           name: "Social",
           count: 5,
-          color: "bg-blue-100",
+          color: "bg-[rgba(0,30,226,0.11)]",
+          highlight: "bg-[#4C60E5]",
           items: [
             {
               id: "22",
@@ -269,7 +278,8 @@ const IntegratedStrategy = () => {
         {
           name: "Citation",
           count: 5,
-          color: "bg-blue-100",
+          color: "bg-[rgba(60,135,255,0.17)]",
+          highlight: "bg-[#4285F4]",
           items: [
             {
               id: "27",
@@ -306,7 +316,8 @@ const IntegratedStrategy = () => {
         {
           name: "Web 2.0",
           count: 2,
-          color: "bg-green-100",
+          color: "bg-[rgba(31,228,84,0.16)]",
+          highlight: "bg-[#34A853]",
           items: [
             {
               id: "32",
@@ -322,20 +333,21 @@ const IntegratedStrategy = () => {
 
   const CategorySection = ({ category }: { category: Category }) => (
     <div className="mb-4 ">
-      <div className={`${category.color} px-3 py-2  border-blue-500`}>
+      <div className={`${category.color} px-3 py-2 mt-2  mb-2 ml-2 mr-2 rounded-xl border-blue-500`}>
         <div className="flex items-center gap-2">
-          <div className="w-2 h-5 bg-blue-500 rounded"></div>
+          <div className={`w-2 h-5 ${category.highlight} rounded`}></div>
-          <span className="font-medium text-lg text-[#2B2D3B]">{category.name}</span>
+
-          <span className="text-[#2B2D3B] text-lg font-bold bg-white py-[1px] px-[10px] rounded-full">{category.count}</span>
+          <span className="font-semibold text-lg text-[#2B2D3B]">{category.name}</span>
+          <span className="text-[#2B2D3B] text-lg font-semibold bg-white py-[1px] px-[10px] rounded-full">{category.count}</span>
         </div>
       </div>
-      <div className="bg-white border border-t-0 rounded-b-md">
+      <div className="bg-white border border-l-0 border-r-0 rounded-b-md">
         {category.items.map((item) => (
           <div key={item.id} className="px-3 py-2 border-b border-gray-100 last:border-b-0">
             <div className="flex items-center gap-2">
               <span className="text-xl mt-0.5">{item.icon}</span>
               <span
-                className={`text-md font-semibold text-blue-600 hover:text-blue-800  ${item.isLink ? "underline cursor-pointer" : "text-gray-700"}`}
+                className={`text-md font-normal text-blue-600 hover:text-blue-800  ${item.isLink ? "underline cursor-pointer" : "text-gray-700"}`}
               >
                 {item.title}
               </span>
@@ -350,16 +362,16 @@ const IntegratedStrategy = () => {
     <div className="p-2 bg-gray-50">
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
         {columns.map((column, index) => (
-          <div key={index} className="bg-white rounded-lg shadow-sm border">
+          <div key={index} className="bg-white rounded-lg">
-            <div className="border-b border-gray-200 bg-[#f6f6fa] p-4 shadow-lg ">
+            <div className="border-b border-gray-200 bg-[#f6f6fa] p-4 rounded-t-lg">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
-                  <h2 className="text-lg font-bold text-[#2B2D3B]">{column.title}</h2>
+                  <h2 className="text-lg font-semibold text-[#2B2D3B]">{column.title}</h2>
                   <span className="text-[#2B2D3B] bg-[#e9eaf1] px-2 py-1 rounded-full text-md  font-semibold">
                     {column.count}
                   </span>
                 </div>
-                {column.date && <span className="text-sm text-gray-500">{column.date}</span>}
+                {column.date && <span className="text-sm text-gray-500 font-medium">{column.date}</span>}
               </div>
             </div>
             <div className=' custom-scrollbar'>

src/components/Strategy/ProgressMetrics.tsx

@@ -9,7 +9,7 @@ import Map from "../../assets/icons/maps.svg"
 function ProgressMetrics() {
 
     return (
-        <div className="bg-white rounded-lg border border-gray-200 p-3 mb-6">
+        <div className="bg-white rounded-t-lg border border-b-0 border-gray-200 p-3 ">
 
             <div className="flex items-center md:flex-row flex-col justify-between pb-3 px-2">
                 <h3 className="text-lg font-bold text-[#2B2D3B]">CPA Los Angeles</h3>

src/components/Strategy/RoadmapSidebar.tsx

@@ -24,7 +24,7 @@ const RoadmapSidebar = ({
     ]
 
     return (
-        <div className="lg:w-80 w-[96%] mb-3 lg:mb-0 h-[100%] bg-white border-2 border-gray-200 rounded-lg">
+        <div className="lg:w-80 w-[96%] mb-3 lg:mb-0 h-[100%] bg-white border border-gray-200 rounded-lg shadow-md">
             {mode ?
                 null
                 :
@@ -50,7 +50,7 @@ const RoadmapSidebar = ({
                     <div key={index} className="border-b border-gray-200 last:border-b-0 ">
                         <button
                             onClick={() => onKeywordSelect(keyword)}
-                            className={`w-full text-left p-3 rounded-lg flex items-center gap-3 transition-colors ${selectedKeyword === keyword ? "bg-blue-50 border border-blue-200" : "hover:bg-gray-50"}`}
+                            className={`w-full text-left p-3 rounded-lg flex items-center gap-3 transition-colors ${selectedKeyword === keyword ? "bg-blue-50 p-[10px]" : "hover:bg-gray-50"}`}
                         >
                             {
                                 selectedKeyword === keyword
@@ -59,14 +59,14 @@ const RoadmapSidebar = ({
                                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
   <path d="M9.79395 2.05469C10.8674 2.05469 11.8712 2.25835 12.8096 2.66309C13.7575 3.07196 14.5758 3.62411 15.2695 4.31836C15.9635 5.01287 16.5158 5.83158 16.9258 6.7793C17.3313 7.71663 17.5347 8.71943 17.5332 9.79297V9.87109L16.8818 9.6709C16.8536 7.75376 16.1674 6.10878 14.8232 4.76465C13.4504 3.39187 11.7638 2.70215 9.79395 2.70215C7.82405 2.70217 6.13746 3.39184 4.76465 4.76465C3.39184 6.13746 2.70217 7.82405 2.70215 9.79395C2.70215 11.7638 3.39187 13.4504 4.76465 14.8232C6.10878 16.1674 7.75376 16.8536 9.6709 16.8818L9.87109 17.5332H9.79395C8.71942 17.5332 7.71633 17.3294 6.7793 16.9248C5.83235 16.5159 5.01341 15.964 4.31836 15.2695C3.6235 14.5752 3.07137 13.7569 2.66309 12.8096C2.25888 11.8717 2.05523 10.8681 2.05469 9.79395C2.05417 8.72012 2.258 7.71688 2.66309 6.7793C3.07254 5.8317 3.62445 5.01281 4.31836 4.31836C5.01206 3.62414 5.83046 3.07195 6.77832 2.66309C7.7167 2.25836 8.72049 2.0547 9.79395 2.05469ZM16.3711 12.2891L14.7656 12.8213L13.9961 13.0762L17.7383 16.8184L16.8184 17.7383L13.0762 13.9961L12.8213 14.7656L12.2891 16.3711L10.5391 10.5391L16.3711 12.2891ZM9.79395 5.35059C10.9995 5.35059 12.0153 5.75553 12.8682 6.57129C13.5433 7.21715 13.9662 7.97246 14.1455 8.84863L13.4121 8.63086C13.1826 7.90877 12.7672 7.30069 12.167 6.81934C11.4847 6.27219 10.6861 5.99867 9.79395 5.99805C8.75399 5.99806 7.8517 6.37486 7.11328 7.11328C6.37486 7.8517 5.99806 8.75399 5.99805 9.79395C5.99805 10.6864 6.27148 11.4846 6.81934 12.167C7.30108 12.7671 7.90911 13.1826 8.63086 13.4121L8.84863 14.1455C7.97246 13.9662 7.21715 13.5433 6.57129 12.8682C5.75553 12.0153 5.35059 10.9995 5.35059 9.79395C5.3506 8.55185 5.7791 7.51191 6.64551 6.64551C7.51191 5.7791 8.55185 5.3506 9.79395 5.35059Z" fill="#65677D" stroke="#4C60E5"/>
 </svg>
-                                    <span className="text-md text-blue-600 font-bold">{keyword}</span>
+                                    <span className="text-md text-blue-600 font-semibold">{keyword}</span>
                                     </>
                                     :
                                     <>
                                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
   <path d="M9.79395 2.05469C10.8674 2.05469 11.8712 2.25835 12.8096 2.66309C13.7575 3.07196 14.5758 3.62411 15.2695 4.31836C15.9635 5.01287 16.5158 5.83158 16.9258 6.7793C17.3313 7.71663 17.5347 8.71943 17.5332 9.79297V9.87109L16.8818 9.6709C16.8536 7.75376 16.1674 6.10878 14.8232 4.76465C13.4504 3.39187 11.7638 2.70215 9.79395 2.70215C7.82405 2.70217 6.13746 3.39184 4.76465 4.76465C3.39184 6.13746 2.70217 7.82405 2.70215 9.79395C2.70215 11.7638 3.39187 13.4504 4.76465 14.8232C6.10878 16.1674 7.75376 16.8536 9.6709 16.8818L9.87109 17.5332H9.79395C8.71942 17.5332 7.71633 17.3294 6.7793 16.9248C5.83235 16.5159 5.01341 15.964 4.31836 15.2695C3.6235 14.5752 3.07137 13.7569 2.66309 12.8096C2.25888 11.8717 2.05523 10.8681 2.05469 9.79395C2.05417 8.72012 2.258 7.71688 2.66309 6.7793C3.07254 5.8317 3.62445 5.01281 4.31836 4.31836C5.01206 3.62414 5.83046 3.07195 6.77832 2.66309C7.7167 2.25836 8.72049 2.0547 9.79395 2.05469ZM16.3711 12.2891L14.7656 12.8213L13.9961 13.0762L17.7383 16.8184L16.8184 17.7383L13.0762 13.9961L12.8213 14.7656L12.2891 16.3711L10.5391 10.5391L16.3711 12.2891ZM9.79395 5.35059C10.9995 5.35059 12.0153 5.75553 12.8682 6.57129C13.5433 7.21715 13.9662 7.97246 14.1455 8.84863L13.4121 8.63086C13.1826 7.90877 12.7672 7.30069 12.167 6.81934C11.4847 6.27219 10.6861 5.99867 9.79395 5.99805C8.75399 5.99806 7.8517 6.37486 7.11328 7.11328C6.37486 7.8517 5.99806 8.75399 5.99805 9.79395C5.99805 10.6864 6.27148 11.4846 6.81934 12.167C7.30108 12.7671 7.90911 13.1826 8.63086 13.4121L8.84863 14.1455C7.97246 13.9662 7.21715 13.5433 6.57129 12.8682C5.75553 12.0153 5.35059 10.9995 5.35059 9.79395C5.3506 8.55185 5.7791 7.51191 6.64551 6.64551C7.51191 5.7791 8.55185 5.3506 9.79395 5.35059Z" fill="#65677D" stroke="#787B91"/>
 </svg>
-                                    <span className="text-md text-gray-700 font-bold">{keyword}</span>
+                                    <span className="text-md text-gray-700 font-semibold">{keyword}</span>
                                     </>
 
                             }

src/components/Strategy/ShowDetails.tsx

@@ -232,7 +232,7 @@ function ShowDetails() {
             {/* Column Header */}
             <div className="p-4 border-b border-gray-200 bg-[#F6F6FA] rounded-lg flex justify-between items-center ">
               <div className="flex items-center justify-between">
-                <h3 className="font-semibold text-gray-900 text-lg">{column.title}</h3>
+                <h3 className="text-lg  font-bold text-[#2B2D3B]">{column.title}</h3>
                 <span className="bg-gray-100 text-gray-600 text-sm px-2 py-1 rounded-full">{column.count}</span>
               </div>
               <p className="text-sm text-gray-500">{column.date}</p>

src/components/shared/Footer.tsx

@@ -6,12 +6,12 @@ const Footer = () => {
       <div className="container px-6">
         {/* Navigation Links */}
         <nav className="flex flex-wrap items-center space-x-8 mb-4">
-          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Home</Link>
+          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">Home</Link>
-          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">About</Link>
+          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">About</Link>
-          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Journal</Link>
+          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">Journal</Link>
-          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">SEO Tools</Link>
+          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">SEO Tools</Link>
-          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Backlinks</Link>
+          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">Backlinks</Link>
-          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Help Desk</Link>
+          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">Help Desk</Link>
         </nav>
 
         {/* Copyright and Legal */}
@@ -20,9 +20,9 @@ const Footer = () => {
           <span className="mx-2">|</span>
           <span>30745 Pacific Coast Hwy Ste 21 Malibu, CA 90265</span>
           <span className="mx-2">|</span>
-          <Link to="#" className="hover:text-gray-800">Terms of Service</Link>
+          <Link to="#" className="hover:text-gray-800 text-black">Terms of Service</Link>
           <span className="mx-2">|</span>
-          <Link to="#" className="hover:text-gray-800">Privacy Policy</Link>
+          <Link to="#" className="hover:text-gray-800 text-black">Privacy Policy</Link>
         </div>
       </div>
     </footer>

src/components/shared/Header.tsx

@@ -158,7 +158,7 @@ const Header = () => {
           <div className="hidden md:flex items-center space-x-4 relative">
             {/* Add Keyword Button */}
 
-              <button className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium shadow-md hover:bg-blue-700 transition-colors duration-200 ">
+              <button className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-xl font-medium shadow-md hover:bg-blue-700 transition-colors duration-200 ">
   <Plus size={18} />
   <span>Add Keywords</span>
 </button>

src/components/shared/scrollableComponent.css

@@ -40,5 +40,4 @@
 /* ==== Firefox ==== */
 .custom-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: #999 #eee;
 }

src/pages/Portfolio.tsx

@@ -84,14 +84,14 @@ function Portfolio() {
                     <div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-4 px-4'>
                         <div className='flex flex-col items-start gap-2'>
                             <span className='text-xl sm:text-2xl font-bold '>CPA Los Angeles</span>
-                            <span className='text-gray-500 rounded-md text-sm sm:text-md font-medium'>
+                            <span className='text-gray-500  rounded-md text-sm sm:text-md font-normal'>
                                 <span className='font-bold pr-2 sm:pr-3 text-[#2B2D3B]'>Links:</span>
-                                Indexed  <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 border-[#B8D8EB] border-2 rounded-md mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
+                                Indexed  <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 border-[#B8D8EB] border-2 rounded-xl mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
                                 
-                                Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] border-[#B8D8EB] px-2 py-1 rounded-md mx-1 text-xs sm:text-sm'>4%</b>
+                                Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 border-[#B8D8EB] border-2 rounded-xl mx-1 text-xs sm:text-sm'>4%</b>
                             </span>
                             <span className='flex items-center font-normal   gap-2 text-[#787B91]  sm:text-md'>Content Publishing
-                                <span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-0 rounded-md font-bold border border-[#F7D2DF] text-xs sm:text-sm'>Locked</span>
+                                <span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-1 rounded-xl font-bold border-2 border-[#F7D2DF] text-xs sm:text-sm'>Locked</span>
                             </span>
                         </div>
                         <div className='flex flex-wrap items-center gap-2 sm:gap-3'>
@@ -102,7 +102,7 @@ function Portfolio() {
 
                             <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings" />
 
-                            <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings" />
+                            <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DR" subTitle="Show rings" />
 
                             <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings" />
 

src/pages/Strategy.tsx

@@ -27,7 +27,7 @@ function Strategy() {
                 <div className="flex-1 px-2 sm:px-4 w-full lg:w-auto">
                     <ProgressMetrics />
 
-                    <div className="bg-white rounded-lg border border-gray-200 p-2 sm:p-3 pb-6 sm:pb-10">
+                    <div className="bg-white rounded-b-lg border border-t-0 border-gray-200 p-2 sm:p-3 pb-6 sm:pb-10">
 
                         {selectedKeyword === "CPA Los Angeles" ? <IntegratedStrategy /> : <ShowDetails />
                         }