update App.js, src/components/CardTrelloDesign/index.js and src/components/ProductSalesAmount/Design2/index.js

src/App.js

@@ -100,7 +100,7 @@ function App() {
   return (
     <Provider store={store}>
       <div className="App">
-        <ProductDesign />
+        {/* <ProductDesign /> */}
         {/* <VodProductDesign /> */}
         {/* <VodProduct /> */}
         {/* <VodProductNew /> */}
@@ -118,7 +118,7 @@ function App() {
         <BlogDesign5 />
         <BlogDesign6 /> */}
 
-        <Button />
+        {/* <Button /> */}
         {/* <ButtonDivTag /> */}
 
         {/* ---------------------------- not usable ---------------------------- */}

src/components/CardTrelloDesign/index.js

@@ -115,7 +115,7 @@ const CardTrelloDesign = ({
       {/* progressBar */}
       <AnimatedProgressBar
         rangeWidth={"10%"}
-        parentBg={"bg-[#E3E3E3] ltr"}
+        parentBg={"bg-[#E3E3E3] ltr mt-3"}
         childBg={"bg-[#06BACE]"}
       />
     </div>

src/components/ProductSalesAmount/Design2/index.js

@@ -13,7 +13,11 @@ const Design2 = ({ incomes }) => {
       {incomes.map((income, index) => (
         <div key={index} className="flex flex-row items-center mt-4">
           <img src={income.image} alt="" className="w-14 rounded-full" />
-          <AnimatedProgressBar />
+          <AnimatedProgressBar
+            rangeWidth={"10%"}
+            parentBg={"bg-[#E3E3E3] mx-2"}
+            childBg={"bg-[#06BACE]"}
+          />
           <p>{income.percentNumb}</p>
         </div>
       ))}