diff --git a/src/App.js b/src/App.js index fe0a5f8..06a2329 100644 --- a/src/App.js +++ b/src/App.js @@ -16,7 +16,7 @@ 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"; +import Features from "./components/Features/index"; import Feedback from "./components/Feedback/index"; function App() { @@ -39,7 +39,7 @@ function App() { */} {/* */} {/* */} - + ); diff --git a/src/components/Features/box.svg b/src/components/Features/box.svg new file mode 100644 index 0000000..7212aee --- /dev/null +++ b/src/components/Features/box.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/components/Features/cake.svg b/src/components/Features/cake.svg new file mode 100644 index 0000000..568bd0d --- /dev/null +++ b/src/components/Features/cake.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/Features/color-palette.svg b/src/components/Features/color-palette.svg new file mode 100644 index 0000000..39a4f42 --- /dev/null +++ b/src/components/Features/color-palette.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/crown-icon.svg b/src/components/Features/crown-icon.svg similarity index 100% rename from src/assets/icons/crown-icon.svg rename to src/components/Features/crown-icon.svg diff --git a/src/components/Features/hat.svg b/src/components/Features/hat.svg new file mode 100644 index 0000000..0eb9c4b --- /dev/null +++ b/src/components/Features/hat.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Features/index.js b/src/components/Features/index.js new file mode 100644 index 0000000..0b24d22 --- /dev/null +++ b/src/components/Features/index.js @@ -0,0 +1,125 @@ +import React from "react"; +import Tag from "../Tag"; + +import crown from "./crown-icon.svg"; +import box from "./box.svg"; +import cake from "./cake.svg"; +import colorPalette from "./color-palette.svg"; +import hat from "./hat.svg"; +import plane from "./plane.svg"; + +const Features = ({ functionalities }) => { + return ( +
+ {/* top */} +

+ امکانات و ویژگی ها +

+
+ {functionalities.map((feature, index) => ( +
+ {/* 1 */} +
+ +
+ {/* 2 */} +
+
+

{feature.title}

+ + {feature.status} + +
+

+ {feature.content} +

+
+
+ ))} +
+ {/* footer */} +
+
+

+ هزاران درصد تحفیف +

+

+ با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار + شوید +

+
+ +
+
+ ); +}; + +export default Features; + +Features.defaultProps = { + functionalities: [ + { + icon: crown, + iconBgColor: "#FFFDC4", + title: "قابلیت امتیاز دهی", + status: "جدید", + content: + "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", + }, + { + icon: box, + iconBgColor: "#CEC4FF", + title: "قابلیت انتخاب رنگ دلخواه", + status: "جدید", + content: + "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", + }, + { + icon: cake, + iconBgColor: "#C4FFF7", + title: "یادآوری جشن تولد", + status: "جدید", + content: + "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", + }, + { + icon: colorPalette, + iconBgColor: "#FFC4EB", + title: "انتخاب سطح و پایه تحصیلی", + status: "جدید", + content: + "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", + }, + { + icon: hat, + iconBgColor: "#C4FFE2", + title: "حالت پرواز", + status: "جدید", + content: + "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", + }, + { + icon: plane, + iconBgColor: "#E5FFC4", + title: "نحوه ارسال جعبه خاطرات", + status: "جدید", + content: + "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.", + }, + ], +}; diff --git a/src/components/Features/plane.svg b/src/components/Features/plane.svg new file mode 100644 index 0000000..1b1a300 --- /dev/null +++ b/src/components/Features/plane.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/functionality/Functionality.js b/src/components/functionality/Functionality.js deleted file mode 100644 index 193f36d..0000000 --- a/src/components/functionality/Functionality.js +++ /dev/null @@ -1,124 +0,0 @@ -import React from "react"; -import Tag from "../Tag"; - -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, - productTags, -}) => { - return ( -
-
-

- {componentTitle} -

-
-
-
- -
-
-
-

- {functionalityTitle} -

- - {functionalityTag} - - {/* {productTags.map((item, index) => ( - - ))} */} -
-

- قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا - به جامعه هدف کارکنان کمک نمایید. -

-
-
-
-
-
-
-

- {footerTitle} -

-

- {footerExplanation} -

-
- -
-
- ); -}; - -export default Functionality; - -Functionality.defaultProps = { - componentTitle: "امکانات و ویژگی های پلتفرم", - functionalityTitle: "قابلیت امتیاز دهی", - functionalityTag: "جدید", - // productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"], - 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-50", - - 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", -};