two layouts added to home

master
Reza_ashrafi 2 years ago
parent 853182cf2f
commit 6bef83dd46
  1. 16
      src/components/Button/index.js
  2. 14
      src/views/Home/layouts/Features/assets/Condition.svg
  3. 19
      src/views/Home/layouts/Features/assets/DataSaving.svg
  4. 17
      src/views/Home/layouts/Features/assets/interactive.svg
  5. 10
      src/views/Home/layouts/Features/assets/responsive.svg
  6. 75
      src/views/Home/layouts/Features/index.js

@ -7,20 +7,30 @@ const Button = ({
action, action,
icon, icon,
borderColor, borderColor,
round,
padding,
}) => { }) => {
return ( return (
<button <button
className={`py-4 rounded-md text-base font-4 w-full relative ${ className={`text-base font-4 relative ${
backgroundColor + backgroundColor +
" " + " " +
round +
" " +
color + color +
" " + " " +
(borderColor ? `border border-solid ${borderColor}` : "") padding +
" " +
(borderColor ? `border text-1x border-solid ${borderColor}` : "")
}`} }`}
onClick={() => action()} onClick={() => action()}
> >
{title} {title}
<img src={icon} alt="" className="absolute left-4 top-1/2 transform -translate-y-1/2" /> <img
src={icon}
alt=""
className="absolute left-4 top-1/2 transform -translate-y-1/2"
/>
</button> </button>
); );
}; };

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="328" height="142" viewBox="0 0 328 142">
<g id="Group_257" data-name="Group 257" transform="translate(-973 -1375)">
<line id="Line_4" data-name="Line 4" x2="240" transform="translate(1017.5 1446.5)" fill="none" stroke="#7b7c7d" stroke-linecap="round" stroke-width="1"/>
<g id="Group_256" data-name="Group 256">
<rect id="Rectangle_257" data-name="Rectangle 257" width="88" height="45" rx="5" transform="translate(1093 1375)" fill="#23bc1e"/>
<rect id="Rectangle_258" data-name="Rectangle 258" width="88" height="45" rx="5" transform="translate(1093 1472)" fill="#a0a0a0"/>
<line id="Line_3" data-name="Line 3" y2="52" transform="translate(1137.5 1420.5)" fill="none" stroke="#7b7c7d" stroke-width="1"/>
<line id="Line_5" data-name="Line 5" y1="26" transform="translate(1257.5 1446.5)" fill="none" stroke="#7b7c7d" stroke-linecap="round" stroke-width="1"/>
<line id="Line_6" data-name="Line 6" y1="27" transform="translate(1017.5 1446.5)" fill="none" stroke="#7b7c7d" stroke-width="1"/>
<rect id="Rectangle_260" data-name="Rectangle 260" width="88" height="45" rx="5" transform="translate(973 1472)" fill="#bebebe"/>
<rect id="Rectangle_259" data-name="Rectangle 259" width="88" height="45" rx="5" transform="translate(1213 1472)" fill="#d6d6d6"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="239" height="110" viewBox="0 0 239 110">
<g id="Group_259" data-name="Group 259" transform="translate(-241 -1401)">
<rect id="Rectangle_262" data-name="Rectangle 262" width="48" height="45" rx="5" transform="translate(241 1454)" fill="#dadada"/>
<rect id="Rectangle_263" data-name="Rectangle 263" width="111" height="25" rx="5" transform="translate(299 1401)" fill="#f3f3f3"/>
<rect id="Rectangle_272" data-name="Rectangle 272" width="111" height="25" rx="5" transform="translate(299 1438)" fill="#f3f3f3"/>
<rect id="Rectangle_273" data-name="Rectangle 273" width="111" height="25" rx="5" transform="translate(299 1474)" fill="#f3f3f3"/>
<rect id="Rectangle_265" data-name="Rectangle 265" width="21" height="20" rx="2" transform="translate(243 1401)" fill="#426aee"/>
<rect id="Rectangle_266" data-name="Rectangle 266" width="21" height="20" rx="2" transform="translate(268 1401)" fill="#426aee"/>
<rect id="Rectangle_267" data-name="Rectangle 267" width="21" height="20" rx="2" transform="translate(268 1426)" fill="#426aee"/>
<rect id="Rectangle_268" data-name="Rectangle 268" width="21" height="20" rx="2" transform="translate(243 1426)" fill="#426aee"/>
<g id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" transform="translate(-12.5 1258.5)">
<g id="search-normal" transform="translate(428 188)">
<path id="Vector" d="M51.063,25.531A25.531,25.531,0,1,1,25.531,0,25.531,25.531,0,0,1,51.063,25.531Z" transform="translate(5.375 5.375)" fill="none" stroke="#a0a0a0" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-2" data-name="Vector" d="M5.375,5.375,0,0" transform="translate(53.75 53.75)" fill="none" stroke="#a0a0a0" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-3" data-name="Vector" d="M0,0H64.5V64.5H0Z" fill="none" opacity="0"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="241.533" height="161" viewBox="0 0 241.533 161">
<g id="Group_258" data-name="Group 258" transform="translate(-608 -1375)">
<rect id="Rectangle_269" data-name="Rectangle 269" width="90" height="161" rx="5" transform="translate(683 1375)" fill="#f3f3f3"/>
<circle id="Ellipse_11" data-name="Ellipse 11" cx="12" cy="12" r="12" transform="translate(645 1443)" fill="#bebebe"/>
<circle id="Ellipse_12" data-name="Ellipse 12" cx="18.5" cy="18.5" r="18.5" transform="translate(608 1382)" fill="#bebebe"/>
<path id="Polygon_2" data-name="Polygon 2" d="M17.267,3.01a2,2,0,0,1,3.466,0L36.274,30a2,2,0,0,1-1.733,3H3.459a2,2,0,0,1-1.733-3Z" transform="translate(613 1474)" fill="#ffe924"/>
<path id="Polygon_3" data-name="Polygon 3" d="M17.267,3.01a2,2,0,0,1,3.466,0L36.274,30a2,2,0,0,1-1.733,3H3.459a2,2,0,0,1-1.733-3Z" transform="matrix(0.588, -0.809, 0.809, 0.588, 800.5, 1412.743)" fill="#ffe924"/>
<rect id="Rectangle_270" data-name="Rectangle 270" width="39" height="39" rx="7" transform="translate(793 1443)" fill="#bebebe"/>
<rect id="Rectangle_271" data-name="Rectangle 271" width="15" height="14" rx="7" transform="translate(793 1503)" fill="#bebebe"/>
<line id="Line_7" data-name="Line 7" x2="26" y2="26" transform="translate(817.5 1498.5)" fill="none" stroke="#bebebe" stroke-linecap="round" stroke-width="4"/>
<g id="home-trend-up" transform="translate(679 1401)">
<path id="Vector" d="M36.75,0,19.6,17.15l-6.533-9.8L0,20.417" transform="translate(30.625 46.958)" fill="none" stroke="#9e9e9e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H8.167V8.167" transform="translate(59.208 46.958)" fill="none" stroke="#9e9e9e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H98V98H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="321" height="161" viewBox="0 0 321 161">
<g id="Group_255" data-name="Group 255" transform="translate(-1415 -1375)">
<g id="Group_254" data-name="Group 254">
<g id="Group_253" data-name="Group 253">
<rect id="Rectangle_255" data-name="Rectangle 255" width="281" height="161" rx="5" transform="translate(1415 1375)" fill="#f3f3f3"/>
<rect id="Rectangle_256" data-name="Rectangle 256" width="58" height="105" rx="5" transform="translate(1678 1431)" fill="#4979ea"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 573 B

@ -1,15 +1,82 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
export const Features = ({}) => { //components
import Button from "../../../../components/Button";
//assets
import conditionImage from "./assets/Condition.svg";
import dataSavingImage from "./assets/DataSaving.svg";
import interactiveImage from "./assets/interactive.svg";
import responsiveImage from "./assets/responsive.svg";
export const Features = ({ isDesktop }) => {
const items = React.useMemo(() => {
return [
{
title: "امکان مشاهده در تلفن همراه و دسکتاپ",
description:
"فرق نمیکند کاربران شما با تلفنهای همراه یا کامپیوترهای شخصی خود وارد حسابشان شوند، دسترسی از هر مکان و زمانی امکان پذیر است",
image: responsiveImage,
},
{
title: "امکان ساختن و تعریف چندیت شرط مختلف",
description:
"همیشه چند پایان متفاوت بهتر از یک پایان معمولی است. شما می توانید برای محتوای خود چندین شرط مختلف تعریف کنید",
image: conditionImage,
},
{
title: "امکان تعامل پذیری بالا با کاربران",
description:
"رابط و تجربه کاربری بسیار زیبا و آسان این قابلیت را به کاربران شما میدهد تا در سریعترین زمان ممکن با پلتفرم شما ارتباط برقرار کنند",
image: interactiveImage,
},
{
title: "جمع آوری کلان داده از شرکت کنندگان",
description:
"به وسیله ابزارهای مختلفی که در اختیار شما قرار میگیرد می توانید اطلاعات کاربران خود را مورد بررسی و ارزیابی قرار دهید",
image: dataSavingImage,
},
];
}, [isDesktop]);
return ( return (
<div className="w-full h-screen flex items-center justify-center"> <div className="w-full h-screen flex flex-col justify-around items-center py-5">
Features <div className="flex flex-col">
<strong className="text-primary-3 font-6 text-5x">
بیشتر از یک پلتفرم محتوایی اعجاب انگیز
</strong>
<p className="text-2x font-4 text-gray-400 mt-3">
در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید
</p>
</div>
<div className="flex justify-between w-full">
{items.map((item, index) => (
<div className="flex flex-col items-center gap-4 w-1/5" 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">
{item.description}
</p>
</div>
))}
</div>
<Button
title="امکانات بیشتری کشف کنید"
round="rounded-full"
borderColor="text-primary-3"
color="text-primary-3"
padding="px-10 py-5"
/>
</div> </div>
); );
}; };
const mapStateToProps = (state) => ({}); const mapStateToProps = (state) => ({
isDesktop: state.developer.device === "desktop",
});
const mapDispatchToProps = {}; const mapDispatchToProps = {};

Loading…
Cancel
Save