update

src/App.js

@@ -15,17 +15,17 @@ import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1";
 function App() {
   return (
     <div className="App">
-      {/* <ProductDesign /> */}
+      <ProductDesign />
-      {/* <BookDesign /> */}
+      <BookDesign />
-      {/* <ButtonDesign /> */}
+      <ButtonDesign />
-      {/* <ProductTags /> */}
+      <ProductTags />
-      {/* <CounterDesign /> */}
+      <CounterDesign />
-      {/* <BlogDesign1 /> */}
+      <BlogDesign1 />
-      {/* <BlogDesign2 /> */}
+      <BlogDesign2 />
-      {/* <BlogDesign3 /> */}
+      <BlogDesign3 />
-      {/* <BlogDesign4 /> */}
+      <BlogDesign4 />
-      {/* <BlogDesign5 /> */}
+      <BlogDesign5 />
-      {/* <BlogDesign6 /> */}
+      <BlogDesign6 />
       <HeaderDesign1 />
     </div>
   );

src/components/Header/desgin1/HeaderDesign1.js

@@ -29,7 +29,7 @@ const HeaderDesign1 = ({
   bottomHeader,
 }) => {
   return (
-    <header className="container mx-auto py-2 px-8 w-full bg-white rounded shadow-sm">
+    <header className="container mx-auto py-2 px-8 w-full bg-white rounded shadow-sm mb-20">
       {topHeader && (
         <div className="flex justify-between items-center mb-2">
           <div className="">

src/components/productDesign/ProductDesign.js

@@ -40,7 +40,7 @@ const ProductDesign = ({
           </span>
           است و داخل این کامپوننت شما میتوانید با
           <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
-            ture - false
+            true - false
           </span>
           کردن
           <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
@@ -92,10 +92,10 @@ const ProductDesign = ({
               {/* select Color */}
               {colors && (
                 <div className="flex items-center absolute right-2 bottom-2">
-                  <img src={YellowDotIcon} alt="" />
+                  <img src={YellowDotIcon} alt="" className="w-3 h-3" />
-                  <img src={RedDotIcon} alt="" />
+                  <img src={RedDotIcon} alt="" className="w-3 h-3" />
-                  <img src={PurpleDotIcon} alt="" />
+                  <img src={PurpleDotIcon} alt="" className="w-3 h-3" />
-                  <img src={LightBlueDotIcon} alt="" />
+                  <img src={LightBlueDotIcon} alt="" className="w-3 h-3" />
                 </div>
               )}
             </div>
@@ -143,7 +143,7 @@ const ProductDesign = ({
               </div>
               {/* add to cart */}
               <button
-                className={`rounded-2xl px-2 py-3 border text-xs text-productPrice ${
+                className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
                   priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                 }`}
               >