Footer Styled And Added A "Has Header" Property

src/assets/icons/vuesax-linear-call-calling.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="55.985" height="55.985" viewBox="0 0 55.985 55.985">
+  <g id="vuesax_linear_call-calling" data-name="vuesax/linear/call-calling" transform="translate(-172 -188)">
+    <g id="call-calling" transform="translate(172 188)">
+      <g id="call-calling-2" data-name="call-calling" transform="translate(4.665 4.665)">
+        <path id="Vector" d="M46.584,38.093A5.937,5.937,0,0,1,46,40.636a9.625,9.625,0,0,1-1.586,2.379,10.517,10.517,0,0,1-3.826,2.753,11.714,11.714,0,0,1-4.549.886,19.44,19.44,0,0,1-7.6-1.7,40.972,40.972,0,0,1-8.025-4.619A67.066,67.066,0,0,1,12.76,33.8a66.281,66.281,0,0,1-6.508-7.628A41.588,41.588,0,0,1,1.68,18.219,19.648,19.648,0,0,1,0,10.591a12.067,12.067,0,0,1,.84-4.5,10.737,10.737,0,0,1,2.683-3.9A6.835,6.835,0,0,1,8.374,0a4.384,4.384,0,0,1,1.89.42,3.8,3.8,0,0,1,1.563,1.306l5.412,7.628a7.983,7.983,0,0,1,.933,1.633A3.687,3.687,0,0,1,18.5,12.41a3.167,3.167,0,0,1-.49,1.656A7.934,7.934,0,0,1,16.7,15.723l-1.773,1.843a1.248,1.248,0,0,0-.373.933,2.118,2.118,0,0,0,.07.537c.07.187.14.327.187.467a19.358,19.358,0,0,0,2.169,2.986c1.05,1.213,2.169,2.449,3.382,3.686,1.26,1.236,2.473,2.379,3.709,3.429a17.9,17.9,0,0,0,3.009,2.146c.117.047.257.117.42.187a1.611,1.611,0,0,0,.583.093,1.283,1.283,0,0,0,.956-.4l1.773-1.75a7.157,7.157,0,0,1,1.68-1.306,3.106,3.106,0,0,1,1.656-.49,3.723,3.723,0,0,1,1.423.3,9.022,9.022,0,0,1,1.633.91l7.721,5.482a3.538,3.538,0,0,1,1.283,1.493A4.786,4.786,0,0,1,46.584,38.093Z" transform="translate(0)" fill="none" stroke="#196ec0" stroke-width="4"/>
+        <path id="Vector-2" data-name="Vector" d="M8.165,8.165c0-1.4-1.1-3.546-2.729-5.3A7.968,7.968,0,0,0,0,0" transform="translate(30.325 8.165)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
+        <path id="Vector-3" data-name="Vector" d="M16.329,16.329A16.317,16.317,0,0,0,0,0" transform="translate(30.325)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
+      </g>
+      <path id="Vector-4" data-name="Vector" d="M0,0H55.985V55.985H0Z" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/Footer/index.js

@@ -1,43 +1,81 @@
 import React from "react";
 import _ from "lodash";
 
-import enamad from "./enamad-pic.svg";
+// import enamadlogo from './enamad-pic.svg';
-import samandehi from "./samandehi-pic.svg";
+import callIcon from '../../assets/icons/vuesax-linear-call-calling.svg';
+import samandehi from './samandehi-pic.svg';
 
 import lightBlueLine from "./light-blue-line.svg";
 
-const FooterDesign1 = ({ color, bg, links }) => {
+
+
+const FooterDesign1 = ({ color, bg, links, hasHeader }) => {
+
+  const enamad =
+    '<a referrerpolicy="origin" target="_blank" href="https://trustseal.enamad.ir/?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN"><img referrerpolicy="origin" src="https://Trustseal.eNamad.ir/logo.aspx?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN" alt="" style="cursor:pointer" id="x8oNSO7tTnqAniyPpPyN"></a>';
   return (
+    <>
+    {hasHeader ?
+    <div className=" bg-gray-100 flex items-center justify-center py-6 text-blue52">
+     
+      <div className="flex items-center ml-8 ">
+        <img src={callIcon} className="p-2"/>
+        <div>
+          <h1 className="text-3xl text-bold mb-2 font-black">
+            <span className=" text-blueC0">7</span> روز هفته <span className="font-black text-blueC0">24</span> ساعته
+          </h1>
+          <p className="text-xl font-light text-blue-700">منتظر شنیدن صدای گرمتان هستیم</p>
+        </div>
+      </div>
+
+      <div className="mr-8 text-lg font-black">
+          <h1 className="text-left mb-2">654412 021</h1>
+          <h1>Info[at]danovin.ir</h1>
+      </div>
+   
+    </div>
+     : null}
     <footer
-      className={`flex flex-col md:flex-row justify-around items-start md:items-start relative shadow-md ${bg}`}
+      className={`flex flex-col bg-gray-200 py-10 md:flex-row justify-around items-start md:items-start relative shadow-md ${bg}`}
     >
+      <div className="w-11/12 flex justify-between">
       <div className="flex items-start">
         <>
           {
-            links.map((section, index) => <ul className="mr-10" key={index}>
+            links.map((section, index) => <ul className={index != 0 ? 'mr-12' : ''} key={index}>
               {
                 section.map((link, index) => <li
-                className={`font-light text-xs leading-7 hover:font-bold footer-items ${color}`}
+                className={`font-light text-xs leading-7 hover:font-bold  ${color}`}
                 key={index}
               >
-                <a href="">{link}</a>
+                <a href="" className={`${index == 0 ? ' text-sm font-bold' : ''}`}>{link}</a>
               </li>)
               }
             </ul>)
           }
         </>
       </div>
-      <div className="flex items-center mt-10 md:mt-0">
+      <div className="flex items-center justify-between mt-10 md:mt-0">
-        <img src={enamad} alt="" className="w-28 ml-10" />
+      <div
-        <img src={samandehi} alt="" className="w-28" />
+        dangerouslySetInnerHTML={{
+          __html: enamad,
+        }}
+        className="w-28  p-2 rounded-md bg-gray-300 mx-6"
+      >
+
+      </div>
+        <img src={samandehi} alt="" className="w-28  p-2 rounded-md bg-gray-300 mr-6" />
+      </div>
       </div>
-      {/* line */}
+      {/* line
       <img
         src={lightBlueLine}
         alt=""
         className="hidden sm:block absolute bottom-5 left-20"
-      />
+      /> */}
+      
     </footer>
+    </>
   );
 };
 

src/router.js

@@ -349,7 +349,7 @@ function Router({
             />
             
           </Routes>
-          {headerOptions?.shown && <FooterDesign1 />}
+          {headerOptions?.shown && <FooterDesign1  hasHeader/>}
         </BrowserRouter>
       </div>
     </div>

src/views/Home/Desktop/index.js

@@ -26,7 +26,7 @@ return (
         <Banners/>
         <SalesContainer books={books} grades={grades}/>
         <Part2  grades={grades}/>
-        <div>
+        <div className="mb-16">
           <img src={HomeImg} />
         </div>
         <Part4 />