diff --git a/src/Redux/actions/index.js b/src/Redux/actions/index.js index 398ad97..68717d3 100644 --- a/src/Redux/actions/index.js +++ b/src/Redux/actions/index.js @@ -2,7 +2,7 @@ export { default as chat } from "./chat.js"; // export { default as message } from './message.js'; -// export { default as public } from './public.js'; +export { default as publicApi } from "./public.js"; export { default as user } from "./user.js"; export { default as qr } from "./qr.js"; export { default as book } from "./book.js"; diff --git a/src/Redux/actions/public.js b/src/Redux/actions/public.js index 9f4f773..3df16dd 100644 --- a/src/Redux/actions/public.js +++ b/src/Redux/actions/public.js @@ -1,3 +1,7 @@ -import proxy from '../proxy'; -export const otp = (data) => async (dispatch) => - (await proxy.get('public/otp', data)).dispatch(dispatch); +import proxy from "../proxy"; +const publicApi = { + getHomeData: (data, history) => async (dispatch) => + await proxy.get("public/homePage", data, { history, dispatch }), +}; + +export default publicApi; diff --git a/src/Redux/reducers/index.js b/src/Redux/reducers/index.js index 6d0779c..6599424 100644 --- a/src/Redux/reducers/index.js +++ b/src/Redux/reducers/index.js @@ -2,7 +2,7 @@ export { default as chat } from "./chat.js"; export { default as message } from "./message.js"; -export { default as public } from "./public.js"; +export { default as publicApi } from "./public.js"; export { default as user } from "./user.js"; export { default as qr } from "./qr.js"; export { default as book } from "./book.js"; diff --git a/src/Redux/reducers/public.js b/src/Redux/reducers/public.js index 96c3db4..20afc77 100644 --- a/src/Redux/reducers/public.js +++ b/src/Redux/reducers/public.js @@ -1,11 +1,17 @@ const initialState = { - otp: null, + homeData: [], + loading: false, + error: null, }; -export default function publics(state = initialState, action) { +export default function publicApi(state = initialState, action) { let { type, data } = action; switch (type) { - case 'public/otp': - return { ...state, ...data }; + case "public/homePage": + return { ...state, loading: false, error: null, homeData: data }; + case "loading": + return { ...state, loading: true }; + case "error": + return { ...state, loading: false, error: data.message }; default: return state; } diff --git a/src/assets.rar b/src/assets.rar new file mode 100644 index 0000000..945e217 Binary files /dev/null and b/src/assets.rar differ diff --git a/src/assets/IRANSans.rar b/src/assets/IRANSans.rar new file mode 100644 index 0000000..27e62fc Binary files /dev/null and b/src/assets/IRANSans.rar differ diff --git a/src/views/Contact/index.js b/src/views/Contact/index.js index a384157..7ae9bd0 100644 --- a/src/views/Contact/index.js +++ b/src/views/Contact/index.js @@ -129,7 +129,7 @@ export default class Contact extends Component {
- + {/* */}
diff --git a/src/views/Home/HomeScroll/index.scss b/src/views/Home/HomeScroll/index.scss index 53db9cc..52162bc 100644 --- a/src/views/Home/HomeScroll/index.scss +++ b/src/views/Home/HomeScroll/index.scss @@ -1,35 +1,36 @@ .home-scroll { margin: 20px 0px; width: 100%; - &__header{ - height : 50px; + &__header { + height: 50px; width: 100%; justify-content: space-between; align-items: center; - padding : 0px 6px; - &--right{ + padding: 0px 6px; + &--right { position: relative; - h1{ + h1 { font-family: numeralBold; letter-spacing: -1px; } - span{ + span { position: absolute; width: 40%; height: 3px; border-radius: 10px; background-color: #7dc241; - bottom : 0px; + bottom: 0px; right: 0px; } } - - &--more{ - span{ + + &--more { + cursor: pointer; + span { color: #7dc241; font-family: numeralMedium; } - img{ + img { width: 15px; height: 12px; transform: rotate(90deg); @@ -38,53 +39,51 @@ align-items: center; } } - &__list{ - height : 100%; - width : 100%; + &__list { + height: 100%; + width: 100%; overflow-x: scroll; - transform : translateX(0px); - a{ + transform: translateX(0px); + a { margin: 0px 6px; } } - } - .mobile-home-scroll { margin: 20px 0px; width: 100%; - &__header{ - height : 50px; + &__header { + height: 50px; width: 100%; justify-content: space-between; align-items: center; - padding : 0px 6px; - &--right{ + padding: 0px 6px; + &--right { position: relative; - h1{ + h1 { font-size: calc(100vw / 30); font-family: numeralBold; letter-spacing: -1px; } - span{ + span { position: absolute; width: 40%; height: 3px; border-radius: 10px; background-color: #7dc241; - bottom : 0px; + bottom: 0px; right: 0px; } } - - &--more{ - span{ + + &--more { + span { font-size: calc(100vw / 35); color: #7dc241; font-family: numeralMedium; } - img{ + img { width: 15px; height: 12px; transform: rotate(90deg); @@ -93,14 +92,13 @@ align-items: center; } } - &__list{ - height : 100%; - width : 100%; + &__list { + height: 100%; + width: 100%; overflow-x: scroll; - transform : translateX(0px); - a{ + transform: translateX(0px); + a { margin: 0px 6px; } } - -} \ No newline at end of file +} diff --git a/src/views/Home/HomeSlider/Blog/index.js b/src/views/Home/HomeSlider/Blog/index.js index 880a9af..7977902 100644 --- a/src/views/Home/HomeSlider/Blog/index.js +++ b/src/views/Home/HomeSlider/Blog/index.js @@ -1,74 +1,96 @@ -import React, { Component } from 'react'; -import {Link} from 'react-router-dom'; +import React, { Component } from "react"; +import { Link } from "react-router-dom"; -import './index.scss'; +import "./index.scss"; const maxDesktopSize = 1250; const fontSize = { - desktop : { + desktop: { h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 80, h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95, span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 110, a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 90, - } -} + }, +}; export default class Simple extends Component { render() { const { height, data } = this.props; - return( + return ( <> - { - window.innerWidth > 1000 ? -
1000 ? ( +
-
- {data.title} -

{data.title}

-

{data.subTitle}

-
-
- {/* */} -
- مطالعه کامل در {data.duration} - تاریخ انتشار {data.data} -
+ height: height, + }} + > + + {data.title} +

{data.title}

+

{data.subTitle}

+
+
+ {/* */} +
+ + مطالعه کامل در {data.duration} + + + تاریخ انتشار {data.data} +
- {data.buttonText}
- {data.category.name} + + {data.buttonText} +
-
: null - } - { - window.innerWidth < 1000 ? -
+ {data.category.name} + + +
+ ) : null} + {window.innerWidth < 1000 ? ( +
-
- {data.title} -

{data.title}

-

{data.subTitle}

-
-
- {/* */} -
- مطالعه کامل در {data.duration} - تاریخ انتشار {data.data} -
+ height: height, + }} + > + + {data.title} +

{data.title}

+

{data.subTitle}

+
+
+ {/* */} +
+ مطالعه کامل در {data.duration} + تاریخ انتشار {data.data}
- {data.buttonText}
- {data.category.name} + {data.buttonText}
-
: null - } + + {data.category.name} + + +
+ ) : null} - - ); } -} \ No newline at end of file +} diff --git a/src/views/Home/HomeSlider/Blog/index.scss b/src/views/Home/HomeSlider/Blog/index.scss index 31f82fb..a3d4655 100644 --- a/src/views/Home/HomeSlider/Blog/index.scss +++ b/src/views/Home/HomeSlider/Blog/index.scss @@ -1,4 +1,5 @@ .slider-blog { + cursor: pointer; margin: 10px; padding: 10px 15px; box-shadow: 0px 0px 5px rgb(200, 200, 200); @@ -7,6 +8,10 @@ text-decoration: none; position: relative; max-width: 300px; + a { + text-decoration: none; + color: #4e4e4e; + } img { width: 100%; height: 200px; @@ -22,7 +27,7 @@ margin-top: 5px; color: #a5a5a5; } - &__category{ + &__category { font-family: numeralMedium; position: absolute; top: 20px; @@ -34,8 +39,8 @@ &__footer { width: 100%; - align-items:center; - justify-content:space-between; + align-items: center; + justify-content: space-between; a { font-family: numeralMedium; padding: 6px 12px; @@ -43,11 +48,11 @@ color: #02733c; text-decoration: none; border-radius: 5px; - &:hover{ + &:hover { color: #02733c; } } - span{ + span { font-family: numeralLight; color: #a5a5a5; letter-spacing: -1px; @@ -55,7 +60,6 @@ } } - .mobile-slider-blog { margin: 10px; padding: 5px 8px; @@ -64,6 +68,7 @@ width: 100%; text-decoration: none; position: relative; + cursor: pointer; img { width: 100%; height: 150px; @@ -81,7 +86,7 @@ font-size: calc(100vw / 50); color: #a5a5a5; } - &__category{ + &__category { font-family: numeralMedium; position: absolute; top: 10px; @@ -94,8 +99,8 @@ &__footer { width: 100%; - align-items:center; - justify-content:space-between; + align-items: center; + justify-content: space-between; a { font-family: numeralMedium; padding: 6px 12px; @@ -104,11 +109,11 @@ text-decoration: none; border-radius: 5px; font-size: calc(100vw / 50); - &:hover{ + &:hover { color: #02733c; } } - span{ + span { font-family: numeralLight; font-size: calc(100vw / 50); color: #a5a5a5; diff --git a/src/views/Home/HomeSlider/Header/index.js b/src/views/Home/HomeSlider/Header/index.js index 36eacb2..b99ec43 100644 --- a/src/views/Home/HomeSlider/Header/index.js +++ b/src/views/Home/HomeSlider/Header/index.js @@ -1,14 +1,13 @@ import React, { Component } from "react"; -import {Link} from 'react-router-dom'; +import { Link } from "react-router-dom"; -import './index.scss'; +import "./index.scss"; export default class Header extends Component { render() { const { height, data } = this.props; return ( <> - { - window.innerWidth > 1000 ? + {window.innerWidth > 1000 ? (
-
- {data.title} +
+ {data.title}
{data.subTitle} {data.buttonText}
-
: null - } - { - window.innerWidth < 1000 ? +
+ ) : null} + {window.innerWidth < 1000 ? (
-
- {data.title} +
+ {data.title}
{data.subTitle} {data.buttonText}
-
: null - } +
+ ) : null} - - ); } } diff --git a/src/views/Home/HomeSlider/Simple/index.js b/src/views/Home/HomeSlider/Simple/index.js index e8269b0..8574158 100644 --- a/src/views/Home/HomeSlider/Simple/index.js +++ b/src/views/Home/HomeSlider/Simple/index.js @@ -1,7 +1,7 @@ -import React, { Component } from 'react'; -import {Link} from 'react-router-dom'; +import React, { Component } from "react"; +import { Link } from "react-router-dom"; -import './index.scss'; +import "./index.scss"; const maxDesktopSize = 1250; @@ -9,7 +9,8 @@ const fontSize = { desktop: { h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 65, h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, - notAvailable: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, + notAvailable: + window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, available: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80, }, }; @@ -17,39 +18,54 @@ const fontSize = { export default class Simple extends Component { render() { const { height, data } = this.props; - return( -
- - {data.title} -

{data.title}

-

{data.subTitle}

+ return ( +
+ + {data.title} +

{data.title}

+

{data.subTitle}

+ {data.price !== undefined ? ( + data.price ? (
- { - data.oldPrice ? + {data.oldPrice ? (
-
- {data.oldPrice} تومان +
+ {data.oldPrice} تومان
- -
: null - } -
{data.price} تومان
-
: -
ناموجود
- : null - } - +
+ ) : null} +
+ {data.price} تومان +
+ + ) : ( +
+ ناموجود +
+ ) + ) : null}
- ); } -} \ No newline at end of file +} diff --git a/src/views/Home/HomeStatic/Flex/index.js b/src/views/Home/HomeStatic/Flex/index.js index c62ded3..d8056eb 100644 --- a/src/views/Home/HomeStatic/Flex/index.js +++ b/src/views/Home/HomeStatic/Flex/index.js @@ -1,5 +1,5 @@ -import React from 'react'; -import {Link} from 'react-router-dom'; +import React from "react"; +import { Link } from "react-router-dom"; const maxMobileSize = 550; @@ -8,30 +8,41 @@ const fontSize = { span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 35, }; -export default function Flex(props){ - const {data} = props; +export default function Flex(props) { + const { data } = props; const style = { background: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`, flex: data.flex, margin: 5, - borderRadius: 10, + borderRadius: 10, color: data.color, - - } - return( - + }; + return ( +

{data.title}

- { - data.badge ? - {data.badge} : null - } + {data.badge ? ( + + {data.badge} + + ) : null} {data.subTitle}
- {data.title} + {data.title} ); } - - - diff --git a/src/views/Home/HomeStatic/Simple/index.js b/src/views/Home/HomeStatic/Simple/index.js index 2ae67e6..0e914a1 100644 --- a/src/views/Home/HomeStatic/Simple/index.js +++ b/src/views/Home/HomeStatic/Simple/index.js @@ -1,5 +1,5 @@ -import React from 'react'; -import {Link} from 'react-router-dom'; +import React from "react"; +import { Link } from "react-router-dom"; const maxMobileSize = 550; @@ -8,35 +8,35 @@ const fontSize = { span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, }; -export default function Simple(props){ - - const {data} = props; +export default function Simple(props) { + const { data } = props; const parentStyle = { // backgroundImage: `url('${data.imageUrl}')`, - background: `url('${data.imageUrl}')`, + background: `url('${`https://dnvn.ir/api/v1/file/${data.fileId}`}')`, flex: data.flex, - backgroundRepeat: 'no-repeat', - backgroundSize: '100% 100%', + backgroundRepeat: "no-repeat", + backgroundSize: "100% 100%", margin: 5, - borderRadius: 10, + borderRadius: 10, color: data.color, - textAlign: 'center', + textAlign: "center", }; const childStyle = { - background : `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`, + background: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`, borderRadius: 10, justifyContent: data.justifyContent, - alignItems: data.alignItems + alignItems: data.alignItems, }; - return( - + return ( +

{data.title}

); } - - - diff --git a/src/views/Home/HomeStatic/Vitrin/index.js b/src/views/Home/HomeStatic/Vitrin/index.js index ddc6810..8ae27f9 100644 --- a/src/views/Home/HomeStatic/Vitrin/index.js +++ b/src/views/Home/HomeStatic/Vitrin/index.js @@ -1,5 +1,5 @@ -import React from 'react'; -import {Link} from "react-router-dom"; +import React from "react"; +import { Link } from "react-router-dom"; const maxMobileSize = 550; @@ -8,47 +8,49 @@ const fontSize = { span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 34, }; -export default function Vitrin(props){ - - const {data} = props; +export default function Vitrin(props) { + const { data } = props; const style = { // backgroundImage: `url('${data.imageUrl}')`, - background : `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`, + background: `linear-gradient(${data.backgroundColor.angle},${data.backgroundColor.first} , ${data.backgroundColor.second})`, flex: data.flex, - backgroundRepeat: 'no-repeat', - backgroundSize: '100%', - backgroundOpacity: '60%', + backgroundRepeat: "no-repeat", + backgroundSize: "100%", + backgroundOpacity: "60%", margin: 5, - borderRadius: 10, + borderRadius: 10, color: data.color, }; - return( -
+ return ( +

{data.title}

- { - data.books.map((item,i) => ( - - )) - } - مشاهده بیشتر + {data.books.map((item, i) => ( + + ))} + + مشاهده بیشتر +
); } - const Item = (props) => { - const {data} = props; - return( - - {'عکس + const { data } = props; + return ( + + {"عکس ); -} - - - - - +}; diff --git a/src/views/Home/HomeStatic/index.js b/src/views/Home/HomeStatic/index.js index 34c0fe8..2bc7293 100644 --- a/src/views/Home/HomeStatic/index.js +++ b/src/views/Home/HomeStatic/index.js @@ -17,8 +17,7 @@ export default class HomeStatic extends Component { const { data, height, title, designType } = this.props; return ( <> - { - window.innerWidth > 1000 ? + {window.innerWidth > 1000 ? (
))}
- : null - } - { - window.innerWidth < 1000 ? -
- { - data.map((item,i) => ( - - )) - } -
: null - } + + ) : null} + {window.innerWidth < 1000 ? ( +
+ {data.map((item, i) => ( + + ))} +
+ ) : null} ); } @@ -79,13 +70,19 @@ const Item = (props) => { className="home-static__list--item d-flex" >
-

{props.data.topText}

-

{props.data.bottomText}

+

+ {props.data.topText} +

+

+ {props.data.bottomText} +

- عکس + عکس ) : null} ); }; - diff --git a/src/views/Home/Membership/index.scss b/src/views/Home/Membership/index.scss index 8b0dbb8..d1c587a 100644 --- a/src/views/Home/Membership/index.scss +++ b/src/views/Home/Membership/index.scss @@ -57,6 +57,7 @@ background-color: white; text-align: center; font-size: 14px !important; + width: fit-content !important; } &__submit { diff --git a/src/views/Home/SingleBlog/index.js b/src/views/Home/SingleBlog/index.js index 49f030a..a1cef59 100644 --- a/src/views/Home/SingleBlog/index.js +++ b/src/views/Home/SingleBlog/index.js @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import {Link} from 'react-router-dom'; +import { Link } from "react-router-dom"; import "./index.scss"; @@ -17,26 +17,22 @@ export default class SingleBlog extends Component { render() { const { height, data, direction } = this.props; return ( -
+

{data.title}

-

{data.subTitle}

- +

{data.subTitle}

+ {data.buttonText}
- { - data.image ? - {data.title} : null - } - { - data.video ? -
); diff --git a/src/views/Home/index.js b/src/views/Home/index.js index b9f00bd..87af888 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -1,4 +1,6 @@ import React, { Component } from "react"; +import { connect } from "react-redux"; +import { publicApi } from "~/Redux/actions"; import Navbar from "./Navbar"; import HomeHeader from "./HomeHeader/index"; @@ -9,65 +11,96 @@ import HomeSlider from "./HomeSlider/index"; import HomeSearch from "./HomeSearch/index"; import Membership from "./Membership/index"; import SingleBlog from "./SingleBlog/index"; +import Loader from "~/components/Loader/index"; -import pic1 from "~/assets/images/pic1.png"; -import pic from "~/assets/images/pic.png"; -import online from "~/assets/icons/online-education.png"; -import chemistry from "~/assets/icons/chemistry.png"; -import calculator from "~/assets/icons/calculator.png"; -import homework from "~/assets/icons/homework.png"; -import sciense_6 from "~/assets/images/sciense-6.png"; -import chemistry_10 from "~/assets/images/chemistry-10.png"; -import sciense_8 from "~/assets/images/sciense-8.png"; -import sciense_9 from "~/assets/images/sciense-9.png"; -import zist_10 from "~/assets/images/zist-10.png"; -import blog1 from "~/assets/images/blog1.png"; -import blog2 from "~/assets/images/blog2.png"; -import blog3 from "~/assets/images/blog3.png"; -import ar from "~/assets/icons/qr.svg"; -import qr from "~/assets/icons/qr.svg"; -import myBook from "~/assets/images/myBook.png"; -import homeBlog from "~/assets/images/homeBlog.png"; -import bookActivation from "~/assets/images/bookActivating.png"; -import home_chat from "~/assets/icons/home_chat.png"; -import home_ar from "~/assets/icons/home_ar(2).png"; +// import pic1 from "~/assets/images/pic1.png"; +// import pic from "~/assets/images/pic.png"; +// import online from "~/assets/icons/online-education.png"; +// import chemistry from "~/assets/icons/chemistry.png"; +// import calculator from "~/assets/icons/calculator.png"; +// import homework from "~/assets/icons/homework.png"; +// import sciense_6 from "~/assets/images/sciense-6.png"; +// import chemistry_10 from "~/assets/images/chemistry-10.png"; +// import sciense_8 from "~/assets/images/sciense-8.png"; +// import sciense_9 from "~/assets/images/sciense-9.png"; +// import zist_10 from "~/assets/images/zist-10.png"; +// import blog1 from "~/assets/images/blog1.png"; +// import blog2 from "~/assets/images/blog2.png"; +// import blog3 from "~/assets/images/blog3.png"; +// import ar from "~/assets/icons/qr.svg"; +// import qr from "~/assets/icons/qr.svg"; +// import myBook from "~/assets/images/myBook.png"; +// import homeBlog from "~/assets/images/homeBlog.png"; +// import bookActivation from "~/assets/images/bookActivating.png"; +// import home_chat from "~/assets/icons/home_chat.png"; +// import home_ar from "~/assets/icons/home_ar(2).png"; import "./index.scss"; -export default class Home extends Component { - constructor(props) { - super(props); - this.state = {}; +class Home extends Component { + componentDidMount() { + if (window.innerWidth < 1000) { + this.props.getHomeData({ device: 2 }); + } else { + this.props.getHomeData({ device: 1 }); + } } + render() { - const { homeData, mobileData } = this.props; + const { homeData, loading } = this.props; return ( <> {window.innerWidth > 1000 ? ( - <> -
- - {homeData.map((item, i) => ( - - ))} + !loading ? ( + <> +
+ + {homeData.map((item, i) => ( + + ))} +
+