update

src/App.js

@@ -22,13 +22,13 @@ function App() {
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}
       {/* <CounterDesign /> */}
-      <BlogDesign1 />
-      <BlogDesign2 />
-      <BlogDesign3 />
-      <BlogDesign4 />
-      <BlogDesign5 />
-      <BlogDesign6 />
-      {/* <HeaderDesign1 /> */}
+      {/* <BlogDesign1 /> */}
+      {/* <BlogDesign2 /> */}
+      {/* <BlogDesign3 /> */}
+      {/* <BlogDesign4 /> */}
+      {/* <BlogDesign5 /> */}
+      {/* <BlogDesign6 /> */}
+      <HeaderDesign1 />
     </div>
   );
 }

src/components/Header/desgin1/HeaderDesign1.js

@@ -38,6 +38,8 @@ const HeaderDesign1 = ({
   whiteIconCart,
   whiteIconHamburgerMenu,
   darkIconHamburgerMenu,
+  headerDivider,
+  headerDividerColor,
 }) => {
   return (
     <header
@@ -63,6 +65,9 @@ const HeaderDesign1 = ({
           </div>
         </div>
       )}
+      {headerDivider && (
+        <div className="border-b border-lightGrayBorderColor mb-5"></div>
+      )}
       <div className="flex justify-between items-center relative">
         <div className="ml-10">
           <span className={`text-sm font-bold ml-4 ${siteNameTextColor}`}>
@@ -113,7 +118,7 @@ const HeaderDesign1 = ({
               <input
                 type="text"
                 placeholder="نام کالا را جستجو کنید..."
-                className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400"
+                className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor	placeholder-gray-400 focus:outline-none"
               />
             </div>
           </div>
@@ -152,6 +157,9 @@ const HeaderDesign1 = ({
           </div>
         )}
       </div>
+      {headerDivider && (
+        <div className="border-b border-lightGrayBorderColor mt-5"></div>
+      )}
       {bottomHeader && (
         <div className="flex items-center mt-4 relative w-full ">
           <div className="ml-10 flex items-center">
@@ -234,6 +242,9 @@ HeaderDesign1.defaultProps = {
   btnPY: "py-2",
   btnPX: "px-8",
 
+  headerDivider: true,
+  headerDividerColor: "border-lightGrayBorderColor",
+
   topHeader: true,
   bottomHeader: true,
 
@@ -244,7 +255,7 @@ HeaderDesign1.defaultProps = {
   // icons
   loginBtn: false,
 
-  whiteIconCart: true,
+  whiteIconCart: false,
   darkCrimsonIconCart: false,
 
   whiteIconHamburgerMenu: false,

tailwind.config.js

@@ -60,6 +60,7 @@ module.exports = {
       productDesignBorderColor: "#F3F3F3",
       lightBlueBorderColor: "#06BACE",
       grayBorderColor: "#C3C3C3",
+      lightGrayBorderColor: "#DBDBDB88",
       lightOrangeBorderColor: "#F7B605",
       lightYellowBorderColor: "#CFFF2D",
       lightGreenBorderColor: "#5DCE06",