reza fixed features

src/App.scss

@@ -3,6 +3,7 @@
 @tailwind utilities;
 
 @import "./views/Home/layouts/Graphic/index.scss";
+@import "./views/FeaturesPage/layouts/Graphic/index.scss";
 
 .rtl {
   direction: rtl;

src/components/Navbar/index.js

@@ -25,10 +25,22 @@ function Navbar({ isDark, offline }) {
       }}
     >
       <div className="w-10/12 flex items-center justify-end gap-10">
-        <Link to="#" className="text-1x text-primary-4 font-4">
+        <div
+          to="#"
+          className="text-1x text-primary-4 font-4 cursor-pointer"
+          onClick={() =>
+            window.scrollTo({
+              top: document.body.scrollHeight,
+              behavior: "smooth",
+            })
+          }
+        >
           تماس با ما
-        </Link>
+        </div>
-        <Link to="#" className="px-6 py-2 rounded-full text-1x bg-primary-4 text-white">
+        <Link
+          to="#"
+          className="px-6 py-2 rounded-full text-1x bg-primary-4 text-white"
+        >
           مشاهده دمو
         </Link>
       </div>

src/router.js

@@ -5,6 +5,7 @@ import { developer } from "./redux/actions";
 
 //components
 import Home from "./views/Home";
+import FeaturesPage from "./views/FeaturesPage";
 import Dialog from "./components/Dialog";
 import Navbar from "./components/Navbar";
 
@@ -80,17 +81,8 @@ export const Router = ({
         <BrowserRouter>
           {headerOptions?.shown && <Navbar headerOptions={headerOptions} />}
           <Routes>
-            <Route
+            <Route path="/" exact element={<Home />} />
-              path="/"
+            <Route path="/features" exact element={<FeaturesPage />} />
-              exact
-              element={
-                <Home
-                  headerOptions={{
-                    shown: true,
-                  }}
-                />
-              }
-            />
             <Route path="*" exact element={<div>hichi nist :</div>} />
           </Routes>
         </BrowserRouter>

src/views/FeaturesPage/index.js

@@ -0,0 +1,105 @@
+import React from "react";
+import { connect } from "react-redux";
+import { developer } from "../../redux/actions";
+
+// components
+import Graphic from "./layouts/Graphic";
+import Features from "../Home/layouts/Features";
+import Form from "../Home/layouts/Form";
+import Footer from "../../components/Footer";
+import Comments from "./layouts/Comments";
+
+//assets
+import conditionImage from "../Home/layouts/Features/assets/Condition.svg";
+import dataSavingImage from "../Home/layouts/Features/assets/DataSaving.svg";
+import interactiveImage from "../Home/layouts/Features/assets/interactive.svg";
+import responsiveImage from "../Home/layouts/Features/assets/responsive.svg";
+import moneyGainImage from "../Home/layouts/Features/assets/moneyGain.svg";
+import multipleStoryImage from "../Home/layouts/Features/assets/multipleStory.svg";
+import specialApplicationImage from "../Home/layouts/Features/assets/specialApplication.svg";
+import efficientlyContentImage from "../Home/layouts/Features/assets/efficientlyContent.svg";
+
+export const FeaturesPage = ({
+  device,
+  setHeaderOptions,
+  isDesktop,
+  uselessProps,
+}) => {
+  React.useEffect(() => {
+    if (isDesktop) {
+      setHeaderOptions({ shown: true });
+    }
+  }, []);
+
+  const features = React.useMemo(() => {
+    return [
+      {
+        title: "امکان مشاهده در تلفن همراه و دسکتاپ",
+        description:
+          "فرق نمی‌کند کاربران شما با تلفن‌های همراه یا کامپیوترهای شخصی خود وارد حسابشان شوند، دسترسی از هر مکان و زمانی  امکان پذیر است",
+        image: responsiveImage,
+      },
+      {
+        title: "امکان ساختن و تعریف چندیت شرط مختلف",
+        description:
+          "همیشه چند پایان متفاوت بهتر از یک پایان معمولی است. شما می توانید برای محتوای خود چندین شرط مختلف تعریف کنید",
+        image: conditionImage,
+      },
+      {
+        title: "امکان تعامل پذیری بالا با کاربران",
+        description:
+          "رابط و تجربه کاربری بسیار زیبا و آسان  این قابلیت را به کاربران شما می‌دهد تا در سریعترین زمان ممکن با پلتفرم شما ارتباط برقرار کنند",
+        image: interactiveImage,
+      },
+      {
+        title: "جمع آوری کلان داده از شرکت کنندگان",
+        description:
+          "به وسیله ابزارهای مختلفی که در اختیار شما قرار می‌گیرد می توانید اطلاعات کاربران خود را مورد بررسی و ارزیابی قرار دهید",
+        image: dataSavingImage,
+      },
+      {
+        title: "قابلیت انتشار چندین داستان بازی",
+        description:
+          "پلتفرم داستان بازی این قابلیت را دارد تا شما بعنوان ناشر چندین اثر از خودتان یا مجموعه منتشر کنید ",
+        image: multipleStoryImage,
+      },
+      {
+        title: "قابلیت انتشار اپلیکیشن اختصاصی",
+        description:
+          "همیشه چند پایان متفاوت بهتر از یک پایان معمولی است. شما می توانید برای محتوای خود چندین شرط مختلف تعریف کنید ",
+        image: specialApplicationImage,
+      },
+      {
+        title: "سیستم جالب درآمد زایی موثر و کارا",
+        description:
+          "برای هر یک از پروژه‌های خود در داستان بازی اقدام دریافت اشتراک و فروش به صورت هر اپیزود به کاربران یا جامعه هدف خود کنید",
+        image: moneyGainImage,
+      },
+      {
+        title: "تولید محتوای خلاقانه و اختصای برای شما",
+        description:
+          "اگر یک ایده جالب و نوآورانه دارید می توانید از تیم قدرتمند تولید مختوای داستان بازی استفاده  کنید و بقیه کارها رو به ما بسپارید",
+        image: efficientlyContentImage,
+      },
+    ];
+  }, [uselessProps]);
+  return (
+    <main className="flex-1 flex flex-col items-center">
+      <Graphic />
+      <Features itemsProps={features} />
+      <Comments />
+      <Form />
+      <Footer />
+    </main>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  isDesktop: state.developer.device === "desktop",
+});
+
+const mapDispatchToProps = {
+  setHeaderOptions: developer.setHeaderOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(FeaturesPage);

src/views/FeaturesPage/layouts/Comments/index.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+export const Comments = (props) => {
+  return (
+    <div></div>
+  )
+}
+
+const mapStateToProps = (state) => ({})
+
+const mapDispatchToProps = {}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Comments)

src/views/FeaturesPage/layouts/Graphic/assets/path1.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1629.587" height="538.404" viewBox="0 0 1629.587 538.404">
+  <path id="Path_216" data-name="Path 216" d="M1267.338,769.717s175.53-66.859,199.468-31.446c22.371,33.094-16.755,103.432-36.108,115.932-86,55.55-275,89.287-367.355,107.228-134.829,26.191-123.72-102.625-233.785-115.568s-82.5,92.688-206.472,63.8S375.645,670.577,375.645,670.577,387.673,459.644,125.354,493.07-133.2,794.145-133.2,794.145" transform="matrix(-0.999, -0.035, 0.035, -0.999, 1459.161, 1019.302)" fill="none" stroke="#eee" stroke-linecap="round" stroke-width="7" stroke-dasharray="13 24"/>
+</svg>

src/views/FeaturesPage/layouts/Graphic/assets/path2.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="478.301" height="547.604" viewBox="0 0 478.301 547.604">
+  <path id="Path_215" data-name="Path 215" d="M1466,984.981S1353.753,1065,1280.256,1018.75c-39.541-24.884,55.521-100.932,35.825-152.505-6.3-16.487-51.325-43.066-94.352-41.077-71.524,3.306-152.885,41.253-151.661,8.466,2.7-72.443,135.243-136.047,179.051-188.3,24.633-29.382-28.261-51.8-27.39-78.49,2.412-73.931,129.627-33.893,139.135-50.172,18.806-32.2,161.006,39.691,161.006,39.691" transform="matrix(-0.999, -0.035, 0.035, -0.999, 1508.02, 1089.471)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="7" stroke-dasharray="13 22" opacity="0.12"/>
+</svg>

src/views/FeaturesPage/layouts/Graphic/index.js

@@ -0,0 +1,149 @@
+import React from "react";
+import { connect } from "react-redux";
+import TypeAnimation from "react-type-animation";
+
+// assets
+import avatarImage from "./assets/avatar.svg";
+
+export const Graphic = ({ uselessProps }) => {
+  const [animationFlags, setAnimationFlags] = React.useState({
+    title1: false,
+    title2: false,
+    title3: false,
+    description: false,
+    message1: false,
+    message2: false,
+    message3: false,
+    paths: false,
+  });
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        title1: true,
+        title2: true,
+        title3: true,
+      });
+    }, 100);
+
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        title1: true,
+        title2: true,
+        title3: true,
+        description: true,
+      });
+    }, 1000);
+
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        title1: true,
+        title2: true,
+        title3: true,
+        description: true,
+        message1: true,
+      });
+    }, 1500);
+
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        title1: true,
+        title2: true,
+        title3: true,
+        description: true,
+        message1: true,
+        message2: true,
+      });
+    }, 2500);
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        title1: true,
+        title2: true,
+        title3: true,
+        description: true,
+        message1: true,
+        message2: true,
+        message3: true,
+      });
+    }, 3500);
+  }, []);
+
+  const typing = React.useMemo(() => {
+    return (
+      <TypeAnimation
+        cursor={true}
+        repeat={1}
+        sequence={[
+          "شاید برای شما هم اتفاق افتاده باشه که یک داستان درجه یک و هیجان انگیز خونده باشید. اما اینجا داستان فرق می‌کنه این بار شما در مرکز اتفاقات هیجان انگیز هستید",
+          12000,
+          ,
+        ]}
+        wrapper="p"
+        className="text-2x text-primary-1 font-2 mt-10"
+      />
+    );
+  }, [uselessProps]);
+
+  return (
+    <header
+      className="w-10/12 flex relative gap-10"
+      style={{
+        height: "calc( 100vh - 100vh / 12)",
+      }}
+    >
+      <div className="flex-1 flex flex-col justify-center">
+        {animationFlags.title1 && (
+          <h1 className="font-7 text-10x text-primary-1 right-to-left transition-all">
+            یک ابزار حرفه‌ای
+          </h1>
+        )}
+        {animationFlags.title2 && (
+          <h1 className="font-7 text-10x text-primary-1 left-to-right transition-all">
+            برای تولید محتوای
+          </h1>
+        )}
+        {animationFlags.title3 && (
+          <h1 className="font-7 text-10x text-primary-1 right-to-left transition-all">
+            هوشمند
+          </h1>
+        )}
+        {animationFlags.description && typing}
+      </div>
+      <div className="flex-1 flex flex-col justify-center gap-16">
+        {animationFlags.message1 && (
+          <div className="flex self-end gap-6 left-to-right">
+            <p className="text-1x leading-9 font-2 bg-secondary-7 py-5 px-4 rounded-b-3xl rounded-tr-3xl text-white">
+              من اینجام. چطور می تونم بهت کمک کنم ؟
+            </p>
+            <img src={avatarImage} alt="آواتار" style={{ width: "4.94vw" }} />
+          </div>
+        )}
+        {animationFlags.message2 && (
+          <p className="self-start text-1x leading-9 font-2 bg-gray-700 py-5 pr-4 pl-16 rounded-b-3xl rounded-tl-3xl text-white left-to-right">
+            چطور می تونیم یک محتوای
+            <br /> خوب برای مخاطبانم تولید و تهیه کنم؟
+          </p>
+        )}
+        {animationFlags.message3 && (
+          <div className="flex self-end gap-6 left-to-right">
+            <p className="text-1x leading-9 font-2 bg-secondary-7 py-5 px-4 rounded-b-3xl rounded-tr-3xl text-white">
+              اسکرول کن و بیا پایین و با ما آشنا شو !
+            </p>
+            <img src={avatarImage} alt="آواتار" style={{ width: "4.94vw" }} />
+          </div>
+        )}
+      </div>
+    </header>
+  );
+};
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Graphic);

src/views/FeaturesPage/layouts/Graphic/index.scss

@@ -0,0 +1,29 @@
+.left-to-right{
+  animation: leftToRight 0.7s 1;
+};
+
+.right-to-left{
+  animation: rightToLeft 0.7s 1;
+}
+
+@keyframes leftToRight {
+  0%{
+    transform: translateX(-50vw);
+    opacity: 0;
+  }
+  100%{
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+
+@keyframes rightToLeft {
+  0%{
+    transform: translateX(50vw);
+    opacity: 0;
+  }
+  100%{
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}

src/views/Home/layouts/Features/assets/efficientlyContent.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="265" height="148" viewBox="0 0 265 148">
+  <g id="Group_271" data-name="Group 271" transform="translate(-200 -1843)">
+    <path id="Path_222" data-name="Path 222" d="M5,0H85a5,5,0,0,1,5,5V88a5,5,0,0,1-5,5H5a5,5,0,0,1-5-5V5A5,5,0,0,1,5,0Z" transform="translate(338.802 1846) rotate(43)" fill="#8b8b8b"/>
+    <g id="clipboard-text" transform="translate(320.483 1893.483)">
+      <path id="Vector" d="M0,0H11.385" transform="translate(13.011 19.842)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H7.124" transform="translate(17.272 26.348)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M3.253,6.506H9.758c3.253,0,3.253-1.626,3.253-3.253C13.011,0,11.385,0,9.758,0H3.253C1.626,0,0,0,0,3.253S1.626,6.506,3.253,6.506Z" transform="translate(13.011 3.253)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-4" data-name="Vector" d="M21.143,0c5.416.293,8.132,2.293,8.132,9.726v9.758c0,6.506-1.626,9.758-9.758,9.758H9.758C1.626,29.243,0,25.99,0,19.484V9.726C0,2.309,2.716.293,8.132,0" transform="translate(4.879 6.538)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-5" data-name="Vector" d="M0,0H39.034V39.034H0Z" fill="none" opacity="0"/>
+    </g>
+    <text id="محتوای_خلاقانه" data-name="محتوای خلاقانه" transform="translate(465 1856)" fill="#939bf9" font-size="13" font-family="IRANSansX-Light, IRANSansX" font-weight="300"><tspan x="-80.353" y="0">محتوای خلاقانه</tspan></text>
+    <text id="تیم_قدرتمند_و_حرفه_ای" data-name="تیم قدرتمند و حرفه‌ای" transform="translate(440 1986)" fill="#939bf9" font-size="9" font-family="IRANSansX-Light, IRANSansX" font-weight="300"><tspan x="-78.534" y="0">تیم قدرتمند و حرفه‌ای</tspan></text>
+    <text id="پروموشن_های_موثر" data-name="پروموشن‌های موثر" transform="translate(282 1890)" fill="#939bf9" font-size="11" font-family="IRANSansX-Medium, IRANSansX" font-weight="500" opacity="0.72"><tspan x="-81.609" y="0">پروموشن‌های موثر</tspan></text>
+  </g>
+</svg>

src/views/Home/layouts/Features/assets/moneyGain.svg

@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="263.036" height="164.568" viewBox="0 0 263.036 164.568">
+  <g id="Group_270" data-name="Group 270" transform="translate(-590.82 -1834.208)">
+    <g id="Group" transform="translate(791.521 1929.938)">
+      <path id="Vector" d="M0,14.684A4.776,4.776,0,0,0,4.662,19.57H9.91A4.157,4.157,0,0,0,13.958,15.3c0-2.54-1.117-3.462-2.764-4.048l-8.4-2.931C1.145,7.733.028,6.84.028,4.271A4.174,4.174,0,0,1,4.076,0H9.324a4.776,4.776,0,0,1,4.662,4.885" transform="translate(0 2.764)" fill="none" stroke="#263204" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0V25.125" transform="translate(6.979)" fill="none" stroke="#263204" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    </g>
+    <g id="Group_269" data-name="Group 269">
+      <g id="Group_268" data-name="Group 268">
+        <rect id="Rectangle_827" data-name="Rectangle 827" width="90" height="93" rx="5" transform="translate(677 1866)" fill="#bebebe"/>
+        <g id="Group-2" data-name="Group" transform="translate(818.521 1866.938)">
+          <path id="Vector-3" data-name="Vector" d="M0,14.684A4.776,4.776,0,0,0,4.662,19.57H9.91A4.157,4.157,0,0,0,13.958,15.3c0-2.54-1.117-3.462-2.764-4.048l-8.4-2.931C1.145,7.733.028,6.84.028,4.271A4.174,4.174,0,0,1,4.076,0H9.324a4.776,4.776,0,0,1,4.662,4.885" transform="translate(0 2.764)" fill="none" stroke="#b0df2d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+          <path id="Vector-4" data-name="Vector" d="M0,0V25.125" transform="translate(6.979)" fill="none" stroke="#b0df2d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        </g>
+        <g id="Group-3" data-name="Group" transform="translate(636.521 1838.938)">
+          <path id="Vector-5" data-name="Vector" d="M0,14.684A4.776,4.776,0,0,0,4.662,19.57H9.91A4.157,4.157,0,0,0,13.958,15.3c0-2.54-1.117-3.462-2.764-4.048l-8.4-2.931C1.145,7.733.028,6.84.028,4.271A4.174,4.174,0,0,1,4.076,0H9.324a4.776,4.776,0,0,1,4.662,4.885" transform="translate(0 2.764)" fill="none" stroke="#b0df2d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+          <path id="Vector-6" data-name="Vector" d="M0,0V25.125" transform="translate(6.979)" fill="none" stroke="#b0df2d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        </g>
+        <g id="Group-4" data-name="Group" transform="translate(621.521 1921.938)">
+          <path id="Vector-7" data-name="Vector" d="M0,14.684A4.776,4.776,0,0,0,4.662,19.57H9.91A4.157,4.157,0,0,0,13.958,15.3c0-2.54-1.117-3.462-2.764-4.048l-8.4-2.931C1.145,7.733.028,6.84.028,4.271A4.174,4.174,0,0,1,4.076,0H9.324a4.776,4.776,0,0,1,4.662,4.885" transform="translate(0 2.764)" fill="none" stroke="#b0df2d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+          <path id="Vector-8" data-name="Vector" d="M0,0V25.125" transform="translate(6.979)" fill="none" stroke="#b0df2d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        </g>
+        <g id="Group-5" data-name="Group" transform="translate(679.982 1973.039)">
+          <path id="Vector-9" data-name="Vector" d="M0,7.742a2.518,2.518,0,0,0,2.458,2.576H5.225A2.192,2.192,0,0,0,7.359,8.066,1.944,1.944,0,0,0,5.9,5.931L1.472,4.386A1.934,1.934,0,0,1,.015,2.252,2.2,2.2,0,0,1,2.149,0H4.916A2.518,2.518,0,0,1,7.374,2.576" transform="translate(0 1.457)" fill="none" stroke="#5b770e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+          <path id="Vector-10" data-name="Vector" d="M0,0V13.246" transform="translate(3.68)" fill="none" stroke="#5b770e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="Group-6" data-name="Group" transform="translate(591.32 1890.539)">
+          <path id="Vector-11" data-name="Vector" d="M0,7.742a2.518,2.518,0,0,0,2.458,2.576H5.225A2.192,2.192,0,0,0,7.359,8.066,1.944,1.944,0,0,0,5.9,5.931L1.472,4.386A1.934,1.934,0,0,1,.015,2.252,2.2,2.2,0,0,1,2.149,0H4.916A2.518,2.518,0,0,1,7.374,2.576" transform="translate(0 1.457)" fill="none" stroke="#5b770e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+          <path id="Vector-12" data-name="Vector" d="M0,0V13.246" transform="translate(3.68)" fill="none" stroke="#5b770e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="Group-7" data-name="Group" transform="translate(845.982 1912.039)">
+          <path id="Vector-13" data-name="Vector" d="M0,7.742a2.518,2.518,0,0,0,2.458,2.576H5.225A2.192,2.192,0,0,0,7.359,8.066,1.944,1.944,0,0,0,5.9,5.931L1.472,4.386A1.934,1.934,0,0,1,.015,2.252,2.2,2.2,0,0,1,2.149,0H4.916A2.518,2.518,0,0,1,7.374,2.576" transform="translate(0 1.457)" fill="none" stroke="#5b770e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+          <path id="Vector-14" data-name="Vector" d="M0,0V13.246" transform="translate(3.68)" fill="none" stroke="#5b770e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="Group-8" data-name="Group" transform="translate(743.296 1834.708)">
+          <path id="Vector-15" data-name="Vector" d="M0,5.934A1.93,1.93,0,0,0,1.884,7.909H4.005A1.68,1.68,0,0,0,5.641,6.182,1.49,1.49,0,0,0,4.524,4.547l-3.4-1.185A1.482,1.482,0,0,1,.011,1.726,1.687,1.687,0,0,1,1.647,0H3.768A1.93,1.93,0,0,1,5.652,1.974" transform="translate(0 1.117)" fill="none" stroke="#5b770e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+          <path id="Vector-16" data-name="Vector" d="M0,0V10.154" transform="translate(2.82)" fill="none" stroke="#5b770e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+        <g id="Group-9" data-name="Group" transform="translate(775.641 1988.123)">
+          <path id="Vector-17" data-name="Vector" d="M0,5.934A1.93,1.93,0,0,0,1.884,7.909H4.005A1.68,1.68,0,0,0,5.641,6.182,1.49,1.49,0,0,0,4.524,4.547l-3.4-1.185A1.482,1.482,0,0,1,.011,1.726,1.687,1.687,0,0,1,1.647,0H3.768A1.93,1.93,0,0,1,5.652,1.974" transform="translate(0 1.117)" fill="none" stroke="#b0df2d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+          <path id="Vector-18" data-name="Vector" d="M0,0V10.154" transform="translate(2.82)" fill="none" stroke="#b0df2d" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        </g>
+      </g>
+      <g id="Group_264" data-name="Group 264">
+        <path id="Vector-19" data-name="Vector" d="M10.73,0V3.046c0,2.581-2.4,4.667-5.357,4.667S0,5.627,0,3.046V0C0,2.581,2.4,4.412,5.372,4.412,8.329,4.412,10.73,2.566,10.73,0Z" transform="translate(711.729 1920.294)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-20" data-name="Vector" d="M10.745,4.652a3.937,3.937,0,0,1-.57,2.041,5.515,5.515,0,0,1-4.8,2.371A5.549,5.549,0,0,1,.57,6.693,3.937,3.937,0,0,1,0,4.652,4.359,4.359,0,0,1,1.561,1.366,5.728,5.728,0,0,1,5.357,0a5.806,5.806,0,0,1,3.8,1.366A4.266,4.266,0,0,1,10.745,4.652Z" transform="translate(711.711 1911.514)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-21" data-name="Vector" d="M10.73,4.667V8.794c0,2.581-2.4,4.412-5.357,4.412S0,11.36,0,8.794V4.667C0,2.086,2.4,0,5.372,0a5.806,5.806,0,0,1,3.8,1.366A4.39,4.39,0,0,1,10.73,4.667Z" transform="translate(711.729 1911.5)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-22" data-name="Vector" d="M7.7,1.531V4.622A1.541,1.541,0,0,1,6.2,6.153H3.255A3.2,3.2,0,0,1,.014,3.346,3.014,3.014,0,0,1,.914.9,2.991,2.991,0,0,1,3.075,0H6.2A1.541,1.541,0,0,1,7.7,1.531Z" transform="translate(731.641 1909.924)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-23" data-name="Vector" d="M0,10.5v-3C0,3.421,2.461.57,6.288.09A7.987,7.987,0,0,1,7.5,0H21.009a6.862,6.862,0,0,1,1.125.075c3.872.45,6.378,3.316,6.378,7.428V9.679H25.391a3.092,3.092,0,0,0-3.061,3.346,3.2,3.2,0,0,0,3.241,2.806h2.941v2.176a7.089,7.089,0,0,1-7.5,7.5H17.257" transform="translate(709.325 1900.245)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+        <path id="Vector-24" data-name="Vector" d="M0,0H36.015V36.015H0Z" transform="translate(742.339 1931.008) rotate(180)" fill="none" opacity="0"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/views/Home/layouts/Features/assets/multipleStory.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="210" height="193" viewBox="0 0 210 193">
+  <g id="Group_266" data-name="Group 266" transform="translate(-1471 -1818)">
+    <line id="Line_26" data-name="Line 26" x1="83" transform="translate(1580.5 1914.5)" fill="none" stroke="#0a5257" stroke-width="1"/>
+    <line id="Line_27" data-name="Line 27" y2="79" transform="translate(1576.5 1835.5)" fill="none" stroke="#0a5257" stroke-width="1"/>
+    <line id="Line_28" data-name="Line 28" x2="88" transform="translate(1488.5 1914.5)" fill="none" stroke="#0a5257" stroke-width="1"/>
+    <line id="Line_29" data-name="Line 29" y1="79" transform="translate(1576.5 1914.5)" fill="none" stroke="#0a5257" stroke-width="1"/>
+    <rect id="Rectangle_796" data-name="Rectangle 796" width="80" height="77" rx="5" transform="translate(1536 1876)" fill="#f3f3f3"/>
+    <rect id="Rectangle_816" data-name="Rectangle 816" width="35" height="35" rx="5" transform="translate(1646 1897)" fill="#49dfea"/>
+    <rect id="Rectangle_817" data-name="Rectangle 817" width="35" height="35" rx="5" transform="translate(1559 1818)" fill="#49dfea"/>
+    <rect id="Rectangle_818" data-name="Rectangle 818" width="35" height="35" rx="5" transform="translate(1471 1897)" fill="#49dfea"/>
+    <rect id="Rectangle_819" data-name="Rectangle 819" width="35" height="35" rx="5" transform="translate(1559 1976)" fill="#49dfea"/>
+  </g>
+</svg>

src/views/Home/layouts/Features/assets/specialApplication.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="336" height="161" viewBox="0 0 336 161">
+  <g id="Group_267" data-name="Group 267" transform="translate(-967 -1834)">
+    <rect id="Rectangle_820" data-name="Rectangle 820" width="90" height="161" rx="5" transform="translate(1097 1834)" fill="#acacac"/>
+    <rect id="Rectangle_821" data-name="Rectangle 821" width="49" height="87" rx="5" transform="translate(1208 1866)" fill="#454b4f" opacity="0.17"/>
+    <rect id="Rectangle_823" data-name="Rectangle 823" width="32" height="56" rx="5" transform="translate(1271 1837)" fill="#454b4f" opacity="0.03"/>
+    <rect id="Rectangle_824" data-name="Rectangle 824" width="32" height="56" rx="5" transform="translate(967 1915)" fill="#454b4f" opacity="0.07"/>
+    <rect id="Rectangle_822" data-name="Rectangle 822" width="49" height="87" rx="5" transform="translate(1026 1847)" fill="#454b4f" opacity="0.17"/>
+    <g id="medal-star" transform="translate(1111 1882)">
+      <path id="Vector" d="M36.167,18.083A17.962,17.962,0,0,1,20.8,35.934a15.94,15.94,0,0,1-5.425,0,18.07,18.07,0,1,1,20.8-17.851Z" transform="translate(12.917 5.167)" fill="none" stroke="#cfcfcf" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M49.782,14.389,45.52,15.4a2.535,2.535,0,0,0-1.912,1.912l-.9,3.8a2.584,2.584,0,0,1-4.495,1.059L25.887,8.008,13.564,22.191a2.584,2.584,0,0,1-4.495-1.059l-.9-3.8a2.573,2.573,0,0,0-1.912-1.912L1.991,14.415a2.591,2.591,0,0,1-1.24-4.34L10.826,0A18.046,18.046,0,0,0,23.174,7.8a15.581,15.581,0,0,0,2.712.232A15.581,15.581,0,0,0,28.6,7.8,18.046,18.046,0,0,0,40.947,0L51.022,10.075A2.572,2.572,0,0,1,49.782,14.389Z" transform="translate(5.114 33.325)" fill="none" stroke="#cfcfcf" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M10.061,1.24l1.524,3.048a1.871,1.871,0,0,0,1.24.9l2.764.465c1.757.284,2.17,1.576.9,2.842l-2.144,2.144a1.83,1.83,0,0,0-.439,1.576l.62,2.661c.491,2.092-.62,2.919-2.48,1.808L9.466,15.164a1.812,1.812,0,0,0-1.705,0L5.178,16.688c-1.86,1.085-2.971.284-2.48-1.808l.62-2.661a1.939,1.939,0,0,0-.439-1.576L.735,8.5c-1.266-1.266-.853-2.532.9-2.842L4.4,5.192a1.883,1.883,0,0,0,1.214-.9L7.141,1.24C7.891-.413,9.234-.413,10.061,1.24Z" transform="translate(22.438 14.208)" fill="none" stroke="#ffee03" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0H62V62H0Z" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/views/Home/layouts/Features/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-
+import { useNavigate } from "react-router-dom";
 //components
 import Button from "../../../../components/Button";
 
@@ -10,7 +10,9 @@ import dataSavingImage from "./assets/DataSaving.svg";
 import interactiveImage from "./assets/interactive.svg";
 import responsiveImage from "./assets/responsive.svg";
 
-export const Features = ({ isDesktop }) => {
+export const Features = ({ isDesktop, itemsProps = [] }) => {
+  const navigation = useNavigate();
+
   const items = React.useMemo(() => {
     return [
       {
@@ -51,9 +53,15 @@ export const Features = ({ isDesktop }) => {
         </p>
       </div>
 
-      <div className="flex justify-between w-full mt-32 mb-24">
+      <div className="flex justify-between flex-wrap w-full mt-32 mb-24">
-        {items.map((item, index) => (
+        {(itemsProps?.length ? itemsProps : items).map((item, index) => (
-          <div className="flex flex-col items-center gap-4 w-1/5" key={index}>
+          <div
+            className="flex flex-col items-center gap-4 w-1/4 mb-24"
+            style={{
+              padding: `0px calc(100vw / 12 * 10 / 50)`,
+            }}
+            key={index}
+          >
             <img src={item.image} alt={item.title} style={{ height: 161 }} />
             <strong className="text-1x text-gray-700">{item.title}</strong>
             <p className="text-center text-1x font-3 text-gray-500">
@@ -62,13 +70,22 @@ export const Features = ({ isDesktop }) => {
           </div>
         ))}
       </div>
+      {!itemsProps.length ? (
         <Button
           title="امکانات بیشتری کشف کنید"
           round="rounded-full"
           borderColor="text-primary-3"
           color="text-primary-3"
           padding="px-10 py-5"
+          action={() => {
+            navigation("/features");
+            window.scrollTo({
+              top: 0,
+              behavior: "smooth",
+            });
+          }}
         />
+      ) : null}
     </div>
   );
 };

src/views/Home/layouts/Form/index.js

@@ -11,7 +11,7 @@ import Textarea from "../../../../components/Textarea";
 export const Form = ({ contact, setContact }) => {
   return (
     <div
-      className="w-10/12 flex flex-col items-center justify-around pb-10"
+      className="w-10/12 flex flex-col items-center justify-around"
     >
       <div className="flex flex-col items-center">
         <strong className="text-primary-3 font-6 text-5x">