reza fixed features

master
Reza_ashrafi 2 years ago
parent f05e248c64
commit df75701048
  1. 1
      src/App.scss
  2. 18
      src/components/Navbar/index.js
  3. 14
      src/router.js
  4. 105
      src/views/FeaturesPage/index.js
  5. 14
      src/views/FeaturesPage/layouts/Comments/index.js
  6. 13
      src/views/FeaturesPage/layouts/Graphic/assets/avatar.svg
  7. 3
      src/views/FeaturesPage/layouts/Graphic/assets/path1.svg
  8. 3
      src/views/FeaturesPage/layouts/Graphic/assets/path2.svg
  9. 149
      src/views/FeaturesPage/layouts/Graphic/index.js
  10. 29
      src/views/FeaturesPage/layouts/Graphic/index.scss
  11. 15
      src/views/Home/layouts/Features/assets/efficientlyContent.svg
  12. 53
      src/views/Home/layouts/Features/assets/moneyGain.svg
  13. 13
      src/views/Home/layouts/Features/assets/multipleStory.svg
  14. 15
      src/views/Home/layouts/Features/assets/specialApplication.svg
  15. 27
      src/views/Home/layouts/Features/index.js
  16. 2
      src/views/Home/layouts/Form/index.js

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

@ -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>
<Link to="#" className="px-6 py-2 rounded-full text-1x bg-primary-4 text-white">
</div>
<Link
to="#"
className="px-6 py-2 rounded-full text-1x bg-primary-4 text-white"
>
مشاهده دمو
</Link>
</div>

@ -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
path="/"
exact
element={
<Home
headerOptions={{
shown: true,
}}
/>
}
/>
<Route path="/" exact element={<Home />} />
<Route path="/features" exact element={<FeaturesPage />} />
<Route path="*" exact element={<div>hichi nist :</div>} />
</Routes>
</BrowserRouter>

@ -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);

@ -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)

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 63 KiB

@ -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>

After

Width:  |  Height:  |  Size: 613 B

@ -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>

After

Width:  |  Height:  |  Size: 673 B

@ -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);

@ -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;
}
}

@ -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>

After

Width:  |  Height:  |  Size: 2.4 KiB

@ -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>

After

Width:  |  Height:  |  Size: 8.3 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -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>

After

Width:  |  Height:  |  Size: 2.5 KiB

@ -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">
{items.map((item, index) => (
<div className="flex flex-col items-center gap-4 w-1/5" key={index}>
<div className="flex justify-between flex-wrap w-full mt-32 mb-24">
{(itemsProps?.length ? itemsProps : items).map((item, 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>
);
};

@ -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">

Loading…
Cancel
Save