Update somefiles in the desgin

src/components/CampaignTracker.tsx

@@ -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}/{section.total}
+                  {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

@@ -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>

src/components/IntegratedStrategy.tsx

@@ -362,8 +362,8 @@ 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">
+          <div key={index} className="bg-[#f6f6fa] rounded-lg">
-            <div className="border-b border-gray-200 bg-[#f6f6fa] p-4 rounded-t-lg">
+            <div className=" bg-[#f6f6fa] p-4 rounded-t-lg shadow-[0_4px_8px_0_rgba(0,0,0,0.08)]">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
                   <h2 className="text-lg font-semibold text-[#2B2D3B]">{column.title}</h2>
@@ -374,7 +374,7 @@ const IntegratedStrategy = () => {
                 {column.date && <span className="text-sm text-gray-500 font-medium">{column.date}</span>}
               </div>
             </div>
-            <div className=' custom-scrollbar'>
+            <div className=' custom-scrollbar rounded-xl'>
               {column.categories.map((category, categoryIndex) => (
                 <CategorySection key={categoryIndex} category={category} />
               ))}

src/pages/Settings.tsx

@@ -118,10 +118,10 @@ const Settings = () => {
   // Initialize form data when profile loads
   useEffect(() => {
     if (profileData?.user_profiles) {
-      const userProfile = profileData.user_profiles[0];
+      const userProfile = profileData?.user_profiles[0];
       setFormData({
-        displayName: userProfile.display_name || '',
+        displayName: userProfile?.display_name || '',
-        email: userProfile.email || ''
+        email: userProfile?.email || ''
       });
     }
   }, [profileData]);
@@ -333,7 +333,7 @@ const Settings = () => {
         </div>
 
         {/* Main Content */}
-        <div className="flex-1">
+        <div className="flex-1 min-h-screen">
           {activeSection === "profile" && (
             <div className="bg-white">
               <h2 className="text-3xl font-bold text-gray-900 mb-2">Basic Information</h2>