update

src/components/Features/index.js

@@ -8,7 +8,7 @@ import colorPalette from "./color-palette.svg";
 import hat from "./hat.svg";
 import plane from "./plane.svg";
 
-const Features = ({ functionalities }) => {
+const Features = ({ features }) => {
   return (
     <section className="bg-white border-2 border-gray-400 rounded m-7">
       {/* top */}
@@ -16,7 +16,7 @@ const Features = ({ functionalities }) => {
         امکانات و ویژگی ها
       </h2>
       <div className="w-full flex flex-wrap justify-around items-center">
-        {functionalities.map((feature, index) => (
+        {features.map((feature, index) => (
           <div className="flex flex-row w-2/5 p-5" key={index}>
             {/* 1 */}
             <div
@@ -73,7 +73,7 @@ const Features = ({ functionalities }) => {
 export default Features;
 
 Features.defaultProps = {
-  functionalities: [
+  features: [
     {
       icon: crown,
       iconBgColor: "#FFFDC4",

src/components/buttonDesign/ButtonDesign.js

@@ -55,7 +55,7 @@ const ButtonDesign = ({
       <div className="flex flex-wrap justify-around items-center">
         <div>
           <button
-            className={`flex items-center text-sm md:text-base transiton duration-200 hover:${buttonBgHoverColor} ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
+            className={`flex items-center text-sm md:text-base transiton duration-200 hover:bg-opacity-70 ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
           >
             اطلاعات بیشتر
             {leftArrowWhite && (

src/components/footer/design1/FooterDesign1.js

@@ -7,94 +7,16 @@ import samandehi from "../../../assets/images/samandehi-pic.svg";
 
 import lightBlueLine from "../../../assets/icons/light-blue-line.svg";
 
-const FooterDesign1 = ({ footerMenuItemsColor, footerBgColor }) => {
+const FooterDesign1 = ({ footerItems }) => {
   return (
-    <footer
+    <footer className="p-6 flex flex-col md:flex-row justify-around items-start md:items-start relative">
-      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
+          {footerItems.map((footerItem, index) => (
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
+            <li className="font-light text-xs leading-7 footer-items">
-          >
+              <a href="#">{footerItem.name}</a>
-            <a href=""> لینک های اصلی</a>
+            </li>
-          </li>
+          ))}
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> فروشگاه</a>
-          </li>
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> در باره ما</a>
-          </li>
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> پرسش های متداول</a>
-          </li>
-        </ul>
-        <ul className="mr-10">
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> لینک های اصلی</a>
-          </li>
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> فروشگاه</a>
-          </li>
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> در باره ما</a>
-          </li>
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> پرسش های متداول</a>
-          </li>
-        </ul>
-        <ul className="mr-10">
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> لینک های اصلی</a>
-          </li>
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> فروشگاه</a>
-          </li>
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> در باره ما</a>
-          </li>
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> پرسش های متداول</a>
-          </li>
-        </ul>
-        <ul className="mr-10">
-          <li
-            className={`font-light text-xs leading-7 footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> لینک های اصلی</a>
-          </li>
-          <li
-            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> فروشگاه</a>
-          </li>
-          <li
-            className={`font-light text-xs leading-7 hover:font-bold footer-items ${footerMenuItemsColor}`}
-          >
-            <a href=""> در باره ما</a>
-          </li>
         </ul>
       </div>
       <div className="flex items-center mt-10 md:mt-0">
@@ -114,6 +36,18 @@ const FooterDesign1 = ({ footerMenuItemsColor, footerBgColor }) => {
 export default FooterDesign1;
 
 FooterDesign1.defaultProps = {
-  footerBgColor: "bg-white",
+  footerItems: [
-  footerMenuItemsColor: "text-productContent",
+    {
+      name: "لینک های اصلی",
+    },
+    {
+      name: "فروشگاه",
+    },
+    {
+      name: "در باره ما",
+    },
+    {
+      name: "پرسش های متداول",
+    },
+  ],
 };