reza added some page

temp
Reza_ashrafi 3 years ago
parent 3c2422578f
commit 1ec92db1dd
  1. 2
      src/components/Navbar/index.js
  2. 19
      src/components/OR/index.js
  3. 2
      src/redux/reducers/public.js
  4. 75
      src/router.js
  5. 3
      src/views/Activation/book.svg
  6. 10
      src/views/Activation/camera.svg
  7. 16
      src/views/Activation/components/Alert.js
  8. 14
      src/views/Activation/components/Header.js
  9. 65
      src/views/Activation/index.js
  10. 15
      src/views/Activation/qr-bg.svg
  11. 10
      src/views/Contact/address.svg
  12. 10
      src/views/Contact/call.svg
  13. 48
      src/views/Contact/components/Info.js
  14. 50
      src/views/Contact/contact-bg.svg
  15. 92
      src/views/Contact/index.js
  16. 7
      src/views/Contact/online-support.svg
  17. 27
      src/views/Faq/components/NotFound.js
  18. 46
      src/views/Faq/components/Question.js
  19. 33
      src/views/Faq/faq-bg.svg
  20. 49
      src/views/Faq/index.js
  21. 25
      src/views/Video/components/Season.js
  22. 11
      src/views/Video/index.js
  23. 52
      src/views/VideoDisplay/components/Season.js
  24. 85
      src/views/VideoDisplay/index.js
  25. 2
      tailwind.config.js

@ -43,7 +43,7 @@ function Navbar({ pages, isDark, headerOptions }) {
<div
className={_.join(
[
"z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full lg:bg-opacity-20 lg:bg-transparent lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10 transition-all duration-300 shadow-md",
"z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full lg:bg-opacity-20 lg:bg-transparent lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10 transition-all duration-300",
],
" "
)}

@ -0,0 +1,19 @@
import React, { useState } from "react";
function OR({}) {
return (
<div className="w-full flex flex-row justify-between items-center my-3">
<div
style={{ width: "43%", height: 1, backgroundColor: "#EFEFEF" }}
></div>
<span className="text-sm" style={{ color: "#C2C2C2" }}>
یا
</span>
<div
style={{ width: "43%", height: 1, backgroundColor: "#EFEFEF" }}
></div>
</div>
);
}
export default OR;

@ -1,7 +1,7 @@
import location from "../../utils/location";
const initialState = {
isDark: localStorage.getItem("isDark") || false,
isDark: localStorage.getItem("isDark") || true,
homeData: [],
newProducts: [],
levels: [],

@ -14,10 +14,14 @@ import ShoppingCart from "./views/ShoppingCart";
import DeliveryForm from "./views/DeliveryForm";
import Videos from "./views/Videos";
import Video from "./views/Video";
import VideoDisplay from "./views/VideoDisplay";
import QR from "./views/QR";
import NotFound from "./views/404";
import Orders from "./views/Orders";
import Order from "./views/Order";
import Activation from "./views/Activation";
import Faq from "./views/Faq";
import Contact from "./views/Contact";
// import VideoTube from "./views/Home/VideoTube";
function Router({ isDark, isLogin, headerOptions }) {
@ -28,7 +32,7 @@ function Router({ isDark, isLogin, headerOptions }) {
[
"min-h-screen min-w-screen rtl overflow-x-hidden pb-20 lg:py-0",
isDark ? "" : "bg-white",
headerOptions?.shown ? "pt-20" : "pt-4",
headerOptions?.shown ? "pt-16" : "pt-4",
],
" "
)}
@ -158,6 +162,24 @@ function Router({ isDark, isLogin, headerOptions }) {
/>
}
/>
<Route
path="/videos/:id/display"
exact
element={
<VideoDisplay
headerOptions={{
logo: false,
hamburgerMenu: false,
qr: false,
title: false,
back: true,
shown: true,
menu: true,
bookmark: false,
}}
/>
}
/>
<Route
path="/scan"
exact
@ -204,6 +226,57 @@ function Router({ isDark, isLogin, headerOptions }) {
/>
}
/>
<Route
path="/activation"
exact
element={
<Activation
headerOptions={{
logo: true,
hamburgerMenu: true,
qr: true,
title: false,
shown: true,
menu: false,
back: false,
}}
/>
}
/>
<Route
path="/faq"
exact
element={
<Faq
headerOptions={{
logo: true,
hamburgerMenu: true,
qr: true,
title: false,
shown: true,
menu: false,
back: false,
}}
/>
}
/>
<Route
path="/contact-us"
exact
element={
<Contact
headerOptions={{
logo: true,
hamburgerMenu: true,
qr: true,
title: false,
shown: true,
menu: false,
back: false,
}}
/>
}
/>
<Route
path="*"
element={

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 17 KiB

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="37.94" height="34.488" viewBox="0 0 37.94 34.488">
<g id="vuesax_linear_camera" data-name="vuesax/linear/camera" transform="translate(-352 -322.184)">
<g id="camera" transform="translate(352 322.184)">
<path id="Vector" d="M7.142,28.165H23.709c4.363,0,6.1-2.38,6.308-5.281l.822-11.632c.221-3.042-2.5-5.619-5.928-5.619A2.65,2.65,0,0,1,22.619,4.38L21.48,2.338A5.324,5.324,0,0,0,17.244,0h-3.62A5.33,5.33,0,0,0,9.371,2.338L8.233,4.38A2.65,2.65,0,0,1,5.941,5.633C2.51,5.633-.209,8.21.013,11.252L.835,22.884C1.024,25.785,2.779,28.165,7.142,28.165Z" transform="translate(3.544 3.162)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,0H4.743" transform="translate(16.599 11.352)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M5.138,10.275A5.138,5.138,0,1,0,0,5.138,5.148,5.148,0,0,0,5.138,10.275Z" transform="translate(13.832 15.714)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H37.94V34.488H0Z" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,16 @@
import React from 'react'
//assets
import alertIcon from '../../../assets/icons/alert.svg';
function Alert({text}) {
return (
<div className="flex flex-row items-center bg-blueFD rounded-md border border-solid border-blueC0 py-3 px-2 w-full my-3 dark:bg-opacity-5">
<img src={alertIcon} alt="" />
<p className="text-blueC0 text-xs mr-3 dark:text-white">
{text}
</p>
</div>
)
}
export default Alert;

@ -0,0 +1,14 @@
import React from "react";
function Header({ bg, title }) {
return (
<div className="w-full flex flex-col items-center justify-end bg-blueFD1 transform -translate-y-16 dark:bg-opacity-5" style={{ height : '29%', minHeight : 180}}>
<img src={bg} alt="" className="w-4/5 h-3/4 absolute left-1/5" />
<h1 className="text-lg text-blueC0 absolute left-1/2 transform -translate-x-1/2 bottom-4 font-semibold">
{title}
</h1>
</div>
);
}
export default Header;

@ -0,0 +1,65 @@
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import Header from "./components/Header";
import OR from "../../components/OR";
import Button from "../../components/Button";
import Alert from "./components/Alert";
//assets
import qrBgImage from "./qr-bg.svg";
import bookImage from "./book.svg";
import cameraIcon from "./camera.svg";
function Activation({ headerOptions, setHeaderOptions }) {
useEffect(() => {
setHeaderOptions(headerOptions);
}, []);
return (
<div
className="w-full flex h-full flex-col bg-transparent"
style={{ height: "calc(100vh - 145px)" }}
>
<Header bg={qrBgImage} title="فعالسازی کتاب دیجیتال" />
<div className="flex-1 flex flex-col justify-between px-4">
<div className="flex flex-col items-center transform -translate-y-16">
<img src={bookImage} alt="" className="w-1/4" />
<Alert text="دانش آموز گرامی پس از خرید فیزیکی کتاب، یک کارت فعالسازی در درون کتاب قرار داده شده که شما میتوانید با وارد کردن کد در قسمت زیر و یا اسکن کد QR با دوربین موبایل خود اقدام به فعالسازی امکانات ویژه برای کتاب خود نمائید" />
</div>
<div className="flex flex-col">
<input
type="text"
className="w-full bg-grayF9 rounded-md text-center text-sm placeholder-gray-500 dark:placeholder-gray-400 py-3 placeholder-opacity-40 mb-4 text-blueC0 transition-all dark:bg-opacity-10 dark:text-white"
placeholder="کد فعال سازی"
/>
<Button
// onClick={() =>
// }
title={"تایید کد"}
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
/>
<OR />
<button className="w-full bg-blueCB rounded-md text-center text-sm py-3 mb-4 text-white relative dark:bg-opacity-60">
فعال سازی با کد QR
<img
src={cameraIcon}
alt=""
className="transform -translate-y-1/2 absolute left-2 top-1/2 w-8"
/>
</button>
</div>
</div>
</div>
);
}
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Activation);

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 87 KiB

@ -0,0 +1,10 @@
<svg id="vuesax_linear_shop" data-name="vuesax/linear/shop" xmlns="http://www.w3.org/2000/svg" width="43.297" height="43.298" viewBox="0 0 43.297 43.298">
<g id="shop" transform="translate(0 0)">
<path id="Vector" d="M0,0V8.1c0,8.1,3.247,11.348,11.348,11.348h9.724c8.1,0,11.348-3.247,11.348-11.348V0" transform="translate(5.43 20.242)" fill="none" stroke="#0ead98" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M5.441,18.041a5.349,5.349,0,0,0,5.412-5.99L9.663,0H1.238L.029,12.051A5.349,5.349,0,0,0,5.441,18.041Z" transform="translate(16.208 3.608)" fill="none" stroke="#0ead98" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M7.234,18.041a5.875,5.875,0,0,0,5.953-6.585l-.505-4.961C12.033,1.8,10.229,0,5.5,0H0L1.263,12.647A6.148,6.148,0,0,0,7.234,18.041Z" transform="translate(25.798 3.608)" fill="none" stroke="#0ead98" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M5.986,18.041a6.116,6.116,0,0,0,5.953-5.394l.4-3.987L13.2,0H7.7C2.973,0,1.169,1.8.52,6.495L.033,11.456A5.875,5.875,0,0,0,5.986,18.041Z" transform="translate(4.189 3.608)" fill="none" stroke="#0ead98" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-5" data-name="Vector" d="M4.51,0C1.5,0,0,1.5,0,4.51V9.02H9.02V4.51C9.02,1.5,7.523,0,4.51,0Z" transform="translate(17.139 30.669)" fill="none" stroke="#0ead98" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-6" data-name="Vector" d="M0,0H43.3V43.3H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -0,0 +1,10 @@
<svg id="vuesax_linear_call-calling" data-name="vuesax/linear/call-calling" xmlns="http://www.w3.org/2000/svg" width="43.297" height="43.298" viewBox="0 0 43.297 43.298">
<g id="call-calling">
<g id="call-calling-2" data-name="call-calling" transform="translate(3.608 3.608)">
<path id="Vector" d="M36.027,29.461a4.592,4.592,0,0,1-.451,1.966,7.443,7.443,0,0,1-1.227,1.84A8.133,8.133,0,0,1,31.391,35.4a9.059,9.059,0,0,1-3.518.686,15.034,15.034,0,0,1-5.881-1.317,31.687,31.687,0,0,1-6.206-3.572,51.868,51.868,0,0,1-5.917-5.051,51.261,51.261,0,0,1-5.033-5.9A32.163,32.163,0,0,1,1.3,14.09,15.2,15.2,0,0,1,0,8.191,9.333,9.333,0,0,1,.649,4.709,8.3,8.3,0,0,1,2.724,1.7,5.286,5.286,0,0,1,6.477,0,3.39,3.39,0,0,1,7.938.325a2.941,2.941,0,0,1,1.209,1.01l4.185,5.9A6.174,6.174,0,0,1,14.054,8.5a2.852,2.852,0,0,1,.253,1.1,2.449,2.449,0,0,1-.379,1.281,6.136,6.136,0,0,1-1.01,1.281l-1.371,1.425a.965.965,0,0,0-.289.722,1.638,1.638,0,0,0,.054.415c.054.144.108.253.144.361a14.971,14.971,0,0,0,1.678,2.309c.812.938,1.678,1.894,2.616,2.85.974.956,1.912,1.84,2.868,2.652a13.846,13.846,0,0,0,2.327,1.66c.09.036.2.09.325.144a1.246,1.246,0,0,0,.451.072.993.993,0,0,0,.74-.307l1.371-1.353a5.535,5.535,0,0,1,1.3-1.01,2.4,2.4,0,0,1,1.281-.379,2.879,2.879,0,0,1,1.1.235,6.978,6.978,0,0,1,1.263.7l5.971,4.24a2.737,2.737,0,0,1,.992,1.155A3.7,3.7,0,0,1,36.027,29.461Z" transform="translate(0)" fill="none" stroke="#06a02a" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M6.314,6.314A7.154,7.154,0,0,0,4.2,2.219,6.162,6.162,0,0,0,0,0" transform="translate(23.453 6.314)" fill="none" stroke="#06a02a" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M12.628,12.629A12.619,12.619,0,0,0,0,0" transform="translate(23.453)" fill="none" stroke="#06a02a" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
<path id="Vector-4" data-name="Vector" d="M0,0H43.3V43.3H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -0,0 +1,48 @@
import React from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
function Info({ info, isDark }) {
return (
<div
className="flex flex-row py-4 px-3 rounded-md mt-4"
style={{
backgroundColor: info.bg,
border: `1px solid ${info.borderColor}`,
}}
>
<img src={info.icon} alt="" />
<div className="flex flex-col flex-1 mr-3">
<strong className="text-base" style={{ color: info.title.color }}>
{info.title.text}
</strong>
<p
className="text-xs mt-1"
style={{
color: isDark ? info.title.color : info.description.color,
}}
>
{info.description.text}
</p>
{info.link && (
<Link
className="self-end font-bold mt-2"
to={info.link.link}
style={{
fontSize: "calc(100vw / 38)",
color: isDark ? info.title.color : info?.link?.color,
}}
>
{info?.link?.title}
</Link>
)}
</div>
</div>
);
}
const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark,
});
export default connect(mapStateToProps)(Info);

@ -0,0 +1,50 @@
<svg xmlns="http://www.w3.org/2000/svg" width="318" height="102.298" viewBox="0 0 318 102.298">
<g id="Group_1796" data-name="Group 1796" transform="translate(-38 -76.702)">
<g id="vuesax_linear_map" data-name="vuesax/linear/map" transform="translate(-646 -155)" opacity="0.47">
<g id="map" transform="translate(684 252)">
<path id="Vector" d="M0,6.4V20.429c0,2.739,1.946,3.863,4.31,2.508L7.7,21.005a3.217,3.217,0,0,1,2.724-.072l7.568,3.791a3.27,3.27,0,0,0,2.724-.072l6.242-3.575a3.228,3.228,0,0,0,1.456-2.508V4.544c0-2.739-1.946-3.863-4.31-2.508L20.714,3.967a3.217,3.217,0,0,1-2.724.072L10.422.262A3.27,3.27,0,0,0,7.7.335L1.456,3.909A3.186,3.186,0,0,0,0,6.4Z" transform="translate(3.301 4.812)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-2" data-name="Vector" d="M0,0V18.739" transform="translate(12.339 5.766)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-3" data-name="Vector" d="M0,0V19.287" transform="translate(22.674 9.543)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-4" data-name="Vector" d="M0,0H34.6V34.6H0Z" transform="translate(34.595 34.595) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
<g id="vuesax_linear_routing" data-name="vuesax/linear/routing" transform="translate(-433.549 -175.298)" opacity="0.15">
<g id="routing" transform="translate(748 252)">
<path id="Vector-5" data-name="Vector" d="M.156,4.065c1.253-5.42,9.415-5.42,10.652,0,.736,3.18-1.285,5.874-3.039,7.55a3.347,3.347,0,0,1-4.59,0C1.44,9.939-.581,7.245.156,4.065Z" transform="translate(3.087 3.141)" fill="none" stroke="#196ec0" stroke-width="1"/>
<path id="Vector-6" data-name="Vector" d="M.156,4.065c1.253-5.42,9.462-5.42,10.715,0,.736,3.18-1.285,5.874-3.055,7.55a3.367,3.367,0,0,1-4.605,0C1.44,9.939-.581,7.245.156,4.065Z" transform="translate(23.451 21.939)" fill="none" stroke="#196ec0" stroke-width="1"/>
<path id="Vector-7" data-name="Vector" d="M7.327,0h4.2a3.138,3.138,0,0,1,2.068,5.5L1.077,16.448a3.127,3.127,0,0,0,2.052,5.483h4.2" transform="translate(11.471 7.832)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-8" data-name="Vector" d="M.636.5H.654" transform="translate(7.958 8.116)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-9" data-name="Vector" d="M.636.5H.654" transform="translate(28.322 26.913)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-10" data-name="Vector" d="M0,0H37.6V37.6H0Z" transform="translate(37.595 37.595) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
<g id="vuesax_linear_call-calling" data-name="vuesax/linear/call-calling" transform="translate(-0.096 -97)">
<g id="call-calling" transform="translate(172 188)">
<g id="call-calling-2" data-name="call-calling" transform="translate(5.183 5.183)">
<path id="Vector-11" data-name="Vector" d="M51.748,42.316a6.6,6.6,0,0,1-.648,2.825,10.692,10.692,0,0,1-1.762,2.643,11.682,11.682,0,0,1-4.25,3.058,13.013,13.013,0,0,1-5.053.985,21.6,21.6,0,0,1-8.448-1.892A45.514,45.514,0,0,1,22.674,44.8a74.5,74.5,0,0,1-8.5-7.256,73.629,73.629,0,0,1-7.23-8.474,46.2,46.2,0,0,1-5.079-8.836A21.826,21.826,0,0,1,0,11.765a13.405,13.405,0,0,1,.933-5,11.927,11.927,0,0,1,2.98-4.327A7.592,7.592,0,0,1,9.3,0a4.87,4.87,0,0,1,2.1.466,4.224,4.224,0,0,1,1.736,1.451l6.012,8.474a8.868,8.868,0,0,1,1.037,1.814,4.1,4.1,0,0,1,.363,1.581A3.518,3.518,0,0,1,20,15.626a8.814,8.814,0,0,1-1.451,1.84l-1.969,2.047a1.387,1.387,0,0,0-.415,1.037,2.353,2.353,0,0,0,.078.6c.078.207.155.363.207.518a21.5,21.5,0,0,0,2.41,3.317c1.166,1.347,2.41,2.721,3.757,4.094,1.4,1.373,2.747,2.643,4.12,3.809a19.888,19.888,0,0,0,3.343,2.384c.13.052.285.13.466.207a1.789,1.789,0,0,0,.648.1,1.426,1.426,0,0,0,1.062-.441l1.969-1.943A7.951,7.951,0,0,1,36.1,31.744a3.451,3.451,0,0,1,1.84-.544,4.135,4.135,0,0,1,1.581.337,10.022,10.022,0,0,1,1.814,1.011l8.577,6.09a3.931,3.931,0,0,1,1.425,1.658A5.316,5.316,0,0,1,51.748,42.316Z" fill="#407bff"/>
<path id="Vector-12" data-name="Vector" d="M9.07,9.07c0-1.555-1.218-3.939-3.032-5.882C4.379,1.4,2.177,0,0,0" transform="translate(33.687 9.07)" fill="none" stroke="#98b8fe" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
<path id="Vector-13" data-name="Vector" d="M18.139,18.139A18.126,18.126,0,0,0,0,0" transform="translate(33.687)" fill="none" stroke="#98b8fe" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
</g>
<path id="Vector-14" data-name="Vector" d="M0,0H62.191V62.191H0Z" fill="none" opacity="0"/>
</g>
</g>
<g id="vuesax_linear_location-tick" data-name="vuesax/linear/location-tick" transform="translate(-152 -56.405)" opacity="0.71">
<g id="location-tick" transform="translate(236 188)">
<path id="Vector-15" data-name="Vector" d="M.4,10.656c3.234-14.218,24.3-14.2,27.518.016,1.888,8.341-3.3,15.4-7.848,19.768a8.527,8.527,0,0,1-11.838,0C3.7,26.073-1.49,19,.4,10.656Z" transform="translate(5.545 3.284)" fill="none" stroke="rgba(25,110,192,0.32)" stroke-width="1"/>
<path id="Vector-16" data-name="Vector" d="M0,4.1,2.463,6.567,9.03,0" transform="translate(15.187 14.777)" fill="none" stroke="rgba(25,110,192,0.32)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path id="Vector-17" data-name="Vector" d="M0,0H39.4V39.4H0Z" transform="translate(39.405 39.405) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
<g id="vuesax_linear_gps" data-name="vuesax/linear/gps" transform="translate(-224 -97)">
<g id="gps">
<path id="Vector-18" data-name="Vector" d="M15,7.5A7.5,7.5,0,1,1,7.5,0,7.5,7.5,0,0,1,15,7.5Z" transform="translate(560.5 256.5)" fill="none" stroke="rgba(25,110,192,0.23)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-19" data-name="Vector" d="M6,3A3,3,0,1,1,3,0,3,3,0,0,1,6,3Z" transform="translate(565 261)" fill="none" stroke="rgba(25,110,192,0.23)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-20" data-name="Vector" d="M0,2V0" transform="translate(568 254)" fill="none" stroke="rgba(25,110,192,0.23)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-21" data-name="Vector" d="M2,0H0" transform="translate(558 264)" fill="none" stroke="rgba(25,110,192,0.23)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-22" data-name="Vector" d="M0,0V2" transform="translate(568 272)" fill="none" stroke="rgba(25,110,192,0.23)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-23" data-name="Vector" d="M0,0H2" transform="translate(576 264)" fill="none" stroke="rgba(25,110,192,0.23)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-24" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(580 276) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.2 KiB

@ -0,0 +1,92 @@
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import Header from "../Activation/components/Header";
import NotFound from "../Faq/components/NotFound";
import Info from "./components/Info";
//assets
import contactBgImage from "./contact-bg.svg";
import onlineSupportIcon from "./online-support.svg";
import addressIcon from "./address.svg";
import callIcon from "./call.svg";
function Contact({ headerOptions, setHeaderOptions, info }) {
useEffect(() => {
setHeaderOptions(headerOptions);
}, []);
return (
<div
className="w-full flex h-full flex-col bg-transparent"
style={{ height: "calc(100vh - 145px)" }}
>
<Header bg={contactBgImage} title="تماس با ما" />
<div className="w-full flex flex-col px-4 transform -translate-y-12">
{Object.keys(info).map((item, index) => (
<Info info={info[item]} key={index} />
))}
<NotFound
title={""}
subTitle={
"شاید سوالی که بدنبال آن هستید را در قسمت پرسشهای متداول بتوانید پیدا کنید"
}
link="/faq"
/>
</div>
</div>
);
}
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Contact);
Contact.defaultProps = {
info: {
onlineSupport: {
icon: onlineSupportIcon,
title: { text: "پشتیبانی آنلاین", color: "#D3B702" },
description: {
text: "همکاران ما در قسمت فروش و پشتیبانی، پاسخگوی شما هستند هر سوالی در مورد کتابهای ما داشتید بپرسید",
color: "#766600",
},
link: {
title: "ارتباط با بخش پشتیبانی",
link: "/support",
color: "#766600",
},
bg: "#D3B70222",
borderColor: "#D3B70255",
},
call: {
icon: callIcon,
title: { text: "شماره تماس", color: "#06A02A" },
description: {
text: "در صورت هرگونه سوال شما میتوانید در ساعات اداری 9 الی 17 با شماره 021۸۸۸۱۴۶۳۷ تماس حاصل فرمایید",
color: "#025816",
},
link: null,
bg: "#69FF5F22",
borderColor: "#69FF5F55",
},
address: {
icon: addressIcon,
title: { text: "نشانی", color: "#0EAD98" },
description: {
text: "نشانی دفتر مرکزی: تهران میدان فردوسی خیابان عباس موسوی پلاک 30",
color: "#066A5C",
},
link: {
title: "لیست نمایندگیهای فروش",
link: "/sell",
color: "#0A7769",
},
bg: "#0A776922",
borderColor: "#0A776955",
},
},
};

@ -0,0 +1,7 @@
<svg id="vuesax_linear_messages-3" data-name="vuesax/linear/messages-3" xmlns="http://www.w3.org/2000/svg" width="43.298" height="43.298" viewBox="0 0 43.298 43.298">
<g id="messages-3">
<path id="Vector" d="M30.669,7.667v9.2a7.623,7.623,0,0,1-2.111,5.557A7.623,7.623,0,0,1,23,24.536V27.8a1.532,1.532,0,0,1-2.381,1.281l-1.75-1.155a6.547,6.547,0,0,0,.235-1.822V18.763a5.8,5.8,0,0,0-6.134-6.134H.722c-.253,0-.487.018-.722.036v-5A7.244,7.244,0,0,1,7.667,0H23A7.244,7.244,0,0,1,30.669,7.667Z" transform="translate(9.02 3.608)" fill="none" stroke="#d3b702" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M24.517,6.134v7.343a6.547,6.547,0,0,1-.235,1.822,5.692,5.692,0,0,1-5.9,4.312H13.476L8.028,23.237a1.211,1.211,0,0,1-1.894-1.01V19.61A6.13,6.13,0,0,1,1.7,17.933,6.141,6.141,0,0,1,0,13.477V6.134A5.742,5.742,0,0,1,5.412.036C5.647.018,5.881,0,6.134,0h12.25A5.8,5.8,0,0,1,24.517,6.134Z" transform="translate(3.608 16.237)" fill="none" stroke="#d3b702" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H43.3V43.3H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,27 @@
import React from "react";
import { Link } from "react-router-dom";
//assets
import arrowLeftWhite from "../../../assets/icons/arrow-left-white.svg";
function NotFound({ title, subTitle, link }) {
return (
<Link
to={link}
className="flex flex-row items-center justify-between py-3.5 px-2 rounded-md bg-blueC0 mt-4"
>
<div className="flex flex-col w-3/4">
{title && <strong className="text-xs text-white">{title}</strong>}
<span
className={`text-xs text-white font-light ${title ? "mt-2" : ""}`}
style={{ fontSize: "calc(100vw / 36)" }}
>
{subTitle}
</span>
</div>
<img src={arrowLeftWhite} alt="" className="w-7" />
</Link>
);
}
export default NotFound;

@ -0,0 +1,46 @@
import React, { useState } from "react";
function Qurestion({}) {
const [active, setActive] = useState(false);
return (
<div
onClick={() => setActive(() => !active)}
className="w-full flex flex-col my-1.5 rounded-md px-4 py-3 border-solid bg-grayF9 dark:bg-opacity-5"
style={{
// backgroundColor: !active ? "#F9F9F9" : "#F6F9FD",
borderColor: !active ? "#DBDBDB22" : "#196EC0",
borderWidth: 1,
transition : 'all 0.5s'
}}
>
<div className="flex flex-row justify-between items-center">
<strong className="flex-1 text-blueC0 text-xs dark:text-white">
نحوه خرید از سایت چگونه است ؟
</strong>
</div>
<div
className={`w-full flex overflow-hidden`}
style={{
transition: "all 0.5s",
}}
>
<p
className={`text-right text-blueC0 text-xs dark:text-white ${
active ? "h-auto opacity-100 pt-2" : "pt-0 h-0 opacity-0"
}`}
style={{
transition: "all 0.5s",
}}
>
هر نفسی که فرو می بریم، مرگی را که مدام به ما دستاندازی میکند پس
میزند... در نهایت این مرگ است که باید پیروز شود، زیرا از هنگام تولد
بخشی از سرنوشت ما شده و فقط مدت کوتاهی پیش از بلعیدن طعمه اش، با آن
بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان و
دلواپسی
</p>
</div>
</div>
);
}
export default Qurestion;

@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" width="364.292" height="161.404" viewBox="0 0 364.292 161.404">
<g id="Group_1796" data-name="Group 1796" transform="translate(-18.747 -66.533)">
<g id="freepik--question-marks--inject-2" transform="translate(124.42 71.635)">
<path id="Path_1881" data-name="Path 1881" d="M200.071,65.911a19.073,19.073,0,0,0-9.657-4.347,24.629,24.629,0,0,0-12.534,1.305A29.412,29.412,0,0,0,165.837,71.3a30.475,30.475,0,0,0-6.861,11.873,21.78,21.78,0,0,0-.314,11.788,18.7,18.7,0,0,0,5.7,9.306,16.166,16.166,0,0,0,7.026,3.862,23.762,23.762,0,0,0,7.186.66q3.478-.224,12.07-1.188a38.155,38.155,0,0,1,4.038-.224,11.468,11.468,0,0,1,2.743.314,10.893,10.893,0,0,1,2.067.756c.639.314,1.721.895,3.255,1.752q4.73,2.892,8.224-1.012a6.392,6.392,0,0,0,1.731-4.608,7.02,7.02,0,0,0-2.706-4.916A18.563,18.563,0,0,0,196.769,94.5a83.245,83.245,0,0,0-8.368.7c-2.951.357-5.13.581-6.536.655a14.946,14.946,0,0,1-4.16-.346,7.99,7.99,0,0,1-3.649-1.891,9.279,9.279,0,0,1-3.2-7.047,11.425,11.425,0,0,1,3.2-7.921q3.851-4.3,7.835-4.384a23.393,23.393,0,0,1,9.487,2.29q5.6,2.626,8.922-1.065a6.642,6.642,0,0,0,1.763-5.071,6.392,6.392,0,0,0-1.992-4.517Zm25.749,57.362A8.246,8.246,0,0,0,228,117.728a7.276,7.276,0,0,0-2.722-5.641,7.484,7.484,0,0,0-5.684-1.966,7.793,7.793,0,0,0-5.454,2.717,7.692,7.692,0,0,0,.613,11.031,7.313,7.313,0,0,0,5.859,2.088,7.99,7.99,0,0,0,5.209-2.685Z" transform="translate(-70.84 -61.25)" fill="#407bff"/>
<g id="Group_435" data-name="Group 435" transform="translate(30.433 33.499)" opacity="0.5">
<path id="Path_1882" data-name="Path 1882" d="M324.394,131.017a10.121,10.121,0,0,0-3.574-4.4,13.242,13.242,0,0,0-6.317-2.386,15.767,15.767,0,0,0-7.793,1.14,16.385,16.385,0,0,0-6.136,4.022,11.686,11.686,0,0,0-2.983,5.566,10.04,10.04,0,0,0,.479,5.859,8.645,8.645,0,0,0,2.44,3.537,12.725,12.725,0,0,0,3.281,2.045q1.715.73,6.067,2.333a18.644,18.644,0,0,1,1.987.863,5.975,5.975,0,0,1,1.236.81,5.556,5.556,0,0,1,.81.858c.229.3.607.842,1.135,1.6a3.135,3.135,0,0,0,4.181,1.491,3.436,3.436,0,0,0,1.939-1.79,3.729,3.729,0,0,0-.117-3,9.95,9.95,0,0,0-5.092-5.646,44.931,44.931,0,0,0-4.171-1.694c-1.5-.533-2.594-.953-3.286-1.252a8.031,8.031,0,0,1-1.907-1.167,4.309,4.309,0,0,1-1.294-1.784,4.954,4.954,0,0,1,.165-4.139,6.1,6.1,0,0,1,3.425-2.994,5.931,5.931,0,0,1,4.794-.218,12.368,12.368,0,0,1,3.984,3.366q2.056,2.6,4.538,1.6a3.574,3.574,0,0,0,2.061-2.008,3.377,3.377,0,0,0,.149-2.6Zm-1.454,33.664a4.427,4.427,0,0,0,2.376-2.131,3.9,3.9,0,0,0,.064-3.329,3.99,3.99,0,0,0-2.242-2.317,4.22,4.22,0,0,0-5.625,5.428,3.915,3.915,0,0,0,2.312,2.408,4.261,4.261,0,0,0,3.116-.059Z" transform="translate(-297.358 -124.14)" fill="#407bff"/>
</g>
<g id="Group_436" data-name="Group 436" transform="translate(0 27.634)" opacity="0.1">
<path id="Path_1883" data-name="Path 1883" d="M379.895,122.733a4.746,4.746,0,0,0,.74-2.535,6.1,6.1,0,0,0-.756-3.047,7.271,7.271,0,0,0-2.5-2.663,7.606,7.606,0,0,0-3.164-1.289,5.455,5.455,0,0,0-2.924.33,4.682,4.682,0,0,0-2.131,1.731,4.032,4.032,0,0,0-.714,1.87,6.057,6.057,0,0,0,.085,1.8q.176.858.714,2.94a9.836,9.836,0,0,1,.192.991,2.717,2.717,0,0,1-.1,1.225c-.059.17-.165.458-.325.863a1.454,1.454,0,0,0,.533,2,1.6,1.6,0,0,0,1.193.266,1.726,1.726,0,0,0,1.124-.836,4.851,4.851,0,0,0,.778-1.768,4.794,4.794,0,0,0,.037-1.673,19.989,19.989,0,0,0-.453-2.045c-.192-.719-.32-1.246-.389-1.6a4.006,4.006,0,0,1-.059-1.065,2.035,2.035,0,0,1,.346-.969,2.312,2.312,0,0,1,1.63-1.028,2.823,2.823,0,0,1,2.067.533,2.781,2.781,0,0,1,1.353,1.779,5.774,5.774,0,0,1-.24,2.418,1.734,1.734,0,0,0,.581,2.168,1.667,1.667,0,0,0,1.31.261A1.6,1.6,0,0,0,379.895,122.733Zm-13.29,8.342a2.083,2.083,0,0,0,1.444.346,1.806,1.806,0,0,0,1.3-.868,1.864,1.864,0,0,0,.3-1.47,1.955,1.955,0,0,0-.858-1.257,1.9,1.9,0,0,0-1.465-.3,1.875,1.875,0,0,0-1.241.836,1.838,1.838,0,0,0-.314,1.523A2.008,2.008,0,0,0,366.6,131.075Z" transform="translate(-365.718 -113.128)" fill="#407bff"/>
</g>
</g>
<g id="Questions-rafiki" transform="translate(171.354 190.671)" opacity="0.36">
<g id="freepik--question-marks--inject-2-2" data-name="freepik--question-marks--inject-2" transform="translate(181.859 -1.83)">
<path id="Path_1881-2" data-name="Path 1881" d="M16.314,1.807A7.4,7.4,0,0,0,12.569.122a9.55,9.55,0,0,0-4.86.506A11.4,11.4,0,0,0,3.039,3.9,11.817,11.817,0,0,0,.379,8.5,8.445,8.445,0,0,0,.257,13.07a7.25,7.25,0,0,0,2.21,3.608,6.269,6.269,0,0,0,2.724,1.5,9.214,9.214,0,0,0,2.786.256q1.349-.087,4.68-.461a14.794,14.794,0,0,1,1.566-.087,4.447,4.447,0,0,1,1.064.122,4.224,4.224,0,0,1,.8.293c.248.122.667.347,1.262.68a2.264,2.264,0,0,0,3.189-.392,2.478,2.478,0,0,0,.671-1.787,2.722,2.722,0,0,0-1.049-1.906,7.2,7.2,0,0,0-5.128-2,32.279,32.279,0,0,0-3.245.273c-1.144.138-1.989.225-2.534.254a5.8,5.8,0,0,1-1.613-.134,3.1,3.1,0,0,1-1.415-.733A3.6,3.6,0,0,1,4.987,9.821,4.43,4.43,0,0,1,6.226,6.75a4.313,4.313,0,0,1,3.038-1.7,9.071,9.071,0,0,1,3.679.888q2.171,1.018,3.46-.413a2.576,2.576,0,0,0,.684-1.966A2.479,2.479,0,0,0,16.314,1.807ZM26.3,24.05a3.2,3.2,0,0,0,.845-2.15,2.821,2.821,0,0,0-1.055-2.187,2.9,2.9,0,0,0-2.2-.762A3.022,3.022,0,0,0,21.769,20a2.982,2.982,0,0,0,.238,4.278,2.836,2.836,0,0,0,2.272.81A3.1,3.1,0,0,0,26.3,24.05Z" transform="translate(24.647 0) rotate(79)" fill="#407bff" opacity="0.12"/>
</g>
</g>
<g id="Questions-rafiki-2" data-name="Questions-rafiki" transform="translate(145.529 203.395) rotate(-41)">
<g id="freepik--question-marks--inject-2-3" data-name="freepik--question-marks--inject-2" transform="translate(181.859 -1.83)">
<path id="Path_1881-3" data-name="Path 1881" d="M16.314,1.807A7.4,7.4,0,0,0,12.569.122a9.55,9.55,0,0,0-4.86.506A11.4,11.4,0,0,0,3.039,3.9,11.817,11.817,0,0,0,.379,8.5,8.445,8.445,0,0,0,.257,13.07a7.25,7.25,0,0,0,2.21,3.608,6.269,6.269,0,0,0,2.724,1.5,9.214,9.214,0,0,0,2.786.256q1.349-.087,4.68-.461a14.794,14.794,0,0,1,1.566-.087,4.447,4.447,0,0,1,1.064.122,4.224,4.224,0,0,1,.8.293c.248.122.667.347,1.262.68a2.264,2.264,0,0,0,3.189-.392,2.478,2.478,0,0,0,.671-1.787,2.722,2.722,0,0,0-1.049-1.906,7.2,7.2,0,0,0-5.128-2,32.279,32.279,0,0,0-3.245.273c-1.144.138-1.989.225-2.534.254a5.8,5.8,0,0,1-1.613-.134,3.1,3.1,0,0,1-1.415-.733A3.6,3.6,0,0,1,4.987,9.821,4.43,4.43,0,0,1,6.226,6.75a4.313,4.313,0,0,1,3.038-1.7,9.071,9.071,0,0,1,3.679.888q2.171,1.018,3.46-.413a2.576,2.576,0,0,0,.684-1.966A2.479,2.479,0,0,0,16.314,1.807ZM26.3,24.05a3.2,3.2,0,0,0,.845-2.15,2.821,2.821,0,0,0-1.055-2.187,2.9,2.9,0,0,0-2.2-.762A3.022,3.022,0,0,0,21.769,20a2.982,2.982,0,0,0,.238,4.278,2.836,2.836,0,0,0,2.272.81A3.1,3.1,0,0,0,26.3,24.05Z" transform="translate(24.647 0) rotate(79)" fill="#407bff" opacity="0.12"/>
</g>
</g>
<g id="Questions-rafiki-3" data-name="Questions-rafiki" transform="translate(-100.604 229.497) rotate(-48)" opacity="0.36">
<g id="freepik--question-marks--inject-2-4" data-name="freepik--question-marks--inject-2" transform="translate(181.859 -1.83)">
<path id="Path_1881-4" data-name="Path 1881" d="M16.314,1.807A7.4,7.4,0,0,0,12.569.122a9.55,9.55,0,0,0-4.86.506A11.4,11.4,0,0,0,3.039,3.9,11.817,11.817,0,0,0,.379,8.5,8.445,8.445,0,0,0,.257,13.07a7.25,7.25,0,0,0,2.21,3.608,6.269,6.269,0,0,0,2.724,1.5,9.214,9.214,0,0,0,2.786.256q1.349-.087,4.68-.461a14.794,14.794,0,0,1,1.566-.087,4.447,4.447,0,0,1,1.064.122,4.224,4.224,0,0,1,.8.293c.248.122.667.347,1.262.68a2.264,2.264,0,0,0,3.189-.392,2.478,2.478,0,0,0,.671-1.787,2.722,2.722,0,0,0-1.049-1.906,7.2,7.2,0,0,0-5.128-2,32.279,32.279,0,0,0-3.245.273c-1.144.138-1.989.225-2.534.254a5.8,5.8,0,0,1-1.613-.134,3.1,3.1,0,0,1-1.415-.733A3.6,3.6,0,0,1,4.987,9.821,4.43,4.43,0,0,1,6.226,6.75a4.313,4.313,0,0,1,3.038-1.7,9.071,9.071,0,0,1,3.679.888q2.171,1.018,3.46-.413a2.576,2.576,0,0,0,.684-1.966A2.479,2.479,0,0,0,16.314,1.807ZM26.3,24.05a3.2,3.2,0,0,0,.845-2.15,2.821,2.821,0,0,0-1.055-2.187,2.9,2.9,0,0,0-2.2-.762A3.022,3.022,0,0,0,21.769,20a2.982,2.982,0,0,0,.238,4.278,2.836,2.836,0,0,0,2.272.81A3.1,3.1,0,0,0,26.3,24.05Z" transform="translate(24.647 0) rotate(79)" fill="#407bff" opacity="0.12"/>
</g>
</g>
<g id="Questions-rafiki-4" data-name="Questions-rafiki" transform="translate(-27.563 403.39) rotate(-75)">
<g id="freepik--question-marks--inject-2-5" data-name="freepik--question-marks--inject-2" transform="translate(181.859 -1.83)">
<path id="Path_1881-5" data-name="Path 1881" d="M3.558.394A1.613,1.613,0,0,0,2.741.027a2.083,2.083,0,0,0-1.06.11A2.487,2.487,0,0,0,.663.85a2.577,2.577,0,0,0-.58,1,1.842,1.842,0,0,0-.027,1,1.581,1.581,0,0,0,.482.787,1.367,1.367,0,0,0,.594.327,2.009,2.009,0,0,0,.608.056Q2.034,4,2.76,3.919A3.226,3.226,0,0,1,3.1,3.9a.97.97,0,0,1,.232.027.921.921,0,0,1,.175.064c.054.027.145.076.275.148a.494.494,0,0,0,.7-.086.54.54,0,0,0,.146-.39A.594.594,0,0,0,4.4,3.248a1.57,1.57,0,0,0-1.118-.436,7.039,7.039,0,0,0-.708.059c-.25.03-.434.049-.553.055A1.264,1.264,0,0,1,1.666,2.9a.676.676,0,0,1-.309-.16.785.785,0,0,1-.27-.6.966.966,0,0,1,.27-.67A.941.941,0,0,1,2.02,1.1a1.978,1.978,0,0,1,.8.194.588.588,0,0,0,.754-.09A.562.562,0,0,0,3.726.776.541.541,0,0,0,3.558.394ZM5.735,5.245a.7.7,0,0,0,.184-.469.615.615,0,0,0-.23-.477.633.633,0,0,0-.481-.166.659.659,0,0,0-.461.23A.65.65,0,0,0,4.8,5.3a.618.618,0,0,0,.5.177.676.676,0,0,0,.441-.227Z" transform="translate(5.375 0) rotate(79)" fill="#407bff" opacity="0.12"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.1 KiB

@ -0,0 +1,49 @@
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import Header from "../Activation/components/Header";
import Question from "./components/Question";
import NotFound from "./components/NotFound";
import Search from "../../components/Search";
//assets
import faqBgImage from "./faq-bg.svg";
import searchLight from "../../assets/icons/search-light.svg";
function Faq({ headerOptions, setHeaderOptions }) {
useEffect(() => {
setHeaderOptions(headerOptions);
}, []);
return (
<div
className="w-full flex h-full flex-col bg-transparent"
style={{ height: "calc(100vh - 145px)" }}
>
<Header bg={faqBgImage} title="پرسشهای متداول" />
<div className="w-full flex flex-col px-4 transform -translate-y-12">
<Search
backgroundColor="bg-grayF9 dark:bg-gray2077"
borderColor="border-grayDB dark:border-gray45"
textColor="text-blueC0 dark:text-white"
icon={searchLight}
/>
{[0, 1, 2, 3, 4].map((item, index) => (
<Question key={index} />
))}
<NotFound
title={"پرسش خود را در لیست بالا پیدا نکردید؟"}
subTitle={"برای ما پیام ارسال کنید"}
link="/contact-us"
/>
</div>
</div>
);
}
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Faq);

@ -1,26 +1,33 @@
import React, { useState } from "react";
import {Link} from 'react-router-dom';
import { Link } from "react-router-dom";
const Season = ({ season }) => {
const Season = ({ season, id }) => {
const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit }) => {
return (
<div className="w-full flex flex-col rounded-md overflow-hidden mb-3 border border-solid border-blueFE">
<div className="w-full flex flex-row justify-between items-center py-1.5 px-2 border-b border-solid border-blueFE">
<strong className="text-blueC0 text-xs">{unit.name}</strong>
<span className="text-xs text-blueC0">{unit.duration}</span>
<div className="w-full flex flex-col rounded-md overflow-hidden mb-3 border border-solid border-blueFE dark:border-opacity-60">
<div className="w-full flex flex-row justify-between items-center py-2 px-2 border-b border-solid border-blueFE dark:border-opacity-60">
<strong className="text-blueC0 text-xs dark:text-white font-normal">
{unit.name}
</strong>
<span className="text-xs text-blueC0 dark:text-white">
{unit.duration}
</span>
</div>
<div className="w-full flex flex-row">
{unit.play && (
<Link
to={"/videos/:id/display"}
className="flex flex-1 flex-row items-center py-1.5 px-2 border-l border-solid border-blueFE justify-center text-xs text-blueC0"
to={`/videos/${id}/display`}
className="flex flex-1 flex-row items-center py-1.5 px-2 border-l border-solid border-blueFE dark:border-opacity-60 justify-center text-xs text-blueC0 dark:text-white"
>
نمایش
</Link>
)}
{unit.download && (
<Link to="/videos/:id/download" className="flex flex-1 flex-row items-center py-1.5 px-2 justify-center text-xs text-blueC0">
<Link
to={`/videos/${id}/download`}
className="flex flex-1 flex-row items-center py-1.5 px-2 justify-center text-xs text-blueC0 dark:text-white"
>
دانلود
</Link>
)}

@ -5,8 +5,9 @@ import poster from "../../assets/images/poster.svg";
import Divider from "../../components/Divider";
import Season from "./components/Season";
function Product({
function Video({
product = {
id:0,
type: "کتاب ها",
name: "ریاضی",
price: "145.000 تومان",
@ -67,17 +68,17 @@ function Product({
</div>
<div className="flex flex-col flex-1 justify-between pr-2">
<div className="flex flex-col">
<strong className="mt-1 text-blue5F text-base">
<strong className="mt-1 text-blue5F text-base dark:text-white">
{product.name}
</strong>
<span className="text-blueC0 text-xs mb-1">{product.grade}</span>
<span className="text-blueC0 text-xs mb-1 dark:text-greenBA">{product.grade}</span>
</div>
<Divider type={"vertical"} />
</div>
</div>
<div className="flex flex-col">
{product.seasons.map((season, index) => (
<Season season={season} key={index} />
<Season season={season} key={index} id={product.id} />
))}
</div>
</div>
@ -90,4 +91,4 @@ const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Product);
export default connect(mapStateToProps, mapDispatchToProps)(Video);

@ -0,0 +1,52 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
const Season = ({ season }) => {
const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit }) => {
return (
<div className="w-full flex flex-col rounded-md overflow-hidden mb-3 border border-solid border-blueFE dark:border-opacity-60">
<div className="w-full flex flex-row justify-between items-center py-2 px-2 border-b border-solid border-blueFE dark:border-opacity-60">
<strong className="text-blueC0 text-xs dark:text-white font-normal">
{unit.name}
</strong>
<span className="text-xs text-blueC0 dark:text-white">
{unit.duration}
</span>
</div>
<div className="w-full flex flex-row">
{unit.play && (
<Link
to={"/videos/:id/display"}
className="flex flex-1 flex-row items-center py-1.5 px-2 border-l border-solid border-blueFE dark:border-opacity-60 justify-center text-xs text-blueC0 dark:text-white"
>
نمایش
</Link>
)}
{unit.download && (
<Link
to="/videos/:id/download"
className="flex flex-1 flex-row items-center py-1.5 px-2 justify-center text-xs text-blueC0 dark:text-white"
>
دانلود
</Link>
)}
</div>
</div>
);
};
return (
<div className="w-full flex flex-col">
<button className="flex flex-row justify-between items-center rounded-md py-2 px-3 mb-3 bg-blueC0">
<strong className="text-xs text-white">{season.name}</strong>
<span className="text-xs text-white">{season.duration}</span>
</button>
{season.units.map((unit, index) => (
<Unit unit={unit} key={index} />
))}
</div>
);
};
export default Season;

@ -0,0 +1,85 @@
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import poster from "../../assets/images/poster.svg";
import Divider from "../../components/Divider";
import Season from "./components/Season";
function VideoDisplay({
product = {
type: "کتاب ها",
name: "ریاضی",
price: "145.000 تومان",
imageUrl: "https://dnvn.ir/api/v1/file/2105",
poster: poster,
grade: "پایه هفتم ابتدایی",
seasons: [
{
name: "فصل اول: مباحث جوشش مواد مذاب در مرکز زمین",
duration: "2:30:13",
units: [
{
name: "مقدمه جالب توجه نویسنده کتاب برای شما",
duration: "14:30",
download: true,
play: true,
},
{
name: "چگونگی ساخت نیروگاههای برقی ",
duration: "14:30",
download: false,
play: true,
},
{
name: "آیا گوگل از ما دزدی میکند ؟",
duration: "14:30",
download: true,
play: true,
},
],
},
],
},
headerOptions,
setHeaderOptions,
}) {
useEffect(() => {
setHeaderOptions(headerOptions);
}, []);
return (
<div className="w-full flex flex-col px-4">
<div className="w-full flex flex-col mb-6">
<div className="w-full flex flex-row flex-1 justify-between items-center overflow-hidden relative">
<video style={{ width: "100%", height: "calc(100vw * 9 / 16 - 16)" }} controls>
<source
src={`https://dnvn.ir/api/v1/file/20540`}
type="video/mp4"
/>
</video>
</div>
{/* <div className="flex flex-col flex-1 justify-between pr-2">
<div className="flex flex-col">
<strong className="mt-1 text-blue5F text-base dark:text-white">
{product.name}
</strong>
<span className="text-blueC0 text-xs mb-1 dark:text-greenBA">{product.grade}</span>
</div>
<Divider type={"vertical"} />
</div> */}
</div>
<div className="flex flex-col">
{product.seasons.map((season, index) => (
<Season season={season} key={index} />
))}
</div>
</div>
);
}
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(VideoDisplay);

@ -7,10 +7,12 @@ module.exports = {
blueC0: "#196EC0",
blueB0: "#517AB0",
blue90: "#235A90",
blueCB: "#98B2CB",
blueEB: "#2B8DEB",
blueFF: "#E8FCFF",
blueFF1: "#E9F0FF",
blueFD: "#F6F9FD",
blueFD1 : "#F4F8FD",
redFF: "#FFE6E6",
redFF1: "#FF2020",
yellow2: "#FDFFDA",

Loading…
Cancel
Save