reza merged Features

master
Reza_ashrafi 3 years ago
parent 258ac4bcf8
commit ec4e0312ed
  1. 16
      src/components/Features/box.svg
  2. 12
      src/components/Features/cake.svg
  3. 10
      src/components/Features/color-palette.svg
  4. 6
      src/components/Features/crown-icon.svg
  5. 8
      src/components/Features/hat.svg
  6. 125
      src/components/Features/index.js
  7. 6
      src/components/Features/plane.svg
  8. 1
      src/components/Feedback/index.js
  9. 11
      src/redux/data.js

@ -0,0 +1,16 @@
<svg id="vuesax_linear_box-tick" data-name="vuesax/linear/box-tick" xmlns="http://www.w3.org/2000/svg" width="71.602" height="71.602" viewBox="0 0 71.602 71.602">
<g id="box-tick">
<g id="Group" transform="translate(44.748 41.765)">
<path id="Vector" d="M23.871,11.668a11.516,11.516,0,0,1-1.611,6.176,11.288,11.288,0,0,1-2.3,2.864A11.84,11.84,0,0,1,1.853,18.291,11.611,11.611,0,0,1,0,12.175a11.841,11.841,0,0,1,4.266-9.4,11.946,11.946,0,0,1,19.6,8.89Z" transform="translate(0)" fill="none" stroke="#5b8d1a" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-2" data-name="Vector" d="M0,3.163,3.013,6.027,9.249,0" transform="translate(7.283 8.864)" fill="none" stroke="#5b8d1a" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
</g>
<g id="Group-2" data-name="Group" transform="translate(7.13 5.967)">
<g id="Group-3" data-name="Group" transform="translate(2.327 16.23)">
<path id="Vector-3" data-name="Vector" d="M0,0,26.343,15.245,52.508.089" fill="none" stroke="#5b8d1a" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-4" data-name="Vector" d="M0,27.06V0" transform="translate(26.343 15.215)" fill="none" stroke="#5b8d1a" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
</g>
<path id="Vector-5" data-name="Vector" d="M57.341,21.391V38.277a1.968,1.968,0,0,1-.03.418A11.7,11.7,0,0,0,49.554,35.8,11.948,11.948,0,0,0,37.621,47.735a11.7,11.7,0,0,0,1.73,6.146,8.434,8.434,0,0,0,.955,1.343l-5.46,3.013a14.032,14.032,0,0,1-12.351,0L6.563,49.405A14.078,14.078,0,0,1,0,38.277V21.391A14.078,14.078,0,0,1,6.563,10.263L22.495,1.432a14.032,14.032,0,0,1,12.351,0l15.931,8.831A14.078,14.078,0,0,1,57.341,21.391Z" fill="none" stroke="#5b8d1a" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
</g>
<path id="Vector-6" data-name="Vector" d="M0,0H71.6V71.6H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -0,0 +1,12 @@
<svg id="vuesax_linear_cake" data-name="vuesax/linear/cake" xmlns="http://www.w3.org/2000/svg" width="71.602" height="71.602" viewBox="0 0 71.602 71.602">
<g id="cake">
<path id="Vector" d="M0,0H59.668" transform="translate(5.967 65.635)" fill="none" stroke="#06a38e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-2" data-name="Vector" d="M0,35.8V8.95C0,4,4.445,0,9.935,0H43.08c5.489,0,9.935,4,9.935,8.95V35.8" transform="translate(9.278 29.834)" fill="none" stroke="#06a38e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-3" data-name="Vector" d="M0,14.917V6.474C0,2.894,3.222,0,7.22,0H31.236c3.968,0,7.19,2.894,7.19,6.474v8.443" transform="translate(16.588 14.917)" fill="none" stroke="#06a38e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-4" data-name="Vector" d="M0,0,1.1.03A4.017,4.017,0,0,1,5.072,4.057v.985a4.028,4.028,0,1,0,8.055,0V4.117a4.028,4.028,0,0,1,8.055,0v.925a4.028,4.028,0,1,0,8.055,0V4.117a4.028,4.028,0,0,1,8.055,0v.925a4.028,4.028,0,1,0,8.055,0V4.117A4.03,4.03,0,0,1,49.375.09h1.343" transform="translate(10.532 41.708)" fill="none" stroke="#06a38e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-5" data-name="Vector" d="M0,5.967V0" transform="translate(23.867 8.95)" fill="none" stroke="#06a38e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-6" data-name="Vector" d="M0,5.967V0" transform="translate(47.735 8.95)" fill="none" stroke="#06a38e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-7" data-name="Vector" d="M0,8.95V0" transform="translate(35.801 5.967)" fill="none" stroke="#06a38e" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-8" data-name="Vector" d="M0,0H71.6V71.6H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -0,0 +1,10 @@
<svg id="vuesax_linear_group" data-name="vuesax/linear/group" xmlns="http://www.w3.org/2000/svg" width="71.879" height="71.879" viewBox="0 0 71.879 71.879">
<g id="group" transform="translate(0)">
<path id="Vector" d="M15.02,44.026,3.01,32.016C-1,28-1,24.019,3.01,20.006L23.016,0,45.029,22.013a2.838,2.838,0,0,1,0,4.013L27,44.056C23.046,48.009,19.033,48.009,15.02,44.026Z" transform="translate(5.975 9.883)" fill="none" stroke="#1f0a86" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-2" data-name="Vector" d="M0,0,4.013,4.013" transform="translate(25.008 5.84)" fill="none" stroke="#1f0a86" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-3" data-name="Vector" d="M0,1.977,45.284,0" transform="translate(6.2 33.723)" fill="none" stroke="#1f0a86" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-4" data-name="Vector" d="M0,0H38.934" transform="translate(8.985 65.889)" fill="none" stroke="#1f0a86" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-5" data-name="Vector" d="M5.541,0S0,6.02,0,9.7a5.541,5.541,0,0,0,11.081,0C11.081,6.02,5.541,0,5.541,0Z" transform="translate(50.914 44.924)" fill="none" stroke="#1f0a86" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-6" data-name="Vector" d="M0,0H71.879V71.879H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

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

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1,8 @@
<svg id="vuesax_linear_teacher" data-name="vuesax/linear/teacher" xmlns="http://www.w3.org/2000/svg" width="71.602" height="71.602" viewBox="0 0 71.602 71.602">
<g id="teacher">
<path id="Vector" d="M22.279,1.585,4.318,13.31a9.506,9.506,0,0,0,0,15.931l17.96,11.725a11.666,11.666,0,0,0,11.755,0L51.9,29.241a9.505,9.505,0,0,0,0-15.9L34.033,1.615A11.6,11.6,0,0,0,22.279,1.585Z" transform="translate(7.705 5.963)" fill="none" stroke="#930362" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-2" data-name="Vector" d="M.03,0,0,13.992a10.178,10.178,0,0,0,6.5,9.04l9.517,3.162a11.473,11.473,0,0,0,6.026,0l9.517-3.162a10.178,10.178,0,0,0,6.5-9.04V.149" transform="translate(16.767 39.023)" fill="none" stroke="#930362" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-3" data-name="Vector" d="M0,17.9V0" transform="translate(63.845 26.851)" fill="none" stroke="#930362" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-4" data-name="Vector" d="M0,0H71.6V71.6H0Z" transform="translate(71.602 71.602) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,125 @@
import React from "react";
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 = ({ features }) => {
return (
<section className="bg-white border-2 border-gray-400 rounded m-7">
{/* top */}
<h2 className="text-lg font-bold text-productTitle mr-7 my-5">
امکانات و ویژگی ها
</h2>
<div className="w-full flex flex-wrap justify-around items-center">
{features.map((feature, index) => (
<div className="flex flex-row w-2/5 p-5" key={index}>
{/* 1 */}
<div
className="rounded p-2 ml-5 flex items-center"
style={{
backgroundColor: feature.iconBgColor,
height: "fit-content",
}}
>
<img src={feature.icon} alt="" className="w-10 h-10" />
</div>
{/* 2 */}
<div className="flex flex-col">
<div className="flex items-center">
<strong className={`text-base font-medium`}>{feature.title}</strong>
<span
className={`mr-4 text-xs px-2 py-1 rounded-lg bg-blue-100`}
>
{feature.status}
</span>
</div>
<p className="mt-1 text-justify text-sm leading-6">
{feature.content}
</p>
</div>
</div>
))}
</div>
{/* footer */}
<div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-blue-100 ">
<div>
<h2 className="font-semibold text-base">
هزاران درصد تحفیف
</h2>
<p className="mt-4 text-sm">
با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار
شوید
</p>
</div>
<button
className="px-7 py-3 text-sm sm:text-base mt-5 sm:mt-0 rounded-md text-blue-600 hover:text-white
bg-white
hover:bg-blue-600
border-2
border-blue-600 cursor-pointer"
>
مشاهده امکانات
</button>
</div>
</section>
);
};
export default Features;
Features.defaultProps = {
features: [
{
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:
"قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.",
},
],
};

@ -0,0 +1,6 @@
<svg id="vuesax_linear_airplane" data-name="vuesax/linear/airplane" xmlns="http://www.w3.org/2000/svg" width="71.879" height="71.879" viewBox="0 0 71.879 71.879">
<g id="airplane">
<path id="Vector" d="M18.089,58.379l6.978-5.87a3.063,3.063,0,0,1,3.834,0l6.978,5.87a3.018,3.018,0,0,0,4.193-1.737l1.318-3.983a3.312,3.312,0,0,0-.719-3.085l-6.8-6.828a3.329,3.329,0,0,1-.9-2.126V32.083a1.4,1.4,0,0,1,2.1-1.378l14.705,6.349c2.306.988,4.193-.24,4.193-2.755V30.436a5.984,5.984,0,0,0-3.354-5.091L33.873,18.127a1.66,1.66,0,0,1-.9-1.378V7.764A9.178,9.178,0,0,0,28.392.337a3.172,3.172,0,0,0-2.845,0,9.229,9.229,0,0,0-4.582,7.457v8.985a1.66,1.66,0,0,1-.9,1.378L3.354,25.375A5.9,5.9,0,0,0,0,30.436V34.3c0,2.516,1.887,3.744,4.193,2.755L18.9,30.706a1.392,1.392,0,0,1,2.1,1.378v8.536a3.461,3.461,0,0,1-.869,2.126l-6.8,6.828a3.293,3.293,0,0,0-.719,3.085l1.318,3.983A2.945,2.945,0,0,0,18.089,58.379Z" transform="translate(8.955 6.581)" fill="none" stroke="#008c47" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-2" data-name="Vector" d="M0,0H71.879V71.879H0Z" transform="translate(71.879 71.879) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -39,7 +39,6 @@ const Feedback = ({ feedbacks }) => {
alt=""
className="transition duration-300 transform hover:-translate-y-1 w-14 h-14"
/>
<p
className={`text-sm mt-3 transition-all duration-500 ${
activeFeedback === item ? "opacity-100" : "opacity-0"

@ -27,6 +27,7 @@ import SimpleDatePicker from "../components/SimpleDatePicker";
import RangeDatePicker from '../components/RangeDatePicker';
import Comments from "../components/Comments";
import Feedback from "../components/Feedback";
import Features from '../components/Features';
const components = [
{
@ -521,6 +522,16 @@ const components = [
code: null,
},
},
{
name: "Features",
author: "Andalib",
props: [],
content: {
name: "Features",
component: <Features />,
code: null,
},
},
];
export default components;

Loading…
Cancel
Save