update

src/App.js

@@ -31,8 +31,8 @@ function App() {
       {/* <BlogDesign5 /> */}
       {/* <BlogDesign6 /> */}
       {/* <HeaderDesign1 /> */}
-      {/* <ContactInfoSection /> */}
+      <ContactInfoSection />
-      <FooterDesign1 />
+      {/* <FooterDesign1 /> */}
     </div>
   );
 }

src/components/contactInfoSection/ContactInfoSection.js

@@ -8,9 +8,15 @@ import customerSupport from "../../assets/icons/customer-support.png";
 import lightGreenLine from "../../assets/icons/light-green-line.svg";
 import lightBlueLine from "../../assets/icons/light-blue-line.svg";
 
-const ContactInfoSection = () => {
+const ContactInfoSection = ({
+  contactInfoSectionBgColor,
+  dayNumTextColor,
+  contentTextColor,
+}) => {
   return (
-    <section className="bg-midGrayBgColor relative flex flex-col sm:flex-row items-center justify-center p-4">
+    <section
+      className={`relative flex flex-col sm:flex-row items-center justify-center p-4 ${contactInfoSectionBgColor}`}
+    >
       {/* line */}
       <img
         src={lightBlueLine}
@@ -25,21 +31,23 @@ const ContactInfoSection = () => {
         className="w-20 cursor-pointer customer-support"
       />
       <ReactTooltip place="bottom" type="dark" effect="float" />
-      <p className="mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm text-darkCrimsonTextColor leading-6">
+      <p
-        <span className="text-lightBlueTextColor2">7 </span>
+        className={`mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm leading-6 ${contentTextColor}`}
+      >
+        <span className={`${dayNumTextColor}`}>7 </span>
         روز هفته
-        <span className="text-lightBlueTextColor2"> 24 </span>
+        <span className={`${dayNumTextColor}`}> 24 </span>
         ساعته
         <br />
         منتظر شنیدن صدای گرمتان هستیم
       </p>
       <div className="flex flex-col mr-0 sm:mr-10 mt-5 sm:mt-0">
-        <a href="tel:021654412" className="text-sm text-darkCrimsonTextColor">
+        <a href="tel:021654412" className={`text-sm ${contentTextColor}`}>
           021654412
         </a>
         <a
           href="mailto:webmaster@example.com"
-          className="text-sm text-darkCrimsonTextColor"
+          className={`text-sm ${contentTextColor}`}
         >
           info@danovin.ir
         </a>
@@ -55,3 +63,9 @@ const ContactInfoSection = () => {
 };
 
 export default ContactInfoSection;
+
+ContactInfoSection.defaultProps = {
+  contactInfoSectionBgColor: "bg-midGrayBgColor",
+  dayNumTextColor: "text-lightBlueTextColor2",
+  contentTextColor: "text-darkCrimsonTextColor",
+};

src/components/footer/design1/FooterDesign1.js

@@ -7,60 +7,92 @@ import samandehi from "../../../assets/images/samandehi-pic.svg";
 
 import lightBlueLine from "../../../assets/icons/light-blue-line.svg";
 
-const FooterDesign1 = () => {
+const FooterDesign1 = ({ footerMenuItemsColor, footerBgColor }) => {
   return (
-    <footer className="bg-white p-6 flex flex-col md:flex-row justify-around items-start md:items-start relative">
+    <footer
+      className={`p-6 flex flex-col md:flex-row justify-around items-start md:items-start relative ${footerBgColor}`}
+    >
       <div className="flex items-start">
         <ul className="mr-10">
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> لینک های اصلی</a>
           </li>
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> فروشگاه</a>
           </li>
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> در باره ما</a>
           </li>
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> پرسش های متداول</a>
           </li>
         </ul>
         <ul className="mr-10">
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> لینک های اصلی</a>
           </li>
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> فروشگاه</a>
           </li>
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> در باره ما</a>
           </li>
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> پرسش های متداول</a>
           </li>
         </ul>
         <ul className="mr-10">
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> لینک های اصلی</a>
           </li>
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> فروشگاه</a>
           </li>
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> در باره ما</a>
           </li>
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> پرسش های متداول</a>
           </li>
         </ul>
         <ul className="mr-10">
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> لینک های اصلی</a>
           </li>
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> فروشگاه</a>
           </li>
-          <li className="text-productContent font-light text-xs leading-7 hover:font-bold footer-items">
+          <li
+            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
+          >
             <a href=""> در باره ما</a>
           </li>
         </ul>
@@ -80,3 +112,8 @@ const FooterDesign1 = () => {
 };
 
 export default FooterDesign1;
+
+FooterDesign1.defaultProps = {
+  footerBgColor: "bg-white",
+  footerMenuItemsColor: "text-productContent",
+};