diff --git a/src/assets/icons/emc2.svg b/src/assets/icons/emc2.svg new file mode 100644 index 0000000..00596af --- /dev/null +++ b/src/assets/icons/emc2.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/interactive.svg b/src/assets/icons/interactive.svg new file mode 100644 index 0000000..da12d4b --- /dev/null +++ b/src/assets/icons/interactive.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/packages.svg b/src/assets/icons/packages.svg new file mode 100644 index 0000000..e1261f5 --- /dev/null +++ b/src/assets/icons/packages.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/phrase.svg b/src/assets/icons/phrase.svg new file mode 100644 index 0000000..44d3a75 --- /dev/null +++ b/src/assets/icons/phrase.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + ، + + diff --git a/src/assets/icons/qr-green.svg b/src/assets/icons/qr-green.svg new file mode 100644 index 0000000..3a6c6fa --- /dev/null +++ b/src/assets/icons/qr-green.svg @@ -0,0 +1,1370 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/qr-white.svg b/src/assets/icons/qr-white.svg index 9b7c507..a18759e 100644 --- a/src/assets/icons/qr-white.svg +++ b/src/assets/icons/qr-white.svg @@ -1,5 +1,11 @@ - - - + + + + + + + + + diff --git a/src/assets/icons/test.svg b/src/assets/icons/test.svg new file mode 100644 index 0000000..8ce5137 --- /dev/null +++ b/src/assets/icons/test.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/video.svg b/src/assets/icons/video.svg new file mode 100644 index 0000000..790f5f1 --- /dev/null +++ b/src/assets/icons/video.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/images/jojo.svg b/src/assets/images/jojo.svg new file mode 100644 index 0000000..4b0075b --- /dev/null +++ b/src/assets/images/jojo.svg @@ -0,0 +1,799 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/JolPlayer/index.js b/src/components/JolPlayer/index.js index f2a704a..e3da709 100644 --- a/src/components/JolPlayer/index.js +++ b/src/components/JolPlayer/index.js @@ -51,7 +51,7 @@ function Video({ fileIds, posterId, autoPlay }) { option={{ videoSrc: `https://dnvn.ir/api/v1/file/${fileIds}`, width: "100%", - height: window.innerWidth > 1024 ? window.innerHeight - 200 : 250, + height: window.innerWidth > 1024 ? window.innerHeight - 200 : window.innerHeight / 3.6, theme: "#4dd35b", language: "en", isShowMultiple: window.innerWidth > 700, diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index 587fd7a..53912b4 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import { connect } from "react-redux"; import _ from "lodash"; @@ -13,8 +13,29 @@ import hamburgerIcon from "../../assets/icons/hamburger.svg"; import hamburgerBlueIcon from "../../assets/icons/hamburger-blue.svg"; function Navbar({ pages, isDark, isLogin }) { + const [top, setTop] = useState(false); + useEffect(() => { + if (window.scrollY === 0) { + setTop(() => true); + } + window.addEventListener("scroll", () => { + if (window.scrollY === 0) { + setTop(() => true); + } else { + setTop(() => false); + } + }); + }, []); return ( -
+
{/* landscape start */}
@@ -64,27 +85,41 @@ function Navbar({ pages, isDark, isLogin }) {
diff --git a/src/components/Progress/index.js b/src/components/Progress/index.js new file mode 100644 index 0000000..6c1a7f5 --- /dev/null +++ b/src/components/Progress/index.js @@ -0,0 +1,20 @@ +import React, { useState, useEffect } from "react"; + +function Progress({ percent }) { + const [delayPercent, setDelayPercent] = useState(0); + useEffect(() => { + setTimeout(() => { + setDelayPercent(() => percent); + }, 1000); + }, [percent]); + return ( +
+
+
+ ); +} + +export default Progress; diff --git a/src/views/Home/Landscape/Page1/Book/index.js b/src/views/Home/Landscape/Page1/Book/index.js index 9fee480..b4b2c58 100644 --- a/src/views/Home/Landscape/Page1/Book/index.js +++ b/src/views/Home/Landscape/Page1/Book/index.js @@ -5,7 +5,7 @@ import { Link } from "react-router-dom"; export default function Book({ book }) { return ( - {book.name} + {book.name} diff --git a/src/views/Home/Landscape/Page1/Lights/index.js b/src/views/Home/Landscape/Page1/Lights/index.js index 2d6d058..4ce382d 100644 --- a/src/views/Home/Landscape/Page1/Lights/index.js +++ b/src/views/Home/Landscape/Page1/Lights/index.js @@ -6,7 +6,7 @@ import _ from "lodash"; export default function Lights({ degrees}) { return (
-
+
{degrees.map((light, index) => ( ))} diff --git a/src/views/Home/Portrait/Private/Blogs/index.js b/src/views/Home/Portrait/Private/Blogs/index.js new file mode 100644 index 0000000..23eec44 --- /dev/null +++ b/src/views/Home/Portrait/Private/Blogs/index.js @@ -0,0 +1,68 @@ +import React, { useEffect } from "react"; +import { Link } from "react-router-dom"; +import { connect } from "react-redux"; +import { blog } from "../../../../../redux/actions"; +import _ from 'lodash'; +import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg"; + +function Blogs({ list, getList }) { + useEffect(() => { + getList(); + }, []); + return ( +
+
+
+ خواندنی‌ها + +
+
    + {list.map((blog, index) => ( + + ))} +
+
+
+ ); +} + +const Blog = ({ blog }) => { + return ( +
  • + +
    +

    {blog.title}

    +
    +
    + + {"حامد دژبانی نسب"} +
    +
    + {_.join(['زمان مناسب', '30' ], " ")} +
    +
    +
    + +
    • + ); +}; + +const mapStateToProps = (state) => ({ + list: state.publicApi.blogList, +}); + +export default connect(mapStateToProps, { getList: blog.list })(Blogs); diff --git a/src/views/Home/Portrait/Private/MyBooks/index.js b/src/views/Home/Portrait/Private/MyBooks/index.js new file mode 100644 index 0000000..8748915 --- /dev/null +++ b/src/views/Home/Portrait/Private/MyBooks/index.js @@ -0,0 +1,51 @@ +import React, { useEffect } from "react"; +import { Link } from "react-router-dom"; +import { connect } from "react-redux"; +import { book } from "../../../../../redux/actions"; +import Progress from '../../../../../components/Progress'; + +function MyBooks({ list, getList, grades }) { + useEffect(() => { + getList(); + }, []); + return ( +
    +
    + کتابهای من +
      + {list.map((book, index) => ( + + ))} +
    +
    +
    + ); +} + +const Book = ({ book, grades }) => { + return ( +
  • + + +

    {book.name}

    +

    {`پایه ${grades[book.gradeId]}`}

    + + +
    • + ); +}; + +const mapStateToProps = (state) => ({ + list: state.book.list, + grades : state.publicApi.grades +}); + +export default connect(mapStateToProps, { getList: book.list })(MyBooks); diff --git a/src/views/Home/Portrait/Private/Shop/index.js b/src/views/Home/Portrait/Private/Shop/index.js new file mode 100644 index 0000000..797ae70 --- /dev/null +++ b/src/views/Home/Portrait/Private/Shop/index.js @@ -0,0 +1,73 @@ +import React, { useEffect } from "react"; +import { Link } from "react-router-dom"; +import { connect } from "react-redux"; +import { book } from "../../../../../redux/actions"; +import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg"; + +function Shop({ list, getList, grades }) { + useEffect(() => { + getList(); + }, []); + return ( +
    +
    +
    + فروشگاه + +
    +
      + {list.map((book, index) => ( + + ))} +
    +
    +
    + ); +} + +const Book = ({ book, index }) => { + return ( +
  • + + {index === 0 ? ( + + ) : ( + + )} + +
    • + ); +}; + +const mapStateToProps = (state) => ({ + list: state.book.list, +}); + +export default connect(mapStateToProps, { getList: book.list })(Shop); diff --git a/src/views/Home/Portrait/Private/Videos/index.js b/src/views/Home/Portrait/Private/Videos/index.js new file mode 100644 index 0000000..6fb30ef --- /dev/null +++ b/src/views/Home/Portrait/Private/Videos/index.js @@ -0,0 +1,62 @@ +import React, { useEffect } from "react"; +import { Link } from "react-router-dom"; +import { connect } from "react-redux"; +import { book } from "../../../../../redux/actions"; +import Progress from "../../../../../components/Progress"; +import arrowBlueIcon from "../../../../../assets/icons/arrow-right-blue.svg"; + +function Videos({ list, getList, grades }) { + useEffect(() => { + getList(); + }, []); + return ( +
    +
    +
    + دوره‌های ویدئویی شما + +
    +
      + {list.map((book, index) => ( + + ))} +
    +
    +
    + ); +} + +const Book = ({ book, grades }) => { + return ( +
  • + + +

    {book.name}

    +

    {`پایه ${grades[book.gradeId]}`}

    + + +
    • + ); +}; + +const mapStateToProps = (state) => ({ + list: state.book.list, + grades : state.publicApi.grades + +}); + +export default connect(mapStateToProps, { getList: book.list })(Videos); diff --git a/src/views/Home/Portrait/Private/index.js b/src/views/Home/Portrait/Private/index.js index 6c69349..c8c2b9d 100644 --- a/src/views/Home/Portrait/Private/index.js +++ b/src/views/Home/Portrait/Private/index.js @@ -1,9 +1,16 @@ -import React from 'react' +import React from 'react'; +import MyBooks from './MyBooks'; +import Shop from './Shop'; +import Videos from './Videos'; +import Blogs from './Blogs'; function Private() { return ( -
    - +
    + + + +
    ) } diff --git a/src/views/Home/Portrait/Public/App/index.js b/src/views/Home/Portrait/Public/App/index.js new file mode 100644 index 0000000..5fa8454 --- /dev/null +++ b/src/views/Home/Portrait/Public/App/index.js @@ -0,0 +1,12 @@ +import React from "react"; +import bazarImage from '../../../../../assets/images/bazar.svg'; +import appStoreImage from '../../../../../assets/images/app-store.svg'; + +function App() { + return
    + + +
    ; +} + +export default App; diff --git a/src/views/Home/Portrait/Public/Features/index.js b/src/views/Home/Portrait/Public/Features/index.js new file mode 100644 index 0000000..f34babe --- /dev/null +++ b/src/views/Home/Portrait/Public/Features/index.js @@ -0,0 +1,68 @@ +import React from "react"; +import videoIcon from "../../../../../assets/icons/video.svg"; +import packageIcon from "../../../../../assets/icons/packages.svg"; +import testIcon from "../../../../../assets/icons/test.svg"; +import interactiveIcon from "../../../../../assets/icons/interactive.svg"; + +function Features({ features }) { + return ( +
    + {features.map((feature, index) => ( + + ))} +
    + ); +} + +const Feature = ({ feature }) => { + return ( +
    +
    + +
    + + {feature.title} + +

    {feature.text}

    +
    + ); +}; + +export default Features; + +Features.defaultProps = { + features: [ + { + icon: interactiveIcon, + backgroundColor: "#FFFDC4", + color: "#C0C700", + title: "کتاب‌های تعاملی", + text: "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نماید", + }, + { + icon: videoIcon, + backgroundColor: "#A1DDFF", + color: "#196EC0", + title: "", + title: "ویدئوهای مربوط به هر درس", + text: "انتخاب رنگ در حوزه طراحی کار بسیار عجیبی است و کاربران همه روزه با آن دسته پنجه نرم می کنند", + }, + { + icon: testIcon, + backgroundColor: "#C4FFF7", + color: "#06A38E", + title: "آزمون ", + text: "این پلتفرم می تواند تاریخ جشن تولد خود شما، دوستان شما و حتی خانواده شما را به شما یادآوری نمایید", + }, + { + icon: packageIcon, + backgroundColor: "#FFC4EB", + color: "#930362", + title: "پکیج ‌های آموزشی ", + text: "همه پایه های تحصیلی باید توسط کاربران انتخاب شود تا به آنها اینکار را یادآوری نماید", + }, + ], +}; diff --git a/src/views/Home/Portrait/Public/GradiantText/index.js b/src/views/Home/Portrait/Public/GradiantText/index.js new file mode 100644 index 0000000..0b6fe70 --- /dev/null +++ b/src/views/Home/Portrait/Public/GradiantText/index.js @@ -0,0 +1,20 @@ +import React from "react"; +import phraseImage from "../../../../../assets/icons/phrase.svg"; + +function GradiantText() { + return ( +
    +

    + یادگیری بدون وقفه +

    +

    + لذت یادگیری هوشمند +

    +
    + ); +} + +export default GradiantText; diff --git a/src/views/Home/Portrait/Public/Header/index.js b/src/views/Home/Portrait/Public/Header/index.js index 76ea2ed..06aef14 100644 --- a/src/views/Home/Portrait/Public/Header/index.js +++ b/src/views/Home/Portrait/Public/Header/index.js @@ -3,33 +3,41 @@ import { Link } from "react-router-dom"; import { Carousel } from "@trendyol-js/react-carousel"; import Book from "../../../Landscape/Page1/Book"; import Lights from "../../../Landscape/Page1/Lights"; +import Video from "../../../../../components/JolPlayer"; import arrow from "../../../../../assets/icons/slider-arrow.svg"; import olum1Image from "../../../../../assets/images/olum-1.svg"; import olum2Image from "../../../../../assets/images/olum-2.svg"; import olum4Image from "../../../../../assets/images/olum-4.svg"; import olum7Image from "../../../../../assets/images/olum-7.svg"; import zist11Image from "../../../../../assets/images/zist-11.svg"; +import sheffImage from "../../../../../assets/images/sheff.svg"; +import flatFlower from "../../../../../assets/icons/flat-flower-white.svg"; +import jojoImage from "../../../../../assets/images/jojo.svg"; function Header({ list }) { const [show, setShow] = useState(2); return (
    - -
    -
    + + +
    +
    + +
    +
    + + ورود به فروشگاه + +
    +
    +
    +
    +

    یادگیری  

    + +
    +

    با طعم لذت

    +
    +
    +

    از اول تا یازدهم  

    +
    +

    کنارتونیم

    + +
    +
    +
    +
    +

    یادگیری جذاب  

    + +
    +

    و تعاملی

    +
    +
    +
    + +
    ); @@ -90,4 +138,4 @@ Header.defaultProps = { imageUrl: olum4Image, }, ], -} +}; diff --git a/src/views/Home/Portrait/Public/Platforms/index.js b/src/views/Home/Portrait/Public/Platforms/index.js new file mode 100644 index 0000000..983a26b --- /dev/null +++ b/src/views/Home/Portrait/Public/Platforms/index.js @@ -0,0 +1,60 @@ +import React from "react"; +import arBlue from "../../../../../assets/icons/ar-blue.svg"; +import qrGreen from "../../../../../assets/icons/qr-green.svg"; + +function Platforms({ platforms }) { + return ( +
    + {platforms.map((platform, index) => ( + + ))} +
    + ); +} + +const Platform = ({ platform }) => { + return ( +
    + +
    + + {platform.title} + +

    + {platform.text} +

    +
    +
    + ); +}; + +export default Platforms; + +Platforms.defaultProps = { + platforms: [ + { + backgroundColor: "#E6F2FF", + textColor: "#00366B", + titleColor: "#1072DC", + borderColor: "#196EC044", + title: "استفاده از تکنولوژی واقعیت افزوده", + text: "با استفاده از این تکنولوژی شما پس از نصب اپلیکیشن ما و گرفتن گوشیتون روی محتوای ویدئویی کتاب فیلم رو داخل گوشیتون ببینید", + icon: arBlue, + }, + { + backgroundColor: "#E9FFE6", + textColor: "#0B5900", + titleColor: "#118A00", + borderColor: "#118A0044", + title: "محتوای قابل دریافت باحال و جذاب", + text: "تقریبا بالا گوشه هر صفحه از کتاب ما یک کد کیو آر براتون گذاشتیم که با اسکن کد شما می‌تونید محتویات ضمیمه شده اون رو ببینید", + icon: qrGreen, + }, + ], +}; diff --git a/src/views/Home/Portrait/Public/Responsive/index.js b/src/views/Home/Portrait/Public/Responsive/index.js new file mode 100644 index 0000000..a6cf49b --- /dev/null +++ b/src/views/Home/Portrait/Public/Responsive/index.js @@ -0,0 +1,44 @@ +import React from "react"; +import emc2Image from "../../../../../assets/icons/emc2.svg"; + +function Responsive() { + return ( +
    +
    +
    +

    + از طریق موبایل یا کامپیوتر میتونی +

    +
    +
    +
    +

    به محتوای دیجیتال  

    + +
    +

    کتابها به راحتی

    +
    +
    +

    دسترسی داشته باشی

    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    + ); +} + +export default Responsive; diff --git a/src/views/Home/Portrait/Public/index.js b/src/views/Home/Portrait/Public/index.js index e150929..2c3425d 100644 --- a/src/views/Home/Portrait/Public/index.js +++ b/src/views/Home/Portrait/Public/index.js @@ -1,10 +1,20 @@ import React from 'react'; import Header from './Header'; +import Features from './Features'; +import Responsive from './Responsive'; +import Platforms from './Platforms'; +import App from './App'; +import GradiantText from './GradiantText'; function Public() { return ( -
    +
    + + + + +
    ) } diff --git a/tailwind.config.js b/tailwind.config.js index 85d8425..8c6dfa8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,11 +7,16 @@ module.exports = { blueC0: "#196EC0", blueB0 : "#517AB0", blue90: "#235A90", + blueEB : '#2B8DEB', blueFF : '#E8FCFF', + blueFF1 : '#E9F0FF', redFF : '#FFE6E6', redFF1 : '#FF2020', yellow2 : '#FDFFDA', - gray36 : '#363636' + yellow3 : '#EFFF00', + gray36 : '#363636', + orange1 : '#FF6600', + green1 : '#00FF80' }), textColor : (theme) => ({ ...theme("colors"), @@ -23,6 +28,7 @@ module.exports = { green71 : '#067182', red5F : '#5F1A05', yellow1 : '#5F5F05', + gray1 : '#333333' }), borderColor : (theme) => ({ ...theme("colors"),