update

src/App.js

@@ -16,27 +16,29 @@ import ContactInfoSection from "./components/contactInfoSection/ContactInfoSecti
 import FooterDesign1 from "./components/footer/design1/FooterDesign1";
 import Testttt from "./components/testtttt/Testttt";
 import Design2D from "./components/Design2D/Design2D";
+import Functionality from "./components/functionality/Functionality";
 
 function App() {
   return (
     <div className="App">
-      <ProductDesign />
+      {/* <ProductDesign /> */}
-      <VodProductDesign />
+      {/* <VodProductDesign /> */}
-      <BookDesign />
+      {/* <BookDesign /> */}
-      <ButtonDesign />
+      {/* <ButtonDesign /> */}
-      <ProductTags />
+      {/* <ProductTags /> */}
-      <CounterDesign />
+      {/* <CounterDesign /> */}
-      <BlogDesign1 />
+      {/* <BlogDesign1 /> */}
-      <BlogDesign2 />
+      {/* <BlogDesign2 /> */}
-      <BlogDesign3 />
+      {/* <BlogDesign3 /> */}
-      <BlogDesign4 />
+      {/* <BlogDesign4 /> */}
-      <BlogDesign5 />
+      {/* <BlogDesign5 /> */}
-      <BlogDesign6 />
+      {/* <BlogDesign6 /> */}
-      <HeaderDesign1 />
+      {/* <HeaderDesign1 /> */}
-      <ContactInfoSection />
+      {/* <ContactInfoSection /> */}
-      <FooterDesign1 />
+      {/* <FooterDesign1 /> */}
       {/* <Testttt /> */}
-      <Design2D />
+      {/* <Design2D /> */}
+      <Functionality />
     </div>
   );
 }

src/assets/icons/crown-icon.svg

@@ -0,0 +1,6 @@
+<svg id="crown" xmlns="http://www.w3.org/2000/svg" width="71.602" height="71.602" viewBox="0 0 71.602 71.602">
+  <path id="Vector" d="M44.1,50.7H16.054a3.519,3.519,0,0,1-3.073-2.178L.63,13.977c-1.76-4.952.3-6.474,4.535-3.431L16.8,18.87a3.144,3.144,0,0,0,4.982-1.522L27.033,3.356c1.671-4.475,4.445-4.475,6.116,0L38.4,17.349a3.121,3.121,0,0,0,4.952,1.522l10.919-7.787c4.654-3.341,6.892-1.641,4.982,3.759L47.2,48.585A3.644,3.644,0,0,1,44.1,50.7Z" transform="translate(5.724 5.922)" fill="none" stroke="#c0c700" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H32.818" transform="translate(19.392 65.635)" fill="none" stroke="#c0c700" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
+  <path id="Vector-3" data-name="Vector" d="M0,0H14.917" transform="translate(28.342 41.768)" fill="none" stroke="#c0c700" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
+  <path id="Vector-4" data-name="Vector" d="M0,0H71.6V71.6H0Z" fill="none" opacity="0"/>
+</svg>

src/components/functionality/Functionality.js

@@ -0,0 +1,118 @@
+import React from "react";
+
+import crown from "../../assets/icons/crown-icon.svg";
+
+const Functionality = ({
+  componentTitle,
+  componentTitleTextColor,
+  functionalityTitle,
+  functionalityTitleTextColor,
+  functionalityTag,
+  functionalityTagTextColor,
+  functionalityTagBgColor,
+  functionalityExcerptTextColor,
+  containerBgColor,
+  functionalityIconPadding,
+  functionalityIconBgColor,
+  functionalityIconAlignment,
+  footerTitle,
+  footerExplanation,
+  buttonTitle,
+  footerTitleTextColor,
+  footerExplanationTextColor,
+  buttonTitleTextColor,
+  buttonTitleBgColor,
+  buttonTitleBorder,
+  buttonTitleBorderColor,
+  buttonTitleHoverBgColor,
+}) => {
+  return (
+    <section>
+      <div className="w-11/12 mx-auto mt-7 bg-white p-7  shadow-sm">
+        <h2 className={`text-lg font-bold ${componentTitleTextColor}`}>
+          {componentTitle}
+        </h2>
+        <div className="flex justify-around items-center my-4">
+          <div
+            className={`flex flex-col sm:flex-row ${functionalityIconAlignment} justify-between p-7 rounded shadow-sm ${containerBgColor}`}
+          >
+            <div
+              className={`rounded ${functionalityIconPadding} ${functionalityIconBgColor}`}
+            >
+              <img src={crown} alt="" className="w-10 h-10" />
+            </div>
+            <div className="mt-4 sm:mt-0 mr-4 flex flex-col">
+              <div className="flex items-center">
+                <p className={`text-base ${functionalityTitleTextColor}`}>
+                  {functionalityTitle}
+                </p>
+                <span
+                  className={`mr-4 text-sm px-2 py-1 rounded-lg ${functionalityTagTextColor} ${functionalityTagBgColor}`}
+                >
+                  {functionalityTag}
+                </span>
+              </div>
+              <p
+                className={`mt-2 text-justify text-sm leading-7  ${functionalityExcerptTextColor}`}
+              >
+                قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا
+                به جامعه هدف کارکنان کمک نمایید.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="w-11/12 mx-auto bg-rangeBgColor p-10 flex items-center justify-between">
+        <div>
+          <h2 className={`font-semibold text-base ${footerTitleTextColor}`}>
+            {footerTitle}
+          </h2>
+          <p className={`mt-4 text-sm ${footerExplanationTextColor}`}>
+            {footerExplanation}
+          </p>
+        </div>
+        <button
+          className={`px-7 py-3 text-base rounded-md hover:${buttonTitleHoverBgColor} ${buttonTitleTextColor} ${buttonTitleBgColor} ${buttonTitleBorder} ${buttonTitleBorderColor}`}
+        >
+          {buttonTitle}
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default Functionality;
+
+Functionality.defaultProps = {
+  componentTitle: "امکانات و ویژگی های پلتفرم",
+  functionalityTitle: "قابلیت امتیاز دهی",
+  functionalityTag: "جدید",
+  functionalityExcerpt: "جدید",
+  footerTitle: "هزاران درصد تحفیف",
+  footerExplanation:
+    "با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار شوید",
+  buttonTitle: "مشاهده امکانات",
+
+  componentTitleTextColor: "text-productPrice",
+  functionalityTitleTextColor: "text-lightBlueTextColor",
+  functionalityTagTextColor: "text-productTitle",
+  functionalityTagBgColor: "bg-lightBlueBookBg",
+  functionalityExcerptTextColor: "text-grayTextColor",
+  containerBgColor: "bg-likeBtnBg",
+
+  functionalityIconPadding: "p-5",
+  functionalityIconBgColor: "bg-yellow-100",
+
+  footerTitleTextColor: "text-productTitle",
+  footerExplanationTextColor: "text-productTitle",
+  buttonTitleTextColor: "text-lightBlueTextColor",
+  buttonTitleBgColor: "bg-white",
+  buttonTitleHoverBgColor: "bg-blueBgColor",
+  buttonTitleBorder: "border-2",
+  buttonTitleBorderColor: "border-lightBlueBorderColor",
+
+  // برای زمانی که ایکن سمت راست بک گراند نداره و میخواهیم که از بالا با تایتل سمت چپ شروع شود و نه از وسط
+  // items-start
+  // items-center
+  functionalityIconAlignment: "items-start",
+};