+ 
+
+ )
+}
+
+export default Alert;
\ No newline at end of file
diff --git a/src/views/Activation/components/Header.js b/src/views/Activation/components/Header.js
new file mode 100644
index 0000000..876ef8b
--- /dev/null
+++ b/src/views/Activation/components/Header.js
@@ -0,0 +1,14 @@
+import React from "react";
+
+function Header({ bg, title }) {
+ return (
+ + {text} +
+
+ 
+
+ );
+}
+
+export default Header;
diff --git a/src/views/Activation/index.js b/src/views/Activation/index.js
new file mode 100644
index 0000000..beb13b5
--- /dev/null
+++ b/src/views/Activation/index.js
@@ -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 (
+ + {title} +
+
+
+ );
+}
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {
+ setHeaderOptions: publicApi.setHeaderOptions,
+};
+export default connect(mapStateToProps, mapDispatchToProps)(Activation);
diff --git a/src/views/Activation/qr-bg.svg b/src/views/Activation/qr-bg.svg
new file mode 100644
index 0000000..d98bb85
--- /dev/null
+++ b/src/views/Activation/qr-bg.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/views/Contact/address.svg b/src/views/Contact/address.svg
new file mode 100644
index 0000000..4024e9d
--- /dev/null
+++ b/src/views/Contact/address.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/views/Contact/call.svg b/src/views/Contact/call.svg
new file mode 100644
index 0000000..1335bad
--- /dev/null
+++ b/src/views/Contact/call.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/views/Contact/components/Info.js b/src/views/Contact/components/Info.js
new file mode 100644
index 0000000..7a4f1f0
--- /dev/null
+++ b/src/views/Contact/components/Info.js
@@ -0,0 +1,48 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+
+function Info({ info, isDark }) {
+ return (
+
+
+
+ 
+
+
+
+
+
+ 
+
+ );
+}
+
+const mapStateToProps = (state) => ({
+ isDark: state.publicApi.isDark,
+});
+
+export default connect(mapStateToProps)(Info);
diff --git a/src/views/Contact/contact-bg.svg b/src/views/Contact/contact-bg.svg
new file mode 100644
index 0000000..760999b
--- /dev/null
+++ b/src/views/Contact/contact-bg.svg
@@ -0,0 +1,50 @@
+
diff --git a/src/views/Contact/index.js b/src/views/Contact/index.js
new file mode 100644
index 0000000..2ea41c6
--- /dev/null
+++ b/src/views/Contact/index.js
@@ -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 (
+
+
+ {info.title.text}
+
+
+ + {info.description.text} +
+ {info.link && ( + + {info?.link?.title} + + )} +
+
+ );
+}
+
+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",
+ },
+ },
+};
diff --git a/src/views/Contact/online-support.svg b/src/views/Contact/online-support.svg
new file mode 100644
index 0000000..086ab24
--- /dev/null
+++ b/src/views/Contact/online-support.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/views/Faq/components/NotFound.js b/src/views/Faq/components/NotFound.js
new file mode 100644
index 0000000..470abc7
--- /dev/null
+++ b/src/views/Faq/components/NotFound.js
@@ -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 (
+
+
+ {Object.keys(info).map((item, index) => (
+
+
+ {title && {title}}
+
+ {subTitle}
+
+
+ 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'
+ }}
+ >
+
+ );
+}
+
+export default Qurestion;
diff --git a/src/views/Faq/faq-bg.svg b/src/views/Faq/faq-bg.svg
new file mode 100644
index 0000000..91bcbdd
--- /dev/null
+++ b/src/views/Faq/faq-bg.svg
@@ -0,0 +1,33 @@
+
diff --git a/src/views/Faq/index.js b/src/views/Faq/index.js
new file mode 100644
index 0000000..7a13716
--- /dev/null
+++ b/src/views/Faq/index.js
@@ -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 (
+
+
+ نحوه خرید از سایت چگونه است ؟
+
+
+
+
+ + هر نفسی که فرو می بریم، مرگی را که مدام به ما دستاندازی میکند پس + میزند... در نهایت این مرگ است که باید پیروز شود، زیرا از هنگام تولد + بخشی از سرنوشت ما شده و فقط مدت کوتاهی پیش از بلعیدن طعمه اش، با آن + بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان و + دلواپسی +
+
+
+ );
+}
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {
+ setHeaderOptions: publicApi.setHeaderOptions,
+};
+export default connect(mapStateToProps, mapDispatchToProps)(Faq);
diff --git a/src/views/Video/components/Season.js b/src/views/Video/components/Season.js
index 1c35c78..7e138f9 100644
--- a/src/views/Video/components/Season.js
+++ b/src/views/Video/components/Season.js
@@ -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 (
-
+
+
-
- {unit.name}
- {unit.duration}
+
@@ -90,4 +91,4 @@ const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
};
-export default connect(mapStateToProps, mapDispatchToProps)(Product);
+export default connect(mapStateToProps, mapDispatchToProps)(Video);
diff --git a/src/views/VideoDisplay/components/Season.js b/src/views/VideoDisplay/components/Season.js
new file mode 100644
index 0000000..5e30d83
--- /dev/null
+++ b/src/views/VideoDisplay/components/Season.js
@@ -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 (
+
+
+
+ {unit.name}
+
+
+ {unit.duration}
+
{unit.play && (
نمایش
)}
{unit.download && (
-
+
دانلود
)}
diff --git a/src/views/Video/index.js b/src/views/Video/index.js
index 1976970..07983b4 100644
--- a/src/views/Video/index.js
+++ b/src/views/Video/index.js
@@ -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({
-
+
{product.name}
- {product.grade}
+ {product.grade}
{product.seasons.map((season, index) => (
-
+
+ );
+ };
+ return (
+
+
+ {unit.name}
+
+
+ {unit.duration}
+
+
+
+ {unit.play && (
+
+ نمایش
+
+ )}
+ {unit.download && (
+
+ دانلود
+
+ )}
+
+
+
+
+ {season.units.map((unit, index) => (
+
+ );
+};
+
+export default Season;
diff --git a/src/views/VideoDisplay/index.js b/src/views/VideoDisplay/index.js
new file mode 100644
index 0000000..fd34c15
--- /dev/null
+++ b/src/views/VideoDisplay/index.js
@@ -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 (
+
+
+ );
+}
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {
+ setHeaderOptions: publicApi.setHeaderOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(VideoDisplay);
diff --git a/tailwind.config.js b/tailwind.config.js
index effd994..0bd4d80 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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",
+
+
+
+
+ {/*
+
*/}
+
+
+ {product.name}
+
+ {product.grade}
+
+
+ {product.seasons.map((season, index) => (
+
+